JPMorgan Chase

Advisor Central Design System

My Role

Lead designer

Focus

Design Systems

Component Library

Platform

Internal enterprise tool (Salesforce-based)

UX consistency

The Problem

Advisor Central is JPMorgan Chase's internal platform for branch advisors to manage clients — tracking balances, wealth plans, meetings, opportunities, and more. Over time, as features accumulated, so did inconsistency. Modals, widgets, and panels each had their own visual logic. Advisors were spending more time navigating the tool than helping clients.

My goal: Establish a unified design system that reduced cognitive load, improved information hierarchy, and gave the product team a shared foundation to build on.

Before Design System

5 Icon sources

18 Typography styles

3 Separate component libraries in design and dev teams

After Design System

1 68%

Library for all design files

Library shared between design and dev team

errors removed when applying typography and color styles

Background on Advisor Central

For a financial institution where advisors are managing high-value client relationships, every minute spent navigating an inconsistent interface is a minute not spent on revenue-generating activity. Without a shared design language, new features took longer to design and build — each team reinventing patterns the other had already solved. The design system wasn't just a UX improvement, it was a business infrastructure investment.

Feedback from advisors

Our researchers conducted regular usability sessions with advisors. The feedback was consistent — and pointed directly at inconsistency as the root problem:

Quotes

“The one thing I would say I don’t really like when we go into our open actions or opportunities, the first thing it defaults to is recently viewed - I don’t want to see recently viewed, I want to see like what’s outdated, what’s like in red, old past due or like what’s due. I want this to be filtered by like open and by date.”

“I do really good job of managing my actions for all my opportunities and they just come through every day as what I need to work on for the day. So I rarely get into the opportunity tab until my boss says, Hey you might want to clean some up to our team.”

“We’re just a little worn out and tired that throughout the day, the number of clicks back and forth, it’s so not efficient right now, it’s crazy.”

“If I could have one system where everything spoke to each other that would be great, but I don’t, so I have to stick with what I know works [which is systems outside of AC].”

"When a client calls, I want to access everything I need to know about that client like that.”

“We all genuinely feel like [AC] could do a lot, but there are little instances where it's just like man…”

These weren't feature requests. They were signals that the foundation itself needed to be addressed before anything else could get better.

Auditing the current components

Just like many of JP Morgan's internal experiences, our product utilizes Salesforce's components. However, a common scenario was that teams were applying any components from Salesforce, without any guidelines. Color applications, spacing, styling applications, were very fragmented.

Different typography rules

Different typography rules were applied in different sections. In one section, the anchor type is bold, while in the other section, the anchor type is in regular type.

Different color rules

Blue texts usually indicate links, or being interactive. However, there are blue texts that are not clickable in some sections.

Building the system

As lead designer, I established the design system from the ground up — defining rules, building the component library, and maintaining design files across the product.

Color — I defined a main color palette tied to action types, so advisors could read meaning from visual cues instantly. A gray scale system layered in legibility and hierarchy across dense data views.

Spacing — A 4px base grid governs all spacing decisions. Smaller multiples (4, 8, 12px) handle within-component spacing; larger ones (24, 32px) separate major sections. When applied consistently, advisors can parse information groupings without thinking about it.

Iconography — Two icon families: standard icons (24×24 and 36×36) for navigation and content identification, and utility icons for actionable moments. Each icon type has defined states to signal interactivity clearly.

Buttons — Defined button categories, hierarchy, and states to ensure advisors always know what action is primary, secondary, or destructive.

The basics

Colors

Main colors

The main colors are used to signify action types. When an advisor sees an icon, a text, or a shape in a certain color, the color enhances the meaning and context of the element.

Main grays

The main grays provides accessibility and legibility. The combination of grays ensures an advisor can read, and understands the hierarchy of text groups.

Example of main gray usage to provide context and hierarchy

Spacing system

We use an 4px spacing system throughout our product design, to maintain consistency, use space efficiently, and to ensure relevant information is grouped appropriately. Spacing and padding are in multiples of 4px.

Separations of larger sections are in larger multiples of 4px, while those of smaller sections are in smaller multiples of 4px, based on the hierarchy. The small spacing units bring content close together, to make the user aware that they are part of one section. The large spacing units create separation between sections to make the user aware that they are in different sections.

When the spacing system is applied, the advisor should get a clear understanding of the text groupings, and the intended information that needs to be communicated.

Small spacing units

In the small spacing units, 4px, 8px, and 12px are used. These units bring contents closer together, and make the user aware that they are part of one section.

4px

4px is our frequent go to for any small spacing needed within a unit, such as a gap within the same row, a gap between texts and an icon, or a gap between texts.

8px

8px is used between the smallest sections, typically between rows, and text groups. It provides separation between information that are related.

12px

12px is used between the smallest sections, typically between rows, and text groups. It provides separation between information that are related.

Middle spacing units

In the middle spacing units, 16px is used.

16px

16px is used as the largest unit in a small section, and provides spacing to show the largest separation in the section.

Large spacing units

In the large spacing units, 24px and 32px are used. The large spacing units create separation between sections to make the user aware that they are in different sections.

24px

24px is used for the spacing needed between major sections on a page.

32px

32px is used for the largest spacing on the interface.

Iconography

Standard icons

Standard icons are used to identify corresponding content and messages, especially functions, headers, etc. We use them frequently throughout Advisor Central to indicate different functions of the product.

Standard icon size: 24 x 24

The standard icons are in sizes of 24 x 24. This size provides appropriate spacing for the surroundings. We use the 24 x 24 size for all our standard icons.

Standard icon size: 36 x 36

The large icons are in 36 x 36. They are used in section headers and page headers, and anchors the entire section.

Utility icons

Utility icons are used for highlighting an action, inviting the user to draw attention on the function needed to complete a task.

Different states of utility icons

Utility icon sizes

Buttons

Buttons indicate the availability of interactivity. The user can interact with buttons to take actions to get the desired tasks accomplished. There are different states and categories of buttons, and these indicate the kind of actions, and how the user can interact with a button.

Outcomes

After rolling out the design system, advisor feedback shifted noticeably. Teams reported that the product felt more coherent and easier to scan. Internally, the design system reduced design inconsistencies across new feature work and gave developers a clearer reference for implementation — shortening the feedback loop between design and engineering.