Better.com

Creating easy-access for homeownership

ROLE
Design Lead
DURATION
2 Months
SCOPE
Product Design
User Research
TOOLS
Sketch
Invision
Miro
context
Better.com is a digital mortgage lender, nominated by LinkedIn as the 'Best startup to work for in 2020'. The process of gaining homeownership is still outdated, and a lot of people rely on brick-and-mortar shops to buy insurance. In order to create easy access to becoming a homeowner, Better.com aims to provide a 100% online service, where users can lock down mortgage and upload insurance quotes.
my contribution & impact

As a Design Lead, I took full ownership of the following tasks:

As a result, the new feature design contributed to 80% increase in user click.

PRoblem

Users need to visit 3rd party platforms to complete insurance shopping

Users can browse various insurance carrier quotes from Better.com. However, they need to visit each carrier website to customize and view the final price. After this, they need to return to Better.com to upload the quote and finalize their payment. Often times, users become frustrated by the lengthy process and does not return to Better.com.
solution

Create one-stop shop for homeownership

I led a design team to help users adjust and buy insurance directly from Better.com. The goal was to create easy access to gain homeownership. The new feature provided a win-win solution both to users and to company; from a user standpoint, it was possible to  complete the entire process from a single platform; from a company standpoint, the chance of losing user traffic was reduced.

Easy readability

Using visual icons and short paragraphs to make insurance content, which is hard-to-understand, more accessible and user friendly

Vertical price comparison chart

Enables apples to apples, direct comparison of multiple quotes from a single screen with key information from a vertical price comparison chart

Full access to customer support

Agent contact information (phone number and email) with an agent's headshot to help users feel more comfortable about reaching out to agents for support. AI Chatbots on each screen for additional help

Research

Competitive Landscape

As I started the process, I first examined the competitive landscape to understand a) the overall insurance industry and b) the unique value that Better.com provides to users.
I created a list of insurance companies and sorted them based on the two criteria: a) Is the service based on digital service or brick-and-mortar shops? and b) Does it provide a general insurance service or more specific ones (i.e. homeownership, automobiles, etc)?
In order to visualize the degree to which each company positions and differs itself in the market, I created the competitive matrix. From this exercise, I defined the unique value of Better.com as a '100% digital insurance service specifically for homeownership.'

User Interviews & Surveys

Once I had a clear understanding of the product, my next priority was to understand the user experience. I reached out to users through 30 Google forms surveys and 7 in-depth qualitative interviews. The goal was to understand the usability and navigation challenges with Better.com. While I asked key questions, such as 'how did you do your research?,' I mainly let the conversation free flow to collect unbiased responses.

Research Insights

After collecting user research data, I went through the process of affinity mapping to identify my users' wants, needs and goals. Among those who participated in the research,
85% Want Apples to Apples Comparison
Users want to compare different options all at once instead of visiting multiple insurance websites and ending up with multiple tabs on their browser. They do not want to spend too much time on research.
90% Value Quality Over Quantity
Users consider insurance as long-term financial investment. Hence, if they can get more value (i.e. better coverage, higher rewards, etc), they do not mind spending extra money.
100% Require Agent Support
Users want to feel confident about their choice. They want to talk to agents for advice and assurance. However, they want agent phone calls only when they need, not every single time. While they look out for agent support, they want to have control over the communication.

User Persona

I created a fictional character, Frank, whose goal, pain points, and needs aligned with those of our target users’.  I referred back to him throughout the project to stay focused on the audience I was designing for.

User Journey

I also visualized Frank’s journey of buying homeowners insurance policy to create a focal point from the problem space. After this exercise, I became 100% confident that users' research process needed to be simplified.

How might we help users find homeowners insurance policies without spending too much time and giving them the option to contact an agent only when they want?

IDEATION

Design Studio

Now that I had a clear understanding of the user experience, I arranged an in-person meeting with the Product team. The purpose was to brief research findings to non-designers and spearhead the product strategy as a team. I wanted to ensure that the entire team was aware of the user experience and that nothing came as a surprise after handing over the final deliverables. The face-to-face meeting helped ensure that everyone was all on the same page.

