JPMorgan Chase
Advisor Central Design System
Introduction
JPMorgan Chase's Advisor Central is the internal tool for Chase branch workers to view and manage clients. An advisor uses this tool to view client balances, updates, wealth plans, personal details, schedule meetings, etc. The platform encompasses all areas of an advisor's activity, and an consistent experience becomes crucial.
.png)
Need for consistency
Advisor Central is a platform with many functions, including scheduling meetings with clients, viewing client updates, initiating contacts with new potential clients, helping clients to reach their goals, etc. These various functions appear in numerous fashions, such as modals, widgets, separate windows, etc. It is easy to get overwhelmed in the middle of so many functions.
Feedbacks from advisors
Our researchers conduct user tests regularly to get their feedbacks. Many advisors feel that the product have too many features, and becomes overwhelming, especially when an advisor needs to find an information quickly. Needing the right information at the right time is crucial for an advisor, because having an accurate client financial information is crucial all the time. Here are some of their feedbacks:
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…”
Consistency becomes crucial
In an experience with as many features as Advisor Central, establishing consistency would make it easier for advisors to view, comprehend, and use the product. That's why I created the Advisor Central design system to establish design rules, maintain library components, update design files efficiently. The AC design system ensures usability and legibility throughout the experience, by establishing user centered design rules.
Establishing the system
When starting the design system, I went back to the foundation to ensure the rules that are applied to the experience are user friendly, and helps the advisors achieving their daily tasks.
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 are grouped appropriately. Spacing and padding are in multiples of 4px. Seperations of larger sections are in larger multiples of 4px, while those of smaller sections are in smaller multiples of 4px, based on the hierarchy. 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.
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.
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
We use icons throughout our product to help guidance the users, and increase clarity.
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.
