KAUS INSURANCE

Responsive Web Design+ Rebranding

LEAD UX DESIGNER USER RESEARCH, UX/UI, BRANDING

PROJECT BRIEF

Kaus, a fictional insurance company, has been in the insurance industry for over 30 years offering all types of insurance. Operating in the B2B space through regional agents, they have begun to lose traction with the rise of digital devices. They would like to make the switch into e-commerce and design a responsive web experience that is both pleasing and easy to use and would attract younger users. Kaus's goals for this project are to, 

1) Design a new, modern and fresh logo for the company 

2) Design a responsive e-commerce website that is easy to use and allows visitors to browse products and filter data. 

3) Convey feelings of being modern, trustworthy, clean, clear, and fresh. 

RESEARCH

Before starting my research I devised a plan for the kind of research to be conducted as well as how it would be conducted. It was important to me to conduct secondary research prior to getting started to understand more who Kaus's competitors where, how they operated, and how their audience perceived them. I then wanted to conduct primary research in the form of interviews with insurance holders between the ages of 25-35 to assess their overall experience with insurance from purchase to consumer. My goals for this are summarized below: 

1) Discover motivations behind insurance purchases 

2) Discover demographics currently purchasing insurance and how we can fill gaps between any groups that arent. 

3) Discover any pre-conceived notions about difficulty purchasing insurance

4) Research any pain points/positives of purchasing through an agent and how that can transalate to a better online experience

5) Assess what online components could lead to a better online shopping experience and what are pain points

I then created both a competitive analysis as part of my secondary research and an interview guide for my primary research interviews. 

Research Ramp-Up.jpg
interview questions 2.png

FINDINGS

After conducting both the secondary and primary research I was able to break the findings down into 3 categories: 

Needs 

  • Insurance consumers needed policies to fit within budget without having to compromise coverage. 

  • Easy to Use interface with ease of finding and understanding information 

  • Peace of mind and security knowing insurance compaany would follow through with what they said they would. 

Pains 

  • Not knowing how their actual service experience would be once they needed it 

  • How long it would take for issues to be resolved until going through the process themselves 

  • Most selected through employer, felt they only had those options to select from. 

Wants 

  • Customer Focus/service knowing they can get a hold of the company for any issues/concerns 

  • Integrity, that the company would follow through with what they said they would. 

  • Clarity with terms of coverage. 

EMPATHIZE

At this point in our research I entered into the define stage. After completing the interviews and analyzing the data I was able to find patterns of importance. In order to deliver the data in the most impactful way, I created a user persona and empathy map which culminated the research and helped to define who I was designing for. This also helped to humanize the data and establish empathy and deeper psychological understanding of potential users.

User persona.png
DesignLab - Empathy Map.jpg
Storyboard .jpg

The storyboard helped to show Edwin in the context of the problem he was having. Instead of just going through the steps of purchasing insurance, it tells the story of the motivation to purchase, the problem he is having, when he was having it, any how it was solved. It also helped see how impactful the solution to these problems could have on our potential users life through empathizing and narrating edwins experience.

DEFINE

Kaus Project Goals.jpg

Product Design

Once the research had been analyzed and user problems defined, the next step was to mesh out the product design and features. To do this, i referenced the project brief and research results to frame what features where more necessary than others while keeping in mind feasibility. 

feature roadmap .png

INFORMATION ARCHITECTURE

In order to determine the best way to layout the information on Kaus's website I decided to utilize a card sort activity on 7 participants total between the ages of 21-40. This helped me to understand how potential users on a cognitive level would categorize and organize information. This would then help with putting together the sitemap and user flow. 

 

Categories determined from card sort included: 

  • Products 

  • Quote/Quote tools 

  • Account 

  • General Info/Contact Us

 Card Sort .png
Kaus Sitemap.jpg

INTERACTION DESIGN

Although the task and user flows are not that different, they both served an important purpose. They both helped me think through the design before the feature was developed to spot any potential issues during the users interaction. I then made some low fidelity mockups of the site to test out the flow and illustrate the possible information hierarchy.  The sitemap and task flows helped contribute to these low fidelity wireframes by showing which pages will be developed and in what order. 

User flow kaus .jpg
Task Flow Kaus .jpg
Kaus Lo-Fi mockup 2.jpg
Kaus Lo-Fi mockup 3.jpg

UI DESIGN

For the UI deliverables I put together a mood board, brand logo, style tile, and UI kit. The mood board helped with expressing the look and feel the product should have. The brand logo was refreshed per the guidelines of the project brief to express something clean and modern. The style tile was helpful in pulling the components together for the high fidelity mockups, to keep it all organized and have a guide for the design. The UI Kit similarly helped establish the design standards and keep everything in line for the product for both present and future use. 

Kaus UI Kit.jpg

USABILITY TESTING

Before launching the product, the product itself needed to be live tested to see if any further iterations were needed. This would allow me to see how the user will actually interact with the limited site through prototyping and fix any issues before launch. Through the high fidelity mockup prototyped using marvel, I was able to test in person through 4 participants how the most important features of the site (quote tool, create account, and checkout) worked. I created a test plan with objectives, goals, tasks, and a formula for the error rate. 

Kaus Landing page .png
Confirm.png
Create an account .png

You can try out the Kaus Protype here

Kaus Marvel Prototype pic.png

I then created a usability test results debrief as well as an affinity map with all my test results to help sort, rank, and prioritize the user testing feedback. 

Affinity Map.jpg

Error Free Rate 

There were a total of 7 tasks each participant had to complete. Completing each task without any assistance earned 1 point. Any time any assistance was needed 0 points where given for that task. 3/4 participants where able to complete all tasks without requiring help from the moderator. 

 

Total tasks completed error free by all participants= 7+7+7+6= 27

Total tasks 7 * 4 Participants= 28 

27/28=0.96*100=96%

 

I predicted an error free rate of 80% but my research has exceeded my expectations with a 96% error free rate. 

 

Takeaways 

The overall flow seemed intuitive for participants and the overall experience pleasant. Moving through the quote process was quick and the layout was easy to navigate with the exception of minor improvements. There were a lot of consistencies in the feedback received from the participants in regards to buttons, button locations, and overall presentation of certain screens that will be taken into consideration as the final versions for the Kaus website are completed.

FINAL PRODUCT

The final product was a responsive design accessible from either desktop, tablet, or mobile. While the overall result was positive the prototype is far from perfect. I plan to continue fleshing out the prototype to include all site pages and make iterations to the design as needed. 

Kaus Laptop_edited.jpg
Kaus Mobile and Tablet mockup.png

Follow me

© 2019 Ayesha Khan
Proudly created with Wix.com

 

  • White LinkedIn Icon