overview

This case study focuses on the product detail page for emergency kits, aiming to enhance accessibility for senior customers and increase the conversion rate.

Led quantitative and qualitative research to understand the challenges seniors face when purchasing emergency kits online and redesigned its product detail page; Collaborated with engineers to ensure consistent design across platforms and devices;
The redesign led to a 60% increase in conversion rates and a 2.5-minute decrease in task completion time post-launch.

As the company's first full-time Researcher and UX/UI Designer, I spent 7 months redesigning the entire website.

context

72Hours is a Canadian-based company specializing in earthquake kits, survival kits, and emergency preparedness.

PROBLEM

Seniors are struggling to purchase emergency kits on our website

Due to the pandemic, we transitioned to online sales. While our top-quality, competitively priced emergency kits attracted significant traffic, overall conversions saw only a slight rise. Notably, we observed a sharp decline in conversions from senior customers, despite a doubling of inquiries from this demographic.

Goal

Enhance the online purchasing experience for senior users and increase the conversion rate for emergency kits

Solution

A new emergency kits' product detail page
Jump to the process

The redesign focused on high-quality content, intuitive interactions, clear information architecture, with an accessible UI tailored for seniors. It help seniors quickly find essential purchasing information with minimal cognitive load.

Result

Since the new product detail page was published in November 2021, the conversion rates of 2-person deluxe emergency kits have increased by 60%.

+60%

Conversion rates

-2.5 mins

Task completion time

Unique Project Challenges

Understanding Gap Seniors' Pain Points in Online Shopping Experiences

Cross-platform Consistency

The Limitations of Elderly Users

Understand

Quantitative + Qualitative methods to identify seniors' pain points

I recruited 6 participants (4 elderly, 2 non-elderly), observed reactions, gathered quantitative data (task time, success rate, feeling score), and requested them to:

“Buy a black emergency kit that is suitable for a family of 3 for flood and under $300” on 72hour.ca by using desktop
Think out loud

To better empathize with users, I created a journey map. This helped refine the project scope, highlighting areas with low task success rates as key opportunities for improvement. Consequently, I decided to focus on the product detail page and collection page.

Here are the higher-level themes and root causes on these 2 pages, after affinity mapping.

Themes

Low information findability

High cognitive load

Root Causes

Insufficient information

Right information, wrong delivery

Complex interactions

Bad UI design

How might we

How might we help senior customers find the information they need for kits quickly and with less cognitive load?

IDEATION

After team brainstorming, we decided to revise the product detail page and collection page in the following aspects:

High-quality Content

Insufficient information

Right information, wrong delivery

Intuitive Interaction

Complex interaction

Clear IA

No structure

Accessible UI

Bad UI design

Design

Given the direct impact of the product detail page on conversion rates, I prioritized its redesign. Here are some challenges encountered in the process.

Challenge 1: Effectively organize lengthy content for easy navigation and quick access

Exploring multiple layouts and decision-making with senior limitations in mind

To align with the finding that users rely on visuals for purchasing decisions, I used strong imagery with minimal text. However, it increased page length. To address it, I explored various layouts, considering senior users' limitations, such as vision loss, motor skill decline, and limited tech experience.

Finally, 'Horizontal Table of Contents (TOC) + Long Page' layout was selected for its accessibility to seniors. Testing validated the layout's effectiveness, as all senior participants could easily navigate and locate information on the page.

4 Proposed layouts

Challenge 2: Adapt infographics for platforms with distinct limitations within a tight timeline

Thoroughly analyze each platform's limitations to identify compatible solutions

I created unified infographics to improve senior customers' understanding of the kits across our website and Amazon store. During the design review, engineers and an Amazon market specialist highlighted distinct implementation challenges on each platform.

With the business owner aiming to launch within a week, I quickly explored Amazon's templates and found that the 'hero image' format was compatible with both platforms, requiring only an upload for implementation. This approach allowed us to meet the deadline, and the team approved converting the infographics into image-based content.

Platform limitations and proposed solution

To ensure responsiveness across devices and platforms, I collaborated with engineers to test the images at various breakpoints and revised them based on the results.

Tested breakpoints

Mobile Version

Before the website was shipped, I finished the design for mobile.

Design Handoff

I worked closely with 2 developers. I showed them any design updates weekly to ensure an accurate implementation.

Handoff files

Takeaways

Cross-functional collaboration is key to success.
We need to learn how to play the game of tradeoffs.
For UX design, intentionality is key. Think about every element of the project and how it ultimately would all come together to contribute to the end result.

Next Steps

Track real-world quantitative data and iterate the design.

After working at D2L, I realized even more the importance of accessibility. So if I had more time, I would address other assistive technology needs.

Make all content accessible by keyboard.
Add appropriate alt text to every image.