My approach to design systems

Empowering the design team and the experience of the product they create

 
 
 
 
 

Human Centred System

While a design system is an enabler of a better end user experience I like to think about it as tool in its own right, with its own set of users and user related pain points, issues and mental models. The users of the design system tool are designers and developers. And they use it to create a better product experience.

So the design of a system has two interconnected nodes. The first node is the product user experience. The second node is the infrastructure of the system.  It is obvious to use human centred design methods to design the product user experience. But the tried and tested user centred methods and processes could be used to design the system infrastructure too.

Bringing familiar approach to both nodes of the system creation and iteration has instant benefits. It yields high levels of collaboration across teams and avoids creating "design system overlord symptoms". Everyone can easily contribute solutions that move the platform forward.

 
 
 
 

Familiar double diamond approach applied to design system creation, management and iteration.

 

Learn

—   Conduct existing product interface audit
—   Map current design and development process
—   Jobs-To-Be-Done analysts of design workflow
—   Interview users; the designers and developers
—   Find common ground in workshops
—   Research and share industry best practices

Define

—   Workshop design system priorities
—   Agree contribution model
—   Refresh design and development process

Explore

—   Devise system architecture
—   Explore coherent application of UI styles, type, colour
—   Craft component variants and states
—   Unify common interaction patterns
—   Test high-fidelity micro-interactions prototypes

Refine

—   Trial proposed solutions on a small scale
—   Compile Figma components and style libraries
—   Make adjustments based on feedback

Publish

—   Publish libraries and documentation
—   Export assets
—   Support implementation
—   Guide and educate
—   Respond to feedback