Project Context
My Role: UX & Visual Designer
Timeframe: 6 weeks
Tools Used: Miro, Lucidchart, Balsamiq, Figma, Zeplin, Photoshop, and Illustrator.
Objective
A responsive web app that provides property buyers with information on properties of interest.
THE PROJECT
Real estate investment should be straight-forward
Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional experience but often complicated. While plenty of blogs and agencies provide information, buyers new to the market may often need more professional guidance and waste time viewing properties out of their range. This web app will provide them with the expertise needed to start efficiently.
“The finest moment in your life will be when you buy a property right now.” | Warren Buffet
THE PROCESS
Design Thinking
Design Thinking is a process comprised of human-centered techniques to solve problems in creative and innovative ways. Because so many real estate applications already exist, the challenge in this project was to identify unexplored ways to improve the home-buying experience.
COMPETITIVE ANALYSIS & THE GAP
What is the current market offering for real estate investment options?
To better understand the current home-buying experience, I performed a comprehensive competitive analysis on four direct competitors and one indirect competitor. I selected the above because Investopedia listed them as the best & most popular real estate apps. This allowed me to identify three opportunities to guide my research and initial designs.
Opportunity 1
Set Preferences Right Away & Receive Match Ratings
There was a way to save search filters on every application, but no “match” feature. Users needed to set their ideal preferences, and I identified this as an area to explore in design.
Opportunity 2
Easily Compare Properties
Something that these competitor platforms could use was the ability to compare listings side-by-side within the application. I saw an opportunity to enable users to compare their saved properties to aid in efficient analysis.
Opportunity 3
Efficient Property Selection & Touring
I analyzed each competitor carefully to decide which industry UI patterns I wanted to include. I wanted to allow users to draw their location map radius to their desired specifications, the option to hide listings, and send messages & tour requests.
PERSONA
Who are we designing for?
I created a persona from my research data to ensure I was human-focused. This helped me focus on answering my users’ needs over features. I focused on addressing Charlotte’s key tasks while keeping her goals in mind.
USER STORIES & USER FLOWS
Focusing on three primary user stories
Reviewing my persona allowed me to quickly establish three user stories to ensure she could complete her key tasks. The focus was on efficiency and optimizing the information architecture & hierarchy.
1
As a busy, working professional, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me.
2
As a home-buyer, I want to be able to search and filter properties, so that I can find good matches based on my needs.
3
As a user, I want to see how well a property meets my criteria or compares to other properties, so that I can refine my options.
DESIGN
My users needed a way to begin viewing available properties ASAP
I focused on Charlotte’s need for speed & efficiency. The first screens were dedicated to setting up the ideal search so that Properly would instantly curate results to fit the bill.
From there, I designed the screens for flows 2 and 3, allowing my persona to quickly adjust filters, save new search conditions and properties, and compare listings.
Low-Fidelity Wireframes
Mid-Fidelity Wireframes
Mobile-First Design: I decided to design for mobile first for two primary reasons. One, my persona is looking for a quick way to browse and review properties in her day-to-day. And two, data suggests a higher number of users are relying on their mobile devices for general internet use – with this being exceptionally high within the real estate industry.
RESPONSIVE DESIGN
Establishing breakpoints & designing for variable dimensions
Designing mobile-first had the added benefit of making the adaptation to larger screens more efficient. One of the biggest challenges of this project was information architecture, as, naturally, real estate listings require a tremendous amount of information.
STYLE GUIDE
Defining the visual direction
I explored three visual design directions when establishing the style of Properly. I considered purple, red, and blue color schemes and conducted preference testing to engage with my target audience. I landed on a blue complimentary palette, as I wanted to create a brand identity of trust, organization, and friendliness. I selected Sansation and Avenir as Properly’s typefaces because I wanted a clean, professional look with a slight playfulness.
USABILITY TESTING & DESIGN ITERATIONS
Delivering curated property listings & matching user mental models
I conducted two rounds of usability testing with five participants, one in the mid-fidelity stage and one with the visual design in place. Speaking directly with my participants allowed me to test & refine the designs birthed from my research. There were many minor improvements, but I came away with three key iteration focuses.
1
Content Revisions
Testing revealed that the Request a Tour process needed some work.
1. Basic property information should be displayed across screens to ensure the data is available throughout the booking flow.
2. Selecting a date and time – to scroll sideways to see all available times is inefficient and bad UX. I decided to make the time selection a drop-down menu for easy visibility. However, I kept the dates as they were because property-buying is urgent business, and dates are only available ten days from the request.
2
Information Architecture
Initially, I wanted to have users use a pull tab to reveal more property information. However, testing showed this to not be as intuitive a design pattern as I had assumed.
In my final iteration, testing confirmed that the tabs to select categories were significantly more apparent to my users. The information became digestible, with thought given to the hierarchy & order of options displayed.
3
Improving Visual Clarity
My participants largely agreed that the map display and the “heart” to favorite listings were unclear. With this feedback, I opted to better match my users’ mental models using popular design patterns.
1. Map Revisions: Users were confused by the numbers in the circles on the map, initially mistaking them for price values instead of the number of listings in that area. I changed the map to portray all relevant listings individually.
2. Heart Revisions: Originally, I wanted to use brand colors for this. Neither yellow nor blue was high enough in contrast, and one participant was shocked to see that the heart was not red. This made the solution clear.
CLICKABLE PROTOTYPE
CONCLUSION & LESSONS LEARNED
My Top Three Take-Aways
Time Management
Due to the project’s time constraints, I had to plan and be mindful of how much time was allocated to each task. I learned the importance of padding extra time between deadlines for wiggle room. Having the flexibility to take more time to drill into usability testing and iterations was key to ensuring a solid MVP.
Organization
I organized all of my design elements from the beginning of this project. This was crucial to ensure I could meet quick deadlines and communicate my work to stakeholders in each phase. Additionally, this organization will make for a smooth handoff when I need to pass on my work to other team members.
Identify Preferences
I learned to identify when a participant’s feedback was personal preference. I qualified my research and testing data through multiple usability tests before acting on a design iteration. This enabled me to quickly decide what revisions to allocate time for and which to postpone or discard.