Tiny progress tracker, big pay-off: decreasing user escape rates by 1.5%

Shining a light on the path users were taking enabled us to reduce drop-off across 3 key screens, resulting in a 3.3% increase in conversion (or if you like bigger numbers: 52,800 additional users completed the flow).

Project goals

Help remote tax reduce drop-off at multiple points in the Approve Online experience

Help remote tax reduce drop-off at multiple points in the approve online experience

Help remote tax reduce drop-off at multiple points in the Approve Online experience

Help H&R Block grow and retain more users by making the approve online process more convenient and transparent

Help H&R Block grow and retain more users by making the approve online process more transparent

Help H&R Block grow and retain more users by making the approve online process more convenient and transparent

Impact

Drop-offs across 3 screens ⬇️ 1.5% average

Conversion overall ⬆️ 3.3%

Added to the design system 🎉

Drop-offs across 3 screens ⬇️ 1.5% average

Conversion overall ⬆️ 3.3%

Added to the design system 🎉

Drop-offs across 3 screens ⬇️ 1.5% average

Conversion overall ⬆️ 3.3%

Added to the design system 🎉

The problem

We kept seeing high drop-off at payment, return review, and signature collection, despite high overall conversion

Right idea, wrong progress tracker = lack of transparency

Our tracker was so small, it showed no indicator of where users actually were in the experience.

Important steps like signing the return, reviewing the return, and paying for tax prep service were shrouded in mystery.

Our theory: higher drop-out rates were caused by users feeling unprepared to complete those tasks lack of journey transparency.

Our tracker was so small, it showed no indicator of where users actually were in the experience.

Important steps like signing the return, reviewing the return, and paying for tax prep service were shrouded in mystery.

Our theory: higher drop-out rates were caused by users feeling unprepared to complete those tasks lack of journey transparency.

The current tracker was small, almost hidden from sight, and had no indicator of where users actually were in the experience.

Important steps like signing the return, reviewing the return, and paying for tax prep service were shrouded in mystery.

Our theory: higher drop-out rates were caused by users feeling unprepared to complete those tasks lack of journey transparency.

Before: Desktop (2020-2023)

There was no design consistency in our org re: progress trackers

Approve Online needed a design that could be easily adapted across different products, types of experiences, and lengths of journeys.

Though we had options at our disposal from the H&R Block design org, there was no enterprise design or UX pattern for tracking progress.

Approve Online needed a design that could be easily adapted across different products, types of experiences, and lengths of journeys.

Though we had options at our disposal from the H&R Block design org, there was no enterprise design or UX pattern for tracking progress.

H&R Block previous explorations (2020-2023)

The question

How might we give users confidence to get their return approved quickly, correctly, and without any surprise tasks?

Progress tracker jobs to be done

Empower

Users should feel confident in what they are doing, when they are doing it, and how long it is taking them to complete their journey.

Clarify

Users should be able to understand the steps in the journey, what each of these might entail, and important key moments.

Engage

Users should feel engaged in the filing process and a sense of accomplishment by the end of the journey.

Before: original desktop/mobile design

A utilitarian and easy-to-develop bar without labels, at the top of the viewport.

After: new desktop design

After exploring multiple design options, the most adaptable was the one we'd dubbed "stations".

The Approve Online app is like a metaphorical subway ride: users must make stops at specific stations before they can reach their final destination. They can backtrack to previous stations, but they can't skip ahead.

After exploring multiple design options, I landed on the most adaptable UI I called "stations".

Conducting impromptu interviews due to UXR constraints

Around the time of this project, we went to San Diego to interview a handful of ethnography study participants. I took this opportunity to tack on a few questions for the participants after showing them a prototype of the progress tracker. The feedback was overwhelmingly positive.

"Honestly, this would have made the approval process feel much quicker. I didn't know how many pages there were and at one point had to leave, so I didn't know where to pick back up."

— John, 65

"Honestly, this would have made the approval process feel much quicker. I didn't know how many pages there were and at one point had to leave, so I didn't know where to pick back up."

— John, 65

"This is so great, I wish this had been around when I started this study. It's so nice to see what's next laid out in front of me."

— Denise, 48

"This is so great, I wish this had been around when I started this study. It's so nice to see what's next laid out in front of me."

— Denise, 48

"I love that you tell me when I'm able to review my return. I still don't like that I have to pay before getting it, but at least I know where in the signing process it shows up."

— Caroline, 55

"I love that you tell me when I'm able to review my return. I still don't like that I have to pay before getting it, but at least I know where in the signing process it shows up."

— Caroline, 55

Mobile navigation concerns

The desktop format was incompatible with mobile

Even at the minimum common width across both Android and Apple devices, we wouldn't fit more than 7 stations, and there was potential for up 10 steps.

Station names needed to be 6 characters or less to match what was designed for desktop

