top of page

Archer's  Insurance

Responsive e-commerce website: Direct to consumer insurance sales 

B2C, Lead generation

UX/UI Design

Research + Strategy

Branding

Role: Product Designer

Timeline: 80 hours

Tools:

Optimal Sort

Figma

FigJam

Miro

Notion

Archer's landing page
Vector 1 (1).png

Project Overview

About 

Archer’s is a large insurance company that’s been in business for over 30 years. They have

a great deal of insurance offerings. Their main goal is to keep costs low and provide easy solutions for customers.

 

Instead of fully customized options, they sell prepared packages. This allows

them to be more efficient and keep their rates lower than the competitors

The Problem

Archer's has been working with regional agents, selling the policies to them instead of directly to customers. However, with the rise of the internet and personal devices, they are losing ground and finding it hard to catch up. They want to stay relevant, but they don't have any existing online presence. 

The Goal 

They want to branch out from a B2B environment to instead now sell directly to customers. With young people being more digital than ever, they would also like to tap into that market.

Their priority is to have a relevant website that’s easily browsable, and to relay a brand message of 'Trust, modern, fresh, clean, and clear' to its users

My Impact

Archer's has asked to have a responsive e-commerce website built that is pleasing to use and that allows customers to browse through all products, provides excellent user experience, and filter by relevant data. They would also like a new, modern and fresh logo for the company. 

Research

Anchor 1

Competive analysis &  market research

Ask a member of the millennial generation about Insurance and those that have it, and they will tell you that there is a desire to save time, money, and energy! Users especially want to see transparency and clear understanding when it comes to price and policy verbiage.

 

Taking a deep (research) dive into the competitive landscape, I discovered that there is an absence of large bundle coverages, but a great variety of coverage options; some sites have a wide selection, and others include quite a lot less coverage plans. Marine and aviation were hard to find and was a request by Archer's to have in their coverage. In all the UI was generally very clean.

Direct competitors

User research 

I carried out four 30-minute interviews with users between the ages of 25-40 to learn about the participants' perceptions of insurance, their previous experiences with learning about and purchasing insurance, and the challenges they faced when navigating the process.

Users expressed a lot on the topic of insurance and a commonality for them was lack of understanding their policy coverage in depth. Below is a 

User Wants

User Needs

  • Online portal to submit claims and

       get real-time feedback on submissions

  • Quick policy reimbursements

  • Easily understand what each claim form is for

  • Minimal deductions

  • Clean website

User Frustrations

  • Easily overwhelmed by information on site and
    with policy fine print.

  • Not able to fully understand policy coverage.
    Time-consuming when navigating the site, policies, offerings

  • Not being able to get insurance quotes instantly online; having to go in-store to fill out applications.

  • Not enough thorough information on what user needs to prove when filling out applications, i.e
    proof of address, ID’s, physical etc.

  • A better understanding of insurance and policy verbiage.

  • Portal for submission of paperwork.

    Real-time responses to questions and submissions.

  • Easy to navigate website and understanding of correct claims forms, and ability to fill out and submit online, versus printing and submitting through mail or email.

  • Positive feedback and testimonials of the company and agents.

  • Strong social media presence.

User Motivations

  • Positive client-to-agent relationship

  • Motivated by family and friends to
    obtain insurance

  • Peace of mind

Define

User persona

The user persona I created represents a target audience who is interested in purchasing insurance or already has insurance. This is the average type of user that Archer's is looking to market their insurance packages towards.

 

Jenna is a hypothetical representation of this group, reflecting their motivations and needs.

User Persona

Empathy Map

When trying to empathized and understand the Jenna, I had many questions. I needed to understand 

what would go through the mind of this user, and be able to relate to them, so I asked: 

  • What made them sign up or decide not to? 

  • What are some reasons they buy more plans, or just stick with the ones they have?

  • How do they make their decision towards purchasing a plan? 

  • How might they influenced to purchase or not? 

  • What do they hear about the path to getting insurance?

  • How do they see it being a benefit to them? 

  • What is holding them back from getting the insurance, understanding it better, etc? 

Empathy map

User, Business and Technical Goals 

To develop a successful product or service, it's important to understand and balance user, business, and technical goals. Below is a simple graph highlighting the established needs and desires of the user, the technical goals and what the business is seeking.

 

User, Business and Technical Goals 

