Case study:


Responsive design for a fictional insurance ecommerce website

The project

Kaus is a fictional insurance giant, well-established and known for their cost-conscious comprehensive insurance bundles sold through local agents. Kaus is planning a shift into online insurance sales, which also entails a first-time foray into direct consumer sales.

While I was tasked with designing an ecommerce site for Kaus, this job was really about designing consumer confidence with online independent insurance purchasing. This is the story of my approach.

UX Strategy: the research process

Competitive analysis & user research

View research report

I began with research of the insurance industry and online insurance sales. In addition to direct competitors such as State Farm or AllState, indirect competitors also impact the FinTech landscape. In particular, the insurance aggregator esurance offers a spectrum of easy quotes and educational articles & resources.

To understand motivations & barriers to online insurance purchasing, I interviewed 6 potential customers. I learned that consumers are reassured by working with insurance agents, and unsure of their own ability to make the correct decisions about insurance purchases. However, convenience trumped fear, and all were interested in the online insurance purchase concept. With the insights gained from this process, I developed the persona Anna, reflecting the goals & concerns of these insurance shoppers.

Anna: insurance shopper persona

Site design

Product strategy

Combining business needs with user insights, I distilled the critical points into 3 key business problems necessary to address through the site design:

  1. Maintain established reputation while projecting a modern image appealing to consumers comfortable with purchasing online insurance 
  2. Facilitate consumer confidence in insurance purchase decisions (made without agent assistance)
  3. Allow consumers to quickly determine insurance prices without requiring personal information

Site layout

Keeping strategic, business, & user needs in mind, I sketched several lay-out variations in, honing on content strategy, information hierarchy, and visual harmony. By the 5th sketch I started to nail the balance. These designs feature consumer access to education, resources, & advice to facilitate confidence in the purchase process, satisfying the 2nd critical point outlined above.

Final sketch iterations

After considering content and interaction details, including building a site map and creating flows through the insurance buying process, I was ready to wireframe a site design, keeping mobile access in mind. The quick quote boxes are a critical feature of this design, allowing potential customers to see an estimated rate based on minimal information, and satisfying the 3rd critical point outlined above.

Responsive site wireframes
Interactive prototype
of insurance purchase process

Designing the message

Brand strategy

My next step was to develop  the right image to encourage consumer confidence in the Kaus brand. Kaus has the advantage of an established reputation, but also needs to appeal to the customer segment willing to forego an agent relationship and purchase insurance entirely online. To achieve these seemingly dichotomous goals, I arrived at a balance of solidity and playfulness, projecting reliability with deep gray tones, balanced with touches of fresh spring green and playful but sparing imagery & iconography.

Final design

Once the user interface design was in place, I performed another round of user testing with an interactive  flow through the purchase process, and making changes necessary for users to easily accmplish key tasks.

Final site designs
Interactive prototype
of insurance purchase process

Meeting business & user objectives

Beginning with defining the most critical factors in Kaus’ move to online insurance sales, business and customer goals were kept at the forefront of the entire design process. The final site design accounts for and achieves the 3 critical points identified while developing the brand and product strategy.

Critical point: Maintain established reputation while projecting a modern
image appealing to consumers comfortable with online insurance purchasing
Critical point: Facilitate consumer confidence in insurance purchase decisions
Critical point: Allow consumers to learn rates without personal information

Lessons learned

This fictional Kaus project was one of my first design projects from start to finish, and I carried out all aspects of the work myself, from concept & strategy to final visual design. The process entailed several steps and design deliverables, of which the above are a small and relevant sample. Some steps were more successful than others, and some yielded more - or less - value than I had anticipated.

For example, because insurance sales include a wide variety of products across several fluid categories, information architecture and hierarchy are critical to the design. I performed a card sorting task to understand what type of categorizations would make the most sense for the site. I provided participants with 30 insurance products to organize into as many categories as they thought appropriate. I expected a fair amount of insight from this exercise, but my results were dissapointing, with only the conclusion that consumers are comfortable with a large number of categories of insurance products, and no concensus on what those categories might be.  I learned the lesson that not every task is appropriate to each project, and context and specifics should be carefully considered alongside project parameters. In this case, the specific categories were less important than clear descriptions and explanations for each product.
Another issue that came up during this project was the responsive design for the mobile site. I initially designed a mobile screen that was optimized for mobile use cases. For example, a user may be less interested in filling out a complex purchase form from their phone, but may want to be able to quickly pay their bill or to access insurance claims. My intial mobile site thus featured prominant “claims” and “payments” buttons, with product and purchase information pushed further down the information hierarchy.

After sharing my designs and getting great feedback, I ultimately concluded that consumers expect a similar experience across devices.

My final mobile design thus mirrors the information hierarchy of the desktop site, and relies more on responsive grid than on media queries for design responsiveness.

If I were to go back or continue working on this project, I would design a separate mobile app featuring the actions most important to established customers.