Kara
Helping young people easily find and buy the right insurance online.
Background
This was my first project ever! The topic was given by DesignLab to teach the basics of UX & UI design. Kara is a fictional insurance company that has been in business for over thirty years. They have been working through regional agents, selling the policies to them instead of directly to customers. They haven’t invested in their online presence at all and they now realize it’s time to catch up.
Problem
In order to survive as a business and retain their customer base, Kara now wants to sell their policies online, directly to customers to reach more young people.
Solution
To address this problem I designed a responsive website to help young people easily find and buy the right insurance policy online. I also refreshed the brand with a new logo and UI kit.
My role
End-to-end UX & UI designer (during DesignLab UX Academy)
Timeline & tools
5 week (40 hrs per week) in 2021. Built with Figma and Miro.
Process
Based on the Design Thinking approach, these are the phases I went through in the process of designing Kara’s website and brand:
Empathize → Define → Ideate & Design → Test & Improve → 🥳
01. Empathize
Research
To understand the needs of young people that buy insurance online I did three 1-on-1 interviews with people aged 26- 32 that all recently bought insurance online. I also did a competitor analysis to learn from their strengths but also to differentiate Kara from these competitors.
Interview findings
Competitors
The main strengths I discovered from competitors that focus on a similar demographic are:
A very clean and simple design so you’re not overwhelmed with information
You can, or have to go through a survey to get a quote
Key takeaways
After creating an empathy map to further analyze the interview data, I found these main patterns that would determine my future design decisions:
Users don’t want a highly customized, individualized insurance plan but they do want a personalized experience when picking insurance, to feel confident that plan X is best for their personal situation.
All users start online with searching and maybe even comparing plans. Then they take a break and ask/look for advice elsewhere (friends, family, experts) to validate their choice.
Too much information and too many options can make the user feel overwhelmed and anxious (this discovery led me to read a little more about the phenomenon of choice overload, also known as ‘Overchoice' and the ‘Fear of a better option’).
02. Define
User persona
I found out that here is quite a bit of fear around choosing insurance online and a desire to feel confident they’re doing the right thing. “Choosing felt like a leap of faith” and “customizing insurance makes me anxious because of all the decisions I have to make” were some strong feelings that my interviewees shared with me. This all fed into the persona I created for this project.
Site map
I decided to keep it simple and reduce the amount of information on the homepage. I mainly wanted to focus on the survey that would help people get to an insurance plan that fits their personal situation. This would make people feel less overwhelmed with choices and hopefully make them more confident that the plan is right for them.
Task & user flows
These flows visualize all the different steps the user would take to buy liability insurance on Kara’s website. Based on these flows, I made a list of UI requirements per page that formed the basis for making the wireframes.
Task flow
User flow (click to enlarge)
03. Design
Responsive wireframes
I made responsive wireframes for the homepage and the personal quote page. The most challenging one was the wireframe for the personal quote, it has gone through many iterations to get where it is now. Below you see a selection of wireframes (there are 6 screens total).
The evolution of the personal quote page.
Logo & UI kit
Because I wanted the users to feel less anxious while buying insurance and provide a personalized experience, the logo and brand color had to provoke a personal, caring, calm and confident feeling. To create a reassuring and balanced color palette, I used a photo of a forest where the sun shines through.
UI design applied
This is a selection of high fidelity UI design frames that I made to create a prototype. It focuses on the main flow of finding and buying liability insurance on Kara’s website. To see what iterations were made after testing, check out the final prototype!
04. Test & Improve
Usability testing
To test my prototype I set up separate Zoom calls with three participants aged 26 - 35. I asked them to share their screen and talk out loud while performing certain tasks in the Figma prototype that I had sent them.
Results
I prioritized the feedback in the ‘change’ category and those are the changes I made to the prototype. I was very happy to hear that my intentions for the UX & UI design were picked up by the participants. The words used to describe the prototype are: Clean, trustworthy, simple, personal, flexible approach, sense of calm, professionalism, happy, young people, disruptor category.
IBM feedback grid
Improvements
I made seven changes to the prototype based on the test findings. I’ll discuss the three changes that had the biggest impact:
1. Re-design of ‘your price’ item on quote page (see image on the right).
This change made the item look less like an add and it functions as a policy overview item that appears on every page (from the quote page on).
2. Reduced the size of UI elements
I made sure everything on the survey pages fits on a MacBook size screen. I used a larger screen to design the pages so that’s a great learning moment to make sure to test the design on different size screens.
3. Swapped the ‘payment info’ section with the ‘personal information’ section
I copied the initial order form a competitor but it’s not very common so it caused confusion.
Prototype
This is the final prototype of Kara’s responsive website that includes the priority revisions I made.
Next steps
For this project I only went through one round of testing and and I could only make a limited amount of revisions. The next step would be to make more revisions based on the test findings and do another round of testing. Some important features on the homepage can be built out, like the section ‘our insurance explained’ and the ‘FAQ’ section. These features would help the user understand the product and the process even better.
Reflection
When I was putting together this case study I realized how many steps this process has and how they make sure that you’re making something that works for your users. Every single part of the product has been thought out, no pixel sits somewhere without a reason. I also realize how important the first research phase is, it’s what everything is based on. I truly enjoyed interviewing people and running the usability tests. Finding out that your product works well for your user is extremely satisfying together with the knowledge that there is always room for improvement.