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.

Better. Faster. UXier. — AToMIC Design


Published on

Published in: Technology, Design

Better. Faster. UXier. — AToMIC Design

  1. Better. Faster. UXIER. Atomic Design Agile UX NYC jennifer gergen February 25th, 2012 @b9punk
  2. 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.
  3. Let’s pretend we already agreeDesign is the difference 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?
  4. Agile UXcould use another iteration... Prototype iterate
  5. 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.
  6. Prototyping is harder than it should beThe agile manifesto defines 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 workfine, but look really rough.In either case, its often hard to be sure of your results.(Maybe the test would have had different 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 figure it out from there.
  7. Scenarios that suck
  8. 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.”
  9. Scenarios that suck.What is a“LW_xmod_oxy_1376_final_new.psd?” ?
  10. Scenarios that suck.Yay! I’m finished! It looks justlike your design! Oh no! That’s the old version...
  11. 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?
  12. 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?
  13. 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...
  14. Seriously,we can do better.
  15. 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
  16. 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
  17. Rapid Actually Useful PrototypingHigh fidelity / low effortEnable designers & product managers, etc., to create these prototypesAbility to build prototypes instead of mockups for some projects
  18. 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)
  19. Better design assetmanagement & collaboration = version controlThe way most designers store & backup their files is just plain scaryIt’s central(The whole team gets their stuff from the same source)Get all related project design assets together(Wireframes, comps, copy, etc)Certainty that you are always working with the newest filePotential for embedded artVersion control is a form of automatic documentation
  20. easy discoveryShared vocabulary(across all teams & departments)Be able to find 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)
  21. EnterAToMIC Design(just go with me on the awkward backronym...) A ssets To M arkup (for) I terative C ollaboration
  22. A new (?)DesignstrategyBrand GuidelineComponent LibraryPattern Library
  23. 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
  24. 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
  25. 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 defineand name these chunks, but once you have, you can start organizing your files,photoshop layers, & css classes, etc. against them.You’ll get consistent names, and a shared vocabulary.That, alone, is worth the price of admission...
  26. AToMIC Design Versioned Design AssetsOrganize for Lcontinuous idesign bevolution COLLABORATION r(component + apattern scheme) r y organized Markup + CSS
  27. show methe money
  28. ..App Folder(s)Components SEARCH-RESULT HTML (one file for each state) CSS js (includes a state handler) Data DEMO
  29. .PrototypesPatternsApp Folder(s)Components SEARCH-RESULT HTML (one file for each state) CSS js (includes a state handler) Data DEMO
  30. Get StartedDefine "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, file organization scheme, etc. get everyone accounts + training build the component & pattern browserStarter workflow — Iterate until it works for your project —
  31. Sample Workflow design, Develop, COmponentDiscovery style, definition+ QA, AssembleInitial & [Document] Pagesdesigns naming & Add to library
  32. Thanks!Can we please keep talking about this? Please connect with @DesignAtomic jennifer gergen @b9punk —Big ups—Wayne Warner The whole Ladders Team Our Lovely Hosts @wawjr3d @Theladders @agileuxnyc