Insurance Website

UX/UI
Role
UX Designer, UX Researcher, Brand Designer, UI Designer, Copywriter
Timeline
80 Hours
Client
Kaus
Project year
2021

Overview

Few things are worse than being stuck on the phone with an insurance agent who seems to care less about you and more about how much money you're going to spend. Kaus intends to change that. With over 30 years in the community, the company decided it was time to tap into the online insurance market. My job was to help them develop a website that would not only instill trust in a user, but that would ultimately eliminate the headache that tends to come along with buying insurance. I did this by creating a website that is simple, honest, and comfortable- making sure to get feedback from users every step of the way.

Problems vs. Goals

Pain Points

"Insurance website are daunting"

"Why do they ask for a lot of information without explaining why?"

"Insurance companies are shady"

Vision

Create a website that instills trust

Prioritize transparency

Design a website that is aesthetically pleasing yet simple

Users and Audience: Through research I discovered that most people who would be looking to purchase insurance online would be between the ages of 23-40 years old, and would likely be first time or novice insurance buyers.  

Roles and Responsibilities: Evaluation and research, information architecture, branding, content strategy, user and task flows, app mapping, wire-framing low fidelity and high fidelity designs, prototyping, usability testing, visual design, iteration and implementation.

Scope and Constraints: Create a responsive website for an established company that meets the user and business needs in a practical and efficient way. Bring modern branding and design to a company that is well established but needs to be brought to the modern age of technology. Ensure the design translates easily to tablet and mobile view.

Solution: I created a website that kept the company ideals in mind, while also reassuring the user that the brand is worthy of their trust. Through my research I discovered that the idea of buying insurance tends to leave a negative taste in a user's mouth, so it was important that the website made the user feel safe secure through the quote process. It was also established that most users are happiest when completing everything online, so I made sure that the user would be able to find everything they needed on each page.

The Design Process

Empathize

Competitive analysis of similar insurance websites gave me some insight as to what was absolutely necessary to include in Kaus, and which information was superfluous. Aside from the aesthetics of these websites, I paid close attention to the pain points that I was experiencing during the process of requesting a quote. I was especially mindful questions that seemed unnecessary or made me feel uncertain as to why they needed that information. 

Summary of findings: Most major insurers will cover home, auto, renters, and even life. Good bundles are hard to come across. The major insurance companies are less focused on user experience, and more focused on having the user complete a quote. Hippo Is an exception, but they only offer home insurance. UI is decent across all websites, but nothing really stands out because these companies have been around long before UI was a priority.

Target Audience

Going into this project, I knew that our target audience would be looking for a pleasant experience and might be willing to sacrifice customization for convenience. However, I assumed that most people would like to have the option to speak with an agent. To my surprise, that was not the case at all.

In my empathy interviews, I asked whether the participants would be willing to sacrifice customization for simplicity and most of them said they would. Through my research, I was also made aware that they had no interest in speaking with an agent. The consensus was that it would be more useful to the target users to have a chat option on the website than the option to speak with an agent by phone.

People like Anastasia are busy, tired, and have very little energy for jumping through hoops. They are willing to sacrifice having a personalized policy for the convenience of having it done quickly and hassle- free.

Main use case: purchase insurance

Define

After the preliminary research phase, I defined the goals of the business and the user. This helped me begin to develop the information architecture so everything could be laid out in a manner that supported the business and user goals (and of course, was technologically feasible).

Business Goals: evolve to retain existing customers, acquire new customers, provide simple solutions for customers, create an atmosphere in which buying insurance is easy (and pleasant)

User Goals: Get a quote easily and quickly, purchase fully online, no annoying phone calls, thorough explanation of options, upfront pricing, no tricks

Ideate

The next step in the process was to map out the Kaus site. This sitemap helped me organize the IA and allowed me to see the website from a bird's-eye view.
Creating a task flow allowed me to visualize what the quote process was going to look like. I was able to better understand how the pages would flow from one to the next.
The last step of the ideation phase was to create a user flow. This step was crucial to the design process and really made my work more efficient. It allowed me to focus on the design of the pages during the prototyping phase rather than having to determine which page would come next as I was creating them. 

Wireframes

Adobe Xd was used for the low fidelity mockups of the Kaus site. These wireframes streamlined the design process because I was able to see how the pages would be organized. Using the principles of the atomic method of design, I started by building individual elements and gradually increasing them in size until full pages were formed. I had to redesign a lot of the pages that I had originally mocked up because they looked better in sketches than they did on the screen, and some were not designed responsively enough. In the end, I was able to create a functional prototype that satisfied the goals of this project. 

Visual Design

