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.
Feb - May 2021 (4 months)
UX Research, UX Design, Branding, Visual Design, Illustrating, Usability Testing
Figma, Optimal Sort, Whimsical, Adobe Illustrator, Zoom
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.
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.
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.
In efforts to ensure a human-centered mindset, answering these six areas will help understand the broader influencers in Jennie’s life.
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.
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.
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.
But since users will likely take several routes to complete the main task, user flows illustrate each possible route.
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.
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.
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.
“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.
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.
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.
