Project Details
Client: Kaus Insurance
Timeline: June 2019 - July 2019
Team: Self-directed with feedback from mentor and peers
Deliverables: Website prototype and branding
Role: UX Design, UI Design, Researcher
Tools: Sketch, Illustrator, Photoshop, Zeplin, InVision
Kaus is a large insurance company offering coverage for every type of situation exclusively on a B2B basis with no online presence. They want to expand their offering into the B2C market by creating a responsive e-commerce site to make their product available to individual consumers. They are looking to tap into a younger market and need a refresh of their branding to accompany the site.
Background
Problem
Kaus needs to establish an online presence to make their product line available directly to consumers through a responsive design that allows for insurance purchases of individual plans and packages.
Process
1
Research
I first needed to research the current insurance market to gain a better understanding of the customer as well as gather insight into who the competitors are and what their strategies are for the users’ online experience. I focused both on existing data for insurance customers as well as examining which demographics have the biggest impact on the insurance market and the market in general.
Goal:
To research the existing insurance market and its online customers
Deliverables:
Market Research | Competitive Analysis | User Interviews | Empathy Map | Persona | Storyboard
Market Research
I conducted market research to gather demographic and psychographic information about who purchases insurance as well as when they purchase it and how they interact with insurance companies online.
Online insurance shopping trends
People often buy insurance in tandem with a purchase or rental
24% of people find insurance online
40% of Millennials find insurance online
75% of customers spend less than 4 hours researching insurance
Demographics of insurance customers
49.4% of drivers are male / 50.6% are female
Non-hispanic whites have the highest rate of owning health insurance (87.4%)
36 is the average age for car upgrades
26 is the average age a person loses their parents’ health insurance coverage in the U.S.
Millennials’ contribution to the insurance market
By 2025, Millennials will account for 75% of the global market
81% of Millennials in the U.S. own insurance
80% of Millennials own cars (appx. the same amount per capita as Baby Boomers)
1/3 of potential life insurance customers are Millennials
Competitive Analysis
Next, I conducted competitive analysis of existing insurance companies in order to compare and contrast their strategies. Primary competitors included companies that cater to a younger market and those that focus on more advanced technology to enhance the user experience.
User Interviews
With the data gathered in secondary research, I conducted primary research in the form of 1-on-1 interviews with people matching the demographics of key insurance customers. This would help me understand the experiences of real people and establish patterns of behavior by asking open ended questions to solicit stories from the participants.
5 interview participants
3 females / 2 males
Age range from 27 - 37 years
All currently own insurance
“You don’t need insurance until you do.”
2
Define
After collecting data about the market and competitors, I next needed to define the target user and gain insight into their behavior.
Goal:
Define who the target user is and gain an understanding of their needs, goals and frustrations
Deliverables:
Empathy Map | Persona | Storyboard
Empathy Map
By recording all comments and behaviors made during the interviews, I was able to group the observations into patterns of behavior which illustrated user insights and needs.
Insights:
Users think comparing quotes is too time-consuming
Users feel strongly about trusting insurance companies
Users chose various contact methods when communicating with insurance providers
Users do not know the details of their insurance plans
Needs:
Users need to know the quote process is fast
Users need companies to illustrate their trustworthiness
Users need easy contact with their insurance providers
Users need explanation of plan details
Persona
By synthesizing the data collected in the interviews and the patterns that emerged, I created a persona that represented the archetypal user. This persona would help keep the design user-focused by defining who would be using the product.
Storyboard
Using one of the main frustrations identified in the interviews, I created a storyboard to illustrate how the Kaus site will have a real impact on someone’s life. In this scenario, the frustration was how time-consuming it is to receive an insurance quote online and how Kaus addresses the problem.
3
Ideate
Next, I needed to generate a wide range of ideas that could be implemented in later stages in an effort to move from understanding and defining problems to coming up with solutions for those needs
Goal:
Establish information architecture and flows
Deliverables:
Goals Venn Diagram | Feature Roadmap | Site Map | Task Flow | User Flow
Goals Venn Diagram
I created a Venn diagram of the needs of the business, the needs of the user and any technological considerations to be aware of. This would ensure that IA and flow considerations would be consistent with the business goals as well as the goals of the user.
Features Roadmap
With the needs of the business and the needs of the user in mind, I created a feature roadmap to establish the features to be included in the design. They were organized by importance to guide the priority of their development.
Site Map
With goals defined and features established, I created a site map showing all pages and subpages that would be needed for the design in order to better understand what would be included and the relationships between screens.
Task Flow
One of the primary goals of the Kaus site is to provide insurance quotes efficiently and quickly. I created the task flow to illustrate the flow of a user accomplishing this task. Then, to further explore the various paths a user may take to accomplish the same goal, I created a user flow which laid out all the pages that would be needed to achieve the goal given the numerous paths a user could take.
User Flow
To better understand the non-linear path a user may take and the decisions they make along the way in a given scenario, I created a user flow diagram.
4
Design
With the user and their goals defined as well as an understanding of how they would complete particular tasks and what screens that would necessitate, I next strategized UI elements, visual hierarchy and brand aesthetics.
Goal:
Design the UI and branding for the Kaus site
Deliverables:
Sketches | Mid-Fidelity Wireframes | Branding
Wireframe Sketches
I began by sketching low-fidelity wireframes of the Kaus homepage. Trying different layouts based on existing design patterns I was able to experiment with which was most conducive to the user while meeting the needs of the business.
Mid-Fidelity Wireframes
Next, I created responsive mid-fidelity wireframes in Sketch in order to establish a more clear layout and visual hierarchy. This would give me a foundation upon which I would be able to add visual elements and branding.
Branding
In order to move into high-fidelity wireframes, I first needed to create branding guidelines to ensure cohesion and consistency in the visual appearance of the site. The branding was made to convey a trustworthy, yet modern aesthetic that had a fresh perspective, but was still rooted in the traditional professional sensibility of existing insurance providers.
5
Prototype
In order to test the usability of site and gather information for further iterations, high-fidelity wireframes and a functioning prototype needed to be created and tested.
Goal:
To create a clickable prototype of the Kaus site and gain feedback on usability
Deliverables:
High-fidelity wireframes, Prototype, usability testing
High-Fidelity Wireframes and Prototype
I incorporated the design elements established in the brand style tile into the existing wireframes to create high-fidelity versions that were then brought into InVision to create a prototype. The prototype included all screens that would be necessary to complete the tasks laid out in the usability testing.
Usability Testing
Objectives:
1) Test how effectively users can navigate the site
2) Test how users get an insurance quote and if they can complete the task without difficulty
3) Test how users find a local agent in their area
4) Test how users discover if Kaus offers comprehensive auto insurance
5) Identify any areas of hesitation, confusion or difficulty
Results:
Conducting the user test with 6 participants provided valuable information about the usability of the site that would be synthesized and then incorporated into further iterations.
6
Iterate
With the data collected in the usability tests, the next step was to synthesize the information into actionable recommendations for updates and to iterate further
Goal: To identify priority improvements and iterate upon the design accordingly
Deliverables: Affinity map, revised wireframes, UI Kit
Affinity Map
To synthesize the information gathered in the usability testing, I created an affinity map by organizing similar behaviors and comments that focused on shared pain points and frustrations into patterns to establish important insights about the usability of the site. These insights informed the priority recommendations for updates that would need to be implemented.
View the full affinity map here
Revised Wireframes and Prototype
Based on the insights and recommendations established in the affinity map, I further iterated on the design, making changes that were based on the biggest frustrations discovered during usability testing. Updates were made to some navigational elements, building out the search feature functionality and clarifying the purpose of the CTA button on the quote results page.
UI Kit
I collected all UI elements and patterns from the high-fidelity wireframes and created a UI kit to house all integral components. This will ensure consistency and reference for future design. I then prepared handoff deliverables in Zeplin in order to create a redline that can be shared with developers.
Reflection
Next Steps
Building an insurance e-commerce site for Kaus required learning about an expansive industry that has many existing design patterns, but is going through an evolution to cater to a younger audience with an increased dependency on technology. I learned valuable lessons and best practices in usability testing to iterate based on real life use as well as the importance of inclusion of established design patterns to provide a familiar and usable experience.
Prototype the remainder of the pages that need to be created to test the full functionality of the site
Continue to identify areas of improvement and user frustration through continued usability testing
Design the responsive UI for the remainder of the site
Update design deliverables for developer handoff