Case study
Helios Design System
How we created a global enterprise design system in record time and saved a few million in the process.
MY ROLE:
AVP, UX Design
CLIENT:
Sun Life Financial
DATE:
January 2022 - June 2024
TEAM MEMBERS:
- Craig Moore - Director, DesignOps
- Sarah Rath - Senior UX Lead
- Wes Barichak - Senior UX Writer
- Bruce Chin - Product Owner
- Deepika Malik - AVP, Global Design
- Daniel Chan - Director, Global DesignOps
The Problem
Consistently inconsistent
When I started at Sun Life, to call our front-end fragmented would be putting it mildly.
Years of brand updates and partial web refreshes had created a digital experience that looked completely different depending on where you were in our ecosystem. We had seven different flavors of navigation, and there was no source of truth when it came to designing new experiences.
Worst of all, several false starts at creating a true design system had eroded the credibility of the design team. Things had gotten to the point that development teams wouldn’t even entertain using the latest version of whatever style guide we were referencing - they just took the easiest path and fragmented the ecosystem further.
Needless to say, it was a mess.
The Approach
Making the case
Our enterprise digital transformation created an opportunity to pitch for funding. Building on a pilot the team had run a few years earlier, we used this efficiency data and combined it with the latest case studies on quantifying design system value.
We then mapped the development of our design system to the rollout plan for our enterprise transformation. This gave us a clear picture of when teams across the organization would be ready to pick up the system, as well as a sense of which templates and components to build first.
The resulting business case clearly laid out the value of investment: once the design system was built and fully adopted, we’d potentially generate $5M in annual productivity benefits.
We were eventually awarded $1M in “show me” funding. This was enough to get us off the ground and build the small team we needed to get rolling.
The Team
Where we bring in the people to design the things
Prior to joining Sun Life I had led a design team at Oracle. While designing accounting and supply chain management software wasn’t for me, they were doing some very interesting things int he enterprise design space: specifically their design system, Redwood.
I stayed in touch with my old team, and I knew two team members who happened to be 10X designers being underused in the business group they were in. They had both worked with Redwood extensively, and built smaller-scale design systems at other organizations.
They didn’t take much convincing: the opportunity to build a design system from the ground up was too good to pass up.
Introducing Helios
A global design system in record time
Working in partnership with our Global team, we were able to join forces and kickstart the design and development of our design system: eventually named Helios.
In less than a year we had a fully code-enabled design system that supported all of our client-facing experiences, and exceeded our initial adoption targets by 20%.
Following a highly-successful developer summit in Toronto, adoption continued to accelerate, and we started seeing Helios becoming the most-used front-end library at Sun Life worldwide.
The Results
Scalable design, measurable impact
In a little less than two years we were able to go from a series of disconnected style guides and Frankensites to a fully code-enabled, enterprise grade design system.
Having templates and components defined has doubled our designers’ productivity, and increased product quality across platforms.
To date, we’ve generated millions in overall productivity efficiencies, while greatly improving the designer experience and generating excitement about the power of systematic experience design: a huge step forward for design maturity at Sun Life.
14,500
total designer hours saved across the team.
-75%
reduction in time spent solving for common components.
$7M
in total productivity efficiencies across design, engineering, and QA.
+20%
increase in average SUM scores for experiences using Helios.