Design System Research
Role: User Researcher
A design system can make a designer’s life easier with design guidelines and pre-built components. However, design systems may pose barriers to entry that prevent designers from reaping the benefits.
This particular design system consisted of two different products; 1. A design system guidelines website, and 2. Libraries embedded in Figma consisting of pre-made components.
This research aims to determine if designers are using the using the system and how.
We asked 4 main questions…
Methodology
What makes up the design system?
This particular design system is made up of two parts:
A design system guidelines website, detailing brand guidelines and styles.
Figma libraries containing atoms, molecules, and organisms.
Recruitment
Proto-Personas
Designer’s General Process
Detailed Normal Process:
Process Pain Points…
The Experiment…
A focus on components…
Component Specific Painpoints
FINDINGS…
NAVIGATION COMPONENT
Navigation Component: Design System Success
Navigation Component: PULLED FROM FILE
Navigation Component Recreated….
Component Comparison: Navigation versus Breadcrumbs
The following shows a time comparison between two components, NAVIGATION and BREADCRUMBS.
It is important to note that designers struggled to find the correct name for the NAVIGATION component, while almost all designers knew the name for the BREADCRUMBS component, resulting in drastic time differences.
Naming convention confusion caused designers to take an average time of 3min 2sec to find the NAVIGATION component.
Designers knew the name for the BREADCRUMBS component, allowing designers to find the component with an average time of 16.28 seconds.
