Responsive website, quote flow, and branding for home insurance product

  • Role
    (Solo) Product Designer, UX Researcher
  • Project deliverables
    Responsive website, branding, quote flow
  • Tools used
    Figma, Miro, OptimalSort, Notion, Procreate, Maze
Overview
This was a project to deliver a modern, transparent experience for people to shop for home insurance products that meet their unique needs. I came into this self-initiated project with very little industry knowledge, and I knew research would play a critical role in this project’s outcome. It was exciting to take on the challenge of designing a simplified end-to-end solution for a complex industry.
Brief
Llama is a large, reputable home owner's insurance company that strives to keep costs low and provide easy solutions for customers. Until now, Llama has only ever offered prepackaged solutions in a B2B environment through regional agents. With the rise of the internet and personal devices, Llama has been losing ground to competitors who have already embraced D2C e-commerce. Despite being late to the game, Llama is determined to tap into the digital market.

Llama is looking to launch a website where they can offer simple, affordable home insurance products to their customers. To do so effectively, they are looking to undergo a complete rebrand as they pivot to this new D2C model.
Solution
Design a website that makes it easy for people to shop for simple, affordable home insurance products from the comfort of their own home.

Website

  • Responsive
  • D2C Ecommerce
  • User-friendly
  • Flexible for future roadmap

Modern brand

  • Trustworthy
  • Professional
  • Fun and friendly
  • Clean and clear

Design process

Although presented here in a linear format, I prefer to take a more lean approach in my design process.

For example, at the very beginning of a project when I'm conducting research, I'm never afraid to take note of good and bad UI patterns, or explore UI ideas before any substantial research has been completed. I do this for the sake of staying locked in and stimulated, adding context to what kind of challenges I may be facing ahead, which strengthens the overall quality of the research that follows. Even when I'm confident I've gathered enough research and data to make informed design decisions, I make a continuos effort to seek new insights and constantly challenge my decisions to drive my work forward.

I don't believe there is ever a true "end" for great design work, and there is always room for improvement, which requires me to be agile throughout the entirety of my design process.
1. Research
- Market research
- Competitor analysis
- User interviews

Jump to Research section →
2. Define
- Persona
- Information architecture (card sorting, site map)
- Task flows
- User flows
- Wireframes

Jump to Define section →
3. Design
- Logo
- Style guide
- Responsive UI design

Jump to Design section →
4. User testing
- High-fidelity prototype
- Usability testing
- Next steps and learnings

Jump to User testing section →

1. Research

The success of this project would heavily rely on my ability to empathize with users and learn as much as possible about the current state of the insurance industry. I started my research with a few goals in mind:

1. Better understand people's current insurance decision and buying process
2. Uncover user pain points and identify opportunities to improve their current process
3. Determine key components in creating a seamless and enjoyable insurance buying experience

Market research

Being that insurance is a complex industry, I prioritized developing a foundational understanding of the current of the insurance market. I consumed topic-related blog posts, YouTube videos, and pretty much anything else I could get my hands on to learn as much as I can about the industry from a high-level view. I didn't have an opportunity to speak to a subject-matter expert at this time, but that would've been ideal. This process of immersing myself in the insurance world equipped me with confidence in better understanding the market I'll be designing this product for.

Competitor analysis

Before diving into user interviews, it was important for me to know the insurance landscape. I conducted research on both primary and secondary competitors in the insurance space.

User interviews

As I prepared to conduct user interviews, it was important for me to plan out a process to make sure I got the most out of the time I spent with participants. I made the assumption most people haven't had the most delightful experiences when shopping insurance. With that in mind, I planned to make an effort to control the pace and keep the participants engaged, because this probably wasn't a topic they were excited to dive into.

1

Organize participants

Interview a total of 5 people, ages 22-61, who have shopped for home owners insurance within the last 2 years.

2

Create interview guide

Write a user interview script and develop a plan to uncover actionable insights from participants.

