Project Details
Responsive Website Design + Rebrand
Type
7 weeks
Length
UX Researcher, UX/UI Designer, UX writer
Role
Figma, Adobe Illustrator, Google Sheets and Docs, OptimalSort, Pen and Paper
Tools
Kaus has been in the insurance business for over 30 years, working with regional agents, instead of directly with consumers. They offer all types of insurance to individuals. To keep costs low and provide easy solutions to customers, they focus on optimizing insurance packages.
Background
Problem
Because Kaus has been working directly with agents, instead of consumers, they have lost ground online to a younger demographic.
Proposal
Create a browsable website to attract young adults with a focus on bundling insurance.
Goal
Tap into a younger demographic and increase revenue.
Making the leap online
Before beginning the site design, we must achieve the following to better understand our audience and cater to them online:
Determine young users’ understanding of insurance policies.
Understand what keeps young users on a website and what drives them away.
Understand what young users value most in insurance policies.
Learn what drives young users to browse for insurance policies
Understanding the user will ultimately create a better experience online.
Understanding the user through research
Utilizing the following methods gave us a better understanding of what young users value in insurance:
Comparative Analysis
Competitive Analysis
Interviews
Survey
“Never stop learning from your competition”
Researching the competition allowed us to view what already exists and what doesn’t. We were also able to view which features users enjoy and where some pain points exist.
A few things to note after researching Kaus’s competition were:
None of the competition offers a readily available bundle
Regardless of an online presence, users are still guided to speak with an agent
Survey Results
Utilizing Instagram I was able to get a quick poll from family, friends, and colleagues for a total of 25 people. For reference, most of the participants were between the ages of 24-32 years old.
Here’s what I concluded from the survey results:
The majority of users prefer shopping online
The majority of participants find affordability as the most important value
Bad navigation, Ads, and Poor Design drive users away from a site
Most participants would consider getting insurance online
The majority prefer to bundle
Interview Notes
Interviews were conducted with 5 participants all between the ages of 25-32 years old. Each participant is insured and has some understanding of insurance policies.
Here’s what we found:
The product must be as advertised
Shopping online is preferred
Bundling insurance is preferred
Everybody deserves to be heard
After doing some research and getting a better understanding of our users, we began connecting parallels among all parties involved. For this to be true, we considered any business and technical goals as well. Ultimately, all parties want a positive experience flow using the product.
Through our research findings, Michelle, Kaus’s persona, was created.
Occupation: Project Assistant
Demographics:
Lives in Los Angeles, California
Single, No Children
Contract Worker
About Michelle:
As a commuting student and full-time worker, Michelle tends to be on the road pretty often. She needs to feel safe and protected while on the road. She is a contract worker for major studios in Los Angeles and therefore is not given insurance through her employer. Her friends describe her as thoughtful, professional, tech-savvy, and a bit of a worrywart. She enjoys saving money where possible as she is a student.
Ok, time to ideate!
After gaining some user insight and doing research, it was time to ideate some designs for the site and build Kaus’s information architecture.
These are the methods I used to formulate some ideas:
Card Sorting
Sketching
Site Mapping
Kicking things off with a couple of the initial low-fidelity sketches for the homepage.
I began sketching some ideas out for the homepage to get started on brainstorming the homepage. I referred to previous comparative and competitive analysis research to gather ideas and elements that worked well. I then opted for a simple straightforward homepage in the end so as to not overwhelm the user. The challenge here was to create something original yet familiar for the user in mind.
Card Sorting
Card sorting via OptimalSort was used amongst 10 tech-savvy participants and the results were insightful.
For the most part, users seemed to align in this exercise and come together and agree on where certain actions should live. Going through the card sorting exercise made it clear where users categorize elements. Knowing this, we later referred to this card-sorting exercise when building a mid-fidelity prototype.
Time to map things out.
Creating a site map guided us through the site’s structure. Taking a moment to have a birds-eye view of the site’s structure enabled us to find flows and patterns that aligned with the card sorting exercise.
A few things to note here:
Focused on 4 screens (My Account, Discover Policies, Resources, and About Us)
We later reduced the number of actions needed to get a quote
This exercise helped us see how site sections were related to one another
Now a moment to go with the flow!
Click Image to Enlarge
Putting ourselves in the shoes of our person, Michelle, we went ahead and envisioned her flow online as she bundled with Kaus.
A few notes on the user flow:
Minimizing the number of actions to bundle was the goal
We later opted out of the quote calculator for an “Application Submitted” CTA to connect the user with an agent
Another primary goal was to make the process a breeze for Michelle
Purchasing a bundle was removed in the final iteration to finish the application via an agent
Let’s put together our findings and make some wireframes:
Here are a few annotations regarding the initial wireframe for Kaus’s homepage starting from the top:
Navigation at the top would have to be simple and accessible, we later removed the search function as it did not fit a need
Hero message would have to be simple, bold, and embody Kaus’s vision and mission statement
The area to add policies a la carte was later removed to focus on bundling as Kaus intended
The section about Kaus's primary focus was to give users some background on the company and its values to emphasize Kaus’s reliability and strengths
Moving down, I included a section focused on guest reviews to build some trust and confidence in the users
The footer was simple and re-iterated the navigation panel at the top with a few more options, ultimately kept simple and straightforward
With our foundations set, it was time to rebrand Kaus online.
Another main goal of Kaus was to rebrand itself to attract a younger demographic. Keeping in mind a younger demographic, we opted for a fun yet professional theme.
Here’s a bit of reasoning behind the choices made:
The logo was kept simple, in blue font to symbolize professionalism
The logo worked well in various sizes and black & white, this made it clear the logo was accessible to all
Manrope was chosen as the primary font as it characterized the brand and is legible in various sizes
Belgrano complimented Manrope as the secondary font, mainly used in headers, as it has a more formal structure
The color palette chosen revolved mainly around the “Kaus” blue (#214A7B)
Buttons, Input fields, dropdown menus, text links, and other components were sourced from elements that already exist and work well
Sourced illustrations from StorySet rounded out the imagery of Kaus
Setting the tone.
As to not overwhelm the user, we kept the header and messaging throughout the site simple, straightforward, and inviting. We set the tone at the fold to give users an idea of ease and approachability.
The header was trimmed down a bit from the initial sketches to give some breathing room at the top of the site. Only a couple CTAs exist at the fold to invite new users to “learn more” and welcome existing users by having them “login”.
To balance the seriousness of insurance and we paired the site with warm illustrations that catered to a younger demographic. The illustrations themselves are round and cheerful which aligns with Kaus's value of community.
The image depicted also shows the contrast between blue and white hues on the stat cards. Having the contrast in hues allows for better legibility. The stat cards are also depicted as hover state (white) and default state (blue).
Lastly, having gathered that younger users tend to like shopping online, we designed the bundling section as if it were any other shopping site. We had originally envisioned creating a la carte insurance bundling which then guided the user toward a quote bundling page.
However, when we took a step back and focused on Kaus’s vision to have optimized bundled packages to save costs, we realized that having bundles readily available made the process much easier and more convenient for every party.
Time to bring it all together.
Having rebranded Kaus and some of the site’s foundations in place, I began putting it all together and bringing the site to life by creating a mid-fidelity prototype. A few things I kept in mind were making sure the area was accessible to all, building a site that flowed thoroughly, and allowing the site to flourish with Kaus’s new theme.
A few of the challenges here were:
keeping the site simple so as to not overwhelm the user
balancing the seriousness of insurance yet making it approachable
allowing users to easily access the insurance bundles from the start
Some other items to note:
The site ultimately funneled visitors to viewing bundles at the bottom
Learning about Kaus was a priority to build familiarity with the user
Links, CTAs, and cards were consistent and recognizable by tech-savvy users
Splashes of color brought the site joy
Testing, Testing, 123…
To round out the site, usability testing was done to test the following:
overall quality and flow of the site design
test how users interact with the interactive cards and CTAs
test how easily users can find a student bundle and submit an application to get started
observe any areas of confusion, frustration, or difficulty
Here’s what we learned through testing:
Through initial testing, we gained valuable insight as to how to move forward and round out the edges. Thankfully all participants were able to achieve the goal of finding a student bundle and submitting an application. There were some areas left for improvement and this is where the focus would shift to the next iteration to make the site more cohesive.
A few areas to focus on in the next iteration:
Clarifying CTAs
Add the ability to customize a bundle
Continue building prototype
Tone down white hues
So what’s next?
After initial testing was completed, enough insight was gathered to proceed with the following:
Continue testing
Build a high-def prototype
Launch Kaus’s site
While this case study was my first and experience guided by Designlab. I definitely learned quite a bit. I learned that sometimes things don’t go as planned and that we must adapt to fit the common goal of all parties involved. As a UX Designer, I have to pivot with grace and provide solutions as needed.
I look forward to future projects as they will only propel my skills forward and help others reach their goal. Thank you for taking the time to visit my first case study. :)