This solidified for me that mobile could not be a 1-to-1 match for desktop, and would need to be its own design for the sake of legibility and accessibility

Mobile web only accounted for 46% of all traffic, making mobile a nice-to-have

Mobile users weren't a priority for our initial designs, so I focused on creating a desktop tracker first.

Mobile option: stations

Final mobile designs

Opting for progressive reveal to make an adaptable mobile tracker

With the limited real estate available, I made the choice to prioritize the current step on a closed tracker.

If necessary, the user could expand the progress tracker to see the entire journey and how far along they were.

Vertical orientation allowed for longer/more specific step names

What everyone (dev, design, and PMs) loved about the vertical option from desktop how the white space. This allowed us to have:

1) more steps

2) more accurate naming conventions

Collapsed/closed tracker

Open/expanded tracker

Impact

Drop-off rates descreased across 3 key screens

Drop-off rates descreased
across 3 key screens

Payment screen

⬇️ 1.7%

Signature screen

⬇️ 1.6%

Review return screen

⬇️ 1.2%

Overall conversion increased

Additional users who completed the approve online process

~3.3% (52,800)

Bonus win 🏆

The progress tracker got added to the design system!

After the initial design review where fellow designers and developers gave their feedback, the Block Design Team approached me.

They loved the tracker so much, and thought it was a such a great exploration in UI, that they wanted to absorb the work and make it a universalized component for the rest of the design org to use.

Bonus win 🏆

Atomic breakdown of the Block Design System step indicator

Home

About

Resume

menu

menu

Skim time: 1 minute

Skim time: 1 minute

H&R Block

2024

UX/UI

DESIGN SYSTEM

Tiny progress tracker, big pay-off: decreasing user escape rates by 1.5%

Tiny progress tracker, big pay-off: decreasing user escape rates by 1.5%

Tiny progress tracker, big pay-off: decreasing user escape rates by 1.5%

Shining a light on the path users were taking enabled us to reduce drop-off across 3 key screens, resulting in a 3.3% increase in conversion (or if you like bigger numbers: 52,800 additional users completed the flow).

Project goals

Impact

The problem

The problem

We kept seeing high drop-off at payment, return review, and signature collection, despite high overall conversion

We kept seeing high drop-off at payment, return review, and signature collection, despite high overall conversion

We kept seeing high drop-off at payment, return review, and signature collection, despite high overall conversion

The question

How might we give users confidence to get their return approved quickly, correctly, and without any surprise tasks?

How might we give users confidence to get their return approved quickly, correctly, and without any surprise tasks?

How might we give users confidence to get their return approved quickly, correctly, and without any surprise tasks?

Progress tracker jobs to be done

Progress tracker jobs to be done

Conducting impromptu interviews due to UXR constraints

Around the time of this project, we went to San Diego to interview a handful of ethnography study participants. I took this opportunity to tack on a few questions for the participants after showing them a prototype of the progress tracker. The feedback was overwhelmingly positive.

Mobile navigation concerns

Final mobile designs

Drop-off rates descreased across 3 key screens

Drop-off rates descreased across 3 key screens

Drop-off rates descreased
across 3 key screens

Overall conversion increased

Overall conversion increased

Overall conversion increased

menu

menu

Skim time: 1 minute

Skim time: 1 minute

H&R Block

2024

UX/UI

DESIGN SYSTEM

Tiny progress tracker, big pay-off: decreasing user escape rates by 1.5%

Tiny progress tracker, big pay-off: decreasing user escape rates by 1.5%

Tiny progress tracker, big pay-off: decreasing user escape rates by 1.5%

Shining a light on the path users were taking enabled us to reduce drop-off across 3 key screens, resulting in a 3.3% increase in conversion (or if you like bigger numbers: 52,800 additional users completed the flow).

Project goals

Impact

The problem

The problem

We kept seeing high drop-off at payment, return review, and signature collection, despite high overall conversion

We kept seeing high drop-off at payment, return review, and signature collection, despite high overall conversion

We kept seeing high drop-off at payment, return review, and signature collection, despite high overall conversion

The question

How might we give users confidence to get their return approved quickly, correctly, and without any surprise tasks?

How might we give users confidence to get their return approved quickly, correctly, and without any surprise tasks?

How might we give users confidence to get their return approved quickly, correctly, and without any surprise tasks?

Progress tracker jobs to be done

Progress tracker jobs to be done

Conducting impromptu interviews due to UXR constraints

Around the time of this project, we went to San Diego to interview a handful of ethnography study participants. I took this opportunity to tack on a few questions for the participants after showing them a prototype of the progress tracker. The feedback was overwhelmingly positive.

Mobile navigation concerns

Final mobile designs

Drop-off rates descreased across 3 key screens

Drop-off rates descreased across 3 key screens

Drop-off rates descreasedacross 3 key screens

Overall conversion increased

Overall conversion increased

Overall conversion increased

Drop-off rates descreased
across 3 key screens