Global Design System
OVERVIEW
At Goods & Services, I was tasked with the design and implementation of a comprehensive global design system for J.P. Morgan Asset Management (JPMAM). This initiative aimed to standardize and streamline the digital experience across the company's vast portfolio of products and services. The project involved the creation of a design system which utilizes customized and Adobe Experience Manager (AEM) components, the development of product videos for marketing leads, and the incorporation of Lottie animations for enhanced web engagement.
CLIENT
J.P. Morgan Asset Management
INDUSTRY
FIANCIAL
challenge
Scaling a trusted global financial brand into a system that enables speed, consistency, and clarity at scale.
Research & Analysis
We began by evaluating existing brand guidelines, digital products, and regional implementations to identify gaps, inconsistencies, and opportunities for scale. This included auditing current UI patterns, component usage, and workflows across teams to understand how the brand was being interpreted in real-world applications.
By partnering closely with design, product, and engineering stakeholders, we aligned on core needs, constraints, and success metrics. This phase established a clear foundation—defining where standardization was essential, where flexibility was required, and how the system could support both current products and future growth.
Outcome: A clear system strategy rooted in real usage, business goals, and global scalability.
Accessibility Design
Accessibility was embedded into the system from the start—not treated as a final check. Given the financial context, clarity, trust, and usability across a wide range of users and abilities were critical.
We designed components and patterns to meet WCAG standards, focusing on color contrast, typography hierarchy, keyboard navigation, and screen reader compatibility. Accessibility considerations were documented directly within the system to ensure consistent application across teams.
By baking accessibility into the foundation, the system empowered teams to ship compliant, inclusive experiences without added complexity or rework.
Outcome: An accessible-by-default system that supports compliance, usability, and trust at scale.
Component Library
The component library translated brand principles into a modular, reusable UI system. Core elements—such as typography, color, spacing, and layout—were standardized to ensure consistency, while components were designed to be flexible enough to support a wide range of use cases and financial products.
Each component was built with scalability in mind, accounting for variations in content, localization, and responsive behavior. This reduced duplication, increased design and development efficiency, and allowed teams to assemble experiences quickly without compromising quality or brand alignment.
Outcome: A robust, flexible component library that accelerated delivery while maintaining brand integrity.
Documentation & Delivery
Clear documentation was essential to adoption and long-term success. The system was delivered with comprehensive guidance covering usage, behavior, accessibility requirements, and best practices—ensuring teams could confidently implement components without ambiguity.
Design and development documentation were aligned to create a shared source of truth, supporting collaboration across disciplines and regions. Governance considerations were also established to help the system evolve sustainably as products and needs change.
Outcome: A living system that teams could adopt, maintain, and scale with confidence.