Thomas Le

Design system:

A team story


How a design system can empower the team

— PROJECT NAME

Design System


— ROLE

UX Designer


— DATE

Aug-Nov 2021

This is a case study reviewing how a design system can impact the internal team in various ways that can make day to day tasks challenging and/or rewarding.


This experience will highlight my approach to help guiding the team towards building a stronger design system foundation as the business looks to scale and grow its product.

Design challenge

How might we make small, incremental changes to the design system to achieve the most impact without having to start over completely?



Business challenge

  • How might we promote and maintain consistency across the platform as the business looks to scale and grow its product in the coming years?

Awards

  • It’s Nice That
  • AIGA
  • Fonts In Use
  • The Dieline

Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook

Process Overview


A design system can be a daunting task for any given team to tackle, even the best of teams with more resources can find it challenging due to how quickly it can grow in complexity making it harder to maintain and update.


However, the key to success to tackling this challenge is to engage and align with the internal team because the design system is a reflection of how efficient the tools can be for the team to use as the product grows and scales.


By introducing the five key phases for this project this gives the team a framework to breakdown the design system into smaller, manageable chunks making it less daunting to approach.







Evaluate


The first key step to evaluating the current state of the design system is to perform a heuristic evaluation of the existing products. This gives the team an opportunity to gain a deeper understanding of the overall health and performance of the products:


1. Identify number of existing components

2. Identify variations or unique number of components

3. Identify inconsistencies and practices within the platform


Next steps:

After performing the heuristic evaluation of the existing products the next steps is to group and consolidate components into similar categories using the card sorting technique to help the team gain a better overview of the number of existing tools that have been created so far.



Meet the internal team

Team's perspective


The second step after evaluating and gaining a deeper holistic understanding of the existing products and its relation to the design system is to talk to the people who are impacted by the design system. (Hint: it’s not just designers :P)


By including the internal team in this process and through series of formal and informal interviews and design thinking sessions I was able to uncover a whole new perspective: that each team saw, felt and experienced varying levels of challenges resulting from a weak design system foundation.

“At every stage of the design process we need to both zoom in on the user needs and zoom out to consider the systemic implications, oscillating continuously between these two equally critical perspectives.” – Ellen MacArthur Foundation

Team vote

By displaying the design system in a visual format it allows the team to see from a holistic birds-eye view that makes planning and prioritization much more effective.

Prioritization

  • Using Brad Frost’s Atomic Design methodology allowed me to prioritize the elements that the team had highlighted in previous exercises to begin mapping and planning out which section should be addressed first.

Building a strong foundation

Colour

One of the foundational elements of the design system that can have cascading results if it is not approached from a system's perspective. As a result, when reviewing colours one of the main feedback from the design team was that there was not enough range of colours to work with and that certain colours did not meet WCAG 2.0 standards.

Typography

  • Another cornerstone foundation to building a strong design system is having a dynamic range of font sizes that gives the team greater flexibility and control when creating components or new pages. This is critical to ensuring consistency across the platform as more and more components are added to the platform.

Pulling it all together


Here is an example demonstrating the capabilities of Figma allowing designers to quickly and efficiently generate multiple types of buttons using a series of controls highlighted on the right side.


Benefits:

- Achieve consistency across the platform by empowering the designer to create scalable components through variants

- Reference from single source of truth where components are no longer disconnected or broken from the master file

- Promote a "re-use" rather than "re-build" mindset

- Quickly iterate and modify input fields based on contextual need rather than spending additional time to re-build it


Greater flexibility and control


Here is another example applying the same logic and approach as buttons with input fields. In the past, each input field existed as a sole entity making updating and maintaining consistency extremely difficult across the platform.


However, by having a single source of truth, teams can include additional variations within the base component so rather than having separate text fields for different situations teams can rapidly iterate and select the appropriate input field with ease from just the base component.


Communicating beyond static design


By approaching the design system from holistic approach we can continue to build on top of it to include interactive state that gives developers, PM’s and PO’s the opportunity to to gain a better understanding of how the designs should behave as well.


By spending time flushing out the various states for any given component from the beginning we can leverage the benefit of having basic interactivity early on to establish a common shared understanding between designers and developers to build upon.


This approach can also be applied to early designs when testing concepts with users giving them the ability to interact with the prototype although through simple interaction can making the experience more realistic.

Recap: Design challenge

How might we make small, incremental changes to the design system to achieve the most impact without having to start over completely?



Recap: Business challenge

  • How might we promote and maintain consistency across the platform as the business looks to scale and grow its product in the coming years?

Awards

  • It’s Nice That
  • AIGA
  • Fonts In Use
  • The Dieline

Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook

Results

Able to successfully update foundational elements within the design system while creating on-going dialogue with the internal team to achieve stronger team alignment, and reduce time dedicated to re-building components.


Shifted team's mentality towards a "re-use" mindset placing more emphasis on planning and exploring variations and possibilities through a base component approach in order to avoid creating one-off or unique components.



Key lessons

  • Engaging the team is the secret to success because the design system is a reflection of the team’s needs.

By making smaller, iterative changes overtime can have bigger impact allowing the team to embrace a design system approach where we can build elements once and be able to re-use it again and again.

Next step

  • By addressing and building a stronger design system foundation this will allow the team to build and create more complex components with a "re-use" mindset that will lead to better consistency across the platform.

Monitor and reflect on data metrics using Figma's Design System Analytics to measure the adoption rate of the design system and to ensure that it will continue to be improved as the team continues to learn.


Next steps

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook