Property Management System
An industry-leading company stays competitive
by implementing features and visual styling to win continuous business.
My Client
I worked with a client that focuses on a SAAS solution for real estate operators.
The product was built and visually designed by developers. There were a lot of issues with consistency, user flow, and usability throughout the site. With a limited budget and many moving parts, the entire site overhaul was cut into parts to redesign.
Problem
I’m the sole UX Designer for the agency I work for.
The challenge I accepted: Create a concept called a “Make Ready Board” for desktop and mobile that allows a user to manipulate and access workflows based on priority and move-in dates.
FYI - The client's current product lacked the features or functionality that the buyers wanted and they were at risk of losing a business contract.
Users & Audience
My time allotment didn’t allow for user testing or client interviews to validate assumptions or hypothesize what could be.
My Tool Kit:
- Screenshots of the system and a concept.
- FEEDBACK! The prospective buyer left notes! They critiqued the current working version to suggest changes.
This gave me a base reference of how the current product was used.
I would have preferred a discussion with the buyers to really listen and dive deeper into these preferences.
The buyer had lots of critique on filters, sorting, column alignment, switching day views, and features that were missing.
The initial screenshots showed either an oversimplified solution or too much data in an unorganized fashion.
How might I organize all the data
- maybe with visible cues with color indicators
- possibly adding filters and sorts to manipulate the data
How do I decrease information overload? I needed to incorporate recognition rather than recall and focus on aesthetic and minimalist design.
Scope and Constraints
Working conditions for this project were overwhelming.
- There was pressure to have a solution designed quickly. My agency was unable to request an increase of budgeted dollars or time.
- The product had design elements that could not be modified. For example, filters were not in close proximity to other elements on the page and I was instructed to design around them.
- And of course, I was concerned about the scope of the project and the inability to talk directly with the end-user.
- Our client was also forewarned that skipping interviews and testing does not guarantee that we are solving the problem at hand. It is likely this solution will need to be revisited to validate the problems and solutions.
Process & Actions Taken
RESEARCH
The desktop and mobile systems I found were more visually pleasing. Very "pretty" and "minimal". I struggled to see how they used their filters to show different task priorities and functionalities requested by the client, validating the custom changes needed.
I audited screenshots for desktop and mobile to learn more about the market and how their designs addressed the issues that I was working with.
IDEATION
I needed to be careful. I was meticulous with my artifacts. I collected all my emails, notes, task flows, meeting recordings - everything. It was the only way for me to curate documentation.
My mantra - Beware of Scope Creep
ITERATIONS
I cranked out iteration after iteration, at least 6. I even tagged my boss - has a background in Information Architecture. Collaborating really helped me to think about the problems without all the noise of styling and system constraints.
I focused on the user flow, navigating to the clickable elements, and reducing the cognitive load to simplyfiy the experience.
The Beginning - Version 1
Idea 1 - Went in this direction
Idea 2 - Too similr to current system and first concept.
Brainstorming how to show data with numbers, dates, colors. Certain dates like Move-In Date or Expected Completion date need to be visible, in addition to a numerical representation of a count of days passed or due.
Below are more sketches of collapsing and expanding rows.
Version 2 - With Client Notes
I presented another solution for the Make ready board and included a table view. Then met with the client for Feeback Loops!
Version 4 - More improvements
I took my client's critique and revised my wireframes. I started to address how to sort and filter columns and what would show in a row when expanded or collapsed.
Collapsed - show status icons
Expanded - show action icons to interact with the designated task. Notes. Assignees. Attachments. Documentation.
CELEBRATE THE GOOD NEWS
My client won the bid!
Their prospective buyers were blown away as I transformed this experience into exactly what they needed.
Dynamic Filter options.
Sidebar at a glance info:
- Days Vacant.
- Days in Progress.
- Move-in Date.
- Expected Completion Date.
Color progress bars units within a date range.
Expanded row views displaying icons needed for tasks.
This simple GIF triggered the approval to start on mobile
MOBILE VERSION, READY, SET, GO!
Mobile had its own challenges with transitioning with an idea that was different than the original below. But this process only took 2 or 3 iterations to satisfy the usability needed for buyer and implemenation.
The original mobile design.
Updated design that mirrored the desktop version.
Outcomes & Takeaways
The desktop and mobile versions are currently in development.
This was my first project with our client. They really appreciated my ideas, communication style, and willingness to experiment under all the constraints presented. Their confidence in me led to more work to update their whole product and future projects.
I felt really accomplished that I was able to help a business grow and profit from my hard work. I focused on feedback loops and collaboration so I can zero in on the details and pulse check if I was on the right track.
I learned that the UX process is just a guideline. You really have to be ready for whatever comes your way. The journey is how we create lasting solutions; not by following things step by step.