SlideShare a Scribd company logo
Lean UX in an Agency Environment


Jef Bekes
Creative Director, User Experience Design, SolutionSet

SF Lean UX Meetup, May 30, 2012
What is Lean UX?

“Lean UX brings the true nature of design work to
light faster, in a collaborative, cross-functional way
with less emphasis on deliverables and greater
focus on the actual experience being designed.”

-Jeff Gothelf, “Lean UX: Getting out of the Deliverables Business”
Process and activities

•   Lean: Think » Make » Check (repeat)
•   Lean UX: Sketch » Prototype » Test (repeat)

    You do stuff like this:
•   Pattern libraries
•   Collaborative sketching
•   Iterative design cycles
•   Rapid prototyping
•   Frequent testing
•   Designing in the browser/codebase
This is great if you work at a startup

 •   Natural affinity with startups (i.e. Lean Startup)
 •   Agile development has taken hold with software
     teams
 •   Small, co-located teams, working in close
     collaboration
 •   Cycle time from idea to implementation is short
But we work at a design agency!




                        http://www.flickr.com/photos/b-tal/163450213/sizes/l/in/photostream/
A typical (big) agency

•   Linear methodologies, still rooted in waterfall
•   Change is seen as bad, rather than inevitable
•   Strong divisions of labor, based on specialization
    and need to scale
•   Separation of teams: Project (client), Design
    (agency) Dev (agency, client or third party)
•   Progress is measured in “deliverables”
Startup vs. agency *
Startup                           Agency
• Team: Product, design, and      • Team: Project (client),
  dev integrated, co-located        design (agency), and dev
• Process: Agile                    (agency, client or third
                                    party) separated
• Artifacts: Prototypes,
                                  • Process: Waterfall
  working code
• Culture: Engineering driven,    • Artifacts: Wireframes,

  lots of collaboration             comps, templates
                                  • Culture: Design-driven,
                                    division of labor, lots of
                                    specialization




* I know, these are stereotypes
Roadblocks
Roadblocks or opportunities?

 •   Teams: There will still be a division of labor -
     that’s why they hired an agency
 •   Process: Should the agency’s methodology
     match the client’s?
 •   Artifacts: We still need “deliverables” are
     required to capture functionality.
 •   Culture: Does collaboration “open the kimono”
     on the creative process? Where’s the “magic”?
How do we get there?




                  http://www.flickr.com/photos/giovanni_novara1/5263134384/sizes/l/
Some tactics

 •   Build iteration into the process, even if you’re
     still working in a waterfall process: Think »
     Make » Check
 •   Define goals up-front and use as an objective
     measuring criteria for the design
 •   Start from the “minimum viable experience” and
     design outward
 •   Collaborate not just within the design group,
     but also across disciplines (and even with the
     client!)
 •   Understand who your deliverables are for and
Some techniques

 •   Design patterns
 •   Sketching
 •   Prototyping
 •   Usability testing
Design patterns
What are design patterns?

 •   Reusable components to solve commonly
     occurring problems within an application
 •   Build out a library as a common reference point
     for designers and developers
 •   Spend your time designing the complex
     interactions, not the best practices
 •   Use an interactive framework (Bootstrap) or roll
     your own
 •   Good way to get developers involved in the
     design process
 •   Bonus: customize your pattern library to double
http://www.flickr.com/photos/etchasketchist/728571856/sizes/l/in/photostream/



Sketching
Sketch to generate concepts

•   Identify the “minimum viable experience”: key
    flows/interactions/screens that are critical to
    success or have the most complexity/unknowns
•   Run a “charette” to sketch out as many different
    solutions as possible
•   These designs as hypotheses to be validated,
    not set in stone
•   Take your best first guess and validate it
    (interactive prototype, higher fidelity design, etc)
http://www.flickr.com/photos/altuwa/4530651461/sizes/l/



Prototyping
Design experiences, not documentation

 •   Wireframes are good way to inventory what
     belongs on a screen, but don’t capture
     interactivity, affordance, and flow
 •   An interactive prototype will allow you to test
     both the “look” and the “feel” of the design
 •   You can do this in parallel with design if you
     partner with your front-end dev team
 •   Prototypes can be different levels of fidelity
     (visual and interactive)
 •   HTML/CSS/JS is nice, but you can also make
     quick prototypes using other tools
