j
u
l
z
d
e
s
i
g
n

Design System Global Theme

Objective

Consolidate 300+ websites into a single prudential.com unified customer experience.

Process

Requirements

  • Redesign using the mobile first approach
  • Define a universal design language
  • Improve site navigation
  • Provide a single authenticated experience
  • Consolidate multiple business units into a single sign-on

My Role

  • UI Architecture
  • UI Design
  • Front-end Development
  • Theme Architecture
  • CMS Theme Integration
  • Establish a Design Language

​​Challenges

  • To Design at scale
  • No digital standards
  • No documentation or best practices
  • No Accessibility
  • Implementing a new Content Management System
  • No version control
  • IE8 Support

Chose A CSS Framework

Led the collaboration of design and engineering teams to agree on a single CSS framework. Tested multiple open-source CSS frameworks. Promoted the usage of Bootstrap based on its high level of contributions and IE8 support

Defined a new Prudential Digital Design Language

Led the creative direction, defined styles, patterns, and templates. Collaborated with accessibility specialists making a fully ADA compliant theme. Developed CSS styles and DOM structures for responsive patterns, layouts, and templates.

Prudential.com
Prudential.com marketing page
Authenticated
The Framework supports various brand themes

Established Version Control Workflow

Led the adoption of GIT version control and evangelized version control workflow and the adoption of centralized Bitbucket Server.

Flexible Content Management System

In collaboration with the architecture team, I helped to define responsive templating. Helped establish common pattern options for CMS building blocks. Created and managed patterns & components to allow editors to build custom pages

Published a Global Sketch Library

Designed and maintained global Sketch Library. Created a starter template for new projects. The Library was versioned and in sync with each release of the Global Theme, allowing for designers to switch versions based on the project.

Sketch Library
Sketch Template With Library

Continuous Integration and Continuous Delivery

The global theme follows Semantic Versioning Specification (SemVer) and fully integrated into the CI/CD pipeline. As part of the workflow, we implemented Automated Visual Regression Testing (VRT) which enabled notifications upon detection of any visual errors.

After publishing developer can easily install Global Theme via npm into a new or existing project.

...
Example of VRT Report

Documentation

Provided documentation for Theme usage, Designer onboarding, Developer onboarding, Utility classes, Coding standards, Accessibility rules, General enterprise specific best practices

Navigation from Design System Website

Adoption and Evangelism

Conducted designer and developer workshops. Demonstrated examples of using the unified design language to speed up build time, increase handoff accuracy and meet deadlines. Provided design language cheat-sheets to designers and developers.

Workshops on framework implementation
Design System Cheat-sheet distributed to all designers & developers

Results

The prudential.com redesign was the first responsive site created at Prudential. The Global Theme now supports multiple internal, external, authenticated and sub-themed experiences. Adding efficiency of design and development helped expedite the migration of old content. We succeeded in moving hundreds of pages into one cohesive and accessible experience.
Global Theme Patterns Test Page
Linkedin
Medium
Twitter
Github