Date
5 Weeks
Role
UX/Ui Designer
Type
Website
Software Used
Figma
Date
5 Weeks
Role
UX/UI Designer
Type
Website
Software Used
Figma
Date
5 Weeks
Role
Assoc. UX/UI Designer
Type
Website
Software Used
Figma
Project Overview
Background
I worked for a company called Radian, which is the parent company to homegenius – a home search website. In order to stand out from its competitors, homegeniusrealestate.com created a feature called homgeniusIQ (or hgIQ), which allows users to filter their search based on images of homes they upload to the site. The hgIQ technology scans the images and identifies unique features like the images’ room condition, natural light, ceiling fans and more.
The Brief
The Problem
The primary issue with the feature was that it was too complicated to use. Based on a previous usability study done in June of 2023…
7/8 participants saw the tool as useful, but unfortunately, 4/8 found the feature somewhat difficult to use.
The Initial Design
Here are the initial designs for the hgIQ tool on the property search page on homegeniusrealestate.com.
The Initial User Flow
Here are the initial user flow for the hgIQ tool:
The Goal
So the goal on this project was clear. I was asked by my Product Owner to help develop a new design for the hgIQ tool that was simpler and more intuitive.
Research & Empathizing
Foundational Research
I normally start all of my design processes by exploring design principles and studies that relate to the feature I am building. However, since the hgIQ tool was an innovative feature for home search sites, there was not much precedent to glean from. This also limited my ability to conduct a competitive audit.
With all that being said, I decided to use the previous usability study findings of the hgIQ tool as my launchpad.
Findings
Here were the insights from the June 2023 usability study:
(click to enlarge)
The Guiding Principles
Based on those insights, I started my design process in Figma with one guiding principles: reduce the cognitive load. I would achieve this by:
(click to enlarge)
Develop
Design User Flow #1
The redesign of hgIQ would require the redesign of 2–3 dropdown states and a new home for advanced filters.
I redesigned the initial dropdown, and “see filters” state using the guiding principles I previously laid out.
(click to enlarge)
(click to enlarge)
(click to enlarge)
Product Owner Concerns
After a working session with my Product Owner and Director, a couple questions arose: Do users even care about seeing the filters that hgIQ recognized in their images before they apply the changes? Should we allow them to circumvent this step?
In order to answer these questions, I would need to create a new user flow that allowed users to circumvent viewing the “see filters” dropdown and run a comparison study to investigate users’ preference.
Design User Flow #2
Here is the new user flow and designs I made in response to the stakeholders’ concerns:
(click to enlarge)
(click to enlarge)
Comparison Study
Comparison Study
After designing 2 new user flows, I planned a comparison study to determine user preferences between them and gather any other important insights. Here is the study plan:
(click to enlarge)
Findings
(click to enlarge)
Develop pt.2
Design Mockups
After consolidating the insights from the comparison study and hosting a design critique with my team, it became apparent what user flow the participants preferred and design tweaks I can make on the “See Filters” dropdown. Here is the updated design:
(click to enlarge)
Property Card Design
In correspondence with another new ask from Product Owners, I redesigned the property cards on the search results page to indicate how close a match any property was to the hgIQ search. Here are the property card designs:
(click to enlarge)
High-Fidelity Prototype
Here is the prototype of the entire new user flow!
Accessibility
(click to enlarge)
Takeaways & Next Steps
Next Steps
The next steps in this project would be to do another usability study that could help us compare user preferences for the original design and my new design in order to validate or invalidate my updates. Additionally, I would like to explore more ways I might make the design more accessible.
What I learned
I had an awesome experience working on this project. The thing I most appreciated about this experience was the trust my Director and Product Owners had in me to make careful decisions and create my own moderated comparison study from scratch. I had 3 major takeaways:
- Designers must always have the ability to make pivots in response to new stakeholder concerns. Every concern is a valid concern. While some concerns might reveal themselves to be obsolete in the end, it is still worth taking each concern seriously and doing research and testing to cultivate the most informed design decisions.
- Working sessions with stakeholders are a great way to accelerate the process of responding to different product concerns. It also fosters more collaboration and new perspectives that can inform great designs.
- Usability tests will always reap more insight than designer hunches. While designers and stakeholders might have a lot of experience in the UX field, the user preference cannot always be predicted accurately without testing.