Sections:

1. Overview
2. Problem
3. Results:
Checkout flow
4. Results:
Account Settings &
Cancellation
5. Research
6. Opportunity
7. Process:
Checkout flow
8. Process:
Account Settings &
Cancellation
9. Prototypes
10. Reflection

What leads older adults to abandon their online purchases?

Mythbusting usability perceptions to help tailor a checkout flow for older adults

OVERVIEW

Context
  • ‍My role: Lead Designer
  • Timeline: 6 to 7 weeks
  • Platform: Responsive web
Company
Age Bold brings together expert trainers from across the country who specialize in fitness for older adults onto their platform to help their users improve balance, increase strength, and reduce falls.
Problem
Design their first checkout flow for new users, users converting from free trials, or possibly gifting this service to another.

Our scope grew to address users wanting to cancel their plans later.
Solution
We launched a new checkout UX for their subscription service in which 3 design flows were partially shipped. As in, Age Bold used a multipage flow and navigation features we produced, but did not use some of our visual design components.

Overall, our deliverables included: (1) multipage checkout flow and (2) a redesigned account settings page and cancellation flow.

THE PROBLEM

How could we assure older adults they're signing up with a service with their best interest in mind?
Our user research revealed how this demographic entrusts their product decisions by focusing their attention on...

RESULTS: Checkout Flow

Mythbusting perceptions by testing their visual and interaction preferences
Since checkout flows follow common mental models, our goal was to test how this demographic would treat two versions (single and multipage) to the same task to understand their reactions to modern visual and interaction designs.

I learned to provide ease of use and clarity to what, when, and how Age Bold's target users can subscribe, or make changes to their plans.
BEFORE
Single-page version
Multipage version
AFTER
RESULTS
To pinpoint their biggest concerns, I let the users call out specific design elements that were affecting their experience in both versions. All of our testers preferred the multipage designs.

RESULTS: Account Settings & Cancellation Flow

But wait, what if their users wanted to cancel?
As team lead, I decided to add this to our scope to ensure Age Bold's users had a design tested to address their subscription management needs. The best course of action was to modify Age Bold's existing account settings page.

Our usability tests revealed users still wanted a multipage Account Settings design. In addition, our design critiques led to adding clearer navigation and text hierarchy.
BEFORE
AFTER
ITERATIONS: Housing the Cancellation flow
Now that we found a place to put the cancellation flow, the most important improvement was promoting the value of Age Bold's service to encourage their users to stay.
BEFORE
AFTER

How did we get there?

RESEARCH INSIGHTS

Because older adults tend to have longer attention spans, our user interviews revealed:
  1. Information to include, or clarify
  2. They're likely to share, or let a family member manage their email accounts
  3. Their backgrounds impacted their comfort levels with devices

THE OPPORTUNITY

Instilling trust to prevent user abandonment
To address these problems, I established these design guidelines to focus our efforts:

PROCESS: Checkout Flow

Building something new for underserved users meant testing multiple paths
Without an existing checkout flow to test, we researched 11 sites and picked one to conduct four usability tests with this demographic.

This spurred three "How might we" questions to guide our direction. They were:
  1. How might we make these flows easier to interpret interactions?
  2. How might we make the copy clearer for what, when, and how they're paying for this service?
  3. How might we make the copy and interactions consistent across mobile, tablet, and desktop?
Most important changes from additional user testing below were:
ITERATIONS: Checkout Flows

Single page version

Multipage version

FINAL ITERATIONS

PROCESS: Account Settings & Cancellation flow

Pledging our commitment to serve the user's subscription management needs
I decided to add a cancellation flow into our scope because it was an opportunity to serve their users further. To do this, we tested the account settings page around the 3 "How might we" questions mentioned earlier.
Most important changes from testing were:
ITERATIONS: Account Settings
FINAL ITERATIONS: Account Settings
ITERATIONS: Cancellation flow
From their Account Settings page, users could enter the cancellation flow. Most important changes from testing were:
FINAL ITERATIONS: Cancellation flow

PROTOTYPES

Whether they were new, existing, gifting, or cancelling...user testing showed users wanted to focus on 1 task, 1 page at a time
Users wanted to go through a checkout flow efficiently by assessing what's being offered to protect their best interests. However, they wanted to evaluate this one page at a time.

We also addressed the copy that was missing/confusing by working with Age Bold to balance their wants with the user's feedback.

The GIF below is the desktop prototype:
Housing the cancellation flow within account settings
Users also wanted to quickly navigate their profiles to make changes, or cancel their plan if desired. These needs were addressed and reflected within the desktop prototypes below:
The cancellation flow

REFLECTION

Assisting underserved users requires relentless focus
The most challenging aspect to this design was knowing which method to use and when to build something new for an undeserved demographic.

I learned to deal with it by setting a clear direction with statement starters and establishing design guidelines backed by our research insights. This allowed us to focus our efforts on refining our deliverables
in the final week.