UX CASE STUDY
CLIENT PROJECT
A single hub for all your insurance needs
Within a team of four, we redesigned our client Marble’s shopping feature on their website, helping policyholders compare and choose the right policies for them and their families. I rearranged key features, improved the UX copy, and ultimately, created a mental model that makes more sense.
Overview
Marble’s unique value proposition is the insurance wallet, a digital wallet where policyholders can upload and manage all of their insurance. However, Marble’s long-term goal of being a leader in the insurtech space means that will need to add tools for a complete insurance experience.
Problem space
Enter Marble’s new shopping feature, the main focus of this sprint. Marble’s shopping feature empowers and affords their members agency during the insurance shopping process. My team and I tested and redesigned Marble’s shopping feature to make sure shoppers were able to receive quotes, but also, make meaning out of them.
My role: Generalist UX designer
In a decentralized team of four (Maryna Filipava, Stephanie Lee, Lester Li, & Peggy Lu), we collaboratively kept our team on track and ahead of deadlines and redesigned the Marble shopping experience based on our research.
Methods
Analyzed existing research conducted by teams at Marble, competitive feature analysis, competitive task flows analysis, design workshop with stakeholders, created an email survey, user interviews, affinity map, user personas, user journeys, MUSHCOWO map, feature prioritization, sketching & design studio, prototyping, and moderated & unmoderated usability testing.
Tools
Figma, Figjam, G Suite, Maze, Keynote, Trello, Zoom, & Slack
Timeline
3-week sprint (May 2022)
Our challenge
Shopping for insurance
During the sprint, the tool Marble was focused on is shopping. With so much competition and other third-party companies that provide an avenue to shop for insurance, we needed to understand what the best practices were, and what others are offered that we might have missed. Additionally, as the current design stood, we needed to explore the concept of shopping, shopping carts, and quote comparisons in order to understand the mental models associated with shopping for insurance.
Because of our client's goals, we delivered solutions in two phases.
Our goals
Business goals
The shopping feature's implementation roadmap was dictated by a pressing deadline. That is, Marble would be raising funding within a few months from when we started our work. Thus, we aimed to provide multiple rounds of usability testing and iterations to their existing designs before they developed the feature.
Research & project goals
And with our insights from research, we then set out to redesign Marble's shopping feature based on what we heard from stakeholder interviews, user research, and competitive analyses.
Our user research sought to find out: (1) how Marble members would accept Marble's new shopping feature; (2) how they shop for insurance; (3) why they bought the insurances they currently have; and (4) uncover any areas of frustrations that they have may have experienced.
_
Phase 1
Test, iterate, and improve the existing designs provided to us by Marble
Our solution for phase 1
Our participants did not think to look for reminders on the shop page so we added a method to manage reminders from the home page
Adding an add-to-cart concept did not make the shopping cart feature understandable and potentially added more confusion
Various areas of UX copy could be updated to provide a clearer tone
Measuring success for phase 1
Participants' success rate for creating a reminder went from 30% to 100%!
We tested the intuitiveness of the shopping cart feature and concluded that there is a major disconnect between shopping carts and shopping for insurance. 0% made a shopping cart. So...
By changing shopping cart copy, we increased the average success rate from 50% to 100%!
_
Phase 2
Explore "shopping" based on our insights from usability testing, and business & user research
Our solution for phase 2
Present users with clear instructions and call-to-action copy on how to start shopping with Marble on the explore quotes page
Renamed Shop to Marketplace is more true to the meaning of Marble’s business model
Illustrate the user's quote with contextual and easily digestible information and diagrams
Measuring success for phase 2
We tested our redesign as well. Because our concept of shopping changed, we were no longer able to use the same questions as we did for usability testing. As a result, we don’t have many statistical results.
However, through Maze, we generated heat maps of where people were clicking. Each heat map shows that most testers clicked on where they were supposed to!
Here's what our client had to say about us
"Lester was quick to get to work and over the course of a four-week sprint, he and his team quickly generated a high-impact and deeply-researched set of recommendations. We've implemented these design improvements, both across UI and UX copy, and have seen an immediate improvement to our product and feature conversion."
Stuart Winchester, CEO & Founder at Marble
End of TLDR
The 3-week sprint focused on making Marble members' experience better. We carefully considered the users' and business needs and goals & designed a solution to a problem that was uncovered during our research.
_
My team and I were able to provide shoppers with more accessibility, familiarity, and relatability for a more enjoyable user experience.
Here's how we did it.
↓
The process
First, designing the right thing → Second, designing things right → Iterate & repeat
Our team approached this project as a two-phased project. Because Marble's goal to launch their shopping feature was a crucial component of the business, we aimed to deliver two final designs, one they can implement easily, and another as a redesign of the shopping feature.
Phase 1
Discover
Define
Develop
Distill
↓
Phase 2
Discover
Define
Develop
Deliver
First, we tested their existing designs, iterated on them, and provided actionable insights and design solutions that were tested and measured to be more successful. The goal of this was to provide data-driven results and designs for their existing shopping feature. Along the way, we learned a ton of things that helped us come up with a redesign.
The second phase of the project was to provide fresh eyes and a UX perspective for their shopping feature. We did this by conducting user research, business research, and competitive analyses. And in tandem with our learnings from usability testing, we redesigned Marble's shopping feature. Here's how we did what we did...
_
Process for phase 1
1 existing design.
2 rounds of iterations.
3 rounds of usability testing.
_
Process for phase 2
Research → insights.
Shopping carts → quote comparison.
Usability tests
One of the first things we did as a group was review 18 interview recordings and notes that the Marble team had previously conducted. Along with a target audience provided to us by our client, we came up with a problem statement that guided us through usability testing:
How might we engage price-conscious insurance shoppers to make informed decisions on the best policy for their needs by comparing rates, coverage, and customer satisfaction?
We had 3 rounds with a total of 35 participants of remotely moderated & unmoderated tests where we evaluated 3 features. Check out our process and results below.
Round 1: existing design
We tested the existing screens for a baseline for us to compare our changes. We wanted to see how the site was performing now and to see if and how we can improve it.
Shopping carts
Participants found shopping confusing and rated this task a 2.4 out of 5 on an easiness scale
Reminders
Managing reminders on the shop page scored a 30% average success rate
Expiring CTA
Shopping via the orange CTA scored a 90% average success rate
Click into the sections below for an in-depth explanation of our process.
Existing "home" screen
The insurance wallet, Marble's unique value proposition, lives on the home page. Here, members can upload their existing policies into the wallet. Insurance cards have two states, (1) active policies and (2) policies that are close to expiring.
Key takeaways
Participants looked for a way to manage reminders on the home page. When they couldn't a way to manage reminders, they looked under tools or profile. None of the participants looks for reminders under shop.
Shop on the navbar was not clear. Some participants missed it completely and others took a long time finding this link.
Many participants clicked on "+ Add new policy" when asked to shop for a new insurance policy or to add a new reminder.
The design change for insurance cards that are about to expire makes shopping clear, intuitive, and easy to find.
Existing "shop" screen
Marble members come to shop in order to create a shopping cart, create and manage reminders, and view a curated marketplace of insurance companies to get quotes from.
Key takeaways
None of the participants clicked on "+ New shopping cart".
Some participants clicked on "Get quote" which aligned with the business's goal.
Once landed on this page, participants knew how to create a new reminder relatively easily.
Round 2: 1st iteration
Upon review, we iterated on the existing designs. We created targeted design solutions that address issues that arose from usability tests.
Shopping carts
Still, 0 participants created a shopping cart before shopping for insurance
Reminders
Creating a reminder went from 30% to 100% average success rate
Add to cart
1 out of 10 participants clicked on the add to cart button
Click into the sections below for an in-depth explanation of our process.
1st iteration "home" screen
On the home page, we added a "+ Set a new reminder" CTA since many participants were looking for a way to manage reminders on the home page.
Key takeaways
We increased the average success rate from 30% to 100%!
We never addressed the fact that a lot of participants were trying to "+ Add new policy" as a way to shop for insurance.
We noticed that the insurance wallet is taking a lot of screen real estate...
1st iteration "shop" screen
As a way to make sense of the shopping cart model, we added the function to add companies into your shopping cart. Additionally, we changed the "+ New shopping cart" & "+ Add" new reminder to a CTA that matches with the other CTAs on the website.
We also recategorized the page by policy types. We created a page that modeled other eCommerce stores to test if shoppers would recognize and resonate more with more familiar diction.
Key takeaways
One person tried adding an insurance company to their shopping cart but that wasn't clear either.
We believe with the added icons and design changes, "Get quote" became more obvious to where one would shop for insurance. The imagery of a shopping cart icon creates an association between "Get quote" and shopping.
Still, not a single participant added a new shopping cart before shopping though.
1st iteration "shop > shop home" screen
Lastly, we created an additional page with all the companies that offered a type of policy (auto, home, renter, pet, & life). We did this to model other eCommerce shops. We also added a filter and sort by function to allow shoppers to quickly find what they are looking for.
Key takeaways
Not many participants clicked on this page but those who did said that it was a page that looked familiar to them.
Round 3: Final design for phase 1
And that brings us to the first finish line. We found data-driven results for changes that are immediately implementable upon delivery. In other words, we took actionable insights and created tangible designs and results.
Shopping carts
5 out of 10 participants created a shopping cart after changing the UX copy
Reminders
Participants click on the shopping banner at a higher rate than the shop tab in the navbar.
Add to cart
Changing the shopping cart to a bookmark made no difference
Click into the sections below for an in-depth explanation of our process.
Final design for phase 1 "home" screen
We changed "+ Add new policy" to "+ Add existing policy". Additionally, we added a shopping banner, similar to other eCommerce shops, to make shopping more visible.
Key takeaways
Changing the copy from "+ Add new policy" to "+ Add existing policy" resulted in a lot less confusion.
Participants clicked on the shopping banner more than the shop tab in the navbar.
Final design for phase 1 "shop" screen
The results from the previous usability tests led us to believe that the shopping cart mental model was not resonating with insurance shoppers. Therefore, we changed shopping carts to quote compares, and carts to bookmarks.
Key takeaways
"Create new quote search" had much greater success than "+ Add new shopping cart".
Using bookmarks instead of carts made no difference.
Final design for phase 1 "shop > shop home" screen
We modified this screen to match the shop all page. This screen was not tested.
_
Process for phase 1
1 existing design.
2 rounds of iterations.
3 rounds of usability testing.
_
Process for phase 2
Research → insights.
Shopping carts → quote comparison.
User research & interviews
Listening to Marble members' experiences
While running usability tests, we also found it important to validate the problem space through user research. Our team conducted interviews with 6 existing marble members. We asked questions that aimed to uncover our users' pain points, frustrations, and past experiences with purchasing insurance.
Affinity map time-lapse
We then synthesized our findings through affinity mapping and distilled insights from strong groupings and themes.
↑
Watch us shake our butts.
Key takeaways
Picking the right insurance policy is a lengthy process and many customers are unsure if the time spent researching correlates to the amount of money saved.
Insurance shoppers value convenient ways of shopping that save money and time.
Price point is one of the most deciding factors that insurance shoppers take into account when committing to a potential new policy.
Policyholders are unsure if they know enough about their coverage.
Customers don't want to be unnecessarily contacted by Marble or insurance carriers.
Personas + user journey
Designing for our target audiences
After we gathered our thematic insights, we created personas that reflected our target audiences. And with one of our newly crafted personas, we mapped out a user journey that shows what a potential Marble member would experience when purchasing home insurance for a new property. We did this to see if there are any areas of opportunity for us to design a better user experience for someone like Marilyn. I combined the persona and journey in the diagram below.
Competitive analysis & task flows
Understanding how we compare
To better understand our competitive landscape, we also mapped out the following task flows with Marble's competitors. We sought to identify industry standards, what works and what doesn't, and to see if there are any features Marble could be missing that users are expecting. We completed these tasks in May 2022, flows may have changed since you read this.
Our task was to shop for home insurance.
Our goal was to see prices.
Our metric to measure success was the average time on task.
Key takeaways
Marble was the only platform that required you to create an account before shopping
Policygenius had a seamless web experience
The Zebra made be input information twice
Get Jerry had a seamless iOS app experience
We couldn't figure out how to get past Gabi's screens
Design studios & workshops
Generate & ideate. Evaluate & sift. Rinse & repeat.
Design workshop
As an early effort to generate ideas, we hosted a design workshop with our clients. The goal of this workshop was to uncover any themes on what shopping means to us. We asked participants, what do you consider when shopping online?
We timeboxed our brainstorming and affinity mapping. This exercise was the early stage of questioning if the confusion from usability testing was rooted in the "shopping cart" model. Additionally, we started thinking about what value means to shoppers.
Revised Problem Statement
Many customers were unsure if the time they spent researching correlated to how satisfied they felt with what they shopped for. In the shoes of our persona, Marilyn needs a way to understand the difference between what various insurance companies are offering and to purchase a valuable and affordable policy.
How might we provide shoppers a way to compare insurance quotes between different companies so they can make informed decisions on the best policy for their needs?
Design studio
We held various design studios throughout our process. For the design studio that led to the MVP of our redesign, we used a MUSHCOWO map and feature prioritization matrix. We came up with features to keep from the existing website and added new features that would address the pain points and insights we uncovered during research.
We prioritized these new features & changes...
Sketching
As a way to generate and explore a lot of ideas and concepts quickly, we ran rapid-fire timeboxed design studios. Our team sketched, ideated, iterated, and debriefed on what works and what doesn't. We focused on addressing the insights we got from our research. In particular, we focused on...
Designing flows and screens with the user in mind
The concept of value
Making more sense of the shopping cart model
Composing clear UX copywriting
Contextualizing knowledge
Existing vs proposed screens
Through conducting business research, user research, usability testing, business analysis, hosting design exercises, and analyzing existing research, we designed screens that addressed issues we uncovered along the way.
Home
Managing reminders on 'shop' was not intuitive
The blue pseudo hero banner confused users
Users couldn't find 'shop' in the navbar easily
How to manage reminders is relocated to the home page
Blue banner removed
Shopping banner added
Shop → explore quotes
Learn to shop is small and not user friendly
Shopping carts were a confusing mental model
Lots of additional steps before getting quotes
Insurance cards did not have useful information for insurance shoppers
Changed UX copy to be more active and conversational
Changed shopping carts to quote compare
Reduced the number of steps in the flow and relocated filters to be the first thing a user does before shopping
Contextualized insurance cards with more insurance insider information from Marble
And as a result, utilized a sticky navbar and dropdown tabs since our screens would be much longer
Quote compare
Lived on a shopping cart
Data depicted is manually input information
Privacy email
Replaced shopping cart with quote compare
Added color differences and tabs such as "Good Deal" or "Lowest Price"
Conceptualized a Good Deal Rating - In other words, contextualized quote details using an algorithm of Marble's existing available data to show how your quote compares with others
Kept the privacy email
Introducing...
The redesign of Marble's shop feature!
We sought out to provide a new perspective on what the shopping experience could be. And we did just that. We're really excited and proud to show you how our flows work.
Shopping for a new policy
Adding a new reminder
Shopping for an expiring policy
Additional consideration...
Leveraging a browser plugin/extension
We also considered an AI-powered browser extension. The potential of this extension is massive. From auto-filling information, to automatically uploading quotes into the Marble system, browser extensions could change the way shoppers compare insurance quotes online.
What's next?
Next steps, recommendations, and reflections
Our recommendations were to optimize the existing design and to focus on the quote comparison feature. If we were contracted to continue our work, we would love to repeat this entire process - starting with understanding how users compare quotes. Additionally, we'd like to explore the browser extension to be able to automate the quote comparison feature.
When starting the project, our team was very overwhelmed with the sheer amount of information we had to catch up on. Combining the needs of the business with the needs of the users is always a challenging endeavor. Now that we've finished the 3-week sprint, I am overwhelmed with a different feeling. I am so grateful to have been part of this project and to have worked with some amazing people.
There seems to be a cloud that surrounds insurtech at the moment. It is a relatively new space with a ton of potential. I'm excited about the Marble's future. Special thanks to Marble, GA, and most importantly, my colleagues.