Introduction to Design Systems: Key takeaways from our webinar.

Jack Reinelt, President of the Americas
22 October 2020

Design Systems have been a popular topic among designers and developers for several years now, but in today’s global pandemic world where customers are demanding more from digital services and businesses are looking to achieve greater efficiencies, the role of a design system has become even more critical.

Design Systems ensure that product teams can operate at a higher velocity and that time is spent on more worthwhile, value-add tasks. To further explore this important topic, we’ve organized a three-part webinar series that will focus on: The foundational elements and benefits of a Design System, the do’s and don’ts when implementing a Design System, and proving the business value of a Design System to Management. 

If you’re a Director, VP, or C-level leader, this series will help you realize the massive time and cost savings a Design System can provide for your organization. If you’re a Product Manager, Design or User Experience lead, this series will demonstrate the positive impact a Design System can have on your process in terms of creating efficiencies, streamlining your operations, and improving consistency and collaboration.

 We will be hosting the 2nd and 3rd parts of this webinar series on the dates below, join us to continue the discussion on this topic and start implementing these learnings in your organization.

  • The second part in this series - November 5th at 10:00 (EDT) 'The Dos and Don’ts of Creating a Design System', register here.

  • The third part in this series - December 9th at 10:00 (EDT), ‘Proving the Value of a Design System to Management'.

Last week, our product expert Ben Magnus – Product Director at Somo, kicked off part one of our webinar series with his great presentation introducing us to the basics of Design Systems, sharing the benefits and business value it generates for product teams and organizations, and walking us through some of his real-life experiences in designing a global Design System for Audi and cinch. We summarized the key findings for you below. Let’s dive in.

What is a Design System, and what does it consist of?

A Design System is the single source of truth for your brand. Within your organization, any team member should be able to go to the Design System to understand what your guidelines are, what your components look like, how they should be applied, and view guidance on how to apply those rules and governance.

A Design System is made up of many parts, but the three core deliverables we typically focus on are a Design Library/Kit, a Component Library, and the Governance & Laws.

Design Library

The design library holds the building blocks needed for designers to create the UI for their products at speed and with consistency. Once designers have integrated with the design library, it ensures that updates to brand elements or components can be made efficiently across all products and teams. We would typically leverage Atomic Design when creating our Design Library, allowing us to design and build in a flexible manner.t. We use many tools for our design library like Sketch, Zeplin, Abstract, and Figma.

Component Library

The components contained within the design library are developed and turned into code; these components sit within a central, coded repository known as a component library. Using a tool such as Storybook to make these components visible to a wide audience, the component library should have the ability to view the different components and their different variations and states, toggle between features, see them working over breakpoints, and view the best practice guidelines and use cases.

Governance & Laws

Binding everything together within a design system is the governance & laws. These include getting started guides, adoption and contribution, guidelines, accessibility guidelines, and the rules on when and how to use components. Critical to the success of a design system is adoption; ensuring there is a well thought through and detailed communication approach is crucial to this and should also form part of the governance & laws.

Ensuring success for a Design System is directly tied to your teams adopting it and using it, otherwise it's immediately a failure

When to use a Design System?

A design system starts small and grows as big as it needs to.

It's very easy to look at other design systems that exist out there and think: I need that… often the answer is that you may need that eventually but you probably don’t need that to start with

It’s important for the client to understand that: A design system looks different for each organization and what works for one company may not be right for another. Start by evaluating the issues that you are currently facing in your design and development processes. Do your research and talk to people to find out where the pain points are and analyze your product portfolio to look for inconsistencies. If you’re starting to see inconsistencies, or if you’re experiencing duplication of effort between teams (i.e. the same Button component has been developed three times), it could be time for a Design System.

What are the benefits of a Design System?

There are three core benefits to implementing and using a Design System: consistency, efficiency, and collaboration.

Consistency: Firstly, by creating a single source of truth, it ensures that all products are designed and developed in a consistent manner. As the number of team members increases, it becomes increasingly important to ensure the processes and tools aid the creation of consistent end user experiences.

Efficiency: Secondly, a Design System improves efficiency. The design and component libraries increase the speed and velocity at which product teams can operate. Team members can spend time on the value-add activities, such as user testing, rather than duplicating effort on the same component.

User testing is a really good example of improving efficiencies, if you don't have time to conduct user testing, chances are you won’t build the right product the first time around which means that all that time spent building the product is wasted money

Efficiencies are also gained as a result of less refactoring being required. If a change is made to a component, projects that have integrated with the libraries will automatically be updated. 

Collaboration: Finally, a Design System improves collaboration through the use of common tools and language that all disciplines can follow. Involving different disciplines throughout the development of a Design System aids in not only knowledge but inclusiveness. A shared view of the available UI components between design, development, and product leads to easier communication and better clarity. Design Systems give you the flexibility to actually work with different markets, different teams, and different products in a much more seamless manner than without having a Design System in place.

To sum up, Ben’s discussion was truly a great introduction to Design Systems, where we walked away with a holistic understanding of what a Design System is and how it can create user-end consistencies, improve collaboration by forming a common language, and increase efficiencies within product teams.

He shared with us real-life client examples and illustrated the value and benefits that a Design System delivers for an organization, despite the different issues, needs, or size of the client. The discussion left us eager to learn more about the challenges and the lessons that the design team and the client encounter during the implementation of a Design System.

We’re excited to be hosting the 2nd part of this webinar series 'Do’s and Don’ts of Creating a Design System' on November 5th at 10:00 am (EDT) | 3:00 pm (BST). Join our interesting panel discussion involving our clients and Somo Design experts where we’ll talk about the challenges, and successes product teams encounter while implementing a Design System and share our learnings, tactical tips, and examples on how to build and maintain it successfully. Sign up here.

US webinar #2 header

Watch the ‘Introduction to Design Systems’ webinar recording.

If you’re interested in learning more about the topics discussed above or to find out about our upcoming events, or contact us here.