Kaus
Responsive e-commerce website for global insurance brand
Project Duration: Four Weeks, 80 hours | Role: Solo UX/UI Designer | Tools: Figma, Procreate
Background
Kaus is a large insurance company that has historically offered its plans through a network of agents. The company wants to transition to selling its products via an e-commerce platform and needs a responsive website to do so. It also hopes to appeal to a younger demographic with a new visual style and a good user experience.
For this speculative project, I worked on designing a website for Kaus from the ground up, including a homepage, product page and insurance quote process flow.
Problem
Purchasing insurance can be a confusing and intimidating process, especially for people who might not know exactly what they need or how coverage works.
Challenges
Design a simple and effective user experience for obtaining an insurance quote. Offer users the ability to purchase an individual plan or bundle multiple plans without overwhelming them.
Solutions
Build a responsive e-commerce website that guides users through the quote process.
Conceptualize and implement a brand refresh that reassures consumers and puts them at ease.
Research
Research focused on the motivations and decision making process behind insurance purchases in the age 25 to 35 demographic.
A competitive analysis of the direct to consumer online insurance space was conducted. Key takeaways included:
The insurance industry continues to be dominated by large established firms. However, insurtech companies are gaining traction by offering a more streamlined user experience and simplified product lines.
Bundling has become increasingly popular, both for consumers and providers, as it is cheaper for insurance companies to sell their products to existing customers, than to spend money to acquire new ones.
Increasing numbers of consumers are willing to offer personal data in exchange for bespoke pricing and discounts based on healthy behavior and habits.
Interviews
Three participants in the target age demographic were interviewed. All had previously shopped for a variety of personal insurance types.
Pain Points
Comparing various different insurance plans confused people, and they found it difficult to make an “apples to apples” comparison.
They also expressed frustration stemming from a lack of transparency related to coverage. Interviewees were not always certain what exactly their plans covered, or how much they would be required to pay out of pocket in the event of an accident.
Themes
Price and convenience were significant factors for all interviewees. Participants were likely to continue using a provider they were familiar with and that already had their information on file.
Personal referrals and word of mouth played a large role in the decision to go with a specific company.
“I would hate to be in the position where my pet got hurt, and I had to choose between being able to pay for their care, or letting them go. So that's a big motivator.”
“I wish they spoke in layman's terms. I wish the numbers were clear, I wish it was more transparent.”
Sitemap
A sitemap was developed in order to visualize structure and guide the design process. Several iterations of the sitemap were created, and a card sorting exercise informed the process.
Though the entire site would not be designed to completion for this project, the sitemap was nevertheless an important step, as it reflected the priorities of the user, established that the design would be consistent with the internal logic of an insurance website, and ensured that important areas and functions could potentially be implemented in the future, if desired.
User Flows
The sitemap also contributed to users flows, which were created in Miro. Two users - one an existing Kaus customer looking to add to her plan, the other a potential new customer - with different priorities were mapped, and their decision points and motivations were considered when designing wireframes. These user flows demonstrated that each persona needed to accomplish a different task, though both would ultimately need to use the quote tool feature.
Sketches
Before tackling wireframes, I ideated on the design by creating quick sketches in Procreate. These sketches helped establish the visual hierarchy and rhythm of the website. For an insurance website, I felt it was important not to stray too far in a radical design direction - the layout should be simple and straightforward so that users can accomplish their tasks with minimal friction.
Wireframes
Following low-fidelity sketches, I created mid-fidelity wireframes for the homepage, product page and quote process pages. Responsive wireframes were also designed to establish consistency across various device types. In addition, I wrote all of the website copy, which served to further reinforce the direction of the brand and the upcoming visual design stage.
Most importantly, wireframes helped me layout the various sections and elements of the website, and allowed me to make spacing adjustments before proceeding with further design choices.
Developing the Brand
Numerous logo variations were sketched and tested before coming to a final decision.
The final Kaus logo is a non-traditional choice for an insurance company, and reflects the company’s desire to appeal to a younger demographic.
In order to create a cohesive visual identity for the brand, a style tile and UI kit were developed that included typography, a color palette, and basic visual elements.
Simple illustrations and a light color scheme were employed to impart a friendly, approachable tone.
Numerous logo designs were explored before landing on the final choice.
High Fidelity Prototype
Following various iterations to the wireframes, a high fidelity prototype was created. The final design features ample white space and a neutral color palette. Bold blue and yellow brand colors for CTAs and other important elements were used to draw the eye, and illustrations and simple graphics create visual interest.
The quote page was designed to provide users with detailed information regarding their chosen level of coverage, without requiring them to scroll or exit the page.
Usability Testing
I developed a prototype of the website in Figma and performed several user tests over Zoom. Users were asked for their overall impressions and ultimately tasked with completing the quote process for renters insurance.
Following testing, I developed an affinity map in Miro to organize successes, failures and suggestions from participants.
Though all of the users completed the task of obtaining a quote, the testing revealed several pain points along the way, including confusion regarding the homepage quote center. Users also provided valuable feedback in the form of suggestions. Following testing, I reworked several areas of the site.
Conclusion
I learned a great deal working on the Kaus site. This project reinforced the value of user testing, and in turn the importance and power of visual hierarchy. Testing revealed that the quote center was confusing users, and after rearranging the elements into a more traditional top down structure, the usability was improved.
With additional time, I would perform user testing with different participants, to confirm that initial changes made to the site enhanced the user experience. I would also expand the quote flow process to include multiple types of insurance, as research revealed the increasing popularity of bundles. Finally, interviews showed that users had trouble making a simple comparison between various insurance products and providers. This would be a significant design challenge, but certainly one worth further exploration.