Case study · Mobile App

Providing financial visibility at your fingertips

Concept Timeline — add dates Sole Designer Mobile App 1 PM · 6 Eng

Are you aware of your finances, better yet, taking charge of your financial health?

Not to worry, you aren't alone! M23 will help make solving your finances easy and manageable, with a financial partner you trust.

M23 account overview
TL;DR
Background
Millennials were increasingly looking to tech startups rather than banks to rethink personal finance — M23 explored what a more transparent, guided banking experience could look like.
Problem
Early research pointed to a target persona who was digitally savvy but not a "digital pro," and generally unsettled about their finances.
Approach
I ran 3 rounds of onboarding iterations, usability testing each phase, narrowing down skip paths, a demo mode, and account setup into one clear flow.
Outcome
Simplified onboarding from 4 possible home-screen paths down to 2, with a demo mode added to build trust before signup.
3
Onboarding iterations tested
4→2
Home-screen paths simplified
Demo
Mode added to build trust pre-signup

Research

To kick off the project, I researched millennials — our target audience — and their financial habits and outlook, to get a sense of what they'd want and expect from a banking partner.

Research data points

Competitors

Nearly half of millennials are counting on tech startups to overhaul the way banks work — they believe innovation will come from outside the industry. I explored apps making an impact in the fintech space to get a sense of their onboarding, core features, and overall look and feel.

Fintech competitors: Mint, Robinhood, ClarityMoney, N26, Simple, Chime

Persona & Journey

Nearly half of millennials say they're counting on tech startups, not banks, to overhaul how banking works. That research narrowed down to one persona — the "Unintentional, Digital Star": digitally savvy but not a digital pro, and generally unsettled about their own finances.

User persona

From there, I mapped the journey of a new customer opening an account for the first time across three phases: onboarding, account registration, and in-app experience.

User journey map

Sketches

I usually sketch a rough flow before wireframing. Here's an early onboarding concept focused on the ID-verification step — capturing a government ID, then a selfie, with liveness checks run in the background to confirm the user is real.

Onboarding sketch

Constraints along the way

As with any real product, direction shifted with stakeholder feedback and technical limits. A few things didn't make it into this version:

  • Integrating with the Yodlee API wasn't feasible
  • Social login (Facebook / Google / LinkedIn) was considered but not pursued
  • A demo mode was explored as a way to build user trust before signup
  • Giving users the option to skip parts of sign-up straight to the home screen
  • A "navigation" explainer page — ultimately trimmed for having too many options
  • Alternate funding methods like Venmo or Apple Pay
Iteration 01

Too many skip points, too many home screens

The first pass let users skip at multiple points during onboarding. Since creating an M23 account or linking an external one was never required, users could land on any of 4 different home screens depending on what they skipped — with very limited functionality on most of them.

The result was 4 different sets of home screens that the user would have arrived at, since we didn't make it mandatory to create an M23 Bank Account or link an external one. Below are examples of each route a user could have taken — the ability to skip at multiple points during onboarding.

Four onboarding home screen variants: no M23 no linked account, has M23 no linked account, linked external account no M23, has M23 and linked account

1st onboarding iteration

Iteration 02

A navigation page to clarify next steps

To help users clarify the different phases of onboarding, we added this "navigation page" that lives right after you create an account. It gives the user a brief intro into what each step is.

  • Purpose: gave the user the option to do either one of the options
  • Problem: as a first-time user, it might be unclear what these options actually mean
  • Takeaway: limit the number of options you give a user
Second onboarding iteration

2nd onboarding iteration

Iteration 03

A demo, to earn trust before signup

I introduced a demo feature on the onboarding screen so users could explore the app's features and capabilities without signing up first — hoping that seeing the app in action would build trust ahead of account creation.

Third onboarding iteration

3rd onboarding iteration

Visual design

A style guide for consistency

Alongside the InVision prototype, I put together a quick style guide to keep the visual language consistent across the project.

Style guide
Final flow

Narrowing down to what mattered

The final onboarding flow led with the demo, kept the navigation page but narrowed it from 3 options down to 2 (create an M23 account, or link an external one), and reduced the skip paths down to just 2 possible home screens.

Final onboarding flow

Overview Page

Once onboarding is complete and an external account is linked, users land on the overview page. From here, a user like our persona "Sara" can send and receive money peer-to-peer through Buddy transfer, see her 5 most recent transactions across linked accounts, and check spending insights to get a better read on her habits.

Overview page

Learnings

A few things I'd carry into the next project:

  • Usability testing matters more than I gave it credit for — several design decisions got brushed aside in stakeholder conversations simply because I didn't have evidence behind them.
  • Test early and often — I wish I'd had the time to show and test designs with real users far more than I did.
  • I tend to focus on the big picture and can lose sight of small but important details.
Next project

Smart Start: new onboarding tool for Pricebook Pro