geniusprice Improvements
Phase 1 - Add AVM Value
What is geniusprice?
geniusprice is a CMA (competitive market analysis) tool used by real estate agents and brokers to search for properties to understand property conditions, obtain valuation insights, view comparables, make confident pricing decisions, and create and share CMA reports.
Phase 1 - Introduction
One of the main reasons a selling agent would use geniusprice is to figure out the best price to list their client’s home. geniusprice allows an agent to generate up to three prices for a subject property:
1) the geniusprice which is calculated by selecting at least three comparables from the comparables list,
2) an Agent Price which is a price the agent can input, and
3) an Agent Price Range which is a price range they can input.
To add more intelligent pricing to the product, the product team and stakeholders wanted to provide the users with an AVM (automated value model) price similar to Zillow’s Zestimate. Now when a user opens the property details page they will get to see an AVM price that is automatically generated.
Original design. Live on Prod
Defining the Problem
Spacing and layout: With the addition of the AVM price, the user can now add up to four prices in total. Adding a 4th price takes up more space and will require a redesign.
Functionality: The user needs to easily select between the prices, add/remove prices, and refresh the AVM price. Whichever price is selected will be the primary price displayed in the report.
Naming conventions: Originally the geniusprice was the value that was calculated by selecting comparables, now with the addition of the AVM value, what do we name the new price? For new users, how do we make it clear that in order to calculate the geniusprice they need to select from the list of comparables?
Design for all Viewports: New pricing section must work across all devices.
Understanding your Users
The primary users are selling agents and brokers. These agents use geniusprice to accurately price their client’s home. Geniusprice allows the agent to search their clients home and see the valuations, property details, transaction history, comparables (sold, listed, and pending), generate and share reports, and learn more information about the surrounding area.
Early or alternate ideation
Competitive Research: looked into other real estate websites, CMA websites, and websites that list multiple prices.
Low-fidelity: Worked in grayscale using simple shapes and text to establish clear hierarchy.
Functionality: Researched different types menu options that would allow for the user to add/remove a price, select a price, provide instructions for how to calculate a gp, and refresh the avm price. Also experimented with functionality in regards to selecting a price to be the primary price.
Mid-fidelity: Once there were a couple of solid designs I began playing with colors from the homegenius color palette. Since this was a new component it was important to think about the color for all of the states (default, hover, select, error, etc).
Final solution
Design: For the final designs, the prices were placed in boxes. This helped make it very clear that the prices were clickable. In previous designs where the price was not contained we received some feedback that they did not appear like they were clickable. The price that is selected uses the homegenius primary blue color. This design also worked nicely across all viewports.
Functionality: Each price has its own tri-dot menu that opens a small drop down when clicked. Since each price has its own options we felt it made the most sense for each price to have its own menu instead of having menu options above the prices that could apply to all (ex, the avm price can be refreshed, selected, and can not be deleted but the Agent price can only be selected or deleted). Each price also had a hover state and selected to state so that it was clear to the user that they could be clicked.
Naming Conventions: With the addition of the new price the names of the prices got switched around. Most of the discussion around this happened amongst the product owners. However, I was tasked with mocking up name ideations so folks could get a visual. The final names chosen were:
Geniusprice: The AVM price that will automatically load when the user opens the property details page.
Mygeniusprice: The price that gets calculated when a user selects at least three comparables from the list of comparables.
Agent Price and Agent Price Range remained the same.
geniusprice and mygeniusprice calculated. Live on prod.
All prices displayed. Live on prod.
geniusprice and mygeniusprice. Figma Mockup.
Pricing States
My role
As the lead designer for geniusprice I saw this project from initial lo-fi designs to final development.
I worked closely with the geniusprice product owner to understand project requirements.
Conducted competitor and design research
Designed low-fidelity designs and did internal critiques with the product owner, UX Director, and other designers who work at homegenius.
Put together a prototype that was used to introduce the designs and functionalities to the dev teams.
Set up design files to hand off to dev. I laid out the designs across multiple viewports along with a document showing all of the states for the new pricing component.
After designs were handed off, I attended backlog refinement meetings each week where we reviewed the designs with the dev teams and BA’s. In these meetings I was able to answer any questions regarding the designs and functionality.
As designs were getting developed I was available to support the QA team in their review process.
Next steps and learnings
There wasn’t any feedback from customers and internal stakeholders regarding the final designs. It seemed to be understood by most users.
Team Members
Product Owner - Dalisa
Lead UX/UI Designer - Sarah Walsh
Tools Used
Figma