As a PO, product designer, or PM, you've probably already thought about the possible benefits of building a design system for your organisation. And surely as all teams, like us, you kept asking yourself: How do we start it?  But here are some guidelines to help you clarify how to start a DS.

1. 4stepstostartaDesignSystem
MatthieuLerat-LeadProductDesigner

2. What’s a Design System?
by Audrey Hacq - Product Design Director @Openclassrooms
A Design System is a set of
interconnected patterns and shared
practices coherently organized.
They may contain, but are not limited
to, pattern libraries, design languages,
style guides, coded components, brand
languages, and documentation.

3. What are we talking
about?

4. Why building a Design System?
1
2
3
Build a to make the digital products
sustainable and centralise the collaboration.
Strenghen the product consistency to
components are designed and
built only once. The velocity is increased. The time to market is reduced.
unique and solid UX/UI/FE reference
improve the UX.
Industralise to increase the productivity:

5. What are the ground principles?
1
2
3
4
Everything is based on an atomic design approach.
A DS is a product itself, having a start but no end.
The value of the DS is measurable throughout time.
It’s a middle or long-term investiment having a solid ROI.
Not all products and organisations need a DS.

6. STEP
01 Ask yourself the right questions
STEP
02 Analyse the ecosystem
STEP
03 Organise it like a product
STEP
04 Design your Design System

7. Step 01
Stop here!
Ask yourself the right
questions

8. Are the brand guidelines
solid enough to start the DS?

10. Have we reached a market fit?

11. Are we planning on
scaling our product(s)?

12. A UI kit may be enough

13. Have we got the necessary
capacity to build it?

14. Timeinvestmentvs.ROI
ROI
Time
Timeinvestment
~1month

15. Step 02
Analyse the ecosystem

16. Discovery
Interviews &
expectations
Key potential contributors,
Leaders, Deciders.
Product tour
Where a DS may be useful.
Types of components?
Types of layout?
Design/Tech debt?

17. Wherewecomefrom...

21. 300+ components

23. Step 03
Organise it like a product

24. First actions to do.
What?
Define the scope of action.
To whom?
Internal users?
External users?
With whom?
Define the core team:
developers, designer, PO

25. Organise a DS like a product
Asana
Product management
Notion
Documentation.
Slack
Communication
Figma
Design
Component Engine
Tech Stack

26. But also ...
Zeroheight
Global showcase, source of
truth for to all teams.
Decision tree
Make the right decisions
Ensure a sustainability
Storybook
Code snippet
Live component demo

27. Set a smart process
Designer creates a
new component
Designer writes
documentation on
Notion
Designer creates the
Asana ticket
Designer updates the
Slack channel about
this new component
Dev builds the
component
Dev pushes the
component on
Storybook
Designer QAs the
component
Dev implement the
component on the
app

28. Step 04
Design your Design System

29. Where and how to start designing the DS?
Think 90/10
10% of components creating 90% of the value

30. Create components: where to start?
Identify, prioritize
Based on the impact on the
UX (internal and external).
Define the DS MVP:
limited and controlled.
Create the
foundations
Clean & Create foundations
(text, icons, colors)
Enregistrer
Create the first
components
Clean & Tweak components
(inputs, buttons, table, tabs,
navs …).
~ 5 to 10 components

31. Atoms? Molecules? Organisms?
70% Molecules 20% Organisms 10% Atoms

32. Apply these first components: high involvement
Define
Identify pages and features
containing these
components
Apply
Apply the right
components.

33. Timeinvestmentvs.ROI
ROI
Foundationsdone
Time
~1month
Timeinvestment

34. Then what?
How do we keep it alive?
A Design System is a living system.

35. How do we keep it alive?
1
2
3
4
Get the team’s feedbacks
Enrich the DS when working on new
features🧹
Do monthly cleaning
Deliver the scope incrementally with
Monthly or Quaterly Roadmap

36. Ayearlater...

43. Measure the value and ROI
/3(-330)
Screens
/3(-240)
Number of components
x3
Design iterations due to the speed of layout building
Better performance Better experience
/8
Design update time on a simple component
/2
Front-end time (less QA, less time to implement or update)
90%
Of the Figma design is based on DS components

44. Go further
TroopsZeroheight
TroopsDSDecisionTree
Watchthevideoofthepitch(FR)

45. Thank you!
Any questions?
Matthieu Lerat
Lead Product Designer @Troops
@matthieu_lerat