Skim time: 1 minute

Skim time: 1 minute

H&R Block

2024

UX/UI

Design systems

Reducing Drop-off by 1.5% in H&R Block's "Approve Online" app

Reducing Drop-off by 1.5% in H&R Block's "Approve Online" app

Reducing Drop-off by 1.5% in H&R Block's "Approve Online" app

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

The problem

We kept seeing high drop-off at payment, return review, and signature collection screens

We kept seeing high drop-off at payment, return review, and signature collection screens

We kept seeing high drop-off at payment, return review, and signature collection screens

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

See that green bar the very top of the screen? ➡️

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 due to lack of journey transparency.

See that green bar the very top of the screen? ➡️

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 due to lack of journey transparency.

Before: Desktop (2020-2023)

Before: Desktop (2020-2023)

Before: Desktop (2020-2023)

Issue 2: There was no design consistency in our org regarding progress tracker UI

Issue 2: There was no design consistency in our org regarding progress tracker UI

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)

H&R Block previous explorations (2020-2023)

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?

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

Empower

Empower

Empower

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.

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

Clarify

Clarify

Clarify

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

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

Engage

Engage

Engage

Engage

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

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

Before: Original progress tracker design

Before: Original progress tracker design

Before: Original progress tracker design

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

After: New desktop progress tracker 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".


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.

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."

"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

— 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."

"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

— 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."

"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

— Caroline, 55

New problem: mobile navigation issues

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

Mobile option: stations

Mobile option: stations

How we solved the mobile issue

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

Collapsed/closed tracker

Collapsed/closed tracker

Open/expanded tracker

Open/expanded tracker

Open/expanded tracker

Impact

Impact

Impact

Drop-off rates descreased across 3 key screens

Drop-off rates descreased across 3 key screens

Drop-off rates descreased
across 3 key screens

Payment screen

Payment screen

⬇️ 1.7%

⬇️ 1.7%

Signature screen

Signature screen

⬇️ 1.6%

⬇️ 1.6%

Review return screen

Review return screen

⬇️ 1.2%

⬇️ 1.2%

Overall conversion increased

Overall conversion increased

Overall conversion increased

Additional users who completed the approve online process

Additional users who completed the approve online process

~3.3% (52,800)

~3.3% (52,800)

Bonus win 🏆

Bonus win 🏆

The progress tracker got added to the design system!

The progress tracker got added to the design system!

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

Atomic breakdown of the Block Design System step indicator

Atomic breakdown of the Block Design System step indicator

Copyright © 2025 Ali K Fishman