How Prudential uses zeroheight to create a consistent product, quickly.

Making the product development cycle more efficient has been top of mind for Prudential for a while.

In fact, that’s exactly why the company hired Chris Alexander, Director of Experience Design. He explained, “I was brought on because Prudential had seen what many teams have seen, which is: you sweat through producing the design, you pass it off to your product development teams, you don’t hear from them for months, and then you finally see something in the staging environment that looks completely different.”

Chris’ proposed solution: a design system.

The company’s first design system was loosely based on Bootstrap, and the components were jQuery plug-ins. Using these open-source front-end development toolkits/pattern libraries was certainly a start, but doing so also required a great deal of customization, not to mention operational challenges.

The complexity of that first design system meant that adoption of it was limited to only the teams within Chris’ division. In other words, only those who were close to the design system and had extensive exposure and training on it found it to be accessible and useful as a resource.

With Prudential prioritizing a digital transformation, the Experience Design team pitched a new design system. This time, they wanted to move away from their custom-coded solution toward something that was “scalable and easier to update and maintain,” Evan Tyerman, Director of Design Operations at Prudential, noted.

The company created Evolution, a design system built in zeroheight that includes elements from Adobe XD, functional UI in the form of CSS libraries, and W3C-compliant web components.

So far, the move to Evolution has made it easier to maintain the design system, increased adoption, and ushered in huge gains in efficiency.

Proving the value of a design system

With a new design system, the Experience Design team knew they couldn’t ignore the importance of achieving meaningful adoption. After all, a design system is only beneficial when people use it.

To gain more users, Antonio James, Manager, Design Systems, suggested that they focus on creating an easy-to-use design system that provided real value.

Chris had the team start with supporting prudential.com, the company’s “front door.” Chris reported, “When people saw that, that’s when they got much more interested and excited. It helped show people how the design system would help their team and their work.”

Starting with prudential.com had huge benefits for Prudential users and employees.

For users, the new website was easier to use, a positive change that could be quantitatively measured. Antonio explained, “The new website had a huge impact on the Ease of Doing Business score and the NPS scores. […] There’s already an impact on brand perception.”

For fellow Prudential employees, the launch’s success was the proof they needed to start using the design system. Chris continued:

The roster of products and teams that have already planned on moving to the Evolution design system is well over a dozen. So, we’ve gone from one to dozens in 14 to 18 months.

Making product development efficient

Before the company built Evolution in zeroheight, product development was inefficient.

Dylan Hyun, User Interface Developer and Designer, detailed the issue:

Not having a design system led to most of the developers having to build out these designs themselves […] so they weren’t taking on just the front-end work; they were taking on integrations with APIs and everything […] What the design system gave us was a way to make everyone’s lives easier.

Prudential’s design system has taken the guesswork out of building. Each component has a tab that provides an overview, including behavior, usage guidelines with clear Rules, all of the variants from Adobe XD, and a link to Storybook.

With everything in one place with Evolution, product teams have been able to take components and use them to develop even faster. Bejamen Ries, Director, Product Owner of Prudential Stages, has done just that. He mentions, “We use Evolution Design System components in multiple areas of the Prudential Stages experience, and they have been very easy to integrate into our application (React). For example, we have used them for navigational buttons, helper tips, and our progress indicator throughout the onboarding flow.”

Since product teams can work much more efficiently with greater clarity, improved design-to-dev handoffs, and streamlined workflows, Prudential consumers are seeing a lot more innovation much quicker.

Chris recounted the impact of Evolution on the whole company, “One of the key arguments we’ve made for why the design system should exist and be adopted is speed to market. If you have an organization that agrees on the brand, user interfaces, and color palettes, then you can encapsulate that as reusable elements, and your speed to market time shrinks significantly.”

Gaining scale

As Evolution has grown, it has scaled in two major ways: the number of users and the number of documented components.

And with that increase in scale, the benefits for Prudential have grown. Chris expounded:

As we gain scale, the amount of people that need to be involved from a design and development perspective to produce that 13th button, the fourth component, goes down…and we really see the cost savings, decreased time to market, decreased defect rates, improvements in time to remediation.”

The efficiency gains have led to huge savings. Chris added further:

The scale of savings is yet to be determined, but I do think we’re talking seven figures minimum, if not eight figures.”

Moving forward

Just 18 months after the company started building Evolution in zeroheight, they’re still focused on making an impact for fellow employees and users.

For their own team, the Experience Design Team is adding even more content to the design system. Using the Atomic design method, they started with documenting atoms, molecules, and organisms. Now, they’re adding even more templates to the design system.

And for Prudential customers, the design system is leading the way toward a better user experience. Chris explains, “It gives end users a consistent, rational Prudential branded experience as they move within and between products… They gain something that’s performant, beautiful, and much more of an inclusive experience.”

With the clear impact that the new design system has had for both Prudential employees and customers, and true to its name, it’s full steam ahead to continue iterating on Evolution to make it even better.