Card sorting

I carried out a Card sorting exercise on Optimal Workshop with 7 random users where they were asked to create categories for the types of insurance and info pages provided that would make the most sense to them. Many common similarities were noted and used for the site layout. 

Card sorting

Site Map

I put together the findings into a site map to visually see how the flow from the homepage might look. 

Site Map

Task Flow

This task flow depicts how a user would travel through the site to get a renter's insurance quote and/or a property insurance quote. 

Task Flow
Anchor 2

User Flow

For the focused User Flow I wanted to map out the user's steps from the entry of the site to the final interaction. In almost all of the user surveys, users stated that they had a great experience working with an agent, and would recommend it. So, with this feedback I incorporated this into the action of getting a quote; Giving the users the option to connect with an agent, or get a quote online. 

 

The User Flow depicted here is an example of a user going on to connect with an agent after submitting information to get a health insurance quote.

User Flow

Design

Anchor 3

Logo Design

After observing other insurance company logo's, I wanted to apply similar principles 

Logo Design

UI Kit

The goal with the colours was to keep them on a very neutral ground. I chose warm, earthy, natural colours that would convey neutrality to all users and  level of sophistication for the site, in hopes that users would feel 
that it is established and trustworthy. 


The same idea went for the font, the MADE MIRAGE font was from a modern elegant serif font family.

UI Kit
UI Kit

Wireframe Sketches

I started with three rough ideas for laying out all of the elements I had in mind for the landing page, and eventually combined a version of each to create the final layout. 

Wireframe Sketches

Wireframes

Low fidelity wireframes were mocked up to showing the user navigating the site to learn about renter’s insurance, then starting a quote or contacting an agent, which would become the final user flow. 

.

Wireframes
Wireframes
Wireframes
Wireframes

High Fidelity Wireframes

Desktop, Tablet and Mobile Landing pages were created as part of the complete responsiveness of the site. 

.

High Fidelity Wireframes
High Fidelity Wireframes
High Fidelity Wireframes

Final  wireframes

Final  wireframes

Test

Anchor 4

Responsive Prototype

It was time to put everything together and create the prototype! 

.

Usability Testing

It was time to test the prototype! I gathered 3 of the 4 original participants and conducted an unmoderated test in person for each. Below is the full summary of test results. 

Usability Testing

Affinity Mapping

With the results from the test, I used Miro to visually sort the feedback. I took the common patterns and opportunities to improve, then applied them to my iterations. 

Affinity Map

Iterations

After mapping and organizing the feedback, it was time to take the user research and go back to the drawing board to make iterations and improvements. 

.

1. On the homepage, one user mentioned the verbiage should be changed up from 'Start your quote today' to 'Get an Archer’s quote today & save!' The initial verbiage suggested they would start a quote, but not necessarily finish it, whereas the latter would suggest a completed action for the user. 

2. Towards the bottom of the homepage by the mobile app image, the user also mentioned that the app alone seemed dull or un-intriguing, and suggested the users should be given real-life reasons why they should go ahead and download the app now. I iterated by adding useful actions that users could take when using the app. 

Iterations
Iterations

3. All of the users noted that they would prefer to have the option to select which type and quantity of insurance they wanted in a bundle, rather than having a choice of three to only choose from. I added all of the offerings and created a customizable offering, where the users select up to as many items of coverage as they wish. 

4. Two users noted that they liked the image of the dog and that they empathized with it and wanted to see more images in general. They both noted that they hadn't noticed the price when scrolling down towards the bottom of the page, and if it had been closer to the information at the top, the cost would have kept them engaged and wanting to know more about the plan and coverage. They also felt that if they 'What's covered' information was neater and all together in a box, it would be easier for them to read. 

Iterations
Iterations

Next Steps

There were some tasks and areas of improvement that came about when testing the prototype and other ideas that could be included in the site moving forward. Below are a list of a few: 
 

1. Create user flow to show what getting an insurance quote would
entail.

2. Incorporate more reviews throughout the site, to build upon
a feeling of trust for the users.

3. Add more images, to create more visual engagement and
trust for the user.

4. Continue testing with users on the functionality of the site
and the intuitive flow - is it easy for users to find what they
want? Where might there still be opportunities to reduce
information overwhelm to users, whilst delivering useful
information?


 

Archer's
Vector 1 (1).png
bottom of page