Logo design was the most challenging part of the process. However, with research, time, and lots of sketching, I was able to finalize a logo that I felt encapsulated what Kaus stood for as a company. To satisfy the goals of this project, the logo needed to be simple and align with the Kaus principles of honesty and transparency. The final logo demonstrated these principles.

I used color psychology principles to choose a blue and orange complementary color scheme. Blue is associated with trust and security, and orange is associated with excitement. This seemed to fit Kaus nicely. From there, I decided on typography and created the icons that would be used on the Kaus website. I knew the CTAs needed to be orange in order to stand out and draw the user’s attention, so I used blue as more of a background color. This style tile was incredibly helpful in creating a high-fidelity version of the design because I had it as a reference point for type, color, and images. Of course, it was a work in progress and as I changed certain aspects of my high fidelity version, I simultaneously updated my stile tile. Once I was able to finalize the stylistic elements, I used my design to make a comprehensive UI kit.

Heading

The original design for buttons on Kaus was an orange gradient with white text. As a designer whose heart was really set on using orange and white, you can imagine my frustration when it failed every portion of the contrast test. I tried to save it by adding a shadow to the text to increase contrast, but there was nothing I could do to save it. Having an accessible website is much more important than my preferences as a designer, so I opted to change the text to black, and it ended up passing the contrast tests. 

Prototype

I was able to design the high fidelity version of the Kaus homepage using feedback from my wireframe and prototype. An important aspect of my design was the ‘information’ icon that was present on most of the question prompts so that the user could understand why they were being asked for certain information. This icon exists on every section that might leave the user wondering why the company would need that bit of information, or to expand on the available options. The purpose of this feature was to build trust and show transparency, two very important goals of Kaus. 

Test

For the usability test, users were asked to go through the quote process and choose auto insurance without choosing a bundle. After the task, they were prompted to complete a survey about their experience. Quantitative and Qualitative data were collected. 

Quantitative Results
- 6/10 users successfully made it through the task (60% completion rate)

- Average time to complete: 1 min 44 sec

- Participants that spent between 1 min 45 sec and 2.5 mins to complete the task were more likely to complete it successfully.
Qualitative results
Of the participants that did the usability test, 80% also completed the survey

- Most participants felt like the task was easy to complete and straightforward

- Participants reported the website being clean, easy to use, and simple.

- Users were confused by the fact that they were not able to fill in text fields. 

- Users suggested adding a “don’t bundle” option to that step of the process

- 100% of the users that took the survey reported having trust in the company

-Users reported feeling at ease, confident, and calm while completing the task.
Summary of Research
The Kaus quote process proved itself to be simple and easy to follow. Although I had issues with Useberry (my usability testing program of choice) , I found that the overall process of receiving a quote for auto insurance was straightforward for users. I did not run into any critical or serious problems in the design. The only minor design problem was the lack of an option to not choose a bundle. Although there was a prompt that read “you may continue without choosing a bundle” and the continue button was in its' active state without the user having to click anything, this was not clear enough to participants. In response to this feedback, an option to continue without bundling was added.
Iteration on Bundles
Limitation
Useberry, the program that ran the usability test, had proven itself to be glitchy. A few of the participants were not prompted to take the survey, and some data about task completion was not recorded. In the interest of time, I could not gather more participants to take part in the study. In the future, I would use a different program.

Deliverables and Outcomes

-Evaluation/Research
- Branding
- Product Planning
- Content Strategy
- Information Architecture
- User/ Task Flow
- Site Mapping
- Wireframes / Prototypes
- Style Guide
- UI Kit
- Visual Design
- Responsive Design
- Usability Testing
- Iteration and Implementation

Based on the UX research that was performed, the project goals of creating a website that instills trust, operates with transparency, and is aesthetically pleasing and simple, were met. Success was measured through usability testing and user surveys. In the end, the users seemed satisfied and willing to put their trust into Kaus. Of course, there were bumps in the road and many design elements that needed to be changed along the way.

Lessons Learned

This project was more than just a creative challenge. I learned a lot about the insurance process and industry standards along the way. Designing this website for Kaus taught me that UX is hardly black and white, and that the UX process can vary quite a bit from project to project. Most importantly, I learned that there is always something that can be done differently, and this bit of information seems crucial. For Kaus, I would have used a different means for testing my high fidelity prototype. I think my usability research and feedback would have been a lot better if I had the ability to run the test through a different program, and more time allotted to testing in general. Although I am happy with the way that Kaus turned out, I believe I could have made other meaningful changes if I had been able to conduct more testing.

Future Directions

Next steps would include adding functionality to Kaus and designing screens for different parts of the quote process, as well as the claims page. Further research and iteration needs to be completed to bring Kaus to its fullest potential. With a growing number of competing insurance companies, many of which prioritize online purchasing, constant research and updates need to be completed to keep Kaus at the top of the competition.