3

Conduct interviews

Use the interview guide as tool to direct the interview forward, but don't stick to a script. Let the conversation flow naturally.

Q: What do you look for in an insurance policy?

A: “Price. Also, reputation is important to me. Can they pay my claims? Will they be around for a long time? Are they shady?"

Q: What would you consider shady?

A: "If I've never heard of them before, or their website wasn't done well, or I call them and they don't pick up - they're shady.”
Participant 1
Engaged, new homeowner
Q: What do you look for in an insurance policy?

A: Availability, 24/7 support, a low deductible. We also preferred companies that had instant online quotes.

Q: Could you tell me more about your experience with the online quotes?

A: While signing up for the quotes, we felt intimidated that if we got information wrong, we wouldn't get covered. We quickly realized we needed a lot more information than we had, like answers to questions like What's the closest fire hydrant?"
Participant 3
Engaged, new homeowner

2. Define

After gathering a handful of data and some really valuable insights on the general sentiment toward shopping for home owner's insurance, it was time to begin shaping the project scope. The goals here were to:

1. Learn how users understand and categorize insurance information
2. Determine what website content would be most useful and helpful for users
3. Structure the website's content in a way that reduces potential friction to a minimum
4. Map out and understand the user's current buying process to design a purchase flow
5. Visualize potential design solutions and begin to formulate the product experience by planning an interface

User persona

I started by created a persona based on my research to use as a reference to represent a target customer for Llama. This persona is intended to be used as a reference as I continue through the design process to stay focused on what I learned from research and who I'm designing for. In this case, we're designing for a first-time home owner raising a family, who doesn't have the time to do rigorous research comparing every insurance option on the market, but also doesn't want to get ripped off. Andy needs to be able to trust the Llama brand and feel empowered by the transparency, user experience and tools that Llama avails to him in order streamline his search for the right policy so he doesn't have to spend too much time researching or second guessing his decisions.

Information architecture (IA)

My research confirmed my assumption that users experience complications when navigating the space, so it was important to identify all of the content an insurance website is expected to have, sort and organize each item, and map them out in a way that would feel familiar to the users.

I began by doing industry specific research on different navigation patterns and taking notes of sitemaps that seemed well planned. I identified consistencies throughout home owner's insurance navigation models. With the goals and pain points of my interview participants in mind, I developed a list of navigation category items that would best serve this product.

Card sorting

Insurance is complex, and users have a challenging time navigating the space with even some of the most established companies in the industry. I performed a digital card sorting workshop via OptimalSort to help organize my list items and ensure that users are able to easily find solutions and perform the tasks they came for, such as requesting a quote, making a claim, or accessing their account.

Sitemap

I then organized the data from the card sort and optimized copy for each content category to develop a sitemap for the website.

Task flows and user flows

I focused on planning on the flows in the instant quote process to customize the quotes to the user's unique needs. From everything I learned so far, I realized the quote process would be key because it's the main way users are going to be receiving their insurance options. The idea is that this tool will enable Llama to help narrow the user's search for the right policy by generating customized quotes for 3-4 products that best suit the user based on the information they provided. This will also be the key component in propelling Llama forward in their pivot to D2C e-commerce.

I studied industry standards to find patterns in the instant quote process. I found that every quote tool collected data such as customer information, property information, and then was able to deliver an instant quote based on information provided. I added cases in which the user will most likely be making decisions regarding their buy-in to the product, and how they would go about navigating through such decisions, and developed a user flow with that information.

Sketches and wireframes

Based on all of the research and planning completed up to this point, I began to sketch some initial ideas to hash out potential structure and navigation patterns for the landing page. I then mocked a responsive wireframe in Figma.

3. Design

With a solid foundation in place and lots of data on hand, I began the design process. My goals were to:

