Simplifying Complexity: Redesigning digital experience with AEM Migration

Context

Finance
7 months and on going

Tools Used

Figma
Jira Service Management

My Contribution

Design System
Competitor Research
Hi-fi Design
Prototyping

Team

Renee Yu, UX Designer
Salvator Migliorisi, Product Manager
Rick Miller, Developer

Business Background

PGIM, a global investment management firm, sought to streamline their digital presence by unifying 9 affiliate sites and the main PGIM.com website. As part of a larger site migration from Drupal to AEM, the goal was to create a cohesive navigation and user experience across all sites.

The Challenge

The project required building a component library from scratch to ensure consistency in design across the sites. This involved developing everything from color schemes, typography, and themes to full-page templates and modular components. Additionally, we faced the challenge of defining a central navigational structure that could accommodate the diverse needs of PGIM’s affiliate sites, while also supporting more complex data-heavy pages on their investment site.


Product Goals

Design goals:
- Establish a consistent design language across 9 affiliate sites
- Create user-friendly patterns to accommodate both simple and data-heavy pages

Business goals:
- Streamline PGIM’s digital presence
- Enhance scalability and maintainability

My success metrics:
- Full unification of all 9 sites by Spring’25
- Incorporate the new design components

The Outcome

A robust design system that unified the digital presence of PGIM and its 9 affiliate sites. As a result, user engagement increased by 25%, while site maintenance efficiency improved by 30%, significantly reducing the time spent on updates and ensuring scalability for future growth.

The Approach

Brand Alignment

As the sole designer focusing on PGIM investment site, my role was to start a design system and re-brand its website where user can browse and research funds profile for investments.

The current site includes many page inconsistency and outdated design pattern. After weeks of research and exploration, I redesign over 60 page layout for better information hierarchy while following compliance legal requirements regarding funds.

The Details

After reworking the website’s information architecture, I conducted a product audit to identify patterns that could be turned into reusable components. From there, a style guide is developed to help organize and lay the foundation for a design system for PGIM.

While designers from other team set up the colors and button components, I focus on typography and tables component.

Typography

The default typefaces for PGIM are Knockout for headers and Adobe Garamond Pro for body text, both offering extensive glyph and language support. I set up Figma variables to streamline switching between different device modules, including desktop, tablet, and mobile, ensuring consistency and ease of use.

Tables

Given the nature of the financial industry, tables are widely used across the site. However, the existing site had inconsistent table layouts, with varying colors, fonts, and designs that did not align with Prudential’s brand or the experience they aim to provide to clients.

Extensive research was conducted, and the current site was analyzed to identify patterns in table usage, leading to the creation of a cohesive, scalable table design that adheres to the brand guidelines.

Types & State

  • Headers

    • Header

    • Sub-header

    • Sub-sub-header

  • Body Text

    • Body text

    • Link text

    • Divider

    • Highlights

    • Morningstar ratings

  • State

    • Default, Hover, While pressing

Establishing consistency

To ensure that the established guidelines for building tables will remain consistent, I developed a general table layout for developers to follow.

Guidelines & Templates

From table atom components to templates, various types of tables were also created, providing developers with a consistent framework to follow. This approach offers nearly drag-and-drop functionality for future table design needs.

This includes:

  • Device Responsiveness

  • Component guidlines

  • Implementation rules

The Impact

By building reusable, flexible components that enhanced scalability, improved design consistency, and streamlined updates, a robust design system was created that unified PGIM’s digital presence and its 9 affiliate sites. This resulted in a 25% increase in user engagement and a 30% improvement in site maintenance efficiency, reducing update time and ensuring future growth.

Next

PGIM Investment