ANDREA HOCK

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

 Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93
INSTAGRAM
@andrea.hock

YOUTUBE
AndreaHock

MEDIUM
andreahock0

TWITTER
@andreahock0

DRIBBBLE
andreahock
CONTENTS

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

1. What is a Design System

2. Why Use a Design System

3. When to Implement One

4. Step 1: Getting Buy-In

5. Step 2: Design Principles & Plan

6. Step 3: Take a UI Inventory

7. Step 4: Build It

8. How to Iterate

9. How to Measure Success

PART 1

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

What is a
Design System?
Think of every single thing that makes up your product- layouts,
typography, grids, colors, icons, coding conventions, voice and tone,
etc. All of these interrelated independent parts can be used in other
areas. For instance, a button can be used in a page layout, a form, an
overlay, etc. It’s all about how these components can work together,
and the rules that guide them.

First, let’s start by explaining some different terminology so we can

figure out how these things all work together.
Terminology

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Styleguide
The documentation for the visuals. Includes all of the things that you
think a designer would use: typography, icons, color, illustrations, etc.

Visual Language
Overarching guide to what the brand feels like (versus a styleguide is
how to accomplish that).

Pattern Library
Also called “component library”. Includes forms, form elements, images,
navigation, overlays, etc.

Brand Guidelines
Non-aesthetic parts of a design. Includes principles, tone and voice,
grammar, etc. This tells both the users and the company who you are
and what your narrative is.

CSS Framework
Front-end code that developers use to build a product.

A design system is ALL

of these things!
It’s a complete
collection of

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

components and
guidance (in both
design and code) for
organizations to
build products.
I really like how Kim Williams described what a design system looks
like in the DesignBetter.co podcast. She explained that you can
normally see all of the different seams that are working on different
parts. And if you’re able to remove the seams, it seems like one
cohesive effort. You can really tell as you move from one experience
to the next who is working on what. But instead it should be a
seamless journey. So a design system is the glue to remove the spaces
between products so everything feels wholistic.

The diagram to the right explains the various parts that make up a
design system.
 Licensed to Guilherme Neves Alves Silva - [email protected] - 10
how to use components
forms galleries heros
principles information architutecture
layouts articles navigation
grammar how to get started
tone documentation
guidance best practices
voice

typography icons CSS, React, etc. components

grids illustrations Code patterns and examples
colors

BY ANDREA HOCK
What’s Needed

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

The physical parts that are usually in a design system are:

• a UI Kit or pattern library

• the brand guidelines and principles
• the code or framework
• guidance for the components

Design systems aren’t all the same, nor do they need to be because
every company is different and has different needs, but these are the
usual items included. So it’s not just a single illustrator file- in that
case you’re missing all of the guidance!

It’s a Product

I think the only way for a design system to really be implemented and
continued to be used is to treat it like a product. And this isn’t a new
idea, lots of people have been treating their design systems like this
in order to keep it integrated. So it should be a product serving your
main product.
PART 2

Why Use a

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Design System?
“Think of it a little like trying to build a house out of Lego, but instead
of bricks, you’re given a single block of plastic, perfectly carved into
the shape of a pre-built house. Great! Job done. But if you want a
different house? You’re going to need a whole new house-shaped
block. Wouldn’t it be nicer to have bricks that can be detached and
reassembled as required?”

-Dan Eden

*
Fun fact: Google was using 42 different shades of blue before they had
Material Design!
No Hand-Holding Required
A design system is to help everyone easily understand the decisions

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

you made and have one single source of truth. If you build one
correctly, you should be able to ship software with no guidance and
without having anyone as a blocker- not that you shouldn’t communi-
cate, but that’s what a successful one would look like.

Improve the Workflow

When you don’t have to design every component from scratch every
time, it speeds up the process immensely. It doesn’t make sense to have
to reinvent the wheel every time.

Consistency
It makes users uncomfortable if your products don’t all match. That
creates a brand that doesn’t seem unified and might be giving off the
wrong message to your audience.

Communication
It’s not only bad for your audience, but also for your internal team.
When you’re working in an enterprise company, things can get very
complicated very quickly. Design systems can reduce the interpretation
of the specs since they can be misunderstood if you don’t have one
single source of truth. It makes all of your elements very clear, with
consistent naming conventions and reusable styles. When you start to
introduce conventions, processes start to flow easier among teams.
There’s no room for deviation when everything is solidly defined.
Culture
When people are job-searching, they appreciate companies that value

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

