The Lean Tech Stack

31,954 views
31,722 views

Published on

More and more organizations are following a Lean model for creating products. This model has been popularized by LeanUX and the Lean Startup movements which emphasize build-test-learn in rapid iterations. This talk (given at Open Web Camp 2012) looks at what has changed in the landscape and the lessons learned in creating user experiences in a lean manner.

Published in: Technology, Education
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
31,954
On SlideShare
0
From Embeds
0
Number of Embeds
18,142
Actions
Shares
0
Downloads
110
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

The Lean Tech Stack

  1. The Lean Tech StackEngineering Nimble ExperiencesBill ScottSr. Director UI EngineeringPayPalJuly 14Open Web Camp 2012
  2. The Way it Was
  3. Building a gamein 1985Original Mac Quickdraw Toolkitprovided some GUI frameworkpieces (like the Open File Box)This bit of “path of leastresistance” was a powerful boostto consistency and creating nicelooking Macintosh UIsBut there was still a lot le* tocreate on your own
  4. Developing a UI was still hard workNo internet. Open source was practically non-existent.Hard to build (all native & assembly)Long shelf life (long release cycles with 3.5” disk deploymentReuse was something we longed for
  5. Developing a UI was still hard workNo internet. Open source was practically non-existent.Hard to build (all native & assembly)Long shelf life (long release cycles with 3.5” disk deploymentReuse was something we longed for
  6. Developing a UI was still hard workNo internet. Open source was practically non-existent.Hard to build (all native & assembly)Long shelf life (long release cycles with 3.5” disk deploymentReuse was something we longed for
  7. ’85-’05. Lots of proprietary frameworks. Orbiter. 3D Graphics Library ESYView. Wargame simulator & briefing tool. Almost everything had to be written from the ground up (mapping projection library, double buffering, display lists, canvas) C++ Frameworks for Motif Tcl/TK Frameworks 3 JSP Frameworks (i2 Technologies, Sabre, Netflix) Rico. One of first Ajax/JS frameworks 2005.
  8. Sharing with the world Rico. One of the early Ajax/JS frameworks (2005) Launched Yahoo! Design Pattern Library (2006) Worked closely with YUI team (and built first carousel version)
  9. Sharing with the world Rico. One of the early Ajax/JS frameworks (2005) Launched Yahoo! Design Pattern Library (2006) Worked closely with YUI team (and built first carousel version) Lesson: The power of sharing and multiplying!
  10. The Epiphany
  11. Netflix way of workingDifferent way of working, different culture
  12. Netflix way of workingDifferent way of working, different culture1. Working Model - Experience-Driven Start with experience Only customer is the member (no internal customers) We rarely talked about the “machine”. We talked about members.
  13. Netflix way of workingDifferent way of working, different culture1. Working Model - Experience-Driven Start with experience Only customer is the member (no internal customers) We rarely talked about the “machine”. We talked about members.2. Culture - Rapid Experimentation Get it out live as fast as possible Fail fast Learn fast Don’t over think it
  14. Epiphany
  15. Epiphany A A B B C C D C D A E E F F G G
  16. Epiphany A A B B C C D C D A E E F F G G 93% thrown away
  17. Epiphany Follow Build-Test-Learn A A Design for volatility, throwaway- B B ability C C D C D A E E At Netflix 90% or more of the UI F G F G code was thrown away every year 93% thrown away Doesn’t take too many tests to result in lots of throw away code
  18. Epiphany Follow Build-Test-Learn A A Design for volatility, throwaway- B B ability C C D C D A E E At Netflix 90% or more of the UI F G F G code was thrown away every year 93% thrown away Doesn’t take too many tests to result in lots of throw away code U I Layer = mentatio n Layer Experi
  19. Lessons LearnedEngineering experiences in a nimble world
  20. # 1 Design for Volatility
  21. Stewart Brand - How Buildings Learn
  22. User Interface Shears Fastest Our so*ware is always tearing itself apart (or should be) Recognize that different layers change at different velocitiesStewart Brand - How Buildings Learn
  23. User Interface Shears Fastest Our so*ware is always tearing itself apart (or should be) Recognize that different layers change at different velocitiesStewart Brand - How Buildings Learn All buildings are predictions. All predictions are wrong. Theres no escape from this grim syllogism, but it can be softened. - Brand
  24. Design at different velocities by layer
  25. Design at different velocities by layerRecognize that different parts of Stack change at different velocities “ a n y b u ild in g is a c t u a lly a h ie ra r c h y o f p ie c e s , e a c h o f w h ic h in h e r e n t ly c h a n g e s a t d iff e r e n t ra t e s ” - S t e w a r t B ra n d . H o w B u ild in g s L e a r n .Design for throwaway-ability (Volatility)!Use before you Reuse (optimize for change)Utilize packaging or Paths to capture experiments
  26. # 2 Start withthe Expe rience
  27. Experience vs Components
  28. Experience vs Components
  29. Experience & Experimentation First
  30. Why start with experience?Stay honest & pure by having experience be the driver(not what your boss thinks or what looks good on your resume orwhat the loudest one in the room thinks)Remember...Use before you reuseLet the experience drive the engineeringReuse is an engineering optimization. Use is what users do.
  31. #3 Build in RapidExpe rimen tation
  32. Build in Rapid ExperimentationThink of the UI Layer as “The Experimentation Layer”Early rapid prototyping leads to learnings to get into the right ballparkFollow with live A/B Testing. Lots of it.Creates a healthy environment with constant customer feedback loopsContrast this with “Long Shelf Life” culture
  33. Lean UX: Key to Rapid IterationBeforeMost sales of TurboTax at tax season led to conservative cultureOne major initiative a year.NowTest over 500 different changes in a 2 1/2 month tax season.Running up to seventy different tests per week.Make a change live on its website on Thursday, run it over theweekend, read the results on Monday, and come to conclusionsstarting Tuesday; then they rebuild new testsRies, Eric (2011-09-13). The Lean Startup: How Today’s Entrepreneurs Use Continuous Innovation to Create RadicallySuccessful Businesses (p. 33). Random House, Inc.. Kindle Edition.
  34. Lean UX: Key to Rapid Iteration
  35. Lean UX: Key to Rapid IterationLean UX - co-located
  36. Lean UX: Key to Rapid IterationLean UX - co-located Product/Design team UIEs Usability/Customers And back again... Whiteboard Code to to code Usability
  37. Lean UX: Key to Rapid IterationLean UX - co-located Product/Design team UIEs Usability/Customers And back again... Whiteboard Code to to code UsabilityRemove the walls between teamsUse shared understanding instead of documentationMake living code the designEveryone has skin in the game
  38. #4 Reuse W here Possible
  39. Requirements for Lean UI StackIndependent of the backend languageFlexible enough to run in either the server or in the clientEqually good at building web sites as it is building web applicationsPushable outside of the application stack (publish model)Cleanly separated from the backend/app code (ideally by JSON)Utilize what is common to developers in the valley (what they use atnight)Quick & easy to build & tear down components
  40. Example of Lean Stack
  41. Startups move at Lean SpeedMeebo - Power of Python/DjangoSpawned Instagram, GameClosure, CloverAcquired by Google 2012Rypple - Rapid prototyping/Starbucks UsabilityAcquired by Salesforce 2011Togetherville - Many PivotsAcquired by Disney 2010BagCheck - Mobile first, get it live early, build on open source stackAcquired by Twitter 2011
  42. Engineering LeanIt’s not all reuse. It is the experience.Stop re-inventing what has already been inventedGithub is your best friend. Make reuse your bootstrap.Remember Zuck’s Law“If I had to build this in a garage, how would I build it?”The bottom line: get the user feedback loop flowing andkeep it flowing.
  43. The MissionBringing Design to Life Quickly
  44. Presentationbillwscott.com/share/presentations/2012/ow/Blogshttp://looksgoodworkswell.comhttp://designingwebinterfaces.comFollow me on twitter!@billwscott Book http://designingwebinterfaces.comPicture Credits (Creative Commons)http://www.flickr.com/photos/neilsingapore/4047105116/sizes/l/http://www.flickr.com/photos/smb_flickr/439040132/http://www.flickr.com/photos/therevsteve/3104267109/sizes/o/http://www.flickr.com/photos/st3f4n/4193370268/sizes/l/http://www.flickr.com/photos/eole/380316678/sizes/z/http://www.flickr.com/photos/cobalt/3035453914/sizes/z/http://www.flickr.com/photos/mbiskoping/6075387388/http://www.flickr.com/photos/fragglerawker/2370316759/sizes/z/http://www.flickr.com/photos/soldiersmediacenter/4685688778/sizes/z/

×