Designing the Lumen Design System from 0-1

Desktop, Responsive Mobile, iOS, Android | Oct 2018 - Mar 2019

How do you create a design system from scratch?

sun life lumen design system cover photo

Lumen Design System managed through InVision DSM

Sun Life is a leading Canadian-based financial services company. Helping over 6 million people achieve lifetime financial security and live healthier lives.

My role as a Visual/Product Designer contributed in research, creating a design system library, writing usage guidelines, and mentoring other designers.


Design teams at Sun Life were growing.

The design process was outdated — using style guides, and multiple design reviews each week. It worked, but at a cost. We wanted to give designers and developers more time solving problems rather than pushing pixels. I helped design the Lumen Design System to do just that.

Sun Life Homepage in 2018


Create a Design System from 0-1.

Simple, right? There was just one massive problem. Back in 2018, I didn't actually know what a design system was.

The hiring manager trusted me to do the job, and I had to figure it out.


Enable teams to build faster, consistently, at scale.

Success metrics:

  • Reduce time spent on-boarding new designers
  • Starting a project becomes easier
  • Improve speed updating work
  • Less meetings for design reviews
  • Reduce inconsistencies between design and development
design system goals

My design process

Research > Design > Deliver > Iterate

research image


My first step was to learn about design systems.

After reading articles, books, watching tutorial videos, and asking other designers. I was able to understand the necessary steps to design the Lumen Design System. I also followed the Brad Frost approach to creating Design systems.

Here's what I had to do next:

  • Audit the current state
  • Create standardized atoms
  • Design individual molecules with multiple states
  • Organize a library of templates and patterns
  • Write usage guidelines & documentation

current state audit

Standardizing components for accessibility and consistency.

Going through high-traffic pages and flows helped me identify key components. Designers used different Sketch files to copy-paste design patterns into new files. This worked at times, but mostly created different designs altogether. It was also a problem because every designer had a different idea of what something should look like.



Getting the basics right.

After going through many, many variations of styles, icons, and colours. I was able to come to an agreement with the team on which best represents the Sun Life brand. Maintaing a reputable multi-billion dollar brand starts with the basics.


Creating individual components with multiple states that are easy to use.

Having a consistent experience is one of the key elements to a great user experience. I created components that designers could re-use.


Using InVision's DSM to manage components.

To manage and share all the components, we used InVision's Design System Manager. It allowed other designers to open sketch files, and drag components to their files. It simplified the design process quite a lot.


Writing usage guidelines for each component.

Components and patterns are not very useful by themselves. They need some guidelines to be truly valuable. Writing usage guidelines created some governance as to what is the source of truth for the Sun Life brand.

first launch & feedback

It was a good start.

After all that work, I did a beta launch to see how designers felt about the new design system. Team members were enthusiastic about using it. As you can imagine, this was really exciting for me because I had never created a design system before.



Mentoring other designers on using the InVision DSM.

Soon after the launch, there were a lot of requests by the team members for learning how to use the new design system. I mentored other designers 1 on 1, as well as created onboarding documentation to help future team members.


Lumen Design System allowed teams to work 10x faster.

After the 1st launch of Lumen Design System, there were less requests for design review meetings. Designers gave positive feedback; it was easier to get started and find components with helpful usage guidelines. Over the long term, this change will improve the company’s design debt, product health scores, and build customer trust through consistent experiences.



A challenging, yet exciting experience.

After multiple iterations of the Lumen Design System, I was proud of it. The design system is efficient, easy to use, consistent, accessible, scalable, and most importantly, allowed the designers to focus on what's important — solving user and business problems and building exceptional products.

learnings & recommendations

If I was to do it all over again...

I would work closely with developers in building their library in parallel. Unfortunately, we didn’t have enough resources at that time to have this kind of collaboration, but this would have been ideal because it would allow teams to speak the same language.

See other projects


Improving onboarding so customers don't have to call


Optimizing SIM Swap flow to increase conversion rate from 38% to 76%