Design and branding of an e-commerce insurance website that allows for getting a quote and purchasing insurance packages online.
See Prototype
Role: UX, Interaction Design | Branding
Duration: 2 months
Background
Kaus is a large insurance company that has been in business for 30+ years. They currently only sell insurance policies through regional agents, but are losing market share as people are using the Internet to do research and buy online.
Solution
Kaus is looking to take back market share by tapping into the younger, and digitally-inclined generation. A responsive e-commerce website was built to allow people to buy insurance directly online. The goal is to make the insurance buying process easier for everyone. Kaus' brand was also refreshed to appear more modern and accessible.
For the project, I did a lot of research to learn more about the insurance industry overall, and interviewed those who have purchased insurance recently to learn more about their challenges when it came to buying insurance.
Final Output
I built out mid-fidelity wireframes to show the flow for a user to get a quote and buy an insurance package.
‘How Does Kaus Work’ is front and centre on the homepage for those who may not understand how the insurance process works. The product page has lots of white space and separation between the information so it's easy to understand.
There is clear progression and next steps shown during the quote and purchase flow for users to understand the steps. Additional information and details can be found for each step and customizable item so people can clearly understand how to buy insurance through Kaus, and what their insurance package contains.
The Privacy Policy and Security Certificate are also shown throughout the ‘Get a Quote’ form to highlight trustworthiness, giving users a sense of ease that their information will be secure.
Finally, a phone number and live chat are shown across all pages, at any step of the buying cycle to encourage the user to contact someone whenever they need to.
I also created responsive UI mockups to highlight the new logo, and brand colours through a clean & modern design.
Full Design Process
Secondary Research
I started without knowing much about the insurance industry - and first wanted to learn more about how everything worked. I conducted secondary research to understand the industry (who do you get a quote for a product, how do you buy a package?), who the competitors are (how do they market themselves and sell their products?), and the current trends.
In the Insurance industry in Canada, there are many companies without much differentiation, but there were also not a lot of big players. Most of the big companies offered more insurance products, but their sites were not easy to navigate through, and the information was confusing to understand. There was only one company provided a way for someone to buy insurance online, and while their site was very user-friendly, it lacked product options.
There was opportunity for Kaus to break into the online insurance market, by offering a comprehensive list of insurance products, and more options online compared to its competitors.
Interviewing
I aimed to understand the process, motivations, and pain-points behind when people last purchased insurance. This would allow me to find the gap between what exists today and what can be created that would improve the insurance purchasing experience. ‘What did they do? Why did they purchase insurance? How did they feel during their insurance buying process?’
I interviewed 7 participants who live in Canada, and between 25 - 35 years old. They were university or college-educated and digitally inclined and have all bought home or car insurance within the past 3 years.
Persona & Empathy Map
I created the persona, Christina using the research I gathered from my interviews in order to understand the behaviour, needs, wants, and pain-points of the target market. Christina is a young professional who buys insurance because it’s mandatory but not something she thinks about a lot. She wants to understand insurance, and wants a quick and easy way to get a quote from a trustworthy provider. However, there is a lot of information available online, and not all of it is easy to understand.
Design
Design Goals
The goal of redesigning the website is for Kaus to differentiate itself from other competitors through a modern website, with easy-to-understand content and many product options.
The website should be accessible, and have content structured in a way that is easy-to-understand. The content and flow of the website should minimize confusion, highlight trustworthiness and be clean/modern.
Ideation
I created low-fidelity sketches were created to brainstorm different layouts and quickly visualize how the ‘Get a Quote’ and purchasing flow would work on mobile. It was challenging balancing a large amount of information on a small screen, and multiple iterations of form layouts were created.
In order to condense information, the homepage iteration on the left was chosen so users would not have to scroll endlessly to see the different categories of insurance products.
Similarly, the progress bar on the left was ultimately chosen as well. In the final UI, words are only shown for the step the user is at.
Cards are also used in some parts of the form, to replace long form fields. This was done to compress information and make the forms seem shorter and easier to fill out.
Testing & Iteration
Testing Goals
I used a mid-fidelity prototype to test if users could get a quote and purchase homeowners insurance smoothly from the homepage. I wanted to identify friction points and areas of confusion that might prevent a user from getting a quote, or purchase insurance, but also get an overall feel for the flow of the site.
I conducted user testing with InVision with the 5 participants who were interviewed previously. The flow started on the homepage, and users were able to click around to purchase homeowner insurance.
Top Findings
Branding & UI
Kaus wanted to modernize their logo and brand and show that they were more accessible, but still trustworthy.
The orange colours were used to represent a warm, fresh, approachable and fun brand while the final iteration of the logo landed on the shield to represent a secure and trustworthy company.
Illustrations were chosen as a visual style to be more approachable and playful, while moving away from the overuse of stock photos in insurance businesses.
Reflection & Challenges
As someone who has never bought insurance, Kaus was a good exercise in research since I didn't know a lot about how the insurance industry worked. I was able to gain a lot of empathy when learning about the frustrations users had when it came to buying insurance, and learned a ton about the industry, the market in Canada, and how it works.
When designing, it was challenging balancing out the sheer amount of information that someone needs to understand in order to buy insurance, and the limited amount of information that can be displayed on a screen - whether mobile or desktop. I learned that it was okay to hide information on default, but have a way to show that information when people want it. This made me realize the importance of building for mobile first.
