Kaus Insurance

Insurance for the 21st century and beyond

 

Kaus Insurance


Responsive Web Design for a Fictional Insurance Company

 
 
 

01 - The Challenge

The insurance industry makes up almost 10% of the total GDP in the United States. Combined with its 300+ year history, it’s no wonder that the sector is viewed as one of the most established, traditional, and -- to incumbents’ despair and entrepreneurs’ delight -- outdated. Accordingly, Insurtech startups have successfully capitalized on the tension between stable growth in demand and increasing dissatisfaction of consumers in the last decades.

 
 

The client

Kaus Insurance is a 30+ year veteran in the B2B insurance sector ready to enter the B2C market to target the millennial sector. They are aware of shifting consumer demands, particularly within their new customer segment. Kaus plans to offer B2C home insurance to begin, then add more products in the future.

Their concern is that their image, combined with a lack of familiarity with the younger consumer segment, would compromise their B2C launch.

Solution

  • Update branding: design a new modern and fresh logo for the company that reflects the brand’s key message

  • Design a responsive B2C website  

  • Strong focus on user experience so it’s aligned with millennial expectations

My role

UX Designer (research, visual design and branding, interaction design, usability testing)

Our timeline

4 weeks (80 hours)

 

 

02 - Research 

Before tackling any design problem, it’s crucial to first understand the user for which the design is being created. Conducting research gives context to users’ behaviors and helps reveal their core needs, motivations, frustrations, and emotions. The research phase focused on answering the following questions: 

  • What does the current insurance landscape look like and what is missing and/or not working? 

  • What are the most common friction points when selecting and purchasing insurance? 

  • What factors influence purchase? 

 
 

Secondary research

In order to gain a high-level understanding of the context and environment in which our users operate, I began with secondary research to uncover recent shifts and trends in the insurance industry. This information helped frame the questions for the primary research. 

Overall, secondary research uncovered four main findings. 

 
 
 
 

Primary research

Secondary research reveals a general, big-picture view of the insurance sector.  With primary research, the focus is more granular and inspects users’ behaviors. This process helps me to connect with users and understand their actions from their point of view. 

 
 

USER INTERVIEWS

Four 20~30 minute remote interviews were conducted with participants regarding their experience purchasing insurance. Questions centered around three topics: the context of their search, how they performed, and their feelings throughout the process and now.

Click here to read full user interview summary

 
 

Empathy map

Using observations, quotes, and other qualitative data collected from the interview, I put together an empathy map to organize all the data collected and start seeing patterns.

 
 

Click here to see larger image

 
 

Insight 1: protection and safety requires trust.

Trust can be established in different ways including direct guidance from an agent and through transparent and clear processes. 

Insight 2: price isn’t everything

Best price for coverage was the most commonly cited selection factor but not the only, nor the most overriding, criteria. People said they would pay more if it meant more assurance for their safety and protection and less time required for tasks in the future.

Insight 3: clarity and transparency allow users to own the process.

Since clarity helps people understand the implications of policies, they are able to make confident decisions during and after the insurance purchase process.

Insight 4: an efficient process allows participants to focus on other important aspects of their lives.

Participants valued social connections, thus they wanted efficiency [in insurance processes] so they can be with family and friends.

 
 

Persona

With a better understanding of the context and characteristics of our users, I created a persona, Anjali, to synthesize and bring to life Kaus’s target user segment. While fictional, she embodies characteristics we observed, and hence from this point on, I designed with Anjali in mind. 

Anjali is a busy 34-year-old working at a startup and would like to buy her first home on a tight timeline.

 
 

Click here to see full persona

 

 

03 - Strategy

 
 

Project goals

User goals are of the utmost importance, however, the desirability of the product must be balanced with business goals and technical feasibility. By considering these three factors in a Venn diagram, I was able to identify the requirements for our site that are aligned with both user and Kaus’s goals and acknowledging technical constraints.

 
 
 
 

Feature competitive analysis

