Getting buy-in

for building a design system

10 behind it)
(and team of five

Design Systems Meetup, July 2019

 Making travel better at

Jan Toman
Design System Lead at Kiwi.com
Previously working for

&

Twitter: @HonzaTmn
A bit of
context
@HonzaTmn
August 2017
Hired as 5th designer.
The plan 🚀
To grow to 15 designers
in the next 12 months.

🎨 Task
Prepare UI kit for
Time frame
3 – 6 months long project.
growing design team.

@HonzaTmn
 My very first challenge

"How might I prove that design system

is worth a full-time investment?"
 The first
three months
🔬
 🔬
„Peak into other
☕ ☕
Interface design systems“
✂

audits Talking
👀 👀 with people !

📝
👀 w hat
?
#
http://bit.ly/ds-research
@HonzaTmn
Top insights
from research
(and how they affected future communication)
🔬

Existing styleguide
🎨 ✍
No one used it, though.
👍 👍
Support from devs
They just hate coding
👏
something repeatedly.
😨
Fear for creativity
Fear that the design system will
limit them and will lead to worse UX
🧰
A looot of tools
Our design files were
everywhere and nowhere.
@HonzaTmn
Listen carefully.
Even small details matter. 👂
Lunch talks
🍛 ☕
matter too
a.k.a using „silent persuasion strategy“ 🍲 🥡
 ♿
Priming Building a case for coding
Mentioning keywords like „goals“, Setting the expectation that all
„roadmap“ or „accessibility“ now and then. components will be codified eventually.

🎯
5

It’s here to help Curator, not creator

It’s not about limiting anyone Keeping designers in charge of decisions,

🧞
creativity, it’s the opposite. be more a curator than creator.

7 @HonzaTmn
Keeping
designers
in charge?
What does it mean in practice?
🧞
🔬
„We already
have colors
and text styles.“

❓ ❓ ⁉

@HonzaTmn
Task: Clear typography and colors.

„This is work-in-progress.“

@HonzaTmn
„You decide if it’s enough.“
If not? Iterate, improve, let them check again.
@HonzaTmn
Palette after a year of iterations

@HonzaTmn
Small iterations. Often.
It doesn’t need to be perfect.
It never will be anyway.
 The effect of this strategy

People believed in styleguide,

so they started to use it.

#ikeaEffect
 Next
3 to 6 months
🗣
@HonzaTmn
@HonzaTmn
@HonzaTmn
A lot of small
changes.
Often.

@HonzaTmn
Giving them
control.
Again.

@HonzaTmn
Silent weekly
updates
To management.

@HonzaTmn
🤜🤛
It’s all about gaining trust.
December 2017
… more & more requests coming.

☃
December 2017

Me switching full-time
on improving UI kit 🎆
Goal: support 9 designers 🥂
„Team“: 1 UX Designer
@HonzaTmn
January 2018

Junior developer is
joining our design team
However, not for coding UI kit…

@HonzaTmn
 Current challenge

"How might I get someone

to code our UI components?“
🔬
Using research
insights
👍

👍 👍
Support from devs
They just hate coding

👏
something repeatedly.

@HonzaTmn
 👍

👍 👍
Support from devs
They just hate coding

👏
something repeatedly.

Meeting with lead engineer

to discuss options
🍻 @HonzaTmn
🤝
Our remote team will
code UI components
„They need it anyway for their new project.“

„Team“: 1 UX Designer + Remote team coding UI kit ‼

@HonzaTmn
 March/April 2018 – Retrospective

No time
Team’s priority was to deliver
their project, not a library
of reusable components.
🧟
Partial coverage
Not every variation was done,
so it was basically unusable
by other teams.
Not compliant
Component’s weren’t pixel perfect,
bad browser support, no test coverage.

⏰ 🏚

No time
Team’s priority was to deliver
their project, not a library
of reusable components.
🧟
Partial coverage
Not every variation was done,
so it was basically unusable
by other teams.
Not compliant
Component’s weren’t pixel perfect,
bad browser support, no test coverage.

⏰ 🏚
Meeting with lead engineer again 💡
🤔
🤝
Our new junior developer
will code UI components
+ that coder from design team will help too.

„Team“: 1 UX Designer + 1,5 junior (but dedicated!) developers

What else was 🎉
happening?
How did we ensure that our design system won’t be forgotten?
 Improving UI kit 🚀New name
New components, new variations, Boosting the product feeling of our
a lot of UI kit improvements. design system by giving it a unique name.

!
🗃
Orbit.Kiwi Improving visibility
Creating a single source of truth Presenting design system on „AllDevs“
for everything design systems related. (company platform for sharing knowledge)

🎙
Creating name
Creating name
i d e n t i t y

Connecting the unconnected

 L

Orbit.Kiwi
Single source of truth.
Orbit.Kiwi

Roadmap
Public for everyone
Orbit.Kiwi

Component
status
Public for everyone
@HonzaTmn
July 2018
Almost one year after my start

🌤
🚀
Company sees us
as „Orbit team“

1 Product / UX + 2 React Developers + 1 UI Engineer

Full-time focus. A few months later.

October ☔
2018

40 components ready
In Sketch & coded in React,
all tested and maintained.
O
🕴 New users
New internal „clients“:
business development, marketing,
community & event team
⚖
Improving adoption
Product teams started replacing
old components in code.
Good feedback
Getting a lot of good feedback
from all over the company.
@HonzaTmn
Motivation to
continue is high 🥳
From team and also the company.
 No accessibility Slowing down delivery
And it’s starting to be a problem.

🐢
There is just too many people using it
and we don’t have time to cover all requests

🚧
📈
❌
Missing design docs No strong metrics
However, we have bigger issues. And company is starting with OKRs,
so we need to figure out metrics too.

@HonzaTmn
No accessibility Slowing down delivery
And it’s starting to be a problem.

🐢
There is just too many people using it
and we don’t have time to cover all requests

Solution: hiring 3rd developer

🦒
🏀 @HonzaTmn
 📈
❌
No strong metrics
And company is starting with OKRs,
so we need to figure out our metrics too.

@HonzaTmn
 📈
❌
No strong metrics
And company is starting with OKRs,
so we need to figure out our metrics too.

At least OKRs
are defined.

@HonzaTmn
“Nothing is invented and perfected at the same time.“
- John Ray
Fast-forward to

July 2019
Current situation

🕵 Hiring Content Writer & project

manager as full members of Orbit team

📱 React Native implementation of our

components

🦹 Publishing new documentation page

with live examples & more features
(working with data we’ve collected)

🔮 Internal one-day edu conference

(trainings, accessibility, how to’s, …)
@HonzaTmn
Current team
5 3 React developers
5 3 React Native developers
! 1 UI Engineer
] 1 Product Manager / UX Designer

+ we are looking for

 O 1 Content Writer
 🦹 1 Project Manager

@HonzaTmn
 🐛
Change doesn’t
happen overnight🦋
 Thank you
+ reach out to me on Twitter: @HonzaTmn