User research and usability testing




                       http://www.flickr.com/photos/kevinsteele/473602975/sizes/l/in/photostream/
Validate your hypotheses

 •   Use personas as a way to quickly define tasks
     and goals
 •   Test against the most important task
 •   An interactive prototype is great, but you can go
     lo-fi, too
 •   Do it even if it’s not built into the schedule
 •   Guerrilla testing: does not need to be formal or
     expensive
 •   If you wait until the end, you won’t be able to
     change direction
Discussion

 •   What does it mean for agencies to emulate
     startups? It’s more than just understanding
     technology.
 •   How does the size of the agency affect the way
     you work? Small agencies can be more nimble
     and avoid the common pitfalls.
 •   How to be iterative if you’re working on a fixed
     bid? How do you scope it?
 •   What deliverables are truly necessary? Who are
     they for? What is waste?
Thank you

Jef Bekes

jef.bekes@solutionset.com
        @jbekes



                                   We’re hiring!
                            www.solutionset.com

More Related Content

Lean UX in an Agency Environment

  • 1. Lean UX in an Agency Environment Jef Bekes Creative Director, User Experience Design, SolutionSet SF Lean UX Meetup, May 30, 2012
  • 2. What is Lean UX? “Lean UX brings the true nature of design work to light faster, in a collaborative, cross-functional way with less emphasis on deliverables and greater focus on the actual experience being designed.” -Jeff Gothelf, “Lean UX: Getting out of the Deliverables Business”
  • 3. Process and activities • Lean: Think » Make » Check (repeat) • Lean UX: Sketch » Prototype » Test (repeat) You do stuff like this: • Pattern libraries • Collaborative sketching • Iterative design cycles • Rapid prototyping • Frequent testing • Designing in the browser/codebase
  • 4. This is great if you work at a startup • Natural affinity with startups (i.e. Lean Startup) • Agile development has taken hold with software teams • Small, co-located teams, working in close collaboration • Cycle time from idea to implementation is short
  • 5. But we work at a design agency! http://www.flickr.com/photos/b-tal/163450213/sizes/l/in/photostream/
  • 6. A typical (big) agency • Linear methodologies, still rooted in waterfall • Change is seen as bad, rather than inevitable • Strong divisions of labor, based on specialization and need to scale • Separation of teams: Project (client), Design (agency) Dev (agency, client or third party) • Progress is measured in “deliverables”
  • 7. Startup vs. agency * Startup Agency • Team: Product, design, and • Team: Project (client), dev integrated, co-located design (agency), and dev • Process: Agile (agency, client or third party) separated • Artifacts: Prototypes, • Process: Waterfall working code • Culture: Engineering driven, • Artifacts: Wireframes, lots of collaboration comps, templates • Culture: Design-driven, division of labor, lots of specialization * I know, these are stereotypes
  • 9. Roadblocks or opportunities? • Teams: There will still be a division of labor - that’s why they hired an agency • Process: Should the agency’s methodology match the client’s? • Artifacts: We still need “deliverables” are required to capture functionality. • Culture: Does collaboration “open the kimono” on the creative process? Where’s the “magic”?
  • 10. How do we get there? http://www.flickr.com/photos/giovanni_novara1/5263134384/sizes/l/
  • 11. Some tactics • Build iteration into the process, even if you’re still working in a waterfall process: Think » Make » Check • Define goals up-front and use as an objective measuring criteria for the design • Start from the “minimum viable experience” and design outward • Collaborate not just within the design group, but also across disciplines (and even with the client!) • Understand who your deliverables are for and
  • 12. Some techniques • Design patterns • Sketching • Prototyping • Usability testing
  • 14. What are design patterns? • Reusable components to solve commonly occurring problems within an application • Build out a library as a common reference point for designers and developers • Spend your time designing the complex interactions, not the best practices • Use an interactive framework (Bootstrap) or roll your own • Good way to get developers involved in the design process • Bonus: customize your pattern library to double
  • 16. Sketch to generate concepts • Identify the “minimum viable experience”: key flows/interactions/screens that are critical to success or have the most complexity/unknowns • Run a “charette” to sketch out as many different solutions as possible • These designs as hypotheses to be validated, not set in stone • Take your best first guess and validate it (interactive prototype, higher fidelity design, etc)
  • 18. Design experiences, not documentation • Wireframes are good way to inventory what belongs on a screen, but don’t capture interactivity, affordance, and flow • An interactive prototype will allow you to test both the “look” and the “feel” of the design • You can do this in parallel with design if you partner with your front-end dev team • Prototypes can be different levels of fidelity (visual and interactive) • HTML/CSS/JS is nice, but you can also make quick prototypes using other tools
  • 19. User research and usability testing http://www.flickr.com/photos/kevinsteele/473602975/sizes/l/in/photostream/
  • 20. Validate your hypotheses • Use personas as a way to quickly define tasks and goals • Test against the most important task • An interactive prototype is great, but you can go lo-fi, too • Do it even if it’s not built into the schedule • Guerrilla testing: does not need to be formal or expensive • If you wait until the end, you won’t be able to change direction
  • 21. Discussion • What does it mean for agencies to emulate startups? It’s more than just understanding technology. • How does the size of the agency affect the way you work? Small agencies can be more nimble and avoid the common pitfalls. • How to be iterative if you’re working on a fixed bid? How do you scope it? • What deliverables are truly necessary? Who are they for? What is waste?
  • 22. Thank you Jef Bekes jef.bekes@solutionset.com @jbekes We’re hiring! www.solutionset.com

