Smartphone Navigation Redesign
Smartphone Navigation Redesign
Wells Fargo’s mobile navigation ranked #15 of 21 for customer satisfaction. I co-led a team of five
to rebuild it around a bottom navigation bar and customers’ top tasks, lifting discoverability
and satisfaction from 56% to 97%.
Wells Fargo’s mobile navigation ranked #15 of 21 for customer satisfaction.
I co-led a team of five to rebuild it around a bottom navigation bar and customers’ top tasks, lifting discoverability and satisfaction from 56% to 97%.
My role
Design Lead, Team of 5
Timeline
2018 – 2020
Focus
Heuristics · Competitive analysis · Design & prototypes · Delivery
My role
Design Lead, Team of 5
Timeline
2018 - 2020
Focus
Heuristics · Competitive analysis
Design & prototypes · Delivery
Discoverability & satisfaction
56% → 97%
Exceeded the mobile navigation target of 85%
Exceeded the mobile navigation target of 85%
JD Power nav rank 2019 to 2023
#15 → #5
U.S. Mobile Banking App Satisfaction
U.S. Mobile Banking App Satisfaction
Top 5 tasks in global nav bar
87%
of all customer activity, just one tap away
of all customer activity, just one tap away
The problem
A complex system customers couldn’t navigate
A complex system customers couldn’t navigate
The menu had grown into a long, flat list of links with no hierarchy and no sense of place. Core tasks, like turning off a stolen card and setting a travel notice, were buried where customers couldn’t find them.
The menu had grown into a long, flat list of links with no hierarchy and no sense of place. Core tasks, like turning off a stolen card and setting a travel notice, were buried where customers couldn’t find them.
2
Competing main menus
10
Unintuitive quick actions
26
Level-1 navigation links
39
Level-2 navigation links
Customer feedback, in their own words:
Customer feedback, in their own words:
"Someone stole my wallet and the first thing I wanted to do was turn off my credit card online. It took me a long time to find that feature!"
Voice of customer
"I called customer service a week before traveling abroad. The agent told me I could've managed that using the app. But I had no idea."
Navigation feedback
"The labels sound banky… not my language."
Usability test · labels
The existing data
How did we measure up?
How did we measure up?
In the JD Power 2019 U.S. Mobile Banking App Satisfaction study, Wells Fargo’s navigation satisfaction ranked #15 of 21 — behind the peer average and well behind the leaders.
In the JD Power 2019 U.S. Mobile Banking App Satisfaction study, Wells Fargo’s navigation satisfaction ranked #15 of 21 — behind the peer average and well behind the leaders.
App navigation satisfaction rank
Bank of America
870 · #1
Huntington
853 · #5
Wells Fargo
843 · #15
User research
Learning from customers and the competition
Learning from customers and the competition
Four methods shaped the redesign: a competitive analysis, card sorting to test grouping, tree testing to validate findability, and multiple rounds of moderated usability testing.
Four methods shaped the redesign:
a competitive analysis, card sorting to test grouping, tree testing to validate findability, and multiple rounds of moderated usability testing.
Competitive ANALYSIS
An audit of leading banking and fintech apps surfaced a clear, repeatable pattern: persistent bottom navigation, contextual money-movement features, front and center high-frequency tasks, and predictable menu groups.
An audit of leading banking and fintech apps surfaced a clear, repeatable pattern: persistent bottom navigation, contextual money-movement features, front and center high-frequency tasks, and predictable menu groups.
Card sorting & tree testing
Open and closed card sorts settled how customers expect tasks to be grouped; tree tests then measured whether they could actually find those tasks in the proposed structure before we committed to the interface.
Open and closed card sorts settled how customers expect tasks to be grouped; tree tests then measured whether they could actually find those tasks in the proposed structure before we committed to the interface.
Personas
Who we were designing for
Who we were designing for
Three research-based personas were created from the voice-of-customer feedback and top-task data. Each represents a distinct way navigation was failing people.
Three research-based personas were created from the voice-of-customer feedback and top-task data. Each represents a distinct way navigation was failing people.
The Urgent Fixer
Lost his wallet on a work trip. Opens the app in a panic to lock his cards before anything else.
Lost his wallet on a work trip. Opens the app in a panic to lock his cards before anything else.
Needs immediate routes to high-stakes tasks.
Needs immediate routes to high-stakes tasks.
The Routine Banker
Pays bills, transfers funds, and checks balances every week. Wants the app to remember her rhythm.
Pays bills, transfers funds, and checks balances every week. Wants the app to remember her rhythm.
Needs predictable paths and fewer false starts.
Needs predictable paths and fewer false starts.
The Support Seeker
Needs documents, settings, card controls, and help. Searches because the menu doesn’t map to her words.
Needs documents, settings, card controls, and help. Searches because the menu doesn’t map to her words.
Needs language that matches customer intent.
Needs language that matches customer intent.
Concepts & direction
Three ways to bring tasks to the surface
Three ways to bring tasks to the surface
We explored several models for surfacing top tasks, weighing each against the segments and the traffic data: Task-centric, Hub-centric, and Contextual-centric. The bottom-line: a persistent bottom navigation bar housing the vital few.
We explored several models for surfacing top tasks, weighing each against the segments and the traffic data: Task-centric, Hub-centric, and Contextual-centric. The bottom-line: a persistent bottom navigation bar housing the vital few.
The design
From a link drawer to task-first navigation
From a link drawer to task-first navigation
Across iterative rounds (Q4 2019 → Q4 2020), we evolved the global menus through testing, refining, and simplifying toward a persistent, intent-based model.
Across iterative rounds (Q4 2019 → Q4 2020), we evolved the global menus through testing, refining, and simplifying toward a persistent, intent-based model.
Before
One long, undifferentiated list behind a hamburger. No hierarchy, no grouping, no sense of place.
One long, undifferentiated list behind a hamburger. No hierarchy, no grouping, no sense of place.
Shipped
A persistent, task-first model with clearer destinations and a stronger sense of wayfinding.
A persistent, task-first model with clearer destinations and a stronger sense of wayfinding.
Outcomes
We set a target of 85%. We hit 97%.
We set a target of 85%. We hit 97%.
Our goal was to raise the baseline of 56% on discoverability and satisfaction to at least 85%. The navigation redesign was released in late 2020, and based on customer reviews, metrics, and KPIs, mobile navigation discoverability and satisfaction reached 97%.
Our goal was to raise the baseline of 56% on discoverability and satisfaction to at least 85%. The navigation redesign was released in late 2020, and based on customer reviews, metrics, and KPIs, mobile navigation discoverability and satisfaction reached 97%.
56% → 97%
56% → 97%
Discoverability & satisfaction for mobile navigation, clearing our 85% target by 12 points.
Where customers actually went
Demand clustered around accounts, payments, transfers, and support, while the old navigation treated every destination as equal.
Demand clustered around accounts, payments, transfers, and support, while the old navigation treated every destination as equal.
Key findings
Competitive analysis showed that clearer grouping, persistent access, and task-first labels were common patterns in high performing apps.
Competitive analysis showed that clearer grouping, persistent access, and task-first labels were common patterns in high performing apps.
Customer
Top tasks are one tap away - customers are navigating with efficiency and ease.
Top tasks are one tap away - customers are navigating with efficiency and ease.
Business
A jump in customer satisfaction & feature/service discoverability, in a single year.
A jump in customer satisfaction & feature discoverability, in a single year.
Craft
A bottom navigation system was implemented that was grounded in real traffic.
A bottom navigation system was implemented that was based on real traffic.
Lessons learned
Mobile navigation has to be accessible and discoverable, and there must be a clear way to both enter a task flow and get back out of it. Curating the top tasks from real data and organizing them so customers could complete them with ease was the whole objective, and I'm so happy that we exceeded the goal.
Mobile navigation has to be accessible and discoverable, and there must be a clear way to both enter a task flow and get back out of it. Curating the top tasks from real data and organizing them so customers could complete them with ease was the whole objective, and I'm so happy that we exceeded the goal.
The project reconfirmed how essential testing is: every round of usability testing drove the refinements that made this a genuinely user-centered, iterative process.
The project reconfirmed how essential testing is: every round of usability testing drove the refinements that made this a genuinely user-centered, iterative process.
Global navigation redesign
Global navigation redesign