Research
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
- Millennials are the biggest home buyers on the market at 37%
- 33% of people who buy a home in the US are first-time buyers
- Women's homeownership rate sits at 61%
The Home Search Process
- 98% of millennials are internet-relying homebuyers
- Neighborhood quality is the key factor for 58% of home buyers
- Convenience to family and friends is the second most important factor when purchasing a home
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.
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.
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.
Design
Wireframes
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
Branding
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.
Typography
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
Learnings
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.
.png)
%20(1).svg)
