Case Study
Research | UI Design | Branding
Concept Background
HomeQuest is a concept for a real-estate marketplace site that fulfills the needs of young workers in search of housing. Buying or renting a place to live can be a complicated task that involves number crunching, large amounts of data, and concerns from the future homeowner. Our team needed to rethink the entire process in order to accomplish HomeQuest's two main goals to our users: let them know their home, and let them know they're home.
This project was created as a part of Dialexa EDU, an eight-week mentorship program for university students to get more acquainted with designing and prototyping in a team environment. I was part of Team Comet, working as a designer alongside seven other students.
Role
UX/UI designer (including assistance with research, branding, and high fidelity prototyping). Worked in conjunction with teammates and had feedback from Dialexa mentors.
Timeline
Three design sprints over 8 weeks
Objectives
Target our potential audience in need of new housing in urban areas
Analyze and identify ways to make the homebuying process simpler
Deliver high-fidelity mockups of the desktop version of HomeQuest’s site, with a focus on searching and saving properties
Research
The main goals of our research were to identify problems potential users experience when searching for properties, analyze different products in a similar space, and discover ways to streamline the process of searching for homes.
The main methodologies that we used for this involved competitive analysis and user interviews.
For our competitive analysis, we largely focused on similar sites or apps in the real estate space, such as Zillow, Trulia, and Realtor.com. We wanted to identify what features were most prominent and what may be lacking in some areas.
Competitive Analysis
For our user interviews, we primarily spoke with two different real-life personas, Helen and Eric, who were based at Dialexa. This was done through a panel interview with both of them, involving questions relating to their personal experiences searching for homes or apartments on real estate marketplace sites. Below are organized personas summarizing their goals, motivations, and pain points.
User Interviews
Define
In defining where we would go with the direction of HomeQuest, our team took the experiences of our personas and noted their struggles in finding info about local areas they wanted to move to. In brainstorming sessions, we took time to write ideas for potential features and prioritize what was most crucial for our users.
Through our discussions as a team, we eventually decided to focus in on the need for a user’s ideal location. Our target audience wanted to primarily be surrounded by a place they felt could fit their lifestyle, and be able to be surrounded by experiences while still have room to grow into their life with a partner or potential family. Additionally, with the overwhelming abundance of data, allowing a feature to compare and contrast favorite properties was crucial in our user flow.
User Flow
Design
In approaching the design for HomeQuest’s site, we divided up individual tasks and pages, but still made sure to have a cohesive style guide and design aesthetic in our flow. We regularly checked in with each other during our collaborations and discussed how we could combine our ideas to fit into our overall vision. Below, is an assortment of various sketches and mid-fidelity wireframes that we collaborated on for our part on HomeQuest.
Initial Sketches and Wireframes
Sketches for Profile View
Sketches for Search Page
Some wireframes to the left showcase the initial homepage layout, a search page with a map view for a user to see the layout of their neighborhood, and a saved properties page for users to keep track of favorites.
Inspiration for design patterns was taken from a variety of competitor sites in the real estate market.
Branding
Despite taking inspiration from other real estate marketplaces in our design patterns, we wanted a style guide that would set us apart as primarily modern, creative, and innovative. The violet hues in particular helped us to stand out from other typical homebuying sites.
Primary
Secondary
Tertiary
Prototype and Testing
High Fidelity Wireframes
Above is a sampling of high-fidelity wireframes from our final prototype for HomeQuest. This was a full collaboration from our entire team and involved a focus on a homepage, listings page, a “Local Explorer” feature, and a Comparison feature to allow users to lay out data on their potential new living space.
HomeQuest's flagship feature, Local Explorer, is a one-stop module where users can easily learn more about the local area. Instead of displaying info like walkability, businesses, and nearby schools into a scrolling list, HomeQuest sections them into groups of tabs for "at-a-glance" viewing.
Local Explorer allows info to be smartly combined or separated, minimizing bloat and keeping users engaged. This combination of data also means that HomeQuest can calculate a rating for a particular grouping and show the context behind it.
For the testing phase, I and another team member recruited users in the target demographic of young professionals seeking new places to live. Our basic task flows focused on looking for a specific new home, comparing it’s details to another, checking out the Local Explorer, and contacting an agent.
Overall users heavily identified with the visual design of the site and felt it was very modern and clean. Most key elements in our task flow were easy for users to navigate through.
Users felt certain elements, such as the Local Explorer feature, could have been more noticeable and bolder.
Users suggested additional elements to Key Info tab such as listing date, previous tenants, and amenities