Editor's Notes

  1. How many in startups or product organizations?\nHow many in agencies?\n
  2. Great definition of Lean UX that hits on some of the key points:\nGet from idea to experience as quickly as possible\nDecrease risk and waste\nDesign experiences, not documents\nWork in integrated, highly collaborative teams\n\nThe original article was fairly heavy-handed in its view of “deliverables”\n\n
  3. At a practical level, it looks like this. \nThis impacts not just your design process, but your entire toolkit and style of working.\n\n\n
  4. There’s a natural affinity between this approach to design and the startup world.\n\nDovetails with the whole “Lean Startup” movement.\nAgile development is a natural ally, since it’s predicated on multiple, iterative cycles where you constantly refine your work.\nYour teams are generally small, and everyone (product, design, development) is sitting together.\nContinuous integration practices keep the build green and allow for regular introduction of new designs into a working product environment.\n\nMost of the thought around Lean UX is based on how to implement this inside of a product organization.\n
  5. That sounds great, but what if you don’t work client-side?\n\n\n
  6. At first glance, almost every aspect of how design agencies are run and structured goes against the tenets of Lean UX.\nProcess is linear and design to manage scope and ensure that what is defined at the beginning is what comes out at the end.\nLots of specialization: visual designers, user experience designers, information architects, user researchers, etc. Natural way to scale.\nSeparation into different functional silos. The creative process is seen as “magic”, resulting in a big reveal. \nSOWs are based on deliverables (wireframes, comps, templates). \nBut what we’re really trying to do is deliver an experience. Everything else is just a different way to represent it.\n\n\n\n
  7. So there are some pretty important differences between the way these two kinds of organization approach design. \n
  8. The question is whether these are inherently blocking the adoption of Lean UX principles, or rather just different opportunities to innovate.\n\n
  9. So there are some pretty important differences between the way these two kinds of organization approach design.\nSome of these are inherent and driven by the client organization.\nIf the client works agile, you can work within that. But if they are watefall, it’s hard to be agile.\nCultural change is the hardest, because we’re used to design happening in a black box.\n\n\n
  10. Given all of that, there’s still a lot I think we can do to be more Lean without completely rethinking the agency model.\n\nThere was a recent blog posting by the ECD of AKQA asking whether agencies should be more like startups.\n\n
  11. Get the “think > make > check” mentality into the way you work and make sure there you can incorporate the feedback.\nUse goals as a way to measure, or check. \nFigure out how what constitutes success and make sure you have that part nailed.\nGreat design ideas come from everywhere. Collaboration with developers is more than just checking for technical feasability. \nDeliverables should facilitate understanding and communication. They are not the end product.\n\n
  12. Here are some simple techniques you can use to make your traditional process more lean.\n\n
  13. \n
  14. \n
  15. \n
  16. Start with a story.\nSketch out the user journey. What are key paths to success?\nDoes it follow a known pattern or interaction? How confident are you that it’s the right solution?\n
  17. make it interactive.\n
  18. lean UX is not anti-deliverables, but what we design needs to more closely model the end experience.\nFalse positives from static artifacts.\n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n