Kontakt

< Back

Mitt arbete

8 min read . Sep 27, 2024

TL;DR:

At Pershing, we faced the challenge of disparate experiences across various platforms, leading to inefficiencies, duplicated work, and inconsistency in design and development. As a UX lead, I initiated the creation of Pershing’s first design system, drawing on insights from workshops with Dan Mall and Nathan Curtis. This system streamlined design and development processes, saving $2.5M annually and being utilized by 225 developers across 35 pods.

Company

Pershing LLC

Year, Time

2021, 10 mos.

My Role

UX Lead/Product Manager

The What & The Why

Pershing, like many financial services companies, prioritized speed over quality, which caused customer experience (CX) issues, technical debt, and inefficiencies. Despite existing design and component libraries, these were fragmented and ineffective. Business teams wanted to improve CX, lower costs, and deliver consistent, efficient user experiences faster.

Key Figures:

35 PODs | 150 Front-End Developers
2 B2B Apps, 1 Retail Consumer App
Low CXi Score (42 in 2019)
$2.8M/year in Bug Fixes/Redos
$1.1M/year loss in Productivity

The How

Implementing DesignOps

The first step was to streamline the design workflow. I led efforts to move away from legacy tools like Axure and Sketch, migrating the team to a centralized Figma-based workflow. This allowed us to create a unified UI Kit, which acted as the source of truth for all designers.

Key steps included:

Moving the team to Figma as the central design tool
Creating a UI Kit for consistency and efficiency
Introducing Miro for ideation and analysis
Partnering with user researchers to adopt Maze and EnjoyHQ
Introducing Framer to establish motion design
Implementing a project + bandwidth tracker for DesignOps management

UI Design Process & Tooling - Before

UI Design Process & Tooling - After

Creating the Pitch

I crafted a compelling business case, pitching the design system's strategic importance to Pershing's executive committee. The pitch highlighted technical debt and inefficiencies, focusing on how a unified design system would significantly improve CX and save costs.

Forming The Team

Forming the team wasn’t straightforward. Initially, I relied on volunteers from branding and framework development, but after showcasing a working version of the design system, I secured approval from the C-suite to formalize the team structure.

Actions included:

Onboarding enterprise tools like zeroheight and storybook
Created a working version of the design system with base components and custom components with APIs
Recorded designers and developers feedback on the working version and how it would change their process
Using feedback to get final approval for resources
Establishing a ‘Design System Pod’ to manage the ongoing work

Forming the team - placing DS Team across the existing org

Building Trust

Through several workshops and 1:1 discussions, my team identified:

What could be standardized or made reusable
Key areas of design & technical debt
Cross-functional needs and common standards

Workshop with Designers and Developers

Planning the Buildout

Systems Inventory

We conducted a thorough review of all existing design systems and components, assessing their compatibility, quality, and reusability.

Analyzed all design systems and component libraries across the company
Identified discrepancies, variations, and gaps between systems and components
Conducted comparisons of components across platforms to evaluate inconsistencies and potential for reuse
Documented findings to prioritize what should be standardized first

Inventory Analysis

Velocity & Throughput

The goal was to ensure that the design system could not only improve the quality of outputs but also boost speed and efficiency.

Collaborated with cross-functional teams to estimate the time and resources needed for building reusable components
Used the findings from workshops and system inventory to prioritize components for development
Created benchmarks for velocity and throughput to track progress and improvements over time

Component Tracker

Creating Standards to set quality

With a global audience and 43 languages to consider, we set rigorous standards to ensure accessibility and consistency across all platforms.

Key Actions:

Standardized the typography hierarchy to accommodate non-English characters
Reduced the color palette from 100s to 33, focusing on accessibility, uniformity, and cohesion
Established global guidelines for UI components, ensuring they could be reused across platforms while maintaining high quality

The key standards allowed us to start building reusable components, ensuring they adhered to accessibility and technical requirements.

Key Actions:

Built reusable components that were cross-platform compatible and adhered to accessibility guidelines
Ensured all components fit within the technical limitations of the existing stack (HTML/CSS)
Each component was designed to be easily implemented by all teams, including documentation to guide usage

Primitives - Typography

Component Cheatsheet

Design.Test.Repeat.

The above prototype was released to designers company wide to use as a part of their workflow. I led efforts to make key updates based on feedback such as:

Better left nav organization
Split mobile vs desktop views/code
Build in a11y to help make better decisions

Design System Reference Site

Foundations - Design System

Component List

Component Details Page with Code

Setting up Governance

Setting up governance was key. By working closely with program management and identifying tollgates across the product lifecycle, I ensured that the design system was integrated into development processes. We implemented adoption analytics to track the design system’s impact and created automated scripts to monitor component usage.

Process for Creation & Updation of Components

Success Metrics

The Results

$2.5M

Annual Savings

72%

Increase in POD velocity

28%

Designers Throughput Increase

What I learned...

This project taught me the importance of balancing technical knowledge, strategic thinking, and leadership. Building cross-functional buy-in was as crucial as the technical development itself. Establishing governance and feedback loops ensured the design system's long-term sustainability and relevance.