clovis six & saskia videler at wud16

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

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:

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:

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

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.

QuotesWhat are your frustrations over the roles you need to work with?

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

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

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

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

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

Clovis:”Sometimes it’s as if they’re all living on their island of expertise throwing shit at each other.”

Problemo numero uno?Communication

• Lack thereof• Overuse• Misuse• Wrong tooling or too much tooling • No common/shared language

Atomic design: how it works

Atoms Molecules Organisms Templates Pages

Thanks to @brad_frost for the insight and nature for the wonderful example.


• Building blocks

• Indivisible

• Abstract

• Less useful stand-alone

• Great reference


• Group of atoms

• Smallest compound

• More specific

• Does only one thing (and does it well)

• Backbone of your system


• Groups of molecules bound together

• Complex molecules

• Distinct section

• Similar or different molecules

• Standalone, portable and reusable

• Note: organisms can contain other organisms!


• Page-level

• Groups of organisms

• Begin their life as wireframe

• Increase fidelity over time

• Very concrete

• Customer facing


• Highest fidelity

• Real content

• Entry-point for most stakeholders

• Effectiveness system

• Variation testing

• 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

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

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.

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