North Star Insurance

2020 | UX / UI Design, Branding & Responsive Web Design

North Star is an on-demand responsive website that is easy to navigate and optimized to purchase and manage insurance online.

As the sole contributor to this project, I created the complete brand's look and feel and visual design elements from scratch. I conducted a series of research methods, designed wireframes and UI for multiple devices (mobile, tablet, desktop), and a rapid prototype for desktop. This is my individual work that I created for an assignment through Designlab’s UX Academy.

OVERVIEW

North Star is a leading insurance company that has been selling their policies through regional agents for the last 30 years. With the rise of the internet and many individuals resorting to doing most of their shopping online, the company wishes to transition towards online direct sales and reach to the young consumer.

Designing a smooth digital experience will make insurance understandable and appealing to the young consumers and will encourage them to purchase their insurance policy directly on the site. The results will translate into expanding North Star’s customer base and increase customer satisfaction.

THE CHALLENGE

• Design a responsive, user friendly website that is optimized for ease and convenience when browsing and purchasing insurance products online.

• Refresh the brand’s visual identity and create a modern logo to differentiate from competitors.

UX RESEARCH

My understanding of insurance and how it is sold was average to low, so I framed questions and executed a research plan to better understand the industry and current industry trends. I wanted to know what the main driving factor for choosing an insurance provider is in order to translate concepts into features that addressed customer needs. I choose primary and secondary research methodologies to begin with.

Analyzing market trends and scoping the competitor field helped to form a better understanding of the current online insurance market landscape. I learned that there are three types of insurance: property, casualty, and health/life and that customer service reputation – not price – is the main factor driving the highest level of intent to renew with an existing carrier. A majority of insurance companies are aiming to market to young adults (18-25) by going digital, and creating a user friendly experience online.

To better empathize with consumers I conducted a series of user interviews to pinpoint their main frustrations, priorities and needs when choosing an insurance provider.

What would influence a users decision to purchase insurance? Is it the price, customer service, type of coverage or reviews? What would enable users to purchase online? What would keep them from not purchasing online?  

These were some of the questions I was hoping to answer when conducting the user interviews. I spoke with four participants from the ages of 26-31 who had minimal experience with buying insurance. All interviews were conducted remotely through Google Meets and recorded for future reference and notes.  

All participants in the user research were motivated by low cost coverage. Most were motivated to buy insurance online and to purchase because of the quality of the customer service. Everyone shared the same frustration of not being entirely sure if they understood all the details about their policy when purchasing insurance online. Half found the quote process to be difficult and unclear.

• Information must be easy to find and understand
• Affordable pricing and discounts are important
• Reliable and good customer service is necessary
• It’s easier to modify policy and make online payments
• Prefer clear visuals of coverage differences and upfront pricing

DEFINE

Based on the research we could determine the users main motivations, pain points, and goals when purchasing insurance online. To further define these needs, I created a user persona profile and empathy map to better illustrate and relate to the target consumer that would potentially purchase North Star insurance.

Goal setting

After finding the common goals between North Star and its users, I was able to create a roadmap to prioritize features for the responsive site.

INTERACTION DESIGN

To quickly grasp how our a user would classify and group information, I ran open card sort via Optimalsort with a total of thirty cards and seven participants. By analyzing the results I was be able to identify some commonly repeated patterns. Afterwards I drew out a sitemap to simply lay out the site’s navigation menu and different pages by category.

Open card sort

Sitemap

I created a task and user flow to visualize what a user would typically do and see once on the homepage, and how it would lead them to start a quote, purchase insurance online, and create an account. The task flow specifically illustrates a user coming onto the site and immediately starting a quote to then purchasing online.

Task flow

User flow

How might I guide potential users towards purchasing an insurance policy that best suits them? How would successfully guiding the user encourage them to set up an account with North Star and make them a returning and loyal customer? The user flow works to illustrate the alternative paths, key user actions, and decision points a user might face. It provides opportunity for the user to gather information on their own about the product they’re looking for, to then easily starting a quote through the site, to ultimately purchasing the policy.

I sketched low fidelity wireframes to begin ideating on how the homepage would appear visually, and thought about identify interface navigation solutions that will meet user expectations. After deciding on the best way to display content I began to build responsive wireframes of the main landing page.

UI DESIGN

To create the brand’s visual identity I put together an inspirational moodboard to help visualize the look and feel I was going for. I was inspired by astronomical illustrations when creating the logo and overall brand image. When creating the logo and choosing a name for the brand, I brainstormed by using different keywords to help refine the idea. I wanted a friendly, modern, and clean brand identity that would appeal to the young consumer market. I envisioned North Star to be a brand that is designed to guide their customers, and that is why I chose the name ‘North Star’ as it signifies being a helping hand and guidance when in need.

I used tones of lavender and dark purple as the primary colors paired with peachy and tan colors to create a calming yet welcoming appearance. I chose a graphically strong, clean and modern logo to evoke an image of boldness and to differntiate the brand from its competitors.

Mood board

I compiled all the visual design elements and systems into a style guide and UI kit. With this, I designed a landing page that allows the user to start a quote, informs the user on who North Star is, customer testimonials, how to save by bundling products, and a quick access to the claims center for existing customers. I also designed the responsive UI for mobile and tablet devices.

UI kit

TEST

After weeks of working, it was finally time to test the product. I created a high-fidelity prototype on Figma with clickable buttons and page transitions to test the usability and functionality of the user flow. The main goal was to observe learnability and determine how easy is it for users to navigate through the homepage and products page, and quote process. It was also important to note any areas of difficulty when getting a quote such as entering information, getting through the steps, and selecting an insurance plan.

There were four participants in the North Star product usability testing. The task was to test the overall quality of the design, functionality, navigation, and user flow of the website. Participants were able to browse through the homepage and products page to view the different coverage options and complete the quote process to purchase insurance online.

• All participants were able to finish the quote process successfully.
• All participants found the site to be straightforward and easy to navigate.
• All participants reacted positively to the branding and clean UI.
• All participants completed the tasks without any errors.
• 3 out of 4 suggested a variety of  ways to improve the structure and phrasing within the quote process.
• Half recommended adding a price comparison list to show what benefits and discounts users come with specific type of coverage policy.  
• 1 participant suggested tailoring the entire homepage just for new customers.

View Desktop Prototype

I gathered the insights and communicated findings from the usability tests and put together an affinity map with potential solutions. Prioritizing certain feedback to iterate and refine the prototype and test it all over again.

Top Priority Adjustments

• Design a price comparison list for the auto quote summary section
• Edit the flow of the quote process,
• Rephrase customize your coverage section
• Add more information about the claims center for new users
• Eliminate find an agent button from both homepage and quote process

UI Iteration 1

UI Iteration 2

END RESULTS

The most challenging and time-consuming areas of this project was conducting research and prioritizing information to deliver a smooth online experience.

I learned that meeting with people and utilizing their feedback was critical in identifying the main problems that come with shopping for insurance. If I could go back I would have spent more time creating UI elements to help educate the user on insurance.  I was the most the most satisfied with the quote process, having a pop up window on the homepage keeps the process simple for the customer and makes it easily accessible.

Next steps moving forward would be to continue working on responsive mobile and tablet prototypes to reflect iterations from desktop website. Test the product again and implement design changes based off feedback.