Offerpad Offer Letter
OVERVIEW
Redesign of the letter presented to users who have requested a cash offer on their home
After a user requests an offer, our Acquisitions team reviews the home details and presents the user with an offer letter including a breakdown of the offer amount and selling details. In the old design, users go through a multi-page experience to make their selections and review the offer; we sought to make this experience easier and faster by consolidating the content to one page. I took the lead on conducting user research, designing the mobile web layout, and presenting the research findings and high-fidelity prototypes to senior leadership.
Role
UX Designer & Researcher
Collaborators
Prod, Design & Eng
Platforms
Mobile web & Desktop
Timeline
3 months, 2022
THE PROBLEM
Customers selling their homes to Offerpad are leaving the offer letter before reviewing all of the pages and making all of the required benefit selections.
To begin understanding user pain points, we looked at data in FullStory to see how many users were leaving and at what points in the process. I watched sessions of users interacting with the letter to identify any indications and patterns in why users were leaving the experience. I reviewed and discussed the hypotheses and assumptions with the larger team.
Old Designs
DESIGN CHALLENGE
How might we improve the offer letter experience to reduce drop off before users reach the final CTA?
SOLUTION
A quick, hassle-free way to review all cash offer details in a one-page experience
PROCESS
How did we approach the redesign?
One of our first steps was to research layouts for financial products and use these discoveries as a jumping off point for ideating solutions. We used sketching and digital wireframing to quickly produce and review a large quantity of ideas. Throughout the design process, I presented frequently to our key stakeholders, and their feedback was essential in driving prioritization and decision-making. I also conducted a usability test to compare the performance of the old and new letter, and used the test results to demonstrate the value of developing the new experience.
01 Understanding the User
COMPETITIVE AUDIT
I researched other financial desktop and mobile experiences and presented my findings to the design team.
I mainly examined financial companies such as Turbotax, Quicken Loans, H&R Block because I was interested in understanding how to best display the total price and price details, as well as how to capture user sentiment.
IDEATION
I used the research findings as a starting point to sketch ideas around navigation and pricing.
I sketched two options for navigation: horizontal tabs (left) or vertical anchor points (right). We discussed the sketches as a design team and decided to move forward with the horizontal format because it would allow the tabs to always be visible on mobile, rather than hidden in a navigation menu.
User Sentiment
I also explored different ways of capturing user sentiment. I first sketched the sentiment analysis as a sticky footer. Based on the users’ response, they would be anchored to different parts of the letter. After receiving design feedback, I sketched a modal idea because it would allow us to capture not only how the user felt but also why.
02 Starting the Design
DIGITAL WIREFRAMES
We used the sketches as a starting point for bigger screen sizes, but needed to think about how the tabs would function on mobile.
Following sketching, we discussed changing from horizontal tabs to anchors. Rather than having one card of content appear at a time, all content would always be visible and the anchors would direct users to different parts of the page. This allows users more flexibility in the order they choose to view information and provides them with a clearer overview. It also follows a mobile-first design approach, as it is easier for users to vertically scroll than horizontally swipe. We also carried over ideas from our research in keeping the price sticky to the top as users scroll.
LOW-FIDELITY PROTOTYPE
We used our rough wireframes to create a low-fidelity mobile prototype.
One of the key design changes was integrating the benefit selection into the offer letter pricing table, rather than having it as a separate page anchor. Also, in the wireframes, the net proceeds was shown next to the offer price with the benefits squeezed at the top; this side-by-side view did not clearly show how specific benefit selections affect the subtracted amount. Therefore, a second change was moving the estimated net proceeds to the bottom of the pricing table to display the final amount after deductions are made.
02 Capturing User Sentiment
The purpose of capturing user sentiment is to help us better understand why some users are not clicking to send the agreement and how we can better serve them. However, we did not want to require users to submit feedback and we did not want to distract from their offer. We also recognized some may feel more neutral, and added this middle option. With these goals and insights in mind, we designed a single line sentiment bar located further down on the page. We also broke it into multiple parts and allowed users to send feedback with or without a reason, and provided them with a direct contact number to help resolve any issues.
01 Choose Your Benefits
We consolidated the choose your benefits page with multiple questions to an experience integrated into the offer. Users’ benefit selections are defaulted to the free options. If users want to change these selections, they can do so using the drop downs. This prevents users from needing to scroll and potentially missing the benefit section. Also, we wanted to communicate that closing date is flexible and can be modified, therefore, users are no longer required to select one if they aren’t sure yet. The calendar is also now open on default to aid selection by showing the days of the week.
03 Send Agreement
The purpose of the information icon is to ease users’ nerves in selecting to send the offer agreement. Through calls with customers, our service team identified a key user pain point, which was that many users thought selecting that button put them in a binding contract to sell their home. We wanted to solve this pain point by communicating to users there is no obligation to sell by proceeding. We also modified the confirmation screen to increase clarity on what users could expect for next steps.
03 Refining the Design
MOCKUPS
Offer
We reformatted the offer into a card with a title to help divide the table content and page sections. We received positive feedback from stakeholders on sticking the price to the top on scroll, which helped validate that decision. Finally we used color and spacing to increase clarity, with orange representing clickable icons and buttons.
I presented the low-fidelity prototype to key stakeholders and we used their feedback to refine the design.
Sentiment
Due to time and technical constraints, we removed the sentiment analysis from the designs. While we defended the value of capturing user sentiment, our stakeholders presented concerns over our development teams’ technical capabilities within the project timeline. While not included in this version, it is a feature that may be revisited in the future.
KEY MOCKUPS
Two key ways we sought to improve the experience were by decreasing the time it takes for users to review the offer and choose benefits as well as by making it easier to understand current and next steps.
We designed our high-fidelity mockups to meet these goals by implementing the following key changes:
1) Allow users to send the agreement without making any changes, by defaulting their selections
2) Provide an “I’m not sure” option for closing, so users don’t feel stuck trying to decide on an exact date
3) Re-iterate to users this is not a binding decision to sell, to ease nerves proceeding to send the offer
HIGH-FIDELITY PROTOTYPE
The mobile prototype captures the user’s experience from reviewing the offer to sending the agreement.
Review Offer & Send Agreement
This new offer provides an experience where there are no required benefit selections. At any time, users are free to continue and send the agreement. All of the content is visible at all times, creating an easy viewing experience. The offer also includes FAQ’s and other helpful content users can browse if desired. In addition to adding the information icon, we also felt it important to add a confirmation modal, to ensure the user would like to proceed. This follows design best practices, serving as an “are you sure” in case of an error click.
USABILITY STUDY
I wrote a comparison test plan where each user completed the same tasks for the old and new offer; half of the participants saw the new offer first, and the other half saw the old offer first.
The objective of the study was to gain insight on ease of navigation, simplicity to understand, and speed to complete. I compared these metrics for the old vs. new offer.
Study Type
Unmoderated usability study
Device Type
Mobile
Location
United States, remote
Participants
10 participants
8/10 users preferred the new offer
"I like how the whole breakdown is on here. I like the drop down and I like how everything is laid out all very clear, very detailed. I feel like I have control over a lot of these things with the drop downs and toggles."
User 1
"I like the fact that it tells me up front, what the offer is, when it expires. Any service fees that may be included as a result of the Offerpad service, and also gives you the ability to pick a closing date.”
User 2
"Here's the offer immediately right off the bat, you can do your extended stay and free local move. You can get more information on it by clicking the i's, which is very standard, universal... I like the way the information is displayed."
User 3
“Everything is on one page. I can see the price at the very top, which is exactly where I want to find that. Closing information right there, everything is right there at your fingertips… I think that makes it all really quick because I don’t have to go from page to page.”
User 4
RESPONSIVE DESIGN
We designed our digital wireframes and prototypes with a mobile-first approach, then used our mobile experience as a guide to develop the desktop version of the offer letter.
We kept the horizontal anchors consistent across mobile and desktop. We also centered the content on desktop to allow for a fluid experience on smaller laptop devices as well as on tablets. This also allows users to easily follow the content straight down the page rather than scanning side-to-side. Since all of the content is consolidated to one page, we wanted to design it in a way that would not overwhelm the user with too much to select or review at once. However, we also ensured the most important content, such as the offer price and benefit selections, fit above the fold.
04 Going Forward
IMPACT
I helped to successfully decrease the average time needed to complete tasks and reduce user drop off.
I watched sessions in FullStory to make informed recommendations for updates in the offer letter. I noticed 2 key pain points in the experience; the first was users needing to select to expand the offer details and the second was users stuck on the closing date selection. To solve the first problem, I made the details such as the repairs and service fee always visible, increasing clarity on how the net proceeds was calculated. For the second, I introduced a toggle, defaulted to pick a day with the calendar open, not only easing user selection but also giving those who are unsure the option to set a tentative date. Through usability testing I validated these design changes, which increased our stakeholders’ confidence in developing and launching the new offer letter. When we launched the new experience as an A/B test it performed significantly better than the old offer.
WHAT I LEARNED
I learned how to use a comparison test to validate design decisions and push for changes that improved the conversion rate.
The usability test focused on comparing UX metrics such as time on task and task success rate. It also helped to gain qualitative feedback from users to better understand their preference between the old and new, and why. I learned how to use both quantitative and qualitative results to encourage design changes and saw the direct connection between improving user experience and increasing conversion. While much of the content was the same, this displayed how consolidating the information to one page could both meet user goals and increase the quantity of users who selected to send the purchase agreement.