Redfin: Add a feature
Helping first time buyers find their homes with listings made exclusively available for them.
Role: UX/UI Designer, UX researcher
Project: Add a feature to an existing website within the company’s brand and style guidelines.
Duration: 80 hours, 6/18 - 7/08
Tools: Figma, Miro, Zoom
Background:
Redfin is a technology-powered residential real estate brokerage started in 2004 in Seattle, WA. that represents people buying and selling homes throughout the United States. They were one of the first real estate brokerages to use maps in their listings, and continues to attract a tech savvy user base.
Challenge:
Redfin is looking to optimize it’s user experience by adding a feature to it’s site that allows users to further personalize their search in order to find the property they want. Users would be allowed to search by specific characteristics of the property to narrow down results and save time during the search process.
Redfin needs to be able to get to know it’s user’s property and search preferences in order to create a new relevant search feature and offer similar suggestions.
Solution:
Create a feature to help users easily find listings suitable to their needs based on user research, staying within brand guidelines.
Research
Looking into the real estate market
The market for single family homes is hotter than it’s ever been, and online searches are the first step that potential buyers take.
To discover if there was any opportunity for improvement by adding a feature to Redfin’s popular search website, I conducted secondary research on current trends and statistics. I then talked directly to homeowners of various ages and backgrounds to get personal insights into what their experiences were like and what could have been more helpful in their searches.
Methods: Secondary research, one on one user interviews
Getting to know today’s homeowners
Talking with homeowners, I uncovered not only quantitative data, but also their challenges and goals as buyers and possible opportunities for improvement.
1 on 1 interviews conducted with 3 homeowners, and one real estate agent, both in person and via Zoom.
All homeowners used Redfin and other online search websites.
14 questions, 15-30 minutes duration
Demographics: greater Seattle area, ages 40-60
Objective: Identify Redfin’s main users and how they currently use the site. Understand what pain points they have with the current system and what opportunities we have to help them find their ideal home.
Understand the Information Architecture and style of Redfin’s app in order to add a feature that blends seamlessly and adds value.
Assumption: Users like to search online for properties and use specific filters in order to find their ideal home. We assume that certain filters are more used than others. We assume that certain qualities of a property are not represented by current search filters and could be helpful to a user if added.
2. Define
Investing in the Future
From our research we found that most homeowners were excited as well as daunted by the home search. I interviewed three seattle-area buyers and found that they shared quite a bit in common as far as the joys and challenges of finding their home. Top challenge was the market being super competitive combined with low inventory and more seasoned buyers having the advantage. I set out to define our problem through the lens of our persona, Ara.
Methods: User Persona, User Flow, Site Map
User Persona:
In order to understand our audience, I created a realistic representation of our ideal user based on information from our research that outlines their frustrations, goals, and needs around finding a home.
Ara is an urban dwelling older millennial who has been ambitiously investing in her future, but also taking on student debt in medical school so that she can have a solid career. She is just now starting her search and is finding it frustrating to compete with more established buyers and investment firms offering 50k in cash over asking price.
User Flow:
Our user’s journey through a specific task: “Book a Home Tour” using current site architecture plus proposed feature for first time buyers. I added a hypothetical feature to the home page that would lead users to an inventory of homes only available to first time buyers, slashing the competition from seasoned home buyers and investment firms.
Site Map:
Developed the information architecture for the three main goals of the app based on research - Buy, Sell, and First Time Homebuyer only search.
3. Design
Designing for our users
Armed with the main flow I would be developing based on user needs, It was time to start thinking about how it fit into the current information architecture of Redfin. I looked closely at their website and brought up style guides online to see how they handled flows and design decisions.
Methods: Sketches, Wireframes, UI Kit/Branding, UI Design
Wireframes:
Before wireframing, I drew some preliminary sketches showing the main feature to develop (first time buyer option) referencing the main user flow and site map. I then created low fidelity wireframes to help flesh out placement and sizing of specific features based on a 375x667 px screen.
Wireframes
Ethos and Style:
Buying a house is a huge step in one’s life journey, and symbolizes success, permanence, security, and hope, among other things. It is a huge investment and a real estate agent or search engine should represent trustworthiness to a diverse population. I discovered Redfin’s style sheets and guidelines in an online search that allowed me to design with consistency to their brand in my iterations. I used their signature red (#B7332B) and grey neutrals, and replicated UI elements according to use.
Word cloud symbolizing Redfin’s company values guiding design decisions.
UI Design:
Once the basic UI elements were in place, I selected images and icons that matched the color palette and company vibe and tied the design together in a way that would appeal to our target audience.
To get my designs to fit into clay mockup screens only available for iphone X size, I modified my pages to be consistent with that version. I increased page size and content, and added different top and bottom nav features from a Mac UI kit.
4. Prototype and test
Connecting it all together
In the design verification phase I created a prototype in Figma, taking the separate UI elements and joining them in a way that would allow a user to adequately test my ideas and see what needed iteration or clarification.
Flow for a First Time Buyer booking a home tour with a feature added just for them
User Testing:
I selected 1 current homeowner and one prospective first time buyer to conduct in person user tests. Each test took about 10 minutes and users were encouraged to think out loud while I recorded their results as well as points of confusion or frustration. I formulated specific tasks based on current flows and scenarios to guide them through those tasks.
Test Goals:
Discover if the First Time Buyer feature on the Home page is effective.
Validate if the choices on the modal are useful to a First Time Buyer.
Observe if the flow allows a user to effectively book a home tour.
Assess whether the overall UI and layout was pleasant and appropriate for the type of website
Method: In-person user testing of a hi fidelity mockup in Figma
Tools: Figma, Figma Mirror
Test Subjects: 2 users:
Age range 28, 48 years old
1 homeowner, 1 prospective buyer
Familiar with online home search apps
User tasks:
Test Results
Users did not immediately notice what was different, as I worked very hard to integrate my work with the existing style and layout.
Synopsis:
All participants were easily able to navigate the new flow and book a home tour with the changes I made. Test took about 5 minutes for each person.
Observations:
2 users did not immediately catch the new FTB feature on the homepage and had to think before knowing where to click. All participants wanted to click the “Add to Calendar” link on the Confirmation page which is currently inactive.
5. Priority revisions
I didn’t have to make many changes, as my users were easily able to book a tour, but I took their advice on two observations:
Add a callout to the new homepage feature
Link to Google Calendar to book home tour
6. Next steps/learnings
Next Steps:
With more time, I would:
Add other flows and features suggested by users, such as a virtual staging option
Develop full mobile pages
Add other information about each listing, like type of water nearby and cost vs. value of home improvements in the area
Develop the “Sell” option so that sellers can choose who to sell their home to (FTB over investment firms, for example).
Reflection:
My initial idea was to develop a feature based on proximity to nature on a listing and show information like amount of street noise and vegetation onsite, but after user interviews I found the real problem was a low supply of housing and increased demand, making the search process quite challenging.
In this project, I learned how to choose a broad area to focus on (add a feature to help the user’s search process), while keeping an open mind in defining the exact problem until research is conducted, thereby letting the users’ feedback guide the process. I learned about the real estate market and online search process with popular apps, and how to work within a company’s existing style and brand guidelines. I found I really enjoy copy work and understanding the psychology behind a company’s design decisions.
