Homegenius Search-by-Image
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.
Role/Service
UX/UI Design
Website
www.un-associated.com
Sector
Real Estate, Insurance
The Problem
A previous usability study conducted by my colleagues found that the primary issue with the feature was that it was too complicated to use.
Check out the initial user flow below
The Goal
Develop a new design for the hgIQ tool that was simpler and more intuitive.
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.
01 Information Heirarchy
02 Advanced Filters
Having the advanced filter editor in the modal overcomplicated the user journey with too much information and options at once. Needs a new home!
03 Gestalt Principles
Enforce Gestalt Principles to help segment the dropdown into easily recognizable and readable sections.
Creating the new user flow (#1)
Let's start desigining!
Initial dropdown changes
"See filters" dropdown changes
Creating a user flow #2
We aren't done yet…
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 2nd user flow that allowed users to circumvent viewing the “see filters” dropdown and run a comparison study to investigate users’ preference.
Here is the new user flow and designs I made in response to the stakeholders’ concerns:
Scroll Vertically
Toast message dropdown implementation
I changed the image display to a row of uploaded images. My thought process was that the uploaded images didn't need to be so emphasized on this dropdown. I decided reclaim space in order to display the filter options that user can use to edit their search.
I also implemented Gestalt principles like common region and similarity to emphasize segmentation and communicate appropriate grouping.
I added active states to the image that the filters below corresponded with. The filters would change as the user toggles to other images. Each image has features the technology would pick up on and generate filters from.
Comparison Study for the 2 user flows
I ended up with 2 slightly different user flows. So, the next step was to plan a comparison study to determine user preferences between them and gather any other important insights. Here is the study plan:
The Findings
There were 4 main insights I gathered from the completion of the Comparison study…
01 User Flow #1
4/6 users preferred user flow 1 over user flow 2. Overall there was a dominant preference amongst users to see the filter options immediately after uploading an image.
02 Toast Message
All users expressed their appreciation for the toast messaging on user flow 2
03 Room Condition
4/6 users found the room condition display under each image confusing. This feature is meant to identify any damage in the room.
04 Image Size
Ambiguous answers were given surrounding preferences for the image sizes on the "see filters" dropdown
Mockups
And then came the mockups!
Final design + Toast message
In the final design, I decided to create a combination between the toast dropdown and the "see filters dropdown from each of the user flows. The participants in the comparison study wanted to see filters, and appreciated the toast message.
I also played around with the image display, bringing back a carousel feature. This helped to simplify the design, enlarge images in response to the ambiguous preferences we got in the comparison study, and enlarge the room condition display in order to add a label so the users aren't confused about what it does.
I re-adopted some features from the initial design like the check list for filters and room category tabs above.
Property Cards
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 when applied. Here are the property card designs:
Takeaways & Next Steps
Here are a few takeaways from my time on this project
Property Cards
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:
01 Embrace the Pivots!
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.
02 I ❤️ Working Sessions
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.
03 Power to the People
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.
Thanks for reading 🧑🏾🦲
Back to top