Update: I went over this with a data friend and they said it’s actually a 21% lift. I’ll get around to fixing this at some point, I promise.
Onboarding redesign = 12% lift for Money in Excel
5 minutes on funnel metrics, where our problem was, and how I addressed it.
Brief
Money in Excel (MiE) is a Microsoft premium template for personal finance management. In 2020, it needed an onboarding refresh to meet compliance guidelines and address UX issues, which included 2 brand new screens:
A blocking screen to prevent users outside the US from accessing the product.
A communications consent screen to allow users to opt in or out of promotional emails.
MiE users reported confusion with navigating onboarding, what "Plaid" is, and understanding how much prep their is before they can use the template. This is reflected in people leaving onboarding (funnel metrics), particularly around connecting a financial account. Our guiding questions
How might we make onboarding simple and intuitive?
How might we make it easy to understand the value of the product?
Role: content and UX designer
Worked with: researcher, project manager, and engineer
Challenges
Multiple big issues had been identified through research, funnel metrics, and user feedback.
MiE didn't control about a third of the onboarding screens. The screens werre owned by Plaid, a third party that pulls in financial information.
It's my first time really designing something, so I'm learning while doing.
Goals
Address the biggest UX issues within our control to help more users complete onboarding.
Refocus our screen introducing Plaid on MiE user benefits of connecting a financial account.
Design new screens for compliance.
Solution
I templatized our onboarding to reduce friction and create patterns, which allowed users to focus on the new information and decisions at each screen. To orient users, I added a progress bar with section labels as well as a back button so users could revisit previous steps.
Scope creep and clarity: break it down and prioritize
When clarifying 1 screen became a whole flow redesign
My original task was helping people better understand how financial information gets into the product. Like most design things, when you start pulling a thread, you reveal some structural problems. My researcher revealed user-identified pain points, like how the 1-2-3 counter didn’t help people understand where they were in the flow. My product manager raised compliance issues: we weren’t asking people if they wanted promotional emails and international Microsoft accounts were accessing the product, even though we were starting with the US only. How do you know where to begin?
As a team, we prioritized based on effort required, severity of the issue, and dependencies like timing sign-off from legal. This allowed me as the designer to chunk out the work into areas to explore: the content hierarchy, navigation, and general pattern building.
Zoom out, then zoom in
It’s easy to get lost in the details, even with clear prioritization from your product team. I like to zoom out and clarify the purpose of the screens (the why) before exploring what will actually guide people on each screen (the how).
When considering a brand new screen, I lay out the essentials by thinking through a few questions:
Who is this for?
What do they need to do?
What context do they need to do that?
How might we leverage existing patterns or establish them to make this flow easier?
Establishing and improving patterns
We had similar building blocks for each screen, but there wasn’t a placement pattern. I templatized the screens and paired information users needed about continuing with the buttons that would drive them forward. I left-aligned text so content-heavy screens were easier to read. I worked with our illustrator, Jonathan Morris, to replace less meaningful logos with screen-relevant illustrations.
Even with templated screens, we could improve how we oriented people within the flow. We had a 1-2-3 counter that initially seemed to count the number of screens, but that paradigm stopped making sense once users got into third-party screens that connect accounts. I proposed a progress bar paired with section labels and the ability to go back. This gave users concrete landmarks tied to what they were doing in the moment as well as a sense of movement.
Full picture: before and after
I want to acknowledge that the previous flow wasn’t bad, it could just be better. The previous design was necessary to get the product launched in a given amount of time. It’s easy to look back and say, “Here’s something I wasn’t completely happy with and here’s why.” It’s even better when all-star researchers like Amy Wu do experience reviews to pinpoint where there are problems and rates the severity. And truly, you need a good PM like Letitia Liu to make sure you’re meeting your legal team’s requirements, addressing areas that users fall out of the flow, and are realistic about what we can actually build with our current roadmap.
By establishing and fine-tuning patterns, I reduced cognitive load and friction, making it easier for users to get through onboarding and into the main product experience. I purposefully disrupted the pattern in the blocking screen (3a) and have applied it to other blocking/error screens as a way to say “this is a moment to pay attention, and you might be able to do something different to get out of here.”
If I could revisit this flow, I’d like to test button labels on the connect account screen (4). “Get started” felt alright, since they were getting started with connecting accounts, but does it make sense that need into onboarding? I’d also freshen up the sign in illustration (1) and see if we could give users more autonomy in the emails they get (3b) rather than automatically sending them non-promotional emails.