Design System
After a brand redesign and content management consolidation, I directed a retained design team to rethink J. P. Morgan Asset Management’s digital design system. We redesigned the component system, piloted a design system team, and introduced design and development toolkits and processes to streamline page creation and consistency.
Role
Design Director
Employer
Goods & Services
Platforms
AEM, React, iOS
Area
Design systems


Approach
My team had three main goals for this initiative:
-
Translate the new J.P. Morgan Asset Management brand into all digital experiences
-
Create a modular, scalable design system
-
Build a design system team and create workflows and toolkits to streamline webpage creation
We started with defining the common components needed to make up the new AEM system. As a quick win, we reskinned and updated these components for existing website pages. The team then rounded out the system: designing flexible components, creating utility icons, defining system design tokens, setting interaction and motion standards, and thinking through deeper aspects such as data visualization and infographics.





A holistic system
As we worked with the J.P. Morgan Asset Management’s digital team to identify the core set of components to satisfy the needs of thousands of content webpages, we stress tested the system for language translation, and appropriate imagery and content. What started as a component system for and AEM website evolved into a holistic blueprint for all of J.P. Morgan Asset Management’s products and platforms. This scalable toolkit adapts to meet evolving product needs and technology trends.

A scalable system of shared elements and components
Creating a team
We defined the design system as a product that serves other products, and as such we needed a product team to manage and govern it. What is the process for introducing new components? What about sunsetting old components? Who makes that determination? A multidisciplinary team of design, product management, development, and content was needed. I worked with the J.P. Morgan Asset Management digital team to merge their in-house product management and development talent with my design team to make this happen. We started with component alignment and consistency from designer to FED. We created process flows and roadmaps to drive design system scalability and outside adoption.

New component governance workflow
Documenting the system
The design system team created dynamic, living styleguides and toolkits that assisted not only design and development teams, but also content and marketing. These guides usage and asset guides to design, integrated with Storybook for FED, and gave template content guides for marketing teams.


Templates assisted rapid and consistent page creation
Impact
By establishing a unified design system and a dedicated design team, JP Morgan Asset Management dramatically increased efficiency, consistency, and scalability across digital touchpoints. The streamlined approach empowered both designers and developers to innovate faster, while ensuring that every product upheld the brand’s standards. Here are a few highlights of the measurable impact:
40%
Faster turnaround on new page design, thanks to a shared library of reusable components
25%
Faster page creation for AEM authors, allowing teams to launch new marketing and product pages faster than ever.
145
Main system components with thousands of component variants
Background
In 2022, J.P. Morgan Asset Management was looking to both simplify their global website assets, and update their digital experience to reflect a new brand redesign. Thousands of global webpages were on five different CMS platforms, making any digital update a significant task. My team worked with the J.P. Morgan Asset Management digital team to define the new digital experience look and feel, build out an initial AEM component system, then build out a broader holistic design system and team.