The Challenge

How might we help millennial property buyers find comprehensive information on properties they are interested in?

The Solution

This case study discusses the initial research, problem, and UI solution for millennials looking to purchase property – Bluedoor

View Prototype
The Challenge

How might we help millennial property buyers find comprehensive information on properties they are interested in?

The Solution

This case study discusses the initial research, problem, and UI solution for millennials looking to purchase property – Bluedoor

View Prototype
My Role

Market Researcher
‍UI Designer

Skills Implemented

Visual Design
Interaction Design


Adobe XD



Design Process

1 Research

Market Research
Competitive Analysis
User Persona

2 Strategy

Key Product Features
Application Map

3 Design

Digital Wireframes

4 Branding & UI

Logo, Color, Typography
‍High-Fidelity Prototype


Research Plan

Research was the first step to building Bluedoor as we really wanted to understand the characteristics of home buyers and how the home search process has changed since the introduction of online realty websites. What potential problems have home buyers faced and what solutions can be built to benefit them? 
I decided to conduct market research as well as a competitive analysis to uncover what information home buyers are looking for on properties, how their behavior during the home search process has changed over time, and what current solutions are doing to address these problems so I could distinguish opportunities for our application.

Market Research

Knowing that the internet has dramatically changed the home search process, my research objective was to discover who is most commonly looking for homes and what information was critical to them in the home search. Both the characteristics of home buyers and their current process is as follows:

Characteristics of Home Buyers

The Home Search Process

Based on the above, we know that the internet is essential for home buying and users are looking for detailed information on property listing websites.
How might we help millennial property buyers find comprehensive information on properties they are interested in purchasing?

Competitive Analysis

With the core problem now identified, we wanted to research existing websites who might be trying to solve similar problems. We gathered information on 3 direct competitors' strengths and weaknesses and identified what they are doing well and what they could improve on. This process allowed us to see potential gaps in their strategy and opportunities for our own.
  1. Interactive neighborhood map
  2. Mortgage payment estimator
  3. Both agent and FBSO listings
  • Sellers can't list property for sale
  • Smaller following
  • No "agent finder" information


  • Largest database at 135 million
  • Extensive criteria sorting
  • Very large brand following
  • Zestimate isn't always accurate
  • Limited crime information
  • Hides FBSO listings by default


  • Most accurate listings
  • Robust news and external guides
  • Trustworthy realtor community
  • Smaller following
  • Sellers can't list property for sale
  • Can't search FBSO listings

Our Target Audience

Those aged 26-55 as they make up 75% of the home buying population and are 2x as likely to use online resources for finding homes when compared to baby boomers and silent gen.

User Persona

With primary data gathered and needs defined, it was time to turn this information into a user persona. Our persona was referenced for the duration of the project to ensure that we were addressing and meeting the core needs and goals of a primary user.

Tori Mullins

  • To narrow results based on property criteria
  • Visual and written property information
  • Ability to schedule viewings with an agent
  • To save my personal property preferences
  • To save properties & view them later
  • Invest in property for financial security
  • Find information quicky for fast decision making
  • To have a tool help her find the right properties


Key Product Features

With user needs defined, we brainstormed potential solutions in the form of product features. Prior to moving into the application map, we wanted to ensure that these features/screens were included as they are necessary for the success of the application.
Filter Properties
to narrow results based on criteria
Saved Homes
to revisit & view details on properties
Saved Searches
based on personal property preferences
Contact an Agent
to tour properties of interest

Application Map

With our key features established, we wanted to finalize the information architecture by building our application map. The map below shows the hierarchy for the application, in terms of key screens and core features.



Low-Fidelity (Sketches)

The next step was to build an initial visual representation of the interface. We started with low-fidelity wireframes as they are quick and easy to both create and modify. Some of our key screens based on user needs are below.

Mid-Fidelity Wireframes

With initial layouts created, we started to add more details through mid-fidelity wireframes. Everything remained in greyscale so we could focus on the layout, spacing, and visual hierarchy of elements without being distracted by color. We used common design patterns from other websites to ensure a similar user experience.

Branding & Final UI


With our mid-fidelity wireframes complete, we began the branding process. Before creating our branded elements, we came up with our app’s core values of Secure, Intuitive, Efficient, Clean, and Sincere, knowing these would dictate the logo, color, and typography choices for our prototype. In order to come up with these values, we revisited the core problem we were trying to solve as well as our target audience.

Building the Logo

Bluedoor’s logo direction was inspired by a combination of our core values as well as symbols that represented the concept of "home". Taking this symbol into account and incorporating the name of our application matches what we want to represent and follows the design patterns that competitors have established in the space.

Establishing Our Palette

When deciding on a color palette for Bluedoor, we also looked to our brand values and what colors they represented. Our primary color, navy, is a calming color that represents trust and security. Our highlight color, bright blue, represents dependability and how our website will be intuitive to use. The rest of our palette has neutral tones that represent our core value of clean.


Wanting a modern and clean font that is easily legible, we chose Poppins as our primary typeface. Throughout the application, it is used for all headers, subhead, and body copy. With 5 available weights, visual hierarchy can be easily established on all of our screens.

Style Guide

With key branded elements complete, we built a style guide that the team could reference when building the site. This helps safeguard the integrity of our design by giving direction and guidelines for typography, colors, Ul elements, imagery, icons, and grids.

Incorporating Our Brand: The UI

With our logo, color, and typography established, we incorporated all of these elements into the UI to make high-fidelity wireframes.

Final Prototype

I created our final prototype by connecting all screens together and making further adjustments based on accessibility and an internal design review.

Learnings & Next Steps


Since this project had a heavier focus on the UI design, I learned so much about hierarchy and how to be strategic when picking branded elements such as color and typography. I also learned about common UI patterns and how these can be incorporated into our designs. Lastly, I learned how to adjust designs for different breakpoints using different grid systems.

Next Steps

It would be very beneficial to conduct usability testing before moving into development. This would give valuable insights on ways to improve the site to ensure it is useable and useful for our target audience.

Let's Connect