Complete redesign of the Business Mobile App
Overview
Imagine you are a business client using the Business Mobile App for ‘on the go’ tasks like checking balances, approving payments, and check deposits. However the app has a frustrating experience, a confusing navigation, and bugs that often rendered it unusable.
Unfortunately, the app was built through a 3rd party vendor so bug fixes or design updates were not feasible. Gathering user metrics were not possible which kept the team from making data informed decisions.
As user complaints mounted, leadership approved rebuilding the app in-house to address these issues. Now with an end-of-life date, a hard deadline was set.
Eating the elephant
To help take on this major project, our design team split the work into two categories: enhancing the UX, UI, and copy for each feature and redesigning the overall navigation
Feature Redesigns
UX designs prioritized by high value and low effort
Apply the new Design System
Updated copy to fit the new tone
Navigation
Discovery research on current state and user behavior
Ideation of an ideal navigation and wayfinding
Testing the usability of the new navigation
Navigation
To better understand the overall app experience I partnered with our UX Researcher. I then used our findings to iterate on a navigation pattern that worked best for the app.
Problem Framing
“How Might We..” statements, hypothesis, objectives, and research methods
User Survey
Compiled the most common tasks and ran a survey to learn frequency and importance
Sitemap
A full sitemap of the app was created to understand the current experience
Competitive Analysis
We looked at the competitive landscape of the finance/banking industry for inspiration
Card Sort - DEPRIORITIZED
Conduct a Card Sort activity to determine the hierarchy of the Tree Diagram
Navigation Pattern
Choosing the ideal navigation pattern and wayfinding paths
Tree Diagram
Created a new hierarchy based on the User Survey prioritizing most common tasks
North Star Design
As the app is rolled out in phases, design the ideal end experience.
Research and Design Plan
Discovery
Ideations
Team Roadmap
Problem Framing
How Might We...
..make navigation easier and more intuitive for users?
..provide users with a more predictable experience?
..make navigation work for different use cases with different banking needs?
Hypothesis
Place commonly used features as primary navigation links.
Placing links in predictable areas will help most users more easily navigate the app.
Designing the pattern and hierarchy for the most extreme case will accommodate other use cases.
Objectives
Understand how users want to use the bottom navigation.
Understand user expectations on link locations.
Define designs for the ‘super user’ and determine if designs can be scaled down for other use cases.
View Balance, View Transactions, Deposit Check, and View Deposits were the most common tasks
Unexpectedly, Checking Messages also scored among one of the most common tasks
Tasks scores fell into distinct high, middle, and low groups
Stop Payment and Manage Users scored low on frequency but high on importance
Tasks around ‘Approvals’ and ‘Transfers’ scored highest in the importance metric
User Survey
We chose some key tasks and surveyed participants to determine their frequency and importance
Key Insights
Sitemap
Competitive Analysis
Hub and Spoke
Hierarchical Tree
Navigation
Tabs
Icon/Text Links
Cards
Wayfinding
Primary Links
Accounts
Transfer/Zelle
Bill Pay
Deposit Checks
Investments
Comments
Burger menu in bottom navigation
Hub and Spoke
Cards
Icon/Text Links
Accordion Links
Accounts
Pay & Transfer
Plan & Track
Benefits
Investments
Transfers, Payments, and E-Deposits are under Pay & Transfer
Hub and Spoke
Tabs
Quick Links
Accounts
Payments
Service
Profile
Overall experience is a little confusing and visually cluttered
Hub and Spoke
Hierarchical Tree
Link List
Cards
Home
Transfers | Pay
Deposits
To-Do
Menu
Burger menu in bottom navigation
Hub and Spoke
Tabs
Cards
Icon/Text Links
Home
Finances
Payments
Deals
Wallet
Streamlined, very clear and intuitive
Design Rationale
The survey revealed that users view all tasks to be important so we prioritized a navigation hierarchy based on the most common tasks.
We chose to replace the burger menu with a bottom navigation so we can make the common tasks easier to access.
Approvals and messages are reactive tasks so we used icons with badges to indicate actionable items and placed them on the header for easy access.
Customizable quick links on the dashboard would accommodate for different use cases.
Hub and Spoke Pattern
Surveys show users complete their tasks when started.
Once a task is completed, they can be brought back to the Hub.
Tasks can be found within 0-2 “clicks”.
Object Oriented UX
We approached the navigation with an Object Oriented UX mindset.
Organizing the navigation with objects and instances align with user expectations.
We can account for different use cases by removing instances as needed.
Reduces friction for development and integration of third-party vendors.
Nested Layer UI
As Users move deeper into the app the UI can provide a visual que to their location.
Applying this to the header element would be effective since it is highly visual and frequently used.
Navigation and Wayfinding Patterns
Rationale
The First Click Test is an inexpensive and quick way to test usability of the new design.
The testing assets are easy to make and the results are straightforward.
Questions
Will users easily find tasks with the new navigation?
Will users correctly identify icons without text?
Methodology
Test was moderated by our UX Researcher.
Participants were given the 8 most common tasks and asked where they would click first.
The results were recorded and presented in the readout.
First Click Test
North Star
We created a North Star wireframe to guide the visual direction while we worked on the feature redesigns
Deprioritization
Stakeholders deprioritized redesigning the navigation and the research findings were recorded and eventually used as a reference point by the Personal Banking design team for their own Navigation redesign.
