Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Clovis Six & Saskia Videler at WUD16


Published on

World Usability Day 2016 in Antwerp (Belgium), Thursday, November 10th - Workshop by Clovis Six (UX Researcher at Internet Architects) & Saskia Videler (Content Strategist at The Dutchess)

"Atomic design as a communication tool in design and stakeholder meetings"
In this workshop we will approach your UI as re-usable building blocks and see how it can create sustainable value to the conversations within your organisation. The key focus areas will be to bring clarity, performance and fun to the meetings between you and your stakeholders.

Clovis Six started of as a developer at Collibra, a highly successful data governance start-up, and gradually morphed into the UX Researcher and Product Manager at Internet Architects he is today. The roles he took on in between (Visual Design, UX Design, Project Management, Dev Team Lead) enabled him to experiment with various ways of transferring deliverables and optimising design communication. One of these methods he will share with you in the workshop.

Published in: Design
  • Be the first to comment

Clovis Six & Saskia Videler at WUD16

  1. 1. Atomic design as a communication tool in design and stakeholder meetings Clovis Six UX Researcher & Product Manager Internet Architects @clovissix #WUDAtomicCom Saskia Videler Content Strategist The Dutchess @saskiavideler
  2. 2. Clovis’ story • Full stack developer • Front end team lead • Visual designer • UX designer & researcher • Product manager • Sketch-noter • User experience researcher • Product manager Data governance software company (10 -> 160) Agency Before:
  3. 3. Saskia’s story • Content Process Streamlining • Content Style Guide • Content Guidelines • Content Workshops • Content Design • Content Architecture • Web Copywriting • Social Media Marketeer Content Strategy, est. 2011 Before:
  4. 4. Atomic design as a communication tool in design and stakeholder meetings
  5. 5. Ever had the feeling like nobody was visualising your ideas correctly?
  6. 6. Or that you have the greatest problem trying to visualise other people’s ideas? Countless review meetings, all taking an emotional toll and precious time, often sending you back to the drawing board.
  7. 7. Quotes What are your frustrations over the roles you need to work with?
  8. 8. Developer: ”They have great ideas that almost never work in real life.”
  9. 9. UX Designer: ”Developers don’t tend to work constructively with us.”
  10. 10. Project Manager: ”A lot of stakeholders fail to see the system as a whole.”
  11. 11. Product Manager: ”UX Designers don’t validate their work.”
  12. 12. Content Strategist: ”Communicating about technical aspects when you don’t have a technical background is hard, just as communicating about content is hard when you’re not a content person.”
  13. 13. Clovis: ”Sometimes it’s as if they’re all living on their island of expertise throwing shit at each other.”
  14. 14. Problemo numero uno? Communication • Lack thereof • Overuse • Misuse • Wrong tooling or too much tooling • No common/shared language
  15. 15. Atomic design as a communication tool in design and stakeholder meetings
  16. 16. Atomic design: how it works
  17. 17. Atoms Molecules Organisms Templates Pages Thanks to @brad_frost for the insight and nature for the wonderful example.
  18. 18. Atoms Molecules Organisms Templates Pages • Building blocks • Indivisible • Abstract • Less useful stand-alone • Great reference
  19. 19. `
  20. 20. Atoms Molecules Organisms Templates Pages • Group of atoms • Smallest compound • More specific • Does only one thing (and does it well) • Backbone of your system
  21. 21. Atoms Molecules Organisms Templates Pages • Groups of molecules bound together • Complex molecules • Distinct section • Similar or different molecules • Standalone, portable and reusable • Note: organisms can contain other organisms!
  22. 22. Atoms Molecules Organisms Templates Pages • Page-level • Groups of organisms • Begin their life as wireframe • Increase fidelity over time • Very concrete • Customer facing
  23. 23. Atoms Molecules Organisms Templates Pages • Highest fidelity • Real content • Entry-point for most stakeholders • Effectiveness system • Variation testing
  24. 24. • A way to describe your framework as the natural world would • Create a common cross-departmental design language • Communicate clearly • Complex systems are easier to maintain • Centralized knowledge • Accessible knowledge
  25. 25. • Ability to interface with the outside world much more efficient en easily (work with agencies or customers) • Product governance or ability to describe all design at any time, linked to business decisions, content decisions, dev decisions, etc • Build a system of ownership • Company culture decides what, how, when and why…
  26. 26. Assignm ent Sells customized dreams and items to appear inside them
 Assignment • Build a product page for their unicorns • Use their atomic design toolbox (Enveloppe)
 Cut, copy, write, draw, organize, invent and converge to 1 page. • Desktop & mobile • 1h, groups of 4 • Think about constraints, reasoning, greater whole, translation into the mobile realm, work needed, re-use, research etc. Glitter Inc.
  27. 27. • Define 5 elements • Key items to work out: • Look and feel • Behavior • Dependencies • Construction (atoms, molecules, …) • Business rules and reasons • Marketing, UX, dev research • Content • Responsiveness • Testing • Make up some of the information that would be useful to you to know for those elements, that otherwise you have to figure out.