Lumen Design System

Building a design system that would allow teams to create faster, consistent, and scale.

Sun Life Financial
Product Design
Client: Design Team at Sun Life
Timeline: Oct 18 - Mar 19
Tools: Sketch & Design System Manager by InVision
Overview: We needed a better way to communicate design. Allowing everyone to be consistent, faster, have less meetings, and finally - help scale. I built the Lumen Design System @ Sun Life Financial.
CHALLENGE

Decrease design & development debt within the organization by introducing a better process

Goals & success metrics

  • Improved on-boarding process for new designers
  • Starting a project becomes easier
  • Improving speed for creating new work
  • Decreased amount of meetings for pattern reviews
  • My Responsibilities

  • Analyze current design process
  • Create living & breathable components
  • Develop design system documentation
  • Mentor designers on using the design system
  • Manage iterations and create improvements
  • PROCESS

    Rebirth of a style guide

    The starting point was a style guide created months ago. It was the only source of truth for new and existing designers, developers, and other team members. So, if we have something that works, why bother making a design system? What's the point? Our goal was to bring it to life. Giving it character, and the ability to breathe. A system that's efficient, consistent, accessible, and scalable.

    Efficient

    With style guides, designers have to re-create components each time they start a new project. That's a lot of time wasted that could be used to create productive work. With the addition of design system to the team, designers are able to drag-n-drop starter pages, and components into their sketch file and start building quickly!

    Before & after Design System

    Consistent

    Creating consistent design was a challenge before a design system. Buttons had different padding, wrong text styles being used, and even wrong colours! That's a big problem when building in a large-scale environment. Now, it is always consistent because there is one source of truth that lives & breathes.

    Consistent usage of buttons example

    Accessible

    When we were building the Lumen Design system, we made sure to keep accessibility in mind at all times. Before components are added to the design system, they were tested to meet AODA and WCAG guidelines.

    Accessible button

    Scalable

    Being able to scale the design system is a top priority at Sun Life. Because it's a living & breathing thing, the Lumen design system is constantly updated with newer and better components using the best UX practices.

    Using the Atomic design theory has been priceless in this journey. Proper document & guidelines help the team use components with more flexibilty and consistency. DSM allows everyone to easily access design components required to start building quickly.

    Design System usage documentation

    Final thoughts

    Now let's go back to the question: What's the point of creating a design system? I'm glad you asked! It's to help teams create, communicate, and innovate with ease.

    How teams benefit from the Design system

    🙌 Lessons learned

  • The end goal with design is to solve problems, not just have pretty looking UI
  • Design must begin with accessibility in mind first, not last.
  • You are not the user. Test the product with its users and then iterate.
  • 🤔 Next step recommendations

  • Continue adding more comprehensive documentation on DSM
  • Find UI issues that cause confusion in users and introduce better options
  • Spread the usage of DSM between other teams at Sun Life (including devs)
  • Thanks for reading! 🙏

    Special thanks to: Andrew Noel — Design Lead, for helping me along this journey.

    Get in Touch

    Let's work together

    Send an email