design. When designers are more respected, they’ll want to share more
and do a better job.

Focus on Other Things

If you have a system in place that lets you work faster, it helps
designers finish projects faster, and perhaps work on other things
they would have otherwise not gotten able to work on. This might be
illustrations, animations, learning new apps or techniques, or any
other kind of finessing to take your product to the next level.

Save Money
If you’re not reworking the same elements every time, you’re saving
time and therefore money. And if you’re a freelancer and you’re billing
your clients for time, you can instead bill them for other work.

Increase Bus Count

If only one person has all of the sole knowledge of what and why
certain designs were chosen, that’s a high risk because they could leave
the company at any time and leave you to start all from scratch. Bus
count literally means the measurement of risk based on how many
people could “get hit by a bus”! Spread the knowledge to lower risk.
PART 3

When to

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Implement One
Here are some more specifics if you’re unsure of if you should put in
the time to make one. This is actually the first step in creating a design
system- finding a need.
Inefficiencies
When you’re starting to get redundancies in your code because you

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

have different designers who are creating a lot of the same items, it
might be a good time to create a design system. Your organization
might have multiple websites and they should all follow the same
guidelines.

Scale
When your organization has been growing a lot, and you’ve got enough
people that start touching the design is when you start to really need
one. Ideally you would want to make a design system before it’s too
painful and before output is very slow, but usually companies only think
about creating one after the fact.
 PART 4

Buy-In
Step 1: Getting

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Uphill Battle
It’s hard to sell a design system because people know that the

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

resources that they spend on building it aren’t spent on actually
building and shipping a product. So definitely expect pushback!

Find Out Who is Involved

Think about all of the people that will be effected by it. This includes
not only designers, but also engineers, program managers, stakeholders,
product teams, and business teams like marketing and legal.

Do Preliminary Research
Before talking to anyone, you should do your research. Print out as
much documentation to back up why you think this is a good idea.

Get Consensus
Since there are so many different groups that the design system will
touch, you need to get consensus from all different groups of your
organization. This can be difficult for larger orgs. It really only works if
people actually use it though, so adoption is very important.

Start with Peers

Before going directly to the top, get advocacy from your peers. Find
other people who are passionate about the company’s brand. Once you
have strength in numbers, then you can begin to sell it to the people
with a budget and authority. If you try to please too many people, you’ll
lose momentum. It might be best to have one liason from each team.
Show Value in Their Language
Start educating your initial few folks first, and train them to sell it like

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

you. Have them explain what it is and what it’s benefits are. Be
cognizant of who you’re talking to. Ask each team what their
problems are, and make sure you’re talking their language and what’s
in it for them.

For developers, their problems are time reworking the code and
confusion around what the latest ui is. For them, it’s good to show
visuals of where the inconsistencies are.

For the business side, their problems are money and the image of the
entire brand. Don’t say ‘we need a design system’- explain why. Show
them real data of the time spent creating specs versus actually
creating new designs. This would show them how you would save
money in time spent on redundant efforts. And talk to them about
how it’s a better experience for the user if the brand is cohesive.

Be Realistic
Show estimations of how long it will take, and be transparent about
what things might be pushed back when you instead focus on this.
Listen to their concerns, and meet people where they’re at.

Core Purposes
At the end of the day, you should all rally around one core purpose.
Everyone wants the company to do well. So that will be whatever is
best for the business, which is probably what is best for the user.
Prevent too
many cooks

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

The more people you talk to, the harder it is to get buy-in.

Kills Product
3 people, 3 lines

5 people, 10 lines

10 people, 45 lines

14 people, 91 lines
PART 5

Step 2: Design

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Principles & Plan
Next is where everyone converges on your ideas. In this step you’ll
want to include as many people as possible. Ask everyone for their
values, vision, methods, and goals.
Determine Design Principles
These will be the thing that people reference when there’s a problem.

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Here you’ll want to get everyone involved. Get them started by
asking some basic, open ended questions. Ask them what they think
is most important to the business. Think about what’s unique about
what you’re providing. They can answer this via polls any way you
want- in email, 1:1 interviews, or google forms- anonymous or not.
When you start to hear the same things, that’s where you’ll find your
principles. List them in order of priority.

Determine Business Goals

Determine how your success will be measured from the beginning. This
includes the cost and time required, what the priorities are, and the
strategy to follow through on those priorities. Look to management for
these answers.

Resources/ Who Creates It

