Tidying up with Marie Kondo is a phenomenon that has taken the world by storm. Marie Kondo has developed a simple method to help declutter and organise your home. Inspired by this KonMari Method of tidying up, we will explore how to apply similar steps in experience design. Design systems are the key to keeping digital properties organised so that changes and updates can be made seamlessly. When a design system is set up properly, creating new features and templates can happen fairly quickly. This allows us, as designers, to focus on solving user needs and creating an overall better user experience instead of spending our time on mundane tasks of re-creating patterns and modules.

1. What’s Next:
Tidying Up Digital
Homes
With Design Systems
Powered by

2. Welcome
Dayoán Daumont
Consulting Partner
Ogilvy Consulting
Julie Mannheimer
Senior Experience Designer
Ogilvy Denver

3. Tell us
where you
are dialing
in from!
What’s the weather
like in your city?

4. Do you
want this
deck?
It will be available for download
shortly after the webinar on:
slideshare.net/socialogilvy
And the recording up on
facebook.com/OgilvyConsulting

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

6. What’s on the agenda?
WHO IS
MARIE KONDO?
🦄
HOW DOES THIS
RELATE TO DESIGN
SYSTEMS?
🎉 #
HOW TO LEVERAGE
THE KONMARIE
METHOD
🧐
QUESTIONS
ABOUT DESIGN
SYSTEMS?

7. WHO IS MARIE KONDO?

8. August 30, 2019 8
konmari.com

9. @thefreshlight

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

11. Commit yourself to tidying up
KonMarie: The six basic rules of tidying
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

12. HOW DOES THIS RELATE
TO DESIGN SYSTEMS?

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

14. Find us a home!

15. 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.

16. Design systems provide clarity,
convenience and guidance

17. When a design system is set up
properly, creating new features can
happen fairly quickly.
This allows the team to focus on solving
user needs and creating an overall
better user experience instead of
spending our time on mundane tasks of
re-creating patterns and modules.
Material Design

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, such as
existing components, patterns, and any new
items that may be needed.

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

25. 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.
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.

26. COLORS FORMFIELDS
TYPOGRAPHYBUTTONS
TABLESDROPDOWNS
MODALSICONS
STICKY NOTE EXAMPLE

27. ATLASSIAN DESIGN SYSTEM EXAMPLE

28. “DOES THIS SPARK JOY?”
03

29. 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.

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

31. CREATE AN ORDER
04

32. 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.

33. COLORS FORMFIELDS
TYPOGRAPHYBUTTONS
TABLESDROPDOWNS
MODALSICONS
STICKY NOTE EXAMPLE

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

35. 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

36. 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

37. COME UP WITH A PROCESS
05

38. 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.

39. DEVELOP A DESIGN
SYSTEM LIBRARY
06

40. After completing the KonMari Method,
individuals are rewarded with an organized
home where they are able to find items easier.
Similarly, at the end of this process, all the
hard work you’ve done to organize your
design system will come to life in a design
system library.

41. Your design system library will house
all the decisions you’ve made about
design principles, visual assets,
patterns, and so on. 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 as they
work on existing features or implement
new features.

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

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

44. 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

45. Questions?

46. Thank you.