Fix buyer’s offer flow experience

ROOFSTOCK INTERNSHIP
About
During my role of UX Design Intern at Roofstock, I worked with Designers, Product Managers, UX Researchers and Engineers on the team. For this project, the aim was to update the offer flow experience for the users (Credit Application on Marketplace fee).
Role
UX Designer | Intern
Type
Internship
Duration
Summer 2021 (3 weeks)
Tools
Figma, User testing, Sketch, Jira

My Design Process

01

Overview

The Problem

Currently we charge the full marketplace fee amount, even though we consume a user's credit from his balance at the same time.
From an accounting perspective, we are double charging the user and then when the property closes, we refund the marketplace fee amount.

What is Marketplace fee?

When a buyer sends offer for a particular property a marketplace fee is charged.

This fee helps cover our certification, underwriting, upfront diligence and transaction management services. The user enters his credit card details at the end of the offer flow.

There is no cost to submitting an offer, and this fee is automatically charged to your credit card when an offer has been accepted.

The fee, which is calculated as the higher of $500 or 0.5% of the contract price, is disclosed for each investment prior to being charged.
02

DEFINE

Redesign Goal

The goal was to solve the double charging of the Fee in the Offer flow for both the single property and portfolio.
This is to provide better transparency for our buyers when they send an offer on a particular property they are interested in. The intention is to clear confusion about the marketplace fee being charged.

01

Clear Users confusion

02

Provide transparency

03

Fix Double Charging of fee
03

Preliminaries

Current offer Flow

For Single Property
1. Enter buyer info
2. Select funding source
3. Authorize marketplace fee
4. Review and submit
For Portfolio
1. Offer Initiation
2. letter of intent
3. Authorize marketplace fee
Single property vs Portfolio
What’s the difference between the two?
Since sending in an offer for a portfolio might be quite large and charging that amount on the credit card would have certain limitations.
So what we do instead is, charge a flat fee of $500 once the offer is accepted and the rest is charged at closing.
04

discovery

Problems with current design

01

User has no way to know his credits are being applied.

02

Logically, at this point, we are double charging the user.

03

Added effort from the Transaction coordinators to raise a refund.

Who are the Users?

Coordinated with UX Researcher on the team to understand the Buyers, create personas and get insights
05

Planning

How do I make the process consistent and clear to the Buyer?

Set users minds at ease - revise copy

Let the users know when and where the cost is being applied with additional information and clarification.

Visual Hierarchy

Fix visual design by using hierarchy highlighting the most important information.

Review and Submit page

A summary to reflect the amount charged clearly before confirmation.
06

design process

Design Inspiration

I started off by looking at how other e-commerce websites tackle and display pricing details.

Design Exploration

Taking above design layouts into consideration, I started exploring a few variations. Also, keeping in mind the current design system and brand guidelines of Roofstock.
Hover on each to enlarge

option 1

Letting users apply credit

option 2

Tabular format
displaying all calculations

option 3

Copy stating the
credit application

option 4

Price breakup in card format

Visual Design Variations

Taking above design layouts into consideration, I started exploring a few variations. Also, keeping in mind the current design system and brand guidelines of Roofstock.

User Testing

Using the above variations, I along with the PM, shortlisted 2 of the most relevant ones that closely align with the design guidelines. I prepared user testing tasks/ questions to get real-time user insights by making users think out loud. This would help me pick the right direction.
Which is Better?
Created an A B test from the above screens on user testing to get feedback from real users.

option 1

option 2

Test Results
With option 1 and option 2 as the two variations of design; among the 7 participants, 3 chose option1 whereas the remaining chose option2.

Based on their thoughts while making the decision, it seemed like
option 2 was more direct and hence easy to understand.
07

FInal Designs

Design Update
Marketplace fee authorization for a single property

Mobile Designs

Referring to design systems and applying the above changes I updated the previous designs

marketplace authorization page

to reflect the amount of credits that we be deducted from their account and the amount that will be charged to their credit card.

Review and submit page

A summary to reflect the amount charged
clearly before confirmation.

Replicate the same experience for Portfolio Offer Flow

I replicated the above offer flow for portfolio in order to keep the design and experience consistent.
Design Update
Marketplace fee authorization for Portfolio
08

summary

Business & UX Impact

Trust and Transparency

We want our buyers to feel comfortable to make an offer on a property. Being transparent about next steps, how to proceed, and what their cancellation options are.

Internal Efficiency

This relieves some of our team’s internal workload so they don’t end up doing a tremendous amount of work on a transaction that might go nowhere.

More Qualified Buyers

This may lead to more qualified buyers making offers and also serves to strengthen their offer. The Buyer knows what he is being charged for and when.

📌 Things I would Improve

👉🏻Document the process and maintain component library

So that we can refer and keep improving making the designs consistent and easy to build products.

👉🏻Seamless Handoffs

Have proper documented user flows and use cases for seamless design to engineering handoffs.

👉🏻Learn more about the process

Coming from no real estate background, learning the process along with making design decisions was a bit overwhelming.

👉🏻Have more comparison metrics

Have more insights / metrics in numbers for measurable comparison and business impact.
Watch other projects I worked on during my internship
Download case study
Designed and created by ✨ Shiny Fernandes.