Figure out who is going to be the team that’s making the design system.
You want to have collective ownership with multiple people owning it
so that when people leave, that knowledge isn’t lost. There are a few
ways you can go about this: a solitary, centralized, or federated design
team. Check out the list on the next page.
 Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93
How
will you
build your
design
team?

One person manages the Specific team dedicated to 1-2 people from several
design system. managing the design system. teams work in both.

BY NATHAN CURTIS
FROM ‘TEAM MODELS FOR SCALING A DESIGN SYSTEM’
HTTPS://BIT.LY/2R73PSU
BRAINSTORM

Questions to Ask

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Your Coworkers
Use these questions as a guide to help determine your design
principles and plan:

What is your vision for the company?

What do you value most?
How do you measure success?
What are your obstacles?
What methods do you use to do you work?
What are some areas of risk that you foresee?
 Use this space to brainstorm principles.

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

PART 6

Step 3: Take a UI

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Inventory
Next is where everyone converges on your ideas. In this step you’ll
want to include as many people as possible. Ask everyone for their
values, vision, methods, and goals.

*
UI Inventory Tip: Focus on things that are more specific to your organi-
zation. For instance, Netflix might focus more on advertisements, while
a tax company might focus on forms and data entry.
Go Through and Audit Everything
Find what’s inconsistent. One way to do it is to find everything that’s

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

wrong. So go through every single screen you have on every platform
and look for inconsistencies. Group them into different categories,
such as navigations, dropdowns, headers, etc. Then group those into
subcategories, such as button statuses. Another way to do it is to find
what’s right (this method works if you already have a solid amount of
projects to look through). Look through what you already have and
find the patterns you like.

Physical or Digital
You can either do this ui inventory digitally or physically. If you do it
physically, you would print all of the pages out, cut them up, and find
patterns that way. This way is a fun tactile way to get more people
involved. You can also do it digitally by taking screenshots of all of these
items. There are great resources out there that you can use to help
guide you, such as UI inventory worksheets.

Consolidate
Once you’re done exploring all of your existing interactions, you can
consolidate what you have. Start reconfiguring them into repeating
patterns. Once you do that, you can start to create one master file or url
where everything is contained to be reused.
PART 7

Step 4: Build It

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

So now you’ve done your ui inventory, and you have a list of items
that you want to solve and start reconfiguring and consolidating.

*
Fun Tip: Give your design system a name! Trello’s is called Nachos (”It’s
all about quality ingredients”), Zendesk’s is called Garden (”Where we
grow UI components”), Microsoft’s is Fluent (”The physical world is our
vocabulary”). Their names relate directly to the tone of the brand, and it
matches their catchphrase. So feel free to think of something that fits
your company to help build comradery around it.
Organize It
Decide how to organize it while you’re building it. That might be in

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Jira, Trello, or Confluence for a large business. For a small business it
can be in a Google doc. It doesn’t have to be fancy at first!

Components and Processes

Create both the components, and processes for how to use them.
Define components based on if they can be isolated by themselves and
still make sense. Provide examples wherever possible.

URL
Everyone in your org should have access to the design system for it to
work well. The best way to make sure everyone is updated to the latest
version is to make it one source of truth with some sort of url. If it’s a
pdf, I can assure you that everyone will just loose it, use the wrong
version, and not use it. A smaller company can use an internal wiki site if
keeping up with a website is too much work. The first version should
have resources for both designers and front-end code for developers.
Work directly with the teams to make sure it’s actually integrated into
their workflows whatever way works best for them.

Keep it Simple
The first version should be super simple. Start with the basic necessities
like buttons and forms. Try to get to the very bottom of the hierarchy of
your components. Don’t make too many rules, because teams might
ignore it if there’s too much to read.
Reasoning
Make sure you remember to add the reasoning behind why you

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

chose certain elements and how they should be used. The reasoning
should align with the principles that you initially decided on. For
instance, Netflix chose their idea of “stacks” because they have a ton
of different platforms, so they need to be able to expand and detract
for the different sizes, whether it’s a billboard, phone, or newspaper.

Downloadable Parts
Include as many barebones downloadable parts as you can. That can be
brand guidelines, the individual components, a grid system, and pieces
of code. The components can be parts like headers and footers and
other starter templates. Make it as easy as possible for the people using
your system to find things.

Agnostic
Keep the components as agnostic as you can so they work for many
different cases. Technology changes very quickly, especially coding
languages, so try to think about the longevity of what you’re using.

Let Everyone Know

