Why do we need a design system?
Published on: 2020-05-14
Why do we need a design system?
Design is more important than ever. Companies fighting on a hyper competitive global software market can rely only on experience as a key differentiator. Scaling design through hiring, without putting standards in place, is a myth. With every new hire, new ideas for color palettes, typography and patterns appear in the product, growing the inconsistency and increasing the maintenance cost. Every new hire increases the design entropy. There’s only one way to stop the growth of the chaos. Committing to running a design system process. Gradual growth of a design system, equals gradual decline of inconsistency and gradual increase of the speed of software development. Design scales. But it scales only with a design system.
Inventory
Pattern Inventory: Eg. Button, Dropdown, Modal, etc.,
Take screenshots of design patterns
Color Inventory: A typical source of design inconsistency is the set of colors used across the product portfolio
Get the total list of colors used in the application, check variables, inline, etc.,
Typography Inventory: Lack of consistent typographic scale used across the project makes the information architecture convoluted and hard to understand for users.
Get the complete list of text styles used in the app (from h1 till small text), check mixins in css preprocessors too.
Icons Inventory: Icons provide the necessary context for user experience and speed up the recognition of key actions in most of the interfaces. Inconsistent usage of icons can lead to extreme confusion of users and increase the maintenance cost
Check different libraries, formats, and collect the list.
Space Inventory: Add to your inventory different kinds of grids used across the products and perhaps also dive deep into paddings in the containers to understand any inconsistencies
Add different spatial units, grid system, etc.,
Get the support of the organization
Present the key inconsistencies from every category
Focus on numbers and the influence on the speed of the pro- cess (62 shades of gray, 16 types of buttons, 5 icon libraries etc.)
Explain why these inconsistencies are detrimental to the experience of users or are negatively affecting the software development process (team)
Explain that building a design system is an ongoing process and you’d like to build a small team to manage this process Emphasise that building a design system will help the company deliver better experience to the market faster (stack-holders)
Get a clear yes from both team and stack-holders
Multidisciplinary Design Systems Team
You can build the inventory on your own, but you need a team to run the design system as an ongoing process.
List all the skills needed to successfully fix inconsistencies listed in the inventory & Find people with the necessary skills
Check the realistic time allocation
Clarify the roles on the team and the decision making process
Decide the length of the sprint
Decide when the team will meet for planning and post-sprint meetings
Make Key Decisions and Establish Key Rules and Principles
Decide whether you’re building the system from scratch or treating one of the products as the foundation of the system.
Decide whether you’re going to build using existing technologies or introduce a new technology.
Decide how you’re going to distribute the system
Decide what are the KPIs of the system
Formulate your design principles
Higher consistency of interactions
Better craftsmanship?
Faster implementation?
More accessible UIs?
Build the Color Palette
Use the color inventory to identify the primary/base colors
Decide on the naming convention
Test how the new palette affects the interface
Check the contrast between colors in new UI. Make sure you comply with WCAG guidelines
Build the Typographic Scale
Build a consistent typescale
Font size, font weight, line height
Test the new typeface and showcase to team
Build icons library
Decide which icons from the interface inventory should become part of the system
Finalize the icons library to be used in a design system and add it to design system documentation
Products constantly evolve and so should patterns in the design system. Don’t aim at finalizing all the patterns in a single sprint or even a series of sprints. Take them one by one and make sure they are implemented by product teams so you can gradually correct all the inconsistencies and increase the speed of product development.
Credits: I haven't wrote the content for this post, it's copied from the book "The Actionable Guide to Starting Your Design System: The 100-Point Checklist" by Marcin Trender. I have skipped some sections Marcin has created and keeping this here in my website for future updates as my knowledge grows & serve as a reference.
Last updated