Chapters

Chapters

Chapter 3

Structure

Structure

Structure

Structure, welcome home.

Your design system is more than a collection of reusable, shared assets. It should be an adaptable system of foundations, patterns, guidelines, components, and tools. Think of it as the hub that combines all the best practices for creating products.

Your design system is more than a collection of reusable, shared assets. It should be an adaptable system of foundations, patterns, guidelines, components, and tools. Think of it as the hub that combines all the best practices for creating products.

What does the overall identity look like?

Why is the cart abandonment rate 

so high?

Why is the cart abandonment

rate 

so high?

Why are people not completing 

key user flows?

Why are people not completing 



key user flows?

Are the design, color palette and typography consistent throughout 

all materials?

Are the design, color palette and

typography consistent throughout 



all materials?

What do the visuals communicate and are they in sync with our target audience and our business objectives?

What do the visuals communicate

and are they in sync with our target

audience and our business objectives?

What to include?

Start collecting materials

Start collecting materials

As I mentioned in the previous chapter, you're looking to start with the most impactful steps first. Begin with the commonly used components. Move from the smallest building blocks to the bigger ones.

As I mentioned in the previous chapter, you're looking to start with the most impactful steps first. Begin with the commonly used components. Move from the smallest building blocks to the bigger ones.

Foundations

Components
Guidelines
Patterns
Tools

Another exercise that helps when creating a design system is defining what you want your finished system to include. Not all design systems are the same — some are relatively basic, and others are much more advanced.

Another exercise that helps when creating a design system is defining what you want your finished system to include. Not all design systems are the same — some are relatively basic, and others are much more advanced.

For example: do you want to search through your components, write extensive documentation, add downloadable assets (branding materials, .svg icons, etc.), accessibility guidelines, etc.?

For example: do you want to search through your components, write extensive documentation, add downloadable assets (branding materials, .svg icons, etc.), accessibility guidelines, etc.?

Components

Group components by purpose. However, remember that you don't want to end up with 1000 components with slight differences. You will add a lot of complexity and, in the end - a lot of design and tech debt.

Group components by purpose. However, remember that you don't want to end up with 1000 components with slight differences. You will add a lot of complexity and, in the end - a lot of design and tech debt.

When you are considering if the component is valuable enough to be part of the design system, ask yourself:

When you are considering if the component is valuable enough to be part of the design system, ask yourself:

Is it used on multiple flows?
How many brands/products use it?
Does it follow our design principles?
Does it solve a specific problem?
Is it reusable?
Is it flexible?

It's like baking a cake. 🎂

If you add too many layers,

everything will fall apart.

It's like baking a cake. 🎂

If you add too many layers,

everything will fall apart.

Don’t write poetry.

Don't use jargon and fancy words.

Please write how you've done it in simple language, explain where to use it, and add guidance for using it again.

Be straightforward as possible. Don't write essays; no one will read them.

People using the design system will only use the components when they fully understand the specifics.

Don't use jargon and fancy words.

Please write how you've done it in simple language, explain where to use it, and add guidance for using it again.

Be straightforward as possible. Don't write essays; no one will read them.

People using the design system will only use the components when they fully understand the specifics.

Clear and thorough documentation is an essential part of any design system.

Clear and thorough documentation is an essential part of any

design system.

Technical ecosystem

There are a lot of options for connecting design and development. Your head can start hurting from decision fatigue, especially when figuring out what to do.

You have third-party tools, plugins, and the most advanced and secure option - creating your Design API.

There are a lot of options for connecting design and development. Your head can start hurting from decision fatigue, especially when figuring out what to do.

You have third-party tools, plugins, and the most advanced and secure option - creating your Design API.

Abc
Abc
Abc
Design System
Documentation

Design

Design

Figma

Development

React-Web
React-Native
iOS
Android

Development

React-Web
React-Native
iOS
Android

Tokens Studio

Storybook

Knapsack

Zeroheight

Knapsack

backlight.dev

Github
Specify
Storybook
Supernova
Frontify

Calculations

It is always wise to calculate before deciding on priorities and a roadmap.

To start, compare the costs and time required to use different tools. Compare features that you need versus the ones that a specific tool offers. This evaluation step forces you to think of concrete examples of the "final" system. ("Final" because nothing in digital is ever final. 😅)


The overview also helps highlight some benefits of a design system in a way that will help you pitch the system to others, helping the team understand time and cost savings.

If you want to explore more tools, explore the list of valuable resources ->

It is always wise to calculate before deciding on priorities and a roadmap.

To start, compare the costs and time required to use different tools. Compare features that you need versus the ones that a specific tool offers. This evaluation step forces you to think of concrete examples of the "final" system. ("Final" because nothing in digital is ever final. 😅)


The overview also helps highlight some benefits of a design system in a way that will help you pitch the system to others, helping the team understand time and cost savings.

If you want to explore more tools, explore the list of valuable resources ->

Start reading

Newsletter

Writing on topics such as design systems,

design process, design strategy. ✨

© 2022 - 2023 The Design System Guide by Romina Kavcic

Start reading

Newsletter

Writing on topics such as design systems,

design process, design strategy. ✨

© 2022 - 2023 The Design System Guide by Romina Kavcic

Newsletter

Writing on topics such as design systems,

design process, design strategy. ✨

© 2022 - 2023 The Design System Guide by Romina Kavcic