Responsive Web Design

Project Info

I created a responsive E-Commerce website and rebranded for an insurance company to cater to a younger target audience. My mission was to expand and highlight what ClearOak has to offer.

Project Duration

Feb - May 2021 (4 months)

My Role

UX Research, UX Design, Branding, Visual Design, Illustrating, Usability Testing

Tools Used

Figma, Optimal Sort, Whimsical, Adobe Illustrator, Zoom

01. Understanding ClearOak's Mission


ClearOak is a (fictional) insurance company that’s been in the business for 30+ years. They offer +350 products that are put together in prepared packages, allowing for efficiency and their ability to keep their rates lower than competitors.


Currently they do not have an online presence and strictly use regional agents to sell their products. Since they have yet to tap into the digital market, they are missing out on valuable customers.


Design a responsive E-Commerce website in which customers can locate the right insurance packages for their needs.


My role is to rebrand and establish a responsive website based off the needs of the customers, allowing customers to obtain quotes and purchase ClearOak’s products directly.

02. Conducting Research


Understand the users pain points with shopping for insurance.

Compare and contrast what our competitors are providing.

Bridge the gap of knowledge from what users know to what they need to know.


Competitive Research
Analyzing what other insurance companies with similar services are offering and what their strengths and weaknesses are, in comparison

Subject Matter Expert (SME)
Discuss with someone working in the field to establish a basis of knowledge. This way we’re able to communicate the pros and cons to the user.

Individual Interviews
Listening to the user walk through their process of shopping for insurance. Evaluating their priorities, pain points, and general experience.

Competitor Analysis

Building a fast and convenient flow from search, application, to purchase is top priority.
Direct competitors provide customer service (in store or by phone), value, and trust.
Newer competitors dominate the digital market through their beautiful, convenient, and purely digital experience.
Having agents readily available will build trust in addition to customer reviews and policy transparency.

Interview Participants

All participants expressed a need for an all-in-one stop for purchasing insurance.
All participants want to know they are being covered correctly when purchasing insurance.
4 of 6 participants expressed their need for the insurance to be cost efficient to save money.
4 of 6 participants expressed they relied on agents because they wanted guidance.
4 of 6 participants said they value ratings of companies when shopping for insurance.

03. Defining the Design


Synthesize User Research

Problem Statement

Information Architecture

Synthesized User Research

User Persona

I was able to create a user persona based off my user research and data. Jennie Ricafort represents an amalgamation of key points from my users goals/needs and pain points.

Empathy Map

In efforts to ensure a human-centered mindset, answering these six areas will help understand the broader influencers in Jennie’s life.

Project Goals

By comparing the business, user, technical, and common goals I was able to analyze where they may not align with the user goals and how we can align them with business goals.

Problem Statement

How might we provide users with a transparent and efficient onboarding experience?

Information Architecture

Card Sorting

My mission was to understand how users understand and categorize information for ease of navigation when building ClearOak’s website. I did this by conducting an open sort with OptimalSort, where participants were provided cards to group together and create categories for.

The similarity matrix was able to provide a few different category groupings that will help with implementation: Account Services, Customer Support, Product Services, and Insurance Types.

There was generally a 100% consensus the insurances should be grouped together, and a high percentage for what should be included with the Account Services.

77% of participants agreed the Bundle & Save with Price Comparison, Find an Agent, and Get a Quote.

66% of participants agreed Customer Reviews with the Blog/Newsletter and Insurance Education.


Once I analyzed the results from the Card Sort, I was able to put together the relationship between the site and the content. It’s important the user feels they can navigate the site appropriately.

Task Flow

To gain insight into the basic flow users will need, I created the main task and differentiated the key screens needed to create the ideal path for users.

User Flow

But since users will likely take several routes to complete the main task, user flows illustrate each possible route.

04. Ideate + Design


Low --> Mid-Fidelity Wireframes

Logo Design & UI Kit

Hi-Fidelity Wireframes

Mid-Fidelity Wireframes


Logo Design

I decided to rename the company ClearOak to align more with my keywords (transparent and stability). Once settled on a name, I drafted up a bunch of sketches for their logo design focusing on tree and plant elements. Although I appreciated the focus on stability, I again referred back to my keywords and decided to go with the logo that aligned more with clear.

Selection (Option 3)

UI Kit

Once the logo was decided, I could move forward with the branding of ClearOak. It was important to uphold the brand message and key words. Teal portrayed calm and welcoming vibes, which began the theme of every other aspect of the design.

High-Fidelity Wireframes

05. Prototype + Usability Testing



Usability Testing

Priority Revisions


Usability Testing

Priority Revisions

Insurance Cards

Many of my participants had difficulty deciphering where “Renters Insurance” would be located under.  Instead of forcing users to learn arbitrary categories, I listed out examples of each category. Not only this, but half of my users did not notice “Bundle & Save”, so I added “Best Value” to make this card stick out more.

Compare Prices

“Price Comparison” came up in almost all of my initial user interviews, but did not initially design this feature soley because I did not know how to engineer it. As I was making my iterations, I realized my job is to design for the user, logistics can come later and be iterated on. Below is an early design of how I would want the Cost Comparison to feel.  Ideally the user would be able to log in to their current provider and get a live comparison. If this is out of scope, providing ranges will also work.

UI Refresh

After testing and acquiring all the feedback from my users, I decided to not only make the above iterations (along with others not shown), but also do a refresh to push my understanding of UI and Figma.

06. Reflection






Based off the usability testing, ClearOak proved to see the beginning of success. There were a lot of elements users were excited to see such as the simplified quote application and competitor comparisons. I learned what it means to look at the project from a birds-eye view and narrow-down the important functions.


Through analyzing the design opportunities of the usability testing there are few area’s of improvement, such as removing unnecessary sections or becoming even more transparent with what is covered.


As this was my first website redesign, I learned a lot from completing the full process. It took me seeing the finished product to fully grasp why certain research methods were valuable. Also while I was building out the prototype, I kept limiting myself (such as the competitor comparison) because I didn’t know how it would be handed off to a developer. In reality, my purpose is to always think of the user and build an experience that provides them the most efficient outcome, the technicality can be revised and adjusted later.

More Case Studies