company
Prudential Financial
role
Senior Product Designer

Evolution Design System

Evolution is Prudential's robust, enterprise-grade design system that has revolutionized workflows and fostered product alignment within the organization. Evolution has significantly enhanced efficiency across Prudential's internal teams by providing well-documented and reusable web components.

As a Senior Product Designer, I have played a pivotal role in the growth of this design system. My responsibility involves iterating and expanding upon Evolution to ensure its continued alignment with stakeholder feedback, branding guidelines, business objectives, and technological advancements. This iterative approach allows us to constantly improve design-to-dev handoffs, expedite the creation of innovative products at scale, and uphold a superior end-user experience.

With a focus on increasing productivity and delivering high-quality results, our ongoing efforts with the design system contribute to seamless collaboration and enable Prudential to excel in its pursuit of creating impactful and user-centric solutions.
DELIVERABLES
Documentation
Visual Design
Development
Prudential logo

The Challenge

The Design System team at Prudential faced a challenge ensuring consistency and coherence across three tools: Storybook, AdobeXD, and ZeroHeight, each serving a unique purpose. This led to difficulties for engineers and designers in maintaining unity. As a result, Storybook emerged as the primary source of documentation, garnering significant traffic and usability. Engineers, designers, and product owners from various teams at Prudential relied on Storybook for their documentation needs.

AdobeXD

 adobe xd image

Storybook

storybook image

ZeroHeight

zeroheight image

The Audit

To address the disparities and irregularities among the three tools being used, my initial approach involved conducting a thorough audit of Storybook, ZeroHeight, and Adobe XD. This audit revealed numerous UI inconsistencies and more importantly, significant gaps or absence of documentation across these tools.

Specifically, when examining Adobe XD, it became evident that incorporating component states was crucial. Understanding the appropriate usage and context for specific components proved to be challenging.

Furthermore, during my analysis of Storybook, I discovered that comprehending the API documentation for components was also difficult. As someone with engineering experience, I could identify the complexities of navigating and understanding documentation.

Lastly, regarding zero-height, I observed a complete absence of documentation within the component lifecycle, further hindering the understanding and utilization of these components.

By recognizing these deficiencies, I aimed to address these issues and improve the overall consistency, clarity, and comprehensiveness of the documentation within the design system.
miro board of audit
teams video call image

The Feedback

Through regular bi-weekly meetings involving product owners, engineers, designers, and our design system team, we actively sought feedback on the challenges faced while utilizing our design system tools. This feedback revealed a significant reliance on Storybook as the primary documentation source.

Upon closer examination, we confirmed that the Adobe XD file presented a considerable obstacle. It was an unwieldy, single-page file housing the entire components library, making navigation and comprehension difficult for users. In contrast, the ZeroHeight platform had been neglected and overlooked by the design system team, further reinforcing the preference for Storybook among stakeholders, including our team.

However, we recognized the importance of utilizing the right tool for each specific purpose. Adobe XD is an essential tool for designers and Storybook to serve engineers' needs effectively. By understanding the distinct roles of these tools and addressing their shortcomings, we aimed to enhance the usability and functionality of our design system for all stakeholders.
Figma logo

The Right Tool

We significantly shifted from AdobeXD to Figma, bringing notable improvements. To enhance organization within our design system, we decided to split Evolution into three separate files: Foundations, Components, and Templates. Each file was further structured into different pages, aiding designers in quickly locating specific elements. Leveraging the powerful features of Figma, we significantly enhanced our component documentation. This transition resulted in better documentation and facilitated seamless collaboration among our design team.

Moreover, this move allowed us to streamline our processes by eliminating the need for ZeroHeight. By consolidating our tools and focusing on Figma as the primary platform for designers' documentation needs, we achieved higher efficiency and stronger cohesion within our design system.

Foundations / Chart Colors

chart colors palette

Foundations / Typography

headers image

Foundations / Typography Colors

typography colors for charts

Components / Chart

donut chart
component symbol from figma
Chart / Donut
radial chart
component symbol from figma
Chart / Radial
radial chart that looks like gague
component symbol from figma
Chart / Radial
bar charts component
component symbol from figma
Chart / Bar
line chart components
component symbol from figma
Chart / Line
area chart components
component symbol from figma
Chart / Area
bubble chart components
component symbol from figma
Chart / Bubble

Templates / Financial Wellness

template that includes donut chart

The Life Cycle of
a Component

During our analysis, we identified a problematic workflow in which documentation for new components was frequently overlooked and relegated to the backlog. Recognizing this opportunity for improvement, we made necessary changes while incorporating new data visualization components into the Figma library.

A crucial aspect of this initiative was to integrate documentation seamlessly into the component life cycle. We established clear acceptance criteria for each data visualization ticket, mandating that comprehensive documentation be included within Figma. This documentation encompassed detailed guidelines outlining the component's structure, properties, and variants, ensuring thorough and accurate information. Additionally, we provided a convenient link to Storybook, further enriching the documentation resources available.

By adopting this systematic approach, we aimed to streamline the process of adding new components while ensuring that their documentation was given equal importance. This strategy not only enhanced the efficiency of our workflow but also improved the accessibility and comprehensibility of our design system for all stakeholders involved.
image that shows how documentation is layout on figma for a component

The Impact

As the design system team at Prudential, we were the pioneers in transitioning to Figma, demonstrating its remarkable effectiveness and efficiency to all stakeholders. Following our lead, teams across the US have successfully migrated from AdobeXD to Figma. This adoption of Figma, combined with our Evolution design system, has significantly improved collaboration through inner sourcing and accelerated the time-to-prototype, enabling faster and more streamlined workflows.