Northern Trust
Designing a Scalable UI Library in Adobe Experience Manager
Northern Trust, one of the oldest financial institutions in the United States, provides specialized financial services to corporations, and ultra-high-net-worth individuals. Over the years, I’ve collaborated on various projects for Northern Trust, ranging from print design and data visualization to branding and UX/UI projects. Among these, I was the design lead for the complete restructuring and redesign of the Wealth Management business unit.
The project involved developing a scalable UI library in Adobe Experience Manager (AEM). These components became the foundational elements for the business unit’s entire digital presence. Our team handled everything from designing and building each component to conducting extensive QA for functionality and ADA compliance. Additionally, we developed detailed guides and hosted workshops to train Northern Trust’s in-house content and design teams on effectively managing and expanding their digital assets within AEM.
Project Overview
UX/UI Design
Design Systems
QA & Accessibility Assurance
4 months
(with continued support)
Roles & Duration
Primary Tools
Figma
Adobe Experience Manager
BrowserStack
Google Lighthouse
An array of vibrant modules showcasing the diverse color variations we've created for NT Wealth Management.
This project required a fresh approach: as the sole designer, I was tasked with extending the Northern Trust Institute’s branding—originally created a few years ago—across the entire Wealth Management business unit. This meant not only designing a cohesive visual language but also overseeing a platform migration to Adobe Experience Manager (AEM).
As Northern Trust transitioned to AEM, we aimed to fully leverage its features to deliver a seamless user experience.
To achieve this, we built a comprehensive Figma file that served as the project's central hub. This file included built-in text, color, and grid styles, as well as dedicated pages for design libraries, detailed documentation, and Web Content Accessibility (WCA) guidelines. Our goal was to use this Figma file as a single source of truth, ensuring that every module, component, and style could be consistently implemented within AEM. The structured setup in Figma enabled us to streamline collaboration, providing clear guidelines for the design, development, and content teams.
Design Language & Discovery
“Our Figma file became the single source of truth, bridging design and development with built-in styles, libraries, and accessibility guidelines.”
The design system we created allowed the Wealth Management team to utilize modular "building blocks" to assemble new pages while maintaining a consistent look and feel. By grounding the design language in a highly organized Figma file, we made it easy for Northern Trust’s in-house team to understand the relationship between elements, adapt designs as needed, and ensure a uniform experience across their entire digital presence.
Complexity Meets Precision:
Delivering a Modular Design System
To maintain brand consistency while infusing new design elements, we carefully selected features from the Northern Trust Institute to adopt. Since the Institute is a key part of the Wealth Management business unit, our focus was on preserving stylistic continuity while adding fresh design patterns. The result was a suite of 25 unique components, each with three or more variations across eight breakpoints, resulting in over 1,220 design frames. This approach ensured a fully responsive site across all user devices.
“With 1,220 design frames and 25 components, our goal was simple: create a dynamic system that adapts seamlessly to every screen size”
To further enhance usability and streamline collaboration between design, development, and content teams, we included detailed guidelines such as character count recommendations and optimal container widths. These specifications help maintain visual consistency and readability across different devices, while also supporting efficient content creation and implementation. By providing these clear parameters, we ensured that all teams involved could maintain the integrity of the design while adapting content to various user needs, resulting in a cohesive and user-friendly digital experience.
Designing high-priority pages in every breakpoint
A critical part of this process was creating detailed mockups for key pages—such as the main landing page and primary service pages—across all eight breakpoints. These mockups served as reference materials, ensuring that our design intent was preserved throughout development. By designing these high-priority pages in every breakpoint, we provided the development and content teams with a clear visual guide, ensuring that each page would display consistently and maintain functionality across devices. This approach helped bridge the gap between design and implementation, creating a shared vision and reducing the margin for errors during the build process.
Structured Flexibility:
Empowering
Consistency with Customization
After defining the visual direction, we built a comprehensive design library that included everything from typography and colors to icons and grid systems. This library served as a key resource, ensuring consistency across all digital touchpoints. Additionally, we created an editable pattern library that allowed the team to adapt designs as needed, with clear guidelines on when and how to use each pattern.
“We created a design library that balanced consistency with the freedom to adapt—offering a framework that evolves without sacrificing the brand’s core identity.”
While all of these resources will ultimately be integrated into Adobe Experience Manager (AEM), we recognized the importance of ensuring their team fully understands the underlying logic behind each design decision. This knowledge empowers them to maintain visual consistency as the site continues to grow, adapting to new needs without sacrificing the cohesive brand experience. It also allows for the flexibility needed to give each page its own unique layout and tone of voice, ensuring a balance between consistency and individuality throughout the site. By doing so, we’ve set up a framework that can adapt over time while ensuring a polished and on-brand user experience for every new pages.
Creating Seamless Experiences with AEM
One of the most exciting aspects of this project was the opportunity to master page creation and setup within Adobe Experience Manager (AEM). This hands-on experience allowed me to delve into the deeper functionality and versatility of AEM, gaining insights into how various components integrate to deliver a cohesive web experience. While developers focused on building individual components, I ensured that each element functioned seamlessly within the project's broader framework.
“This deep dive into AEM not only enhanced my technical skills but also highlighted the critical role of collaboration between development and content teams in delivering a smooth, optimized user experience.”
I took the lead in designing template pages, which served as testing grounds for every possible module variation. These templates were essential for verifying that each component worked smoothly across different configurations, guaranteeing consistency and reliability throughout the site. Additionally, we established links to existing content fragments, significantly streamlining the content creation process for the in-house team. With these links, they could effortlessly replicate and adapt modules for new pages without needing to start from scratch. This method not only boosted efficiency but also empowered the team to maintain consistent quality standards across the site.
This deep dive into AEM not only enhanced my technical skills but also highlighted the critical role of collaboration between development and content teams in delivering a smooth, optimized user experience.
Rigorous QA & Accessibility:
Delivering an Inclusive Experience
Accessibility was a top priority throughout the project. We ensured that every module met at least AA compliance, and by the end, 98% of the components achieved both AA and AAA compliance standards. We utilized tools such as BrowserStack, Google Lighthouse, and Figma plug-ins to conduct thorough testing. To maintain transparency and organization, the project was tracked through Asana and JIRA, ensuring seamless collaboration between design and back-end development teams.
“98% of our modules achieved AAA compliance, reflecting our commitment to an inclusive and accessible user experience.”
The final deliverables included a refined design library, pre-built AEM templates, detailed pattern and Web Content Accessibility (WCA) guidelines, and an in-depth walkthrough to guide the design and content teams on using both the UI library and AEM effectively.
The successful delivery of this project marked a significant step forward for Northern Trust’s digital capabilities. By creating a robust, scalable UI library and training the internal team, we ensured that the Wealth Management unit could maintain consistency while evolving their digital presence over time. The result was a seamless integration of brand identity, user-centered design, and technical precision—providing Northern Trust with a flexible, future-proof digital foundation in Adobe Experience Manager.
Main Takeaways
“Our work laid the groundwork for a digital ecosystem that balances consistency with the agility to grow and adapt over time.”
Explore More
Here are a few more case studies you might find interesting.
Lucid Motors
Designing the Future of In-Car Infotainment: From Concept to Production
Northern Trust
Designing a Scalable UI Library in Adobe Experience Manager
Škoda Auto
Innovating Auto Configurators with UX-Driven Design and AR Capabilities
Nacero
Creating a Brand & Digital Experience for Next-Gen Gasoline
Coming Soon!
Faraday Future
The Future of Touch: Designing for a Screen-First Car Interior
Coming Soon!
Lettuce Grow
Crafting a Consumer-First Brand Identity & Platform
Coming Soon!