Cozy Homes

My first step was to understand the 5 W's of the project and summarize, in a user persona, the current needs of those searching to buy a house. In addition, I researched how users solve this problem now by analyzing competitors.

User Persona

Based on the information given in the project brief, I crafted a User Persona to identify the goals and needs of COZY HOMES' potential users. 

Rashida is a tech-savvy woman looking to invest in a property. She is not familiar with the ins and out of Real Estate, thus, she needs a tool to find in an easy and quick matter the best properties within her search criteria.

‍

User Flows

The following user flows show the different paths a user can take within COZY HOMES. With the user's goals as a guide, I built two diagrams that helped me set up a layout detailing the pages contained in the website and how they are connected together. The flows below illustrate the journey of a user creating an account and making use of the web app's main features.

Tools: Draw.io

‍

Knowing which features to focus on to solve our user's main needs, I began to imagine the basic details for each of the screens represented in my user flow diagrams. Afterward, I iterated the design based on feedback from UX Designers and interviews with potential users.

Low-fidelity wireframes

Putting in practice the mobile-first approach, I drafted my low-fidelity wireframes for mobile screens to highlight the high-level functionality of the design. I used Balsamiq to develop the first wireframes and Overflow to exemplify in an interactive way the screens needed for a user to make use of the main features offered by COZY HOMES.

Tools: Balsamiq and Overflow

Mid-fidelity Wireframes

The grayscale mid-fidelity wireframes were designed with Sketch in a multicolumn grid system that allowed me to apply the principles of spacing and visual hierarchy. During this stage, I incorporated existing UI design patterns to build an easy and familiar user experience and identify innovative solutions to usability problems.

Tools: Sketch & Invision ‍

‍

Build, Learn, Measure

Once I had a minimum viable product (MVP), I presented the idea to three potential customers and a UX Designer to gather some early experiences with the prototype. Following these sessions, I collected user feedback to understand which features were working well and which ones should improve. 

These feedback was of particular benefit to refine the home page, search results display, and search filtering. In the images below you can see the evolution to these screens with wireframes iterations from low to mid-fidelity. 

Navigation improvements

The initial idea was to use an image as a background (iteration #1), but this could entail accessibility issues due to lack of visibility. Thus, I added a tinted background with a bottom curve that resembled the design in other screens (iteration #2). As a result, the curve attracted the user's attention first instead of the search bar. To establish the correct visual hierarchy, I changed the navigation's bar background a straight element (iteration #3). 

‍

Filter improvements

In the beginning, I wanted to use a bottom navigation bar to filter results, change the properties' view to a map, and easily access bookmarked properties. 

Thanks to user feedback and the input from my UX Designer Mentor, I realized that I was using the wrong component and making the search results filtering confusing and overloaded (iteration #1). I iterated the design by changing from a bottom navigation bar to a fixed tab set where filtering and sorting were two different categories (iteration #2). 

However, this, too, did not seem to be the right design solution because a tab set implied that the content on the page would change and I did not want the user to go through modal windows or leave the search results page. Moreover, the filter backdrop looked cluttered and the use of a curve made it difficult to implement the visual hierarchy principles. 

In the end, the screen had a better user response by switching to a dropdown menu for viewing search options. Furthermore, the removal of the curve created a cleaner and simpler design (iteration #3). 

Search results improvements

My hypothesis when drafting the first wireframes was that the user would find it vital to view the property's exact address before deciding to visit the full profile (iteration #1).  I also thought that having a price range slider on the search page would be an important element to include. 

However, after talking with potential users, I got some insightful feedback on the type of information they wanted to see and how valuable the price range slider was.

Some of the information shared was: 

• More than the exact address, they want to see the neighborhood. It would help them locate the property faster (iteration #3).
• Getting a quick overview of the property's size and the number of rooms was considered crucial to know (iteration #2-#3).
• A price range slide could be a nice feature to have at all times, but on mobile it made the screen look too crowded (iteration #3). 

Mood Board

Searching for a visual direction to shape the web app’s design, I collected inspirational elements to build two different mood boards and decided which one would be more suitable for the potential target audience. 

Since this project targets users buying small-scale properties for their families, I selected the mood board with a forest green and a wood brown color scheme to evoke a cozy, rustic, nature-like vibe.

Style Guide

To design the final mockups, I created and followed a Style Guide covering all of Cozy Homes' visual and UI elements to ensure a consistent visual experience. This document covers UI components, Logo guidelines, Colors Schemes, Typography, Imagery, and Iconography.

I believe that palette #2 evokes a rustic, cozy, and fresh vibe that suits the type of user looking for small-scale housing.

With a polished design, I produced the final mockups and made an interactive prototype with Invision. As seen in the animations below, each user goal in the project's brief found a useful design solution. 

Prototyping tool: Invision