Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

What's Next: Tidying Up Digital Homes

478 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

What's Next: Tidying Up Digital Homes

  1. 1. What’s Next: Tidying Up Digital Homes With Design Systems Powered by
  2. 2. Welcome Dayoán Daumont Consulting Partner
 Ogilvy Consulting Julie Mannheimer
 Senior Experience Designer Ogilvy Denver
  3. 3. Tell us where you are dialing in from! What’s the weather like in your city?
  4. 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. 5. HOW TO USE A MARIE KONDO–STYLE APPROACH TO ORGANIZE ALL THINGS DIGITAL Tidying up digital homes with design systems
  6. 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. 7. WHO IS MARIE KONDO?
  8. 8. August 30, 2019 8 konmari.com
  9. 9. @thefreshlight
  10. 10. "Now imagine yourself living in a space that contains only things that spark joy. Isn't this the lifestyle you dream of?"
  11. 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. 12. HOW DOES THIS RELATE TO DESIGN SYSTEMS?
  13. 13. Design systems are the key to keeping your digital properties organized
  14. 14. Find us a home!
  15. 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. 16. Design systems provide clarity, convenience and guidance
  17. 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. 18. HOW TO LEVERAGE THE KONMARIE METHOD?
  19. 19. FIRST STEP Make a commitment and align with your team
  20. 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. 21. “LAY” EVERYTHING OUT TO EVALUATE 01
  22. 22. Start with a workshop Include all team members involved, such as product owners, product managers, designers and developers.
  23. 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. 24. ORGANIZE BY CATEGORY, NOT BY “ROOM” 02
  25. 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. 26. COLORS FORMFIELDS TYPOGRAPHYBUTTONS TABLESDROPDOWNS MODALSICONS STICKY NOTE EXAMPLE
  27. 27. ATLASSIAN DESIGN SYSTEM EXAMPLE
  28. 28. “DOES THIS SPARK JOY?”  03
  29. 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. 30. Design systems are unique; the reason that Material Design works for Google is because it was made for Google.
  31. 31. CREATE AN ORDER 04
  32. 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. 33. COLORS FORMFIELDS TYPOGRAPHYBUTTONS TABLESDROPDOWNS MODALSICONS STICKY NOTE EXAMPLE
  34. 34. FORMFIELDS BUTTONS DROPDOWNS TABLES MODALS COLORS TYPOGRAPHY ICONS GROUP 1 GROUP 2 GROUP 3
  35. 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. 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. 37. COME UP WITH A PROCESS 05
  38. 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. 39. DEVELOP A DESIGN 
 SYSTEM LIBRARY 06
  40. 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. 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. 42. Having a design system bridges the gap between designers and developers to truly make a cohesive and user-friendly product.
  43. 43. Design systems are an ever-changing environment, and the design system will be the North Star for the future of the product
  44. 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. 45. Questions?
  46. 46. Thank you.

×