Then let everyone know that you have this new design system! This
might be different for small companies vs large companies. You might
post notices around the office, use email, Basecamp or Slack. The best
way is to distribute it through every channel you have in your company.
PART 8

How to Iterate

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

To keep your design system from slowly loosing traction, you have to
remember that it’s a living project and can’t be something on the side.
Create Processes
You’ve already decided who contributes at the beginning, but you might

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

need to change that. Use one central place to file bugs, and decide who
files them when you see discrepancies. You can either update the whole
system all at once, or bits and pieces as you go. If you update once a
year, you have to wait awhile until the next update, and people might
deviate from it. But if you update continuously, you get real-time
updates, and it’s a bit more manageable.

Remind People to Use It

It’s inevitable that people will forget or not want to use it. That’s ok-
keep reminding them until it becomes habit for them. Whenever you
have new hires, you can use them as an opportunity to get people to
adopt the system and act like it’s part of the protocol.

Simplify
Wherever you see problems, look for where you can simplify. If the
system is too complicated and you have a smaller team, it will be hard to
keep up with and maintain. And if you have to update a lot of things
manually, invest in the time to figure out how you can automate those.

Make Adjustments
Make adjustments after the different teams use the system and find
places where the components you specified don’t fit. Not everything
has to follow the components you made exactly. If there’s a special case
and you need a new component, research to determine why it’s needed.
Act Like It’s a Product
Treat the design system itself like a product to make sure it gets iterated

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

on. So make releases and updates a cyclical thing.

Allow Contributions
Don’t fall in love with it, so there is room for change. Allow for flexibility
so that everyone can feel like they are able to contribute. Let people
request components or behaviors. Reach out and ask people for
feedback since they’re the users of your design system. Keep the
backlog accessible to anyone who wants to see it, and have weekly
meetings to get feedback, with 1 or 2 reps from each team, or office
hours or design reviews.

Company-Wide Yearly Review

Continuing to communicate frequently is very important. Make it a
yearly event in the company to align on your principles. Based on how
things go the first year, you might need to redefine goals and principles.
Share what you’ve learned with data on the time and money you saved.

Never Done
A design system will always need to be iterated on. It’s a living, breath-
ing thing, and just like your company grows, the design system needs to
evolve and grow with it. Some components will need to be modified and
some will need to be removed. But as it continues to grow, you can
tighten the loop of building, measuring, and learning.
PART 9

How to

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Measure Success
Now you can go and implement what you did in your
own organization! You want to do usability testing to see if users
notice, and if so, how they feel about the changes. Get both
quantitative and qualitative results.

The end goal is to make the jobs of designers and engineers easier
and tighten the strings between teams. Ask yourself if that was
accomplished.
Quantitative Feedback
What actions are users taking, and is that different than before you

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

implemented the system? This will help you figure out what design
features are hard or easy to use. Do this type of research when you
have a working product, either at the beginning or end of a design cycle.
You’ll want to have fewer participants than you would with qualitative
feedback so you can have them discuss and explain their reasoning.

Qualitative Feedback
This will help you figure out if the tasks were easy to perform. You can
do this at any time during the redesign, and you’ll want to have as many
participants as possible since it’s more of a metrics type of research.

Branding/ Market Research

See how users feel about the actions they’re taking and the product as a
whole. How do they feel about the brand itself now? Do you see a
visible change in the product? When you interact with the org’s
different products, does it feel like they’re from one cohesive brand?

Internal Feedback
Look inward and see how many teams actually adopted the design
system. How smoothly is the product being built now, and is it sustain-
able from both a design and dev perspective? Does it feel like a
connected organization that communicates better? Are decisions that
are made internally reflecting the brand or diverging from it? If so, what
is missing from your system?
PART 10

Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93

Resources
Online Examples
Google’s “Material Design” Trello’s “Nachos”
Salesforce’s “Lightning” Netflix’s “The Stack”
Shopify’s “Polaris” Apple’s “Human Interface Guidelines”

Books
NASA Graphic Standards Manual
New York Metro Graphic Standards Manual
Smashing Magazine’s ‘Design Systems’

Websites
Styleguides.io
https://github.com/alexpate/awesome-design-systems

People to Follow
@brad_frost @jina @broccolini @danmall @nathanacurtis
 Licensed to Guilherme Neves Alves Silva - [email protected] - 102.773.869-93
The Adobe Creative Residency empowers talented individuals to
spend a year focusing on a personal creative project, while sharing
their experience and process with the creative community.

https://www.adobe.com/about-adobe/creative-residency.html