KAUS
A responsive e-commerce web app for an insurance company looking to expand into “direct to consumer” sales.
UI/ UX design . Rebrand . Responsive
Project
KAUS is an Insurance company, which previously sold policies via agents. They now want to increase their client base by reaching out to them directly. To help users buy, claim, bundle, and maintain policies serving their needs.
Process
The insurance industry can be very confusing and has a bad reputation for not being transparent. I set out to find if this assumption of mine was true and gather data on the users’ previous experiences. Approaching the project with Design Thinking methodologies,
I gathered the goals, needs, wants, and pain points from the community of users;
Studied the current market offerings and their shortcomings.
Defined the problem statement.
Provided a workable solution enhancing the experience.
It all boils down to one question… What do the users need in order to achieve their goal?
Product
Users’ present and past experiences with insurance providers informed the need to develop a seamless flow from exploring to buying/ claiming a policy at KAUS. They needed the process and the company to be more transparent, trustable, and friendly.
KAUS was re-branded and a digital presence was created that is responsive on all devices. This is a guided hypothetical project given by Designlab.
Scroll down to read the case study or use the sidebar to view particular sections
Research
Interpret
Resolve
Design
Test
Research
PLAN | COMPETITOR ANALYSIS | USER INTERVIEWS
Plan
The plan was to…
Determine how users choose insurance packages.
Understand who our competitors are and what they’re providing
Talk and understand our demographics; their wants, needs, and pain points.
Competitor Analysis
I looked at competitors in the market who already have established a digital presence to understand what they provide and what they lack. This was particularly useful to compare with user interviews.
Findings
A digital presence with a local agent network will satisfy both business and user goals.
It is important for good customer service as our existing competitors lack that.
Amongst our current competitors, very few promise upfront and honest rates.
The whole process needs to be transparent, it is the new industry gold standard.
User Interviews
1:1 user interviews were held via zoom and users were also asked to check out the competitors’ websites (other than the ones they use) and register their thoughts on the experience. Interviewees consisted of policyholders between the age group of 20 and 60 YO.
100% wish for transparency and clarity from the providers
75% - 100%
100% agree that they get confused and feel lost in the process especially with all the jargons
88% find the industry to be confusing and want an accurate quote.
77% use the web app for their insurance needs.
≈ 55%
Prefer to compare and shop online for a policy.
Wanted good coverage for a reasonable price.
Want friendly and intuitive AI assistance.
20% - 45%
44% had their insurance bundled, 44% has separate.
44% wanted a place to compare coverages.
33% switched policies due to lifestyle changes during the pandemic.
22% uses agents and exclusively go to them for policy purchase and their insurance needs.
Inferring from the above…
The findings clearly showed the need for transparency and a user-friendly business model.
The younger audiences also appreciated having intuitive support where they need and this calls for support features to be provided throughout the process.
Along with all the above, community giveback gained a positive welcome and would increase the user base.
Interpret
PERSONA | EMPATHY MAP | PROJECT GOALS
Persona
Developing a persona from the research findings helped me to find a potential end-user for KAUS. Their behavior and attitude allowed me to prioritize what’s important and kept me aligned with the intent and not be biased.
User Persona reflecting majority of the users from the initial research.
Empathy Map
Empathy mapping of my persona equipped me to better understand the research data and understand what influences the user and how best to cater to them. Knowing what he (in this case) thinks, feels, sees, hears, and does fueled my design decisions.
Empathy mapping our persona to prioritize the design’s guiding principles.
Project Goals
It was important to get the stakeholders on board with the user's needs. The diagram below shows how user goals could be translated into a profitable business model thus providing a win-win situation. The model helps businesses (and myself) understand that only by client satisfaction would this be a successful product, Thus right from the beginning their needs must be the driving force for all major design decisions.
Venn diagram showcases the project goals and helps understand key priorities that are common to both the business & the user.
Resolve
INFORMATION ARCHITECTURE | SKETCHES | WIREFRAMES
Information Architecture
Card Sort
Card sort exercises were conducted amongst users to see how they want the resources to be grouped. The exercise aims to understand mental models and wayfinding practices mapped by the user to his/her preference; i.e. to understand how one travels within the site. The research was conducted online via Optimal Workshop’s card sorting feature.
Site Map
Findings from the card sort have been drawn out as a site map, It shows how users prefer to have options to navigate to related pages from one. This would mean that I need to create an environment where a destination page has different journeys (ways to get there) depending on the stress case and other needs of the user.
User Flows
User flows were made to understand the possible entry points into the web app. This helped me learn about the different temperaments a user could be in and how best to hold his attention a bit longer.
Sketches
I began sketching the pages informed by all the above interpretations. I had sketched 4 options and picked out components that work best for KAUS’s UX. Below shown, are a few explorations.
Sketch exploration 1
Sketch exploration 2
Sketch exploration 3
Sketch exploration 4
Components picked from sketches and put together for further design development
Wireframes
The Mid-fidelity wireframes were developed from the sketches. The screens as seen below are influenced by the design patterns that enhance the UX. I focused on one flow and wanted to try and incorporate the key takeaways. For a user to buy homeowners insurance, how should the flow be designed? Below shown is the responsive design of KAUS’s homepage.
Wireframe: Desktop
Wireframe: Ipad
Wireframe: Iphone
Design
BRAND | UI KIT | HI-FI PROTOTYPES
Brand design
Kaus’s brand image was designed based on strong inferences from findings. Simple, clear, fresh, trustworthy were some of the keywords that helped with the logo design. The logo also takes inspiration from Kaus Borealis is a star in the southern constellation of Sagittarius. I went for colors that would be visually pleasing and placed them minimally wherever I needed to draw the user’s attention.
Logo exploration
UI Kit
The interface elements (icons, menus, buttons, etc) had to be built from scratch and it was my first time designing. The challenge was to create elements that complement each other and relate to the whole branding. Accessibility was another major factor I kept in consideration.
Brand design & UI Kit.
Hi-Fidelity Prototypes
I kept the Hi-fidelity prototype to be minimally viable addressing the most important user need and visualizing them. Flow tested here is for when the user compares and finalizes a homeowners insurance policy. Below are some key screens addressing them.
Landing Pages
Main page
Landing page: Homeowners insurance
Multi-Step Form
1. Input details
2. Retrieve if form is filled previously
3. Bundle policies
4. Complete form
Confirm and compare policy in detail
5. Confirm/ edit personal details
6. Compare and finalize policy
7. See chosen coverage option in detail
Test
USABILITY TEST | FEEDBACK GRID | ITERATIONS
Usability Test
Testing was done to evaluate users’ interaction and experience with the KAUS Insurance website to understand their pain points, behavior with the product, negative and positive emotions. This helped us modify the final product to make it more usable and accessible. Testing was done In-Person (have participants test out the Figma prototype on laptop) and Remote Moderated (moderate and observe users testing the prototype via Zoom). The findings have been listed in a feedback grid.
Feedback Grid
The feedback grid helped me categorize my findings from user testing into 4 categories:
What worked well
What needs to change
What were the questions users had?
Were there any new ideas or suggestions that could be incorporated in the future?
Iterations
I addressed the “Needs to change” column from the feedback grid keeping it in line with the MVP. The iterations have been listed below with relevant descriptions.
Final Prototype:
The embedded prototype presented below might not be suitable to view on a mobile device. Click the “view prototype” button presented at the top or bottom of this page to open a new tab.
What I’ve learned
Form Follows Function; Function Follows User Needs.
A product completely designed from user insights and shipped back to them to be tested is very grounding, it opens possibilities for a designer and constantly keeps him/her in check to design with intent.
If given a chance, I would like to spend more time on user research and persona development, drafting a product roadmap, and testing the iterated versions again.
I hope to do in-person research and would like to understand and work more on brand imaging, style tiles, and color schemes (where I had a hard time)
To wrap it up, I am looking forward to taking what I’ve learned designing for User Experience for the very first time and exploring more on the field to find the balance between business and User goals!
Credits & Contributors
My mentor Igor Dinuzzi
Designlab Groupcrit facilitator Suzy La
Illustrations by Storyset by Freepik
Images from Unsplash & Pexels
Font: Roboto