Clovis Six & Saskia Videler at WUD16
-
Upload
ux-antwerp-meetup -
Category
Design
-
view
158 -
download
0
Transcript of Clovis Six & Saskia Videler at WUD16
![Page 1: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/1.jpg)
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
![Page 2: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/2.jpg)
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:
![Page 3: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/3.jpg)
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:
![Page 4: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/4.jpg)
Atomic design as a communication tool in design and stakeholder meetings
![Page 5: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/5.jpg)
Ever had the feeling like nobody was visualising your ideas correctly?
![Page 6: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/6.jpg)
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.
![Page 7: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/7.jpg)
QuotesWhat are your frustrations over the roles you need to work with?
![Page 8: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/8.jpg)
Developer:”They have great ideas that almost never work in real life.”
![Page 9: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/9.jpg)
UX Designer:”Developers don’t tend to work constructively with us.”
![Page 10: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/10.jpg)
Project Manager:”A lot of stakeholders fail to see the system as a whole.”
![Page 11: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/11.jpg)
Product Manager:”UX Designers don’t validate their work.”
![Page 12: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/12.jpg)
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.”
![Page 13: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/13.jpg)
Clovis:”Sometimes it’s as if they’re all living on their island of expertise throwing shit at each other.”
![Page 14: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/14.jpg)
Problemo numero uno?Communication
• Lack thereof• Overuse• Misuse• Wrong tooling or too much tooling • No common/shared language
![Page 15: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/15.jpg)
Atomic design as a communication tool in design and stakeholder meetings
![Page 16: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/16.jpg)
Atomic design: how it works
![Page 17: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/17.jpg)
Atoms Molecules Organisms Templates Pages
Thanks to @brad_frost for the insight and nature for the wonderful example.
![Page 18: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/18.jpg)
Atoms Molecules Organisms Templates Pages
• Building blocks
• Indivisible
• Abstract
• Less useful stand-alone
• Great reference
![Page 19: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/19.jpg)
![Page 20: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/20.jpg)
`
![Page 21: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/21.jpg)
Atoms Molecules Organisms Templates Pages
• Group of atoms
• Smallest compound
• More specific
• Does only one thing (and does it well)
• Backbone of your system
![Page 22: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/22.jpg)
![Page 23: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/23.jpg)
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!
![Page 24: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/24.jpg)
![Page 25: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/25.jpg)
Atoms Molecules Organisms Templates Pages
• Page-level
• Groups of organisms
• Begin their life as wireframe
• Increase fidelity over time
• Very concrete
• Customer facing
![Page 26: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/26.jpg)
![Page 27: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/27.jpg)
Atoms Molecules Organisms Templates Pages
• Highest fidelity
• Real content
• Entry-point for most stakeholders
• Effectiveness system
• Variation testing
![Page 28: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/28.jpg)
![Page 29: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/29.jpg)
• 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
![Page 30: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/30.jpg)
• 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…
![Page 31: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/31.jpg)
Assignment
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.
![Page 32: Clovis Six & Saskia Videler at WUD16](https://reader034.fdocument.pub/reader034/viewer/2022042907/587fa9561a28ab825e8b7991/html5/thumbnails/32.jpg)
• 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.