What product managers can learn about Design Systems

What makes a good product? What makes a well designed product? A few years ago, I learned about design principles and how principles such as “not getting in the way (of the user)” and “content first” can drive product design. Imagine my initial confusion and intrigue, as a non-designer, when I first heard about a “design system”. Chris Messina – former designer at Uber – has come up with a useful definition of what a design system is:

 

“Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.”

 

Later, Messina went on to add that “Design never was just how it looks, but now it’s also how it sounds, how it speaks, and where it can go.” Apart from capturing how brand and product communicate, look and feel, a design system is also a critical component when it comes to scale. Just take this statement by Vikram Babu – product designer at Gigster – for example:

 

“The problem facing design today isn’t a shortage of skills or talent but that design doesn’t scale when you move from a few screens of designed components to a platform of developed patterns where adding people only complicates the problem… hence design systems.” 

 

The key thing I learned about the value of design systems is that they intend to go beyond just a collection of design elements. Typically, companies will have a style guide. However, more often than not these style guides contain a bunch of design elements or patterns, but not create a fully comprehensive design language or tone of voice, as Nathan Curtis – owner of the EightShapes design firm – explains:

 

“A style guide is an artefact of the design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.” 

 

This raises the question how one goes about creating a design system. Some things that I’ve learned in this respect:

Before you get started

  1. What’s your company vision look like? And is mission?
  2. Which problem is your company looking to solve and why? For whom?
  3. What are the company values which underpin your company culture, product and service?
  4. What problem(s) are we trying to solve through the design system? Why?
  5. What’s the desired impact we expect the design system to have on the way we work?

Getting started

  1. What does the current design and design look like? What works and what doesn’t? Identify the gaps.
  2. Define some underlying design principles, which underpin a fluid and developing ‘design ecosystem’ (see Airbnb as a good example; Fig. 1 below).
  3. Create a visual design language, which comprises a number of distinct but ever evolving components (I loved Adobe’s Nate Baldwin breakdown of some of these components; see Fig. 2 below). Common components of a visual design language are: colour, typography, iconography, imagery, illustrations, sizing and spacing.
  4. Create a User Interface and pattern library.
  5. Document what each component is and how to use it.

 

Fig. 1 – Airbnb design principles – Taken from: https://airbnb.design/building-a-visual-language/

  • Unified: Each piece is part of a greater whole and should contribute positively to the system at scale. There should be no isolated features or outliers.
  • Universal: Airbnb is used around the world by a wide global community. Our products and visual language should be welcoming and accessible.
  • Iconic: We’re focused when it comes to both design and functionality. Our work should speak boldly and clearly to this focus.
  • Conversational: Our use of motion breathes life into our products, and allows us to communicate with users in easily understood ways.

 

Fig. 2 – The foundation of creating a Visual Design Language by Nate Baldwin – Taken from: https://medium.com/thinking-design/what-is-a-design-language-really-cd1ef87be793

  • Clearly defined semantics (and no, “error”, “warning”, “success”, and “info” aren’t nearly enough)
  • Thorough and mature mapping of core elements of design with clear purposes and meanings
  • A solid family of UI components and patterns that effectively support the semantics, and use design elements (based on theirmeanings) to support the meaning of the components
  • Thorough, comprehensive documentation about the visual communication system

 

To make this a bit more concrete, I’ll look at three good examples of design systems, by Google, Bulb and Salesforce.

 

Google Material Design

 

 

Bulb

 

 

Salesforce Lightning Design System

 

 

 

Main learning point: It’s important for product managers to understand what a Design System is and the purposes it serves. Even if you’re not directly involved in creating or applying a Design System, it’s key to understand your company’s design language and how it applies to your product.

 

 

Related links for further learning:

  1. https://bulb.co.uk/blog/introducing-bulbs-design-system
  2. http://design.bulb.co.uk/#/patterns/styles/colors/README.md
  3. https://www.fastcompany.com/90160960/the-design-theory-behind-amazons-5-6-billion-success
  4. https://www.invisionapp.com/blog/guide-to-design-systems/
  5. https://www.invisionapp.com/blog/scale-design-systems/
  6. https://medium.muz.li/how-to-create-a-style-guide-from-scratch-tips-and-tricks-e00f25b423bf
  7. https://www.invisionapp.com/blog/secrets-design-leadership/
  8. https://www.lightningdesignsystem.com/
  9. https://www.uxpin.com/create-design-system-guide
  10. https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac
  11. https://www.uxpin.com/studio/ebooks/create-design-system-guide-checklist/
  12. https://blog.prototypr.io/design-system-ac88c6740f53
  13. https://medium.com/thinking-design/what-is-a-design-language-really-cd1ef87be793
  14. https://airbnb.design/building-a-visual-language/
  15. https://material.io/design/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.