Before listing features to include, a second round of competitive analysis was conducted to specifically examine the features that other companies implemented. Keeping in mind Jakob’s law, and supported by research findings that users are likely to shop around, I wanted to ensure that Kaus included features that users come to expect from insurance company websites. 

The following features were found on all or most company websites:

 
 
  • File a claim

  • Track a claim

  • Generate a quote

  • Tooltip available for form fill

  • Readily accessible support

  • Mobile responsive

  • Locate agent

  • Search

 
 

Feature roadmap

Having identified user and stakeholder goals and gained an understanding of what competitors offered, I created a list of features. Each feature was then prioritized according to the difficulty of implementation and the size of the impact on the overall user experience. Core values were assigned to each feature to ensure that any feature listed on the roadmap created value for the user. This helped to keep me connected to our persona throughout the subsequent design steps. 

 
 
 
 
 

Card sort 

The pieces for the site were to be organized, however it was still important to understand how target users organize information about insurance in their minds. I conducted a card sort to reveal this information and saw that effectively, they divide insurance into two larger categories: 1) what users have that could be insured, and 2) the value the company provides

 
 
Click to open a bigger image

Click to open a bigger image

 
 
 

Site map

A site map was built to organize and distribute pages in a way that aligned with users’ mental models of insurance websites and the synthesized goals. A flat navigation was chosen to optimize efficient browsing while respecting our findings from card sort. Accordingly, the values that Kaus provides are located at the first level.

 
 

Click here to see larger image

 

 

04 - Design

 
 

Task flow

After defining two key tasks that users would want to complete on the site, the steps that they would take to accomplish these tasks were mapped out in a task flow. The task flow helps identify the key pages and features necessary for our site.

 
 
Copy of V2 Task flow_ Kaus@2x.png

Click here to see larger image

 
 

User flow

I then created a user flow by jumping in the user’s shoes and mapping out different journeys that the user can take to accomplish their goals. By documenting various entry and exit points, key decision points, and the pages on which they will make those decisions, I can ensure fluid navigation and that the user will not encounter any deadends. 

 
 

Wireframe sketches

Using the UI Requirements document, where the pages, UI elements, and features necessary for the MVP was listed, I created sketches of the homepage. By ideating different layouts, I was able to visualize how the homepage could look in a time and cost-effective manner. 

 
 

Click here to see larger image

 
 

mid-fidelity wireframes

Using the best ideas generated from sketches, a mid-fidelity wireframes was created in Figma to gain a better understanding of how pieces of content, features, and pages will be distributed. The focus remained high-level at this stage, ensuring layout, functionality, and visual hierarchy were aligned with the predefined product goals.

 
 
 
 

Branding

Before adding further detail to the wireframes, the focus was shifted to branding starting with a brainstorm of brand attributes that resonated with Kaus’s key message.

 
 

MOOD BOARD

I set up a Pinterest mood board and collected visual assets for each branding element to ensure that stakeholders were aligned on the overall visual direction. 

Brand elements and attributes: 

  • Typography: clear, efficient, modern, friendly

  • Logo: clear, modern, friendly 

  • Color: friendly, clear, honest

 
 

LOGO

The logo generation process began with sketches of concepts that represented the logo attributes: clear, modern, and friendly. The best options were digitized and the final logo was selected for its scalability and embodiment of the persona’s core needs -- modern.

 
 
 
 

STYLE TILE

The style tile defines Kaus’s specific visual direction and establishes key branding elements. I chose colors that evoked friendliness and balanced the logo’s modern style. The main focus of typography was high readability across various screen sizes, so I selected the font pair Poppins (header) and Roboto (body). 

 
 

Click here to open full style tile

 
 

UI KIT

A centralized document is fundamental in achieving an efficient and consistent design process. To accomplish this, a UI kit was created which housed the reusable design elements such as buttons and fields. A living, evolving document, the UI kit will be updated as I iterate on our designs.

 
 

PROTOTYPE

I brought the designs to life by injecting branding elements into the wireframes and adding interactions and connections in Figma. This prototype will be used to test and validate the solution ideas to ensure designs are usable and valuable to the users. 

 
 
 

 

05 - Test

 
 

