Researching Navigation, Information Architecture and Wayfinding

In parallel with the redesign of the Business Mobile app, I partnered with our UX researcher to gather insights on improving the navigation and information architecture of the app. Several user comments stated that the bank services were “hard to find."

Final Proposal

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/Wayfinding

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.

Single Click Test

Determine usability by seeing where users click first when asked to complete a task

Research and Design Plan

Discovery

Ideations

Testing

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/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/Spoke

Cards
Icon/Text Links
Accordion Links

Accounts
Pay & Transfer
Plan & Track
Benefits
Investments

Transfers, Payments, and E-Deposits are under Pay & Transfer

Hub/Spoke

Tabs
Quick Links

Accounts
Payments
Service
Profile

Overall experience is a little confusing and visually cluttered

Hub/Spoke
Hierarchical Tree

Link List
Cards

Home
Transfers | Pay
Deposits
To-Do
Menu

Burger menu in bottom navigation

Hub/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

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.