1. Develop a brand identity for Llama that is simple, trustworthy and considerate
2. Design desktop, tablet and mobile versions of the website in high-fidelity
3. Plan the start of a scalable design system for the Llama brand
4. Design the key steps of the instant quote tool

Logo process

Even though product design is my strength, for this project I decided to experiment with logo design. I started with my iPad using Procreate and wanted to have fun with the approach. It was important to create a logo that was fun and friendly but also professional and confident. The playful shape of the body began to form, which had round, dramatic curves and sharp corners, which seemed to achieve exactly the kind of feel that I was looking for. I'm pretty happy with the Llama logo that came to be as a result. It really came to life once I started tracing my sketches with the pen tool in Figma.

Visual style explorations

I went through a series of explorations as I developed the look and feel of the Llama brand. There were a number of decisions to make in this process.

I also designed a texture to create a consistent feel throughout the Llama brand.

Style guide / UI Kit

A number of iterations from the explorations led to the development of a cohesive style guide and a UI kit that would serve as foundational building blocks for the Llama brand and website.

Responsive UI Design

Equipped with research, branding elements and a lot of coffee, I began to add fidelity and evolve my previous wireframes and bring the website to life. I also designed key screens for the quote tool in high fidelity. The goal was to create an interesting, trustworthy design that represented the Llama brand as safe and professional insurance provider to our target userbase, that would ultimately serve as a safe space for our users to shop for home owner's insurance.

view design in figma

4. User testing

I used the prototyping tool in Figma to link together flows for a number of scenarios to validate the design and uncover opportunities for improvement. The goals here were:

1. Prototype and prep the design for usability testing
2. Conduct and analyze user tests to measure the impact of the design
3. Prioritize feedback in order to iterate on the design

Prototype

I created a prototype to test the landing page and validate the design's ease of use when performing various tasks.

Usability testing plan

It was time to begin planning the usability test.

Participants
Gather a handful of participants, ages 22-61, who have shopped for products or services online in the past month
Scenarios
Scenarios will include missions such as booking a quote, finding an agent, and reaching out to support.
Methodology
Testing will be conducted remotely on Maze. Participants will be given a link, and then presented several missions to complete based on scenarios in the desktop prototype.

User testing and results

When the design is proven successful, Llama will have a green light to begin development on the homepage and proceed to work on high-priority projects in the roadmap such as product development for custom insurance packages, designing the instant quote tool around the custom products, and producing content for the website.

23 anonymous participants
For the first mission, almost every participant was able to identify Llama's product offering (home owner's insurance) within 5 seconds of landing on the site.
User test results
  • 88.9% success rate on navigating quote tool
    Users were able to navigate the expected path for the "Get a Quote" mission with ease, and had positive comments regarding the design and presentation of the form experience.
  • 94% success rate on filing a claim
    Users were able to complete the "File a Claim" mission in an average of 3.4 seconds.
  • 9.1 rating on trustworthiness
    At the end of the test, users were asked to rate the website's trustworthiness on a scale from 1 to 10. The deemed it to be a trustworthy website.
Takeaways
There was recurring feedback regarding the "File a Claim" and "Find an Agent" flows. At least 2 participants mentioned that they checked the navigation bar for these links before they quickly noticed them below the fold of the hero section. Despite a high success rate in both of these tests, it's worth improving the UX in these flows to reduce as much friction as possible for such an urgent and potentially emotional charged task.

Next steps and learnings

With the first round of iteration, File a Claim and Find an Agent should be tested in different locations to ensure users have an easier time navigating where they need to. Designing a well-planned, frictionless quote flow will also be a key next step in Llama's transition to D2C e-commerce. Now that Llama has a validated design to expand upon, they can focus efforts on developing competitive insurance products and understanding what kind of data they need to collect in the quote flow to offer the best shopping experience to their users.

In this project, I learned the importance of listening to users, designing solutions to the most consistent pain points, and how effective and scalable remote user testing can be when looking to validating a design.

view design in figma