Role
Disrupting home buying and selling company Offerpad approached me to redesign their seller price calculation page.
Challenge
The legacy page displayed static and industry-defaulted pricing that gave visitors a one-dimensional view of their price comparison. High bounce rates occured because users were unable to input their own prices to truly see the value Offerpad provides and were confused by the provided real estate terminology.
Process
After sitting down with customers and product managers, I defined user and business needs and uncovered current problems. I then came up with solutions, brainstormed them with the team, iterated, designed, and handed-off prototypes for further testing.
Goals
User: Create a welcoming, clear, and interactive experience for users to set their price and immediately get results to compare Offerpad vs. traditional means.
Business: Grow engagement with Offerpad.com, generate custom pricing inputs, gather addresses, and create sales leads.
Timeline
1 Month, March 2019
"Excellent way to sell a house. It was hassle-free and easy to arrange with no showings. Thanks for the great service and support."
User review
Discovery
Conversations and Questions
I asked the Offerpad team a lot of questions: Where did the need for this came from? What metrics were gathered? What are the user and business outcomes expected? I prioritized time talking with key stakeholders up-front.
Compile Feedback
By gathering every email and phone conversation, I started writing out a lean design thinking brief focusing on the desired user and business outcome. The result was a set of running documents I could refer to that keep users at the heart of the process.
Goals
User: Create a welcoming, clear, and interactive experience for users to set their price and immediately get results to compare Offerpad vs. traditional means.
Business: Grow engagement with Offerpad.com, generate custom pricing inputs, gather addresses, and create sales leads.
Form Hypothesis
After compiling notes, I put together a clear hypothesis statement:
I believe higher user engagement and sales requests will be achieved by allowing prospective home sellers to input and customize their own values in clear, educational steps.
Understand Home Sellers and Their Problems
Persona
After talking with stakeholders, customers, and empathy mapping, I started to list out aspects of the persona:
Demographic
- People actively looking to sell their home
- 60% were mobile
- Older audience with an influx of younger
- Do-it-yourself mindset
- Newer to the real estate market
Needs
- See how much their home is worth today
- Sell their home at a reasonable price
- How much they can profit or lose from a sale
Behaviors
- Use multiple online price calculators
- Search and call agents for consultation
Problems
I then plotted pain points rooted in feedback and auditing:
- Page is static and uninviting
- Main call-to-actions are buried further down the page
- Not enough differentiation between Offerpad vs. traditional method
- Users need a way to enter their own values
Come Up with Solutions
Key Aspects
I drew key aspects that also align with the business goal of gaining more conversions:
- Users enter and change their own home values
- Explain real estate terms directly and plainly
- Ease them into an offer and create the sales lead
Ideas
- Have offer entry form with value proposition highest in the page
- Break the current static table into separate sections/steps
- Allow for user input and customization, i.e. forms, sliders, steppers, etc.
- Expose educational snippets or click/hover popovers to show simpler real estate info to the user
- Show progress indication
By using those key aspects and ideas to drive my initial design sketches and prototypes, I was able to quickly iterate and continually improve the designs.
Sketch, Wireframe, and Iterate
Hand Sketches
With more feedback, I landed on concrete solutions. Using grid and printer paper, I sketched concepts and listed out the design goals and key aspects alongside so that they aren't forgotten.
Refine Into Wireframes
Using prototyping tools Whimsical and Adobe XD, I refined some of the stronger sketches into wireframes. This type of design helps stakeholders and users visualize the product easier before applying design language and content.
View Mobile Wireframe
View Desktop Wireframe
Incorporate Feedback and Iterate
A few rounds of stakeholder feedback and iterating, I determined that an A/B test would help lead to a final prototype.
View Final Brief
User Testing and Refinement
A/B Testing
Users were presented with two different prototypes, one that had more user testimonial, quotes, etc. and one with more value propostion and less sections. Findings:
- Most gravitated toward version B, with less user testimonials and sections
- The mobile version felt easier to use since sections were more compact
- Some mentioned it felt too long to scroll and get to the final offer
- Disclaimers were hard to read
- The visual separation between Offerpad and traditional was clear
I applied this feedback and modified version B.
The Outcome
With user and stakeholder approval, I wrapped up desktop and mobile click-through prototypes and handed them off for development.
View Mobile Prototype
View Desktop Prototype
