Whether you’re starting from scratch, have an existing system, or need to merge designs from different areas of your organization, in this talk you will learn the six ways you can leverage the KonMari Method when organizing your design system.

1. HOW TO USE A MARIE KONDO–STYLE
APPROACH TO ORGANIZE ALL THINGS DIGITAL
Tidying up digital homes
with design systems
#BIGD19

2. Hello!

3. SENIOR EXPERIENCE DESIGNER AT OGILVY
Nice to meet you,
I’m Julie
@juliemakes

4. WHO IS MARIE KONDO?

5. konmari.com

6. konmari.com

8. @thefreshlight

9. "Now imagine yourself
living in a space that
contains only things that
spark joy. Isn't this the
lifestyle you dream of?"

10. KonMarie: The six basic rules of tidying
Commit yourself to tidying up
RULE 01
Imagine your ideal lifestyle
RULE 02
Finish discarding first
RULE 03
Tidy by category, not by location
RULE 04
Follow the right order
RULE 05
Ask yourself if it sparks joy
RULE 06

11. HOW DOES THIS RELATE
TO DESIGN SYSTEMS?

12. Design systems are the key
to keeping your digital
properties organized

13. Find us a home!

14. Companies like IBM, Google, Atlassian
and Shopify have created their own
unique design system that has helped them
further innovate and expand on their
digital products.

15. Design systems provide clarity,
convenience and guidance

16. When a design system is set up
properly, creating new features can
happen fairly quickly.
Material Design

17. This allows the team to focus on
solving user needs and creating
an overall better user experience.

18. HOW TO LEVERAGE THE
KONMARIE METHOD?

19. FIRST STEP
Make a commitment
and align with your team

20. True collaboration isn’t throwing designs
over the wall. It’s designers, engineers,
and the rest of the team sharing the
responsibility to build a quality product.
- Diana Mounter, Design systems manager at GitHub

21. “LAY” EVERYTHING OUT
TO EVALUATE
01

22. Start with a workshop
Include all team members involved, such as
product owners, product managers, designers
and developers.

23. Create a list
Start by writing down all elements to be
included in your design system.
What are the existing components, patterns,
and any new items that may be needed.

25. ORGANIZE BY CATEGORY,
NOT BY “ROOM”
02

26. Think about the
whole system
In the KonMari Method, you don’t go from
room to room while organizing — you go from
category to category.

27. Instead of organizing based on the
pages you have to create, you need
to think broader of where to place
certain elements and patterns that
make up the website.

28. COLORS FORMFIELDS
TYPOGRAPHYBUTTONS
TABLESDROPDOWNS
MODALSICONS
STICKY NOTE EXAMPLE

29. ATLASSIAN DESIGN SYSTEM EXAMPLE

30. “DOES THIS SPARK JOY?”
03

31. Ask yourself…
“Is this something we really need?” Just
because another design system has a
certain functionality or feature it doesn’t
mean your system needs it as well.

32. Design systems are unique; the
reason that Material Design
works for Google is because it
was made for Google.

33. CREATE AN ORDER
04

34. Organizing the chaos
This step usually comes naturally as you start
to categorize your sticky notes. As you begin
to place similar items together, you will start
to create an order for your design system.
Work with the team to figure out the order
and grouping that makes the most sense for
your product.

35. COLORS FORMFIELDS
TYPOGRAPHYBUTTONS
TABLESDROPDOWNS
MODALSICONS
STICKY NOTE EXAMPLE

36. FORMFIELDS
BUTTONS
DROPDOWNS
TABLES
MODALS
COLORS
TYPOGRAPHY
ICONS
GROUP 1 GROUP 2 GROUP 3

37. Colors, typography, icons, and buttons that form a
design foundation
ELEMENTS
Two or more elements that when used together begin to
communicate context, but do not work as a complete whole
COMPONENTS
A collection of elements and components that when used
together communicate a specific message or intended action
PATTERNS
How sections are being used together to tell a story or
communicate a page’s purpose
TEMPLATES
Creating the
building blocks

38. PRIMARY BUTTON
Lorem ipsum
dolor no amet.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aenean fermentum
PRIMARY BUTTON
Lorem ipsum
dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aenean fermentum.
$1,234/dolum
Aliquam at elit sit ametr
Examples of building blocks
PATTERN TEMPLATEELEMENT COMPONENT
PRIMARY BUTTON PRIMARY BUTTON
Lorem ipsum
dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aenean fermentum.
$1,234/dolum
Aliquam at elit sit ametr

39. COME UP WITH A PROCESS
05

40. Create clear roles and responsibilities with
your team for your design system
Discuss release cycle length to figure out how
often you will iterate and evolve new features
and components
Discuss owners and identify who will be
responsible for managing your design system
Design system
governance
It is important to come up with a
process to streamline your design
system because without clear
ownership, the system will eventually
become disorganized again.

41. DEVELOP A DESIGN
SYSTEM LIBRARY
06

42. After completing the KonMari Method,
individuals are rewarded with an organized
home where they are able to find items easier.
All the hard work you’ve done to organize
your design system will come to life in a
design system library.

43. Your design system library will
house all the decisions you’ve made
about design principles, visual assets,
and patterns.
This is a great example of live coded
elements that are ready to use within
the team.
Designers and developers will use
this as single source of truth.

44. Having a design system bridges the
gap between designers and
developers to truly make a cohesive
and user-friendly product.

45. Design systems are an ever-changing
environment, and the design system
will be the North Star for the future
of the product.

46. Remember our purpose. We create
design systems to grow our products. But
those products serve people.
Design Systems are for people.
- Jina Anne, Design systems advocate

47. Questions?

48. Thank you.