Designing a Global Nav

for 7 Million Users

Designing a Global Nav for 7 Million Users

Ryan Bertani

Overview

Client

Big 3 Asset Manager

role

UX Designer

duration

1.25 years

Tools

Figma & Storybook

Description

Atlas* is an investment company whose principles and offerings focus on retail investors. Recently one of their major strategic goals put an emphasis on modernizing the digital experiences for their clients.

We were contracted by Atlas to accelerate this effort. That’s when I landed in the Atlas “NavLab” and became the UX/UI designer to create a global navigation component. The team’s roster consisted of Atlas UX strategists, an EY researcher, and complete Atlas dev team. The focus of our roadmap was for authenticated (logged-in) clients, but as you’ll see, our stakeholders spanned much further than that.

*To maintain client privacy, some details have been changed or redacted

Design Drivers

Align IA to user mental models

Design in tandem with research

Intentionally familiar

Flexible and feasible solutions for development

Cross discipline collaboration at the core of every decision

Pain Points

Each release was guided by 3 key pain points

Hidden & Buried Navigation

Inconsistent Nav Patterns

Isolated Experiences

Pain Point 1 OF 3

Where we started

Navigation was commonly mentioned in users’ complaints due to buried or hidden links. User satisfaction had dropped so low that clients were ready to move their assets to competitors. A new navigation component would take more than a year to build, so we found a series of quick wins that would enhance the user experience in the interim.

...my clients are consistently telling me that firms like [redacted] have far greater reliability and are far easier to navigate.

— Source redacted

Approach

To address hidden and buried navigation and clients' overall decreasing satisfaction, we took 3 steps early in the project that were low risk. These three small wins were ways we learned to walk before official sprints.

Step 1

Repainting "cells" and "organisms" leveraging Atlas' new design system.

Atoms

Tokens

Molecules

Components

Cells

Patterns

Organisms

Blocks

Species

Templates

Atlas Design System

NavLab (that's us)

Pages

*Atomic Design 2.0

Step 2

Addressing the disjointed taxonomy by incorporating headings to a mega menu, which were informed by IA research findings.

Show UI & Taxonomy

After

Before

Gains and losses

Step 3

Adding personalization for clients with premium services, like Advised Services

Advised Client

Portfolio

Dashboard

Balances

Performances

Watchlist

Gains and losses

Cost basis

Dividends & capital gains

Transact

Buy and sell

Order history

Open an account

Profile and account

Settings

Messages

Statements

Tax forms

The First Release

The results of our approach enabled us to create the renewed mega menu for clients while they viewed their account.

Atlas users can select up to three (3) account types;

and product teams were siloed across these account types

Atlas users can select up to three (3) account types;

and product teams were siloed across these account types

Open an account

Forums

Support

Settings

log off

My Account

What we offer

Products

News

Portfolio

Dashboard

Balances

Performances

Watchlist

Gains and losses

Cost basis

Dividends & capital gains

Dividends
& capital gains

Transact

Buy and sell

Order history & status

Order history
& status

Open an account

Profile and account

Settings

Messages

Statements

Tax forms & information

Open an account

Forums

Support

Settings

log off

My Account

What we offer

Products

News

Advisor

Advisor Overview

Contact Advisor

Reports

Portfolio

Dashboard

Balances

Performances

Watchlist

Gains and losses

Cost basis

Dividends & capital gains

Transact

Buy and sell

Order history & status

Open an account

Profile and account

Settings

Messages

Statements

Tax forms & information

Pain Point 2 OF 3

Siloed teams

Atlas users can select up to three (3) account types, self-directed accounts, advised accounts, and lastly employer sponsored retirement. Unfortunately the business split product teams across product types, which inevitably led to siloed teams.

Atlas users can select up to three (3) account types;

and product teams were siloed across these account types

Atlas users can select up to three (3) account types;

and product teams were siloed across these account types

Self-directed

Advised (Robo/Personal)

Employer sponsored retirement

Existing patterns

Since product teams have been siloed, multiple nav patterns existed across the site including the header, footer, and menus.

Atlas

Log out

Atlas

English

Atlas

Exit

Retail investors

Open an account

Forums

Support

Settings

log on

What we offer

Why us

News

Atlas.

Retirement

Help

Message Center

Log off

Your investments

Deposits

Accounts

Tax information

Atlas

Personal Advisor

Dashboard

Contribute

Withdraw

Investment goals

Contact your advisor

Reports

Upcoming Appointments

Retail investors

Open an account

Forums

Support

Settings

Log out

Atlas

Home

My Accounts

Transact

News and Perspectives

My Accounts

What we offer

Why us

News

Support

Log out

Dashboard

Account

Activity Feed

Contribute Cash

Withdraw Cash

FAQ

Atlas

Robo investing

Collaborative Approach

Research Driven

Organized an IA consistent with user mental models by using card sort and tree test research findings.

Tested different navigation orientations, components and terms, selecting ones that resonated most with our users

Product + Development

Aligned design to agile ceremonies and included development in design feedback sessions.

Documented designs and components to ease hand-off

Everyone

Added a weekly “Studio” ceremony and facilitated weekly workshops with topics like accessibility, research plan feedback, knowledge sharing, and more.

Our Solution

With a limited technology architecture and client segments we required a solution that we could deploy without impacting stakeholders and avoid user change fatigue

Working together, we discovered if we could implement a navigation design system we could meet the needs of both users and stakeholders.

Stakeholder Taxonomy + Nav Design System =
A new nav for any product team, regardless of tech implications.

Taxonomy

{
"topLevelItems": ["1", "2", "3"],

"items": {

"1": {
"parent": null,
"title": "title",
"children": ["11", "12", "13"]
},
"11": {
"parent": "1",
"title": "title",
"children": ["111", "112"]
},
"111": {
"parent": "11",
"title": "title",
"children": ["1111", "1112"]
},
"1111": {
"parent": "111",
"title": "Copyrighted"
},
"1112": {
"parent": "1111",
"title": "Public Domain"

Navigation Block Model

Logo and Label

Utility & Global Functions

Site Links

Quick Action

Dropdown Pattern Example

[Heading]

[Link]

[Featured Heading]

[Heading]

[Body text]

[Link]