Better. Faster. UXIER. Atomic Design Agile UX NYC jennifer gergen February 25th, 2012 @b9punk
Join me in a (day) dreamThis talk is about an idea for a new way of doing things, not a baked &tested solution.Even describing the problem together is worth it. Let’s start the discussion.Imagine a better way of handling the brass tacks of agile design.
Let’s pretend we already agreeDesign is the diﬀerence between awesome and awesome-sauce.Big Design Upfront just doesnt cut it.Agile Rocks (We believe!)Can’t we get more done, faster, with less drama?
Agile UXcould use another iteration... Prototype iterate
iterating onLook & feelis still a slow boatWere not so good at iterating when it comes to "big" visual changes.Most of our regular iterations focus on building or improving features or pages,and can’t really encompass global look & feel updates.When this is the case, designers usually choose existing styles (they frequentlyhate and are dying to improve), so as not to "break" the look & feel andconfuse their users.Enough of this and eventually we end up with "redesign" projects. Which suck.
Prototyping is harder than it should beThe agile manifesto deﬁnes simplicity as:“the art of maximizing the amount of work not done."Either youre (doing some variation of ) linking comps together, or you have demos that workﬁne, but look really rough.In either case, its often hard to be sure of your results.(Maybe the test would have had diﬀerent results if the hover states had worked properly, etc.)By the time you marry the two halves, youre so far along that you might as well justrelease and ﬁgure it out from there.
Scenarios that suck
Scenarios that suck.Hey, I still Dude, just put it onneed that the “Z” Drive. file... Was the attachment larger than 5mb? Want to What? borrow my I totally emailed thumb drive...? that to you yesterday Developers don’t have access to “z.”
Scenarios that suck.What is a“LW_xmod_oxy_1376_final_new.psd?” ?
Scenarios that suck.Yay! I’m finished! It looks justlike your design! Oh no! That’s the old version...
Scenarios that suck. Hey, This project sounds familiar... Um, Judy worked on that but she’s not here anymore.didn’t we mock this up last year? Word. Where are the comps? UM...Does someone have the password Yeah. The Blue to her mac? team was working on it but it got de-scoped. Where are her files?
Scenarios that suck. Hmm.. let’s see... Hey team, i know we’re working on “project y”, but OMG, changing Is this even“project y” involves “widget x” “widget x” means going to affect which could really use a new updating 100’s of our KPI’s? design... pages. That would be awesome! That turns our 3 “Widget x” point story into a 20 sucks! point story. But “widget x” is all over the place...if i change it here can we ... so that’s a no.. change it everywhere?
Scenarios that suck.What’s with this stylesheet? There’s no difference between .grey-text-regular .text-default-grey & .grey-caption-text! ...Dunno, Dude ... That’s what the designers sent. i just copied and pasted...
Seriously,we can do better.
Okay, what do we want?Global Incremental Style Change or Continuous Design Deploymentactually Rapid useful PrototypingGood designer ‹—› developer collaboration on markup and cssGood design asset management & collaboration (versioned)Easy Discovery
Continuous Design deploymentIt’s actually agile—smaller changes globally based on user feedbackRedesigns are expensive, and their value is hard to measure, so they happenvery infrequentlyRedesigns can cause massive user backlashStyle guides aren’t clairvoyantNo one ever reads the @!&*ing manual anyway
Rapid Actually Useful PrototypingHigh ﬁdelity / low eﬀortEnable designers & product managers, etc., to create these prototypesAbility to build prototypes instead of mockups for some projects
designer ‹-› developer collaboration on markup & cssstay DRY (Don’t Repeat Yourself )Enable & teach designers to write production-ready code(images dont have to get re-pathed, etc.)Share workload for patterns, components & prototypesKnowledge sharingAppropriate medium-to-task matching(no more juggling forms in photoshop)
Better design assetmanagement & collaboration = version controlThe way most designers store & backup their ﬁles is just plain scaryIt’s central(The whole team gets their stuﬀ from the same source)Get all related project design assets together(Wireframes, comps, copy, etc)Certainty that you are always working with the newest ﬁlePotential for embedded artVersion control is a form of automatic documentation
easy discoveryShared vocabulary(across all teams & departments)Be able to ﬁnd things quickly, without having to askCentral & AccessibleAbility to guess what something is by the way its namedQuickly learn how things are organized(easy on-boarding)
EnterAToMIC Design(just go with me on the awkward backronym...) A ssets To M arkup (for) I terative C ollaboration
A new (?)DesignstrategyBrand GuidelineComponent LibraryPattern Library
Patterns“A pattern is a solution to a recurringdesign problem.”Examples of patterns are: buttons tabs paginationThey are icons, mechanisms, etc., thathave commonly accepted behaviors thatmake up a universally understood visuallanguage for software.Borrowed from “Modular Web Design”by Nathan Curtis
Components“A component is a chunk of a page design.” A component is a logical grouping of related content & functions that are combined into a meaningful building block used—and reused—in the interface design of a site. Borrowed from “Modular Web Design” by Nathan Curtis
it’s an organizing principleOnce you start to think of your content in this way, you can set yourself up toevolve the look & feel of these chunks in the same way that we evolve ourfeatures and products.You need the whole team—maybe even the whole department—to help deﬁneand name these chunks, but once you have, you can start organizing your ﬁles,photoshop layers, & css classes, etc. against them.You’ll get consistent names, and a shared vocabulary.That, alone, is worth the price of admission...
AToMIC Design Versioned Design AssetsOrganize for Lcontinuous idesign bevolution COLLABORATION r(component + apattern scheme) r y organized Markup + CSS
show methe money
..App Folder(s)Components SEARCH-RESULT HTML (one ﬁle for each state) CSS js (includes a state handler) Data DEMO
.PrototypesPatternsApp Folder(s)Components SEARCH-RESULT HTML (one ﬁle for each state) CSS js (includes a state handler) Data DEMO
Get StartedDeﬁne "component" v "pattern" that makes sense for your project/teamNaming guidelines (semantic, outsiders should be able to guess what itmeans, hyphens, no scheme/codes, etc.)Setup some minimal infrastructure version control (s) - branch scheme, ﬁle organization scheme, etc. get everyone accounts + training build the component & pattern browserStarter workﬂow — Iterate until it works for your project —