Jointly Offer Comparison
Helping agents and their clients narrow down multiple offer situations more quickly.
Project Details
Details
Client: Jointly
Technology: Progressive Web App
Feature: Offer Comparison
Year: July - August 2021
What is Jointly?
Jointly is a digital real estate platform that helps real estate agents draft, manage, and collaborate on offers.
My Role
User research/ Data synthesis/ Wireframing/ Prototype testing/ Hi-Fidelity designs/ Acceptance criteria for design to dev handoff/ Documenting component guidelines/ Quality assurance
Team Members
UX/UI Designer: Erika Marquez
Engineering: Daniel O’Connor, Felix Ramirez, Brendan McDonald
Implementation: Nick Mankus
Product Owner: Devin Dvorak
Project Overview
In 2021’s hot real estate market, listings are getting a ton of offers, and there was a high request among users of Jointly’s platform to make comparing them easier. This project focused on creating a feature that automatically compares offers submitted through Jointly by pulling and displaying offer terms automatically on a dedicated comparison page. As the only designer of the team, I was tasked with understanding what issues agents and their clients deal with in a multiple offer situation and design an experience that would help alleviate the pain points they face today.
The Challenge
Our listing agents are struggling to compare important terms between offers they receive on their listings because they are overwhelmed with the amount of offers they receive when their listing goes into a multiple offer situation. If we can solve this problem, it would impact the listing agent positively, because it would take them less time to understand which offers to recommend to their client so they can spend more time guiding them. It would also benefit the business because listing agents are more likely to use our product if they had this feature to save time from comparing offers.
Our Solution
Our solution is to allow listing agents to compare offers submitted in Jointly’s platform by automatically pulling in key terms from each offer and displaying them side by side on a dedicated page. Agents are able to customize the comparison page based on the terms and offers they believe are important for their client to focus on. By creating this feature for agents, it’ll save them a ton of time by automating a process that normally takes them hours to complete, and makes it easier to present to their clients which offers they recommend are best for them.
“How might we help the listing agents and their clients quickly compare and choose between multiple offers?”
The Process
Research
Hypothesis: By providing listing agents the ability to streamline comparing multiple offers more quickly, they will have an easier time sharing their top recommended offers with their clients.
The first thing I did was conduct user research. I interviewed 4 agents who have worked with listings with multiple offers to learn more about what problems they experience and what processes and tools they currently use. In addition, I had a few questions I wanted to validate.
Objectives:
What pain points do agents and their clients experience when dealing with a multiple offer situation?
What is their current process for dealing with multiple offers?
How do agents choose a winning offer for their client?
What terms are important to see when comparing offers?
Affinity Mapping Exercise
From the notes that were gathered in the interviews, I did an affinity mapping exercise to understand common themes between the users. From this, I was able to gather some great insights that helped me with the direction of the experience.
Relevant Findings:
3-6 is the average number of offers per listing in today’s market in major Texas cities.
While crazy offer situation happens (think 12+), it's rare when it does. When this happens, they’ll only compare their top 3-5 recommendations.It’s time-consuming generating a comparison report in spreadsheet form.
Agents have to dig through documents, emails, and texts to gather and distill data on the spreadsheet. It becomes more overwhelming the more offers they receive and is typically done over the weekend.Each seller has different needs and motivations.
Although agents have certain criteria that they believe makes an offer better, their seller's needs and motivations are what drive the offer decision process. High level terms that are important for one seller might be different for another.
Card Sorting Exercise
During the interviews, I had the agents rank certain offer terms in order from most important to least important to see in an offer comparison, as well as detail which additional terms they wish to compare. This was to help us understand which terms we should include in the offer comparison.
Relevant Findings:
Although there was a lot of overlap of offer terms, some agents wanted to only see high level terms, while others wanted to know more details about each offer.
Agents want to know if an offer has a contingency - the less contingencies the better for the seller as they play a huge role in the decision making process.
Empathy Map & User Persona
In addition, I created an empathy map to help me center the user and understand their overall thought process when dealing with comparing offers. I then outlined their needs and goals to help guide me while I came up with solutions for the experience.
Sketches &
Wireframes
After I synthesized the data from the user interviews, I then brainstormed some ideas of what the offer comparison should be able to support. Once I had a good idea of what direction the experience should go, I started with some initial sketches to help me work through some concepts before creating wireframes and wireflows in Whimsical.
The following are examples of some core functionality of what I believed the feature should support based on my findings.
Compare as many offers as the user wants
Add, delete, and rearrange offers and terms
Share offer comparison chart with their client
Show the estimated net proceeds for each offer
Ability to save comparison report and view it again later
Default View
Adding a Term
Mobile View
Wireflows
Usability
Testing
We wanted to make sure that the design direction and experience I was creating was usable and to validate that it helped relieve user’s pains. I created a low-fidelity prototype of the designs in Figma and tested with 5 different agents of various experiences. I conducted the test over Zoom and guided the agents through a series of tasks. At the end, I also asked some concluding questions to get an idea of their overall experience and some additional behavioral questions to fill in some gaps in our knowledge.
Objectives:
Is the process of creating, editing, saving, and sharing usable?
Is the info on the page what the user wants to see?
Is there anything that is unclear or confusing to the user?
Do agents want their sellers to have the same controls?
Is there anything the agents feel could be improved about the experience?
5 Test Users
3 Baby Boomers
2 Millenials
1 Newbie
1 Mid-Level
3 Veterans
Key Findings
100% of users knew how to create a comparison, add offers, and save the comparison
The main controls of the offer comparison were easy for users to understand.
“I didn't have to think during it, which is usually indicative of it working exactly as it should.”
60% of users knew how to add a new term to the comparison
Some users initially struggled to find the “Add Term” button, until they realized they could scroll on the page. Once they figured out they could scroll and found the button, adding a term was easy.
“Once I saw it was down there, I knew immediately what it was.”
20% of users knew how to go back to their saved report
Nearly every user struggled figuring out where to find their saved comparison. They wanted it to be more obvious where to find it.
“Nothing is obvious to me where I would get that.”
Hi-Fidelity Designs
After gathering valuable insight through prototype testing, and going over the results with the business and development, we refined what items we were able to tackle for our MVP and what would be an improvement for later on. I got started on creating the high fidelity designs with updates that addressed the usability concerns and user confusion.
Main Features
Create Comparison
Users have the ability to easily create a new comparison right on their offers tab. Jointly will automatically pull in important terms of each offer and pre-fill the comparison automatically.
Customize Comparison
The offer comparison is fully customizable, so users can add and rearrange terms and offers.
Add, remove, and rearrange offers
Add, remove, and rearrange terms
Publish and Share
Once the agent is ready for their client to see the comparison, they can publish it, which then invites the client to view the comparison. We updated the “SAVE” concept to “PUBLISH” after running into some concerns over the initial way we wanted saving to work.
Access created comparisons
A new button labeled “Saved Comparisons” appears in the Offers page when the agent creates their first comparison. They can access all the comparisons they created from here.
Responsive Design
We wanted this page to also be fully responsive, so I designed a solution that still allowed the user to view a high overview of each offer. Instead of having the user scroll horizontally, they were presented with a bottom navigation where they could tap between offers to compare. I also updated how the users added offers and terms to the comparison via a floating action button.
Design & Component Guidelines
I wanted to ensure that the developers knew exactly how to build out the page and its various interactions. I developed guidelines for hover states, scrolling behaviors, dragging behaviors, and various other page interactions. I created a chart that detailed the format for each offer term and worked with our implementation team to understand what data we could realistically pull for each term since they would be configuring it. I also created component guidelines that detailed sizes, spacing, text styles, colors, and states. I then met with the developers who would be working on this feature and walked them through the designs. I continued working with them after handoff to answer any questions they had as they were building it and reviewed their work in progress to ensure that what gets delivered is what is expected.
Reflection
In designing this solution for listing agents, I wanted to ensure that the offer comparison was incredibly flexible after learning how each agent had different ways that they preferred to utilize a comparison. While some wanted to only see high level terms and narrow down their main offers, there were others that strived for as much transparency as possible and wanted to share every offer and term to then share with their client. Learning this through my initial research helped to guide me to ensure that I accounted for either scenario so the listing agent could control how they wanted to use it.
This feature is currently under development and is scheduled to be released soon. I’m in the process of testing the page and functionality to ensure that the experience is working as intended as well as ensuring the interactions work properly. In addition, I worked with the product owner to slice out the MVP version of this feature and planned out which functionality will be prioritized for future releases.
Once it becomes live in Jointly’s platform, I plan to conduct usability testing to see if users are understanding the offer comparison. I plan on utilizing Google’s HEART framework to measure the impact of this feature and use our findings to plan out improvements. Overall, I’m excited to see how users react to the offer comparison once it’s released and ready to see how it evolves via the feedback we receive.