What's in here?
This one is all about design systems and I'll be covering a little on what's changed since 2015 but mostly sharing some resources on best practices for product and design teams, both large and small.
Setting up a Design system
Many organizations today are open to either, creating a design system from scratch, or using open source tools that integrate well with their department's existing tools. However, gaining real adoption within small and large teams is a challenge amongst those working in design operations.
Fundamentals of building components
A lot has changed since 2015 but the fundamentals remain the same. According to Diana Wolosin's article, 10 things no one told me about design systems, a design system is a set of guidelines that maintain a collection of components, patterns and variations. One of the first steps in creating a system that can be easily adopted is to take inventory of the existing product UI and UX patterns as well as what tools the teams are using to create and implement them. Approach preparation like you would with any product opportunity – by doing user research on those who will use the design system.
Audit the UX/UI across the entire product
Interview engineers, designers and product managers to understand the pains in their workflow and what tools they use today. You don't need to develop Personas on them but it's good to grab quotes and synthesize the pains into themes so that Product Leads and Execs can understand the needs that the system must address.
Alternatively, you could kill two birds with one stone (not literally – it's just a metaphor) and run a customer journey workshop with internal stakeholders then align it to the internal workflow to identify process pains from stakeholders.
Prioritize the top 3 pains and create a list of criteria or work streams to break down the requirements into a tactical roadmap.
This article from Marie Lu Vinh outlines the different levels of design systems in larger organizations. I've personally ran a similar workshop for smaller companies with teams of 30 stakeholders and it works very well for both, alignment and adoption.
"Focus on coherence over consistency so there's enough flexibility for all product types to use the components."
It helps stakeholders understand the customer or end-user's product experience and it allows them to clearly see the gaps in their internal processes. When it comes to actually building the structure of the design system and components, stick to the basics of atomic design by Brad Frost. Each component inside a pattern should be replaceable by others. Many teams build the foundational tokens and components in a way that's not modular because they want to maintain perfection through consistency. However, this leads to poor adoption from the stakeholders who want to use the system but struggle to make it work for their user needs.
CONTRIBUTION meets ADOPTION
"To avoid wasting time, think ahead about how to create a modular, scalable, and flexible solutions to facilitate future enhancements."
To ensure that others can and will use the system components, you must build them in a way that allows flexibility as well as develop a process or communication channels that empower others to help scale the components. A Design System should consist of fundamental principles that align to company values and guide the brand or art direction of things like:
Content (UX copy & Marketing tone-of-voice) – How do you speak to your customer? And are you using a language they understand?
Motion & animation guidelines – Delightful moments that turn customers into ambassadors
Accessibility & usability checklists – Criteria that a component must match before it's included in the Design System. This is something that can also be used during implementation at the quality assurance stage.
Contribution process – Documentation on how product designers and engineers can contribute to the Design System, how to communicate updates to components and how to implement new variations.
