KANS E-commerce

KANS Tablet and Mobile Hero Image

Categories: UX/UI, Branding
Role: UX Researcher, UX/UI Designer, Brand Storyteller
Tools: Sketch, Figma, InVision, Zeplin
*** Note: Student project ***

1. Introduction

Kans is an insurance company looking to modernize their business model and move their services online. They currently offer business-to-consumer insurance plans but also want to offer business-to-business insurance plans in the future. Kans’ primary needs from the website are to be able to browse and filter through age groups, income ranges, and plan usage statistics. They also want to use this opportunity to refresh their brand.

Problem:

The insurance system and language is confusing for an average person. They find it hard to buy insurance on their own.

Scope and Constraints:

The scope included user research, planning website layout, designing the UI, usability testing, and making changes from analyses. The website build was restricted to four weeks, which included the time to complete backup research and usability testing analysis. The time restriction also limited the website scope. However, as the project progressed, the scope grew after surprising results came back from the split A/B testing and final usability testing.

Challenges Faced:

There were several challenges to this project. The primary challenge being privacy. Many individuals in the research group were uncomfortable disclosing the specific plan purchased because it was typically associated with their income and how much they could afford. Another challenge related to privacy was possible legal consequences for me from collecting this information.

Also, most research participants tended to purchase insurance from an insurance advisor and not independently online. This may be because individuals are unfamiliar with the differences and limitations between plans, and rely on direct advice from the advisor.

2. Research Definition

The general goal was to understand a customer’s wants, needs, and desires from an e-commerce site. The main goal was to understand why customers bought insurance plans. Questions to be answered by the research include:

  • What was their experience like?
  • What caused them confusion or frustration?
  • Where did they usually buy from and why?
  • How did things work out for them?

I initially created Google surveys and relied on user participation to gather data but only a small group of individuals responded. My first attempt at research used quantitative research methodology to find qualitative data. Although I incorrectly applied the research methodology, I found a general pattern that emerges from research participants’ responses. Many of the participants avoided purchasing insurance plans independently from an insurance company. They generally required assistance in understanding insurance terminology, legalities, and cost differences.

After the initial Google survey, I conducted a second round of one-on-one phone interviews to gather new data. I tried harder to get research participants to disclose their buying experience by sharing my experiences. From this secondary research, I started brainstorming for Kans’ website. This included ideas relating to the consumer audience, competition, and customer personas.

KANS Goals:

KANS Goals

Customer Base:

KANS Target Audience

Analysis & Provisional Personas:

KANS Analysis and Provisional Personas

Meet Mr. Breadwinner:

KANS Persona 1

Meet Mademoiselle Étudiante:

KANS Persona 2

3. Solution Planning

KANS Low Fidelity Sketches
Low-fidelity hand sketches of 3 versions of the home page

Site Map:

KANS Sitemap

Based on user research, I designed the information architecture for the website navigation to be simple and have straightforward keywords. I came about this by having research participants complete an online open and closed card sort test. The test required participants to sort and organize common insurance keywords. I initially came up with the concept sitemap by using brainstorming software. The above sitemap is the final version I would present to clients and stakeholders for their review and comment.

My concept for the “experience” navigation was to progress from passive buying to active insurance buying. The “home” and “contact” labels were initially planned in wireframe and were explored as needed. I attempted split A/B testing on the 30 - 65-year-old age group. They required more context in terms of images and verbal instruction to complete the research testing otherwise they felt lost. I also planned the task and user flow for the checkout phase and interaction screens using wireframes. I applied this user flow for purchasing travel insurance.

Task Flow:

KANS Task Flow

User Flow:

KANS User Flow

KANS Wireframes
Performed quick & dirty split A/B testing on home page wireframes

4. Solution Execution

Branding & UI Kit:

KANS Personality

KANS Brand

KANS UI Kit

The company brand refresh involved renaming the brand to update itself in 2020. Kans can be a gamechanger in transforming the future of how we purchase insurance. With travel insurance, I discovered by experimentation that the optimal design colour themes are warm tan or cool ocean. I have the unique idea that Kans can change their travel insurance webpages’ colour theme depending on the season and customer base, while all navigation and webpage data remain the same. For example, during the warm summer months, the cool ocean theme could be applied to the webpage, while during the cool winter months, the warm tan theme could be applied. Changing colour themes to complement the user’s reason for purchasing the insurance may alleviate the stress involved with deciding on an insurance plan.

Affinity Map:

KANS Affinity Map

When I made the initial responsive UI, I tried my best to design something from my heart and mind from the user research. I don’t know if my designs are what users liked or not. What was burned into my mind was the goal of determining what consumers buy insurance for and how to best fit it into their lives. I surprisingly designed the site as a lifestyle website. What occurs in my mind, one may ask. The answer is I don’t know. Happy subconscious accidents do happen in design.

InVision desktop prototype

After the usability testing and reflecting on the affinity map, I made high priority changes to the site. The high priority changes I made:

  • Making information architecture, subnavigation, text with icons, and live chat labels have more precise wording for users to understand
  • Add back the "home" and contact" main navigation labels for the 50+ year old users
  • Make the important features bigger like live chat for those who are not web-savvy and 50+ year olds

KANS Responsive UI
  1. Visualizing bulk insurance buying with insurance plan discounts and bundling
  2. Navigational UI of the desktop

5. Outcomes and Lessons

The biggest lesson I learned was to do check-ins with research participants continuously throughout the project because they acted as a guide to successfully producing a website they will use. Research participants should be involved at various stages, including:

  • One-on-one interviews
  • Card sorting
  • Split A/B testing wireframes
  • The final stage of usability testing on a rough prototype

Being the one-person workforce to produce the Kans responsive website was challenging, even though I had feedback and support from my mainly my school design community. My network helped me at times as well. I valued another team member for the extra pair of eyes to see the blindspots while I focus on the UX/UI design and brand while they do content strategy.

Besides, I learned that the Gestalt’s principle of proximity is very important in e-commerce websites. I had to understand how to balance this principle within a minimalistic website design, which had a lot of negative space. My focus is to incorporate the Gestalt theory, while also making the interface usable with negative space. A webpage cannot be all text or all unusually blank space, it had to be a balance of both.

Furthermore, from the usability testing, I saw Jakob's law in action. People like to see the "About Kans" section right on the home page itself or the main navigation label. This directly sells the company brand but I went against convention with no about me section right on the home page. Instead, I saw the potential of how the user testers organized the card sort and placed it into the mega menu.

Also, when I was completing the project, I took care of adding an extra layer of experience with animations. I feel the animations will add to the user experience and attract users to buy insurance. At the end of the day, I have to ask myself, is this the real MVP Kans wants with marketing, and will it benefit users? I think there will be a chance of success in sales growth. It could add innovation, and upsell insurance plans. The animation gallery can be completed as a beta trial to see if this can help Kans increase their sales numbers.

If time permitted, I would add the following changes and complete another usability test:

  • Give a more realistic content of the site
  • Make the insurance form checkout more usable with Gestalt’s principle of proximity in place
  • Make the code animation demo I envisioned