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.

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. 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. 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. Atomic design as a
communication tool in design
and stakeholder meetings

5. Ever had the feeling like nobody
was visualising your ideas
correctly?

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. Quotes
What are your frustrations over
the roles you need to work with?

8. Developer:
”They have great ideas that
almost never work in real life.”

9. UX Designer:
”Developers don’t tend to work
constructively with us.”

10. Project Manager:
”A lot of stakeholders fail to see
the system as a whole.”

11. Product Manager:
”UX Designers don’t validate
their work.”

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. Clovis:
”Sometimes it’s as if they’re all
living on their island of expertise
throwing shit at each other.”

14. Problemo numero uno?
Communication
• Lack thereof
• Overuse
• Misuse
• Wrong tooling or too much tooling
• No common/shared language

15. Atomic design as a
communication tool in design
and stakeholder meetings

16. Atomic design: how it works

17. Atoms Molecules Organisms Templates Pages
Thanks to @brad_frost for the insight
and nature for the wonderful example.

18. Atoms Molecules Organisms Templates Pages
• Building blocks
• Indivisible
• Abstract
• Less useful stand-alone
• Great reference

20. `

21. Atoms Molecules Organisms Templates Pages
• Group of atoms
• Smallest compound
• More specific
• Does only one thing (and does it well)
• Backbone of your system

23. 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!

25. Atoms Molecules Organisms Templates Pages
• Page-level
• Groups of organisms
• Begin their life as wireframe
• Increase fidelity over time
• Very concrete
• Customer facing

27. Atoms Molecules Organisms Templates Pages
• Highest fidelity
• Real content
• Entry-point for most stakeholders
• Effectiveness system
• Variation testing

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

30. • 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…

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

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