Feature Prioritization

By the end of the meeting, we brainstormed potential features to include in the new design and sorted them based on the MoSCoW chart. Since the project was under time constraint, the goal was to create priorities and determine the key features to focus on within the project timeline.

Design Exploration

Once we knew which features to focus on, we examined the competitive websites for design inspirations. This exercise gave us specific examples for turning the 'must' features into visual design.
Agent Chatbot
We captured Lemonade's agent headshot design, which helped with creating a human-like feeling of chatbot support
Visual Icons
Since our users were overwhelmed by insurance website text,  we decided to use visual icons as Liberty Mutual did on their website
Price Comprison Chart
Users appreciated the vertical chart design from Amazon for it allowed them to compare multiple options apples to apples
DESIGN

Design Sketches

After the group meeting with the entire product team, my design team quickly jumped into the design phase and started producing basic sketches.
I facilitated another round of design studio only with the design team this time to figure out how to integrate the new 'must' features into design. Here is the layout we created for the price comparison screen.
1. Agent Contact Info for users to reach out for help anytime, anywhere

2. Vertical Display of insurance quotes so that users can compare each option directly from a single page

3. AI Chatbot for users to get quick assistance

Wireframes

Now, it was time to elevate the basic sketches to medium and high fidelity screens. I divided up the screen design with my designer, while my ux researcher oversaw the entire process to ensure the design stays within the research insights. For each screen and flow, we based our decision by balancing the users’ need for simple research and the company’s goal to increase user conversion.

Interactive Prototype

Here is the final prototype I created using Invision.

Before & After

Here is the comparison of the old and new screens.
ITERATION

Is the ‘best value’ option easy to find?

In order to evaluate the design, my team ran a usability test. Due to the project time constraint, our test had to be quick but iterative and informative. We narrowed down the test scope and performed a specific task analysis, in which we asked users to find the best value option (a combination of nice coverage and reasonable price) from a product view page. We chose this task among many others, because early research studies showed that users were most interested in buying this option.

Our Success Metrics

  1. Length of time to find the best value option
  2. Task easiness rating on a scale of 1-10
  3. Qualitative feedback

Room for Improvements

Through usability tests, we identified several areas where we could improve.

Design Iteration

Based on user feedback, we made changes accordingly.

Improvements

We ran another round of usability tests to measure how much the design improved. Here were the test results:
↑80%
↑50%
Higher click rate
Easier to complete task
"The whole experience is very straight-forward, and the website is easy to navigate"
- Sarah N., 32
"I like how easy it was to find the best value option. I did not have any trouble viewing the price, deductibles, and other options. Wish I knew Better.com before I bought my own insurance."
- Joseph F., 34
Closing
Looking Back
The project was challenging but fun and rewarding. I grew so much as a designer and learned the following lessons:
Team Communication
One of the biggest challenges was leading the design team and balancing communication. I ran scrum team meeting everyday for team update and task delegation. Especially when working in a high-stress, fast-paced environment, I learned it was crucial to connect with my teammates both on a professional and personal level. Respect for each person's work and adapting to different communication style helped produce the best outcome as a team.
Focus on Specific Target
The project only lasted for 2 months, so I did not have enough time to address every single problem. Instead, I narrowed down the project scope by defining the high priority-low cost task through user research and investing all of my resources in that specific problem. This practice ensured I could make the most impact in a given timeframe.
Respect the System
In this project, it was easy to fall into the trap of making one-off changes and tweaks everywhere in the platform. Stepping back in these moments and realigning myself with the already existing design system guidelines was key towards producing a high quality product in the end.
Communicate Early
I was afraid to show the design to users when it was still work in progress. However, because of the time constraint, I had to move fast to gather user feedback. I showed the draft to people and asked for suggestions. Later on, I realized this practice helped me create a more user-centric design from the beginning.