Usability test

The prototype was put to test as I observed how users interacted with the design. Before putting the prototype in front of users, my intention for and expectations from the test were outlined in a testing plan:

OBJECTIVES

  • Observe methods users use to accomplish tasks 

  • Identify usability issues, obstacles, and any other pain points in the user experience 

  • Discover whether users can successfully complete tasks 

  • Uncover opportunities for improvement 

METHOD

  • Think aloud testing: participants will be asked to continuously think out loud while they perform tasks.

TASKS

  1. As a dog-owner and first-time homebuyer living in a high flood-risk area with a dog, find out how much you’ll pay per month to insure your home on 811 Greenwich Island, San Mateo (CA). 

  2. You’ve decided in the last few days that you’d like to adjust your plan details 1) to cover your expensive photography equipment and 2) increase the deductible to $5,000. Find out what the adjusted monthly price would be under these new parameters. 

ASSUMPTIONS

  • Expected completion rate: I expected all participants to be able to complete both tasks (100% completion rate) due to age groups’ familiarity with online forms. 

  • Expected error-free rate: I expected a 90% error-free rate with 1% deducted from each error from participants.  

 
 

Affinity mapping

A total of seven usability tests were conducted with participants who matched the persona’s key demographic criterion. The transcripts, completion rate, and error-free rates were documented, noting down actions participants performed and reactions they had when interacting with the prototype. 

The resulting quotes, observations, and other notes from the usability tests were synthesized into an affinity map.

 
 

Click here to see larger image

This helped reveal patterns in participants’ behaviors and emotions, leading to 3 concrete insights, corresponding design recommendations, and priority level for each recommendation:

Pattern 1

  • Some participants were hesitant to give away personal information 

  • Some participants questioned why certain questions were being asked and what effect it had

  • Most participants didn’t know whether they created an account or not 

Insight

Participants felt frustrated from the lack of context into why Kaus requires or asks certain information. 

Recommendation

Add context to questions: clarify what we’ll do with contact info on step 6, clarify implications of conditions, discounts, add-ons on steps 3-5, and include message on step 6 that says the quote is saved. 

Pattern 2

  • Most participants didn’t see See saved quote button on homepage during (task 2) 

  • Most participants were confused about whether they created an account (thus had saved a quote) or not 

Insight

Users associate saved quote with an account and thus didn’t search for the See saved quote under the address field. 

Recommendation

Place the See saved quote button closer to Account button in the header navigation. 

Pattern 3 

  • Most participants went to Personal Property dropdown to add increased personal property coverage 

  • Some participants didn’t know to which category valuable items would belong 

Insight

Most participants thought that adding on increased personal property coverage could be done from Coverage: Personal Property. They expected add-ons to be grouped with similar category.

Recommendation

Add-on toggles should be placed in the same card as corresponding coverage items. For instance, add-on for increased personal property coverage should appear below the standard personal property coverage dropdown. 

 
 
 

Final revisions

 

Final prototype

The design recommendations identified from usability test insights were implemented, along with other improvements gathered from feedback. 

 
 
 

 

06 - Final thoughts

 
 

With the final revisions, I was able to accomplish the project goals and the designs are ready for next steps. If I were to re-do this project, I would do the following differently: 

  • Define assumptions early on in the design process. Explicitly stating my assumptions would help generate a concrete hypothesis to validate, which would refine the research and define phase. 

  • Conduct at least five user interviews to gain a more solid understanding of behaviors and emotions.

  • Timeline for usability tests and interviews: similar to my persona, those who fit the target demographic criterion are busy. Recruiting as early as possible and confirming time slots is crucial to meet a tight deadline.

 
 

Next steps

The designs are ready for handoff. While the developer was consulted during key steps in the design process and had access to the Figma file, I will communicate that the designs are complete for this iteration and schedule a follow-up meeting to review important redlines and answer any doubts they may have. 

 

 

See more projects

 
 

gather

Designing an MVP for an app that helps people locate uncommon food items.

Edx

Adding a feature to edX, an online learning platform offering university-level courses.