In this spec project, I created a responsive website for a long-standing insurance company looking to pivot to the B2C market.
As the sole designer on this project, I executed the design process end-to-end, with a high-fidelity prototype as the final outcome.
For a more in-depth look at my process, continue scrolling to the full case study.
User Research, UX/UI Design, Branding, Prototyping, Usability Testing
User Research, UX/UI Design, Branding, Prototyping, Usability Testing
The goal for this project was for Kaus to transition into the B2C market not only as an insurance company users need, but also trust.
The high-level goals were to:
• Design a responsive e-commerce website that’s both easy and delightful to use
• Implement a fresh, modern, and trustworthy rebrand
With so many complex product offerings, designing an effective Information Architecture that allowed for easy exploration, discovery, and wayfinding was the first major UX hurdle.
Another consideration was breaking the strong (and most often negative) associacions users have with insurance companies. The digital experience needed to feel honest, safe, and relatable.
Research + Planning
Optimizing a product which users hold such a strong opinion of demanded meticulous attention to the research phase of this project. In order to design an exceptional user experience on a high level, I needed to get to the core pain points users had surrounding insurance at the fundamental level.
My first course of action was to do competitive research and analysis across the insurance landscape. I studied both direct and indirect competitors closely to identify gaps in the market and opportunities for Kaus to differentiate themselves from their competitors.
I also researched market and user trends, and uncovered some interesting statistics on millennial insurance habits and sentiment that would help guide my work throughout this redesign.
Key Insights from Landscape Analysis
Most competitors don’t offer a comprehensive “About Us” section
Very few competitors offer live chat or multiple streams of communication
Many sites force quote form input before you can access any other information
16% of millennials are uninsured, and 70% would be more likely to purchase insurance if they better understood the offerings
I recruited participants to interview within Kaus’ target demographic to dig deeper into their experience with insurance. My high-level goals were to uncover user sentiment surrounding insurance as a whole, and hear more about their personal experineces navigating the intricacies of the insurance ecosystem. Key insights from these interviews included:
• The desire for personalization. From the long, automated, and disjointed process to reach a customer service agent to the quality of support you receive when filing a claim, users aren’t feeling valued in the system.
• Inefficient and daunting communication channels. In one case, a participant mentioned that easy, reliable access to an agent would be a bigger priority than an established brand name.
• The need for clarity. In general, users don’t have a good idea of how the insurance process works on both a structural or individual level. Confusing verbiage surrounding the entire user experience, non-transparent policy descriptions, and dense benefits information all contributed to users feeling frustrated, confused, and in a vulnerable position when they actually needed coverage.
From my interviews, I created two personas within Kaus’ target demogrphic that served as the basis of who I designed for. These were users who:
• Regard insurance as a necessary evil, holding policies despite not understanding or feeling valued by the industry, and
• Are currently uninsured, primarily because they can’t find what they need amidst too many non-customizable options with unclear coverage and benefits descriptions.
One of the top priorities for both the business and user was to have a clear and intuitive information architecture. To better understand how users naturally expect certain insurance policies to be categorized, I recruited participants for a virtual card sorting test via OptimalSort. The Similarity Matrix below shows potential groupings and strong pairings according to how users card sorted.
I first took pen to paper and sketched out three potential landing pages, along with annotations to frame the key purpose of each section; even when the designs inevitably changed as I moved onto Figma, these annotations helped remind me of the intented function behind the form.
I decided to focus my designs on the “get a quote” user flow, bypassing the traditional checkout process for a more thorough interaction between the user and their chosen health insurance policy, including policy detail screens and a “save quote” feature. User interviews indicated that users often felt lost and overwhelmed the insurance purchase flow, so I looked to design for transparency and deliberation.
Before diving into UI Design, I brought my sketches to life with wireframes. I took bits and pieces of each of my sketches until I had a strong foundation to start building out the responsive screens.
Before even begining UI ideation, I looked beyond these low-fidelity interfaces to identified ways in which Visual Design could translate Kaus’ modern, friendly brand to anyone who visited their page.
(below the fold)
Branding + UI Design
After creating a moodboard and analyzing both established players as well as industry disrupters in the insurance landscape, I began designing the UI elements that would serve as the framework for all of my designs, namely, Kaus’s logo and Style Guide.
The logo needed to encapsulate Kaus’s modern, unpretentious brand identity while also maintaining a distant sense of formality. I soon learned that this would be an exercise of balance, as my first logo iteration veered a little too informal for a brand of this nature.
My final logo design utilized a playful yet professional serif paired with a scalable geometric brandmark, personifying Kaus’s brand in harmony.
Moodboard & Style Guide
Before committing to any visual design, I first created a moodboard to gather inspiration on typography, imagery, color, and layout.
I noticed that many modern brands used bold display sans serifs in their headings, but I wanted to convey Kaus’ authority as a longstanding brand. I settled on Recolleta, a soft, smooth serif, paired with Sharp Sans, a geometric sans serif to personify this balance.
Similarly, the color palette needed to be warm, modern, and trustworthy while not feeling too casual or dated. I created a baseline palette to work with, knowing that this style guide would be iterated as I went through the design process.
As the target demographic for Kaus' redesign (millennials) make most of their purchases on mobile (70%, per my landscape analysis research), it was important for Kaus's quote retrieval flow to be accessible and consistent across devices.
Once I designed the MVP, I compiled a more robust UI Kit incuding interaction states and critical UI elements. The main evolution from the Style Guide was the color palette, which I tweaked until I found a more harmoneous combination.
Due to ongoing COVID-19 restrictions, I conducted my usability testing remotely over Zoom, asking participants to share their screens and think aloud while being recorded going through the prototype. I asked users to place themselves in the following scenario:
“I want you to imagine that you currently have no health insurance and cannot get it through your work or parents’ plan. You land on this site, and you’re trying to get a health insurance quote and save the quote results for a later time when you’re ready to purchase a plan. How would you go about this?”
I used Figma’s native prototyping feature to create a high fidelity prototype showcasing the “Get a Quote” user flow, complete with a “Save Quote” function. Initial Prototype
Usability Testing Insights
After conducting my usability tests, I created an affinity map with key insights, behaviors, and findings during the tests. 100% of participants completed the task in under 5 minutes, and all participants commented on the design’s approachability and friendliness, complimenting the color pallette, concise presentation of information, and typography. The key insights derrived from user testing were:
• Users wanted to explore more before entering quote wizard
• Recommended Plans page lacked sufficient affordance and presented too many options at once
• By the time users decided they wanted to save their quote to return to later, they would have scrolled to the bottom of the screen, so moving the CTA further down the page would facilitate this flow
Based on observing users interacting with the protoype and feedback I received, I prioritized three key changes to smooth out interactions between screens:
• Add a “See Details” button to each policy to facilitate affordance
• Keep the number of policy offerings concise - only incude most differentiated plans
• Account creation only necessary when user wishes to save a quote for later use, not to retrieve a quote in the first place
To view the final prototype after these post-usability test changes were made, click the button below:
Working on a product aiming to break industry standards with high level of stigma was a challenging undertaking. As the sole designer on this project, I executed the design process end-to-end, from research to implementation, with input and support from my mentor. This forced me to be self-sufficient and agile, relying on insights from users to guide me through further iterations.
I learned the value of digging deep into users’ frustrations and championing users’ needs in an industry where it often falls second to the business goals, how daunting and vulnerable the process of purchasing insurance can be, and the impact user-centered design can have in alleviating some of those pain points.
Next steps in this project would be to build out the Insurance Information Center to further flatten the gulf of information between users and the intricacies of insurance. Research showed that many users don’t even know how insurance works, so continuing to bring transparency to the forefront will solve many immediate user needs and establish trust at the same time - a win/win.
In the meantime, I appreciated the positive feedback I received on this project - while it was speculative, the prospect of an insurance company putting their users first deeply resonated with people, and hope to one day see such a company come to life.