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.
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 “prove it” funding. This was enough to get us off the ground and build the small team we needed to get rolling.
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.
Helios in Action
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.