This case study explores the implementation of design tokens in a Design System, in a way that enhanced usability for it’s users — product designers. I audited the styles used by my team and leveraged user testing to develop a semantic token set.
The Challenge
Tokens can enhance themeability and consistency, but their benefits are only realised if product designers can effectively use them. Ensuring that the naming and organisation of tokens is intuitive was crucial for adoption. There are numerous Design Systems globally, each managing their tokens differently. How do we make informed decisions on a token set that will work for our team?
The Solution
This was approached as a usability problem, validating decisions through user testing. This article will run through how testing Colour and Typography Styles helped my team make decisions on naming and organisation of our design tokens.
Colour
Two options for organising colour tokens were considered:
- Physical UI Element
- Colour Type
User Test Setup:
- 5 participants
- 2 Figma files, loaded up with the respective colour tokens as styles
With the colour styles available to them, participants were asked to:
- Convert a wireframe into a branded page,
- Build a simple card component from scratch, and
- Update the meaning/brand of an existing component using colour
Each designer approached the tasks differently, here are some of the pages styled with the test palettes that came out from that test:
Each designer approached the tasks differently. Here are some of the pages styled with the test palettes that resulted from that test:
The tasks allowed us to observe how each palette was used in practice. The tests yielded two types of feedback:
- Anecdotal; what participants were saying
- Observational; what participants were doing
In a traditional user test, what participants do is as important, if not more important, than what they say. Similarly, the tests revealed when a participant struggled to match a semantic colour style with an element they wanted to apply it to. Conversely, when a naming convention worked, it was evident by how quickly and easily they could pick a colour.
Based on these insights, my team could make a confident recommendation (based on their comments, and actions) to the stakeholders to use organise our colours by Physical UI Element — the solution that designers had the most success picking the right semantic colours.
Typography
The decisions required were slightly different with typography. It was necessary to decide whether to:
- Have a ‘flat’ organisation or group typography styles in folders, and
- Provide prescription breakpoints and semantic html typography tags as part of the style names.
User Test Setup:
- 7 participants
- 3 Figma files, loaded up with the respective typography tokens as styles
With the colour styles available to them, participants were asked to:
- Add the right text styles to a card component wireframe,
- Assign text styles to the content on an interface, and
- Use semantic typography styles (h1 — h6) to build an article on a page.
The tasks sought to help discern if designers were able to effectively differentiate between using typography for components and using typography for layouts. The following decisions were made:
- Have a ‘flat’ organisation — speed and accuracy are important in the designer experience. When styles have many nested layers and groupings, it makes it harder for designers to pick styles and move on
- Typography styles are agnostic and don’t have references to breakpoints or semantic html tags— it was decided to ‘outsource’ semantic HTML typography to documentation instead, as there were too many different permutations on these tags based on context (e.g. various breakpoints, platforms, operating systems, etc.)
Lessons
Figuring out that user testing was a tool that you could use to shape a Design System was a journey! Here’s what was learnt along the way:
- Faster decision making, and better stakeholder management — months had been spent going back and forth doing research, coming up with different solutions and pitching them to stakeholders. The user testing was the key to giving us actionable data that said “this will work” and helped us to get sign off.
- Smoother rollout to the team — by the time all the user testing was completed, most of the product designers had already been exposed to the solutions in one form or another. This made it easier to roll out the changes and get the team to start adopting these new design tokens.
