Design System - Foundation, Checklist

| Comments

Why 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.

Comments