the lean tech stack
Post on 17-Oct-2014
20.744 views
DESCRIPTION
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.TRANSCRIPT
![Page 1: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/1.jpg)
The Lean Tech StackEngineering Nimble Experiences Bill ScottSr. Director UI EngineeringPayPal
July 14Open Web Camp 2012
![Page 2: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/2.jpg)
The Way it Was
![Page 3: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/3.jpg)
Building a game in 1985
Original Mac Quickdraw Toolkit provided some GUI framework pieces (like the Open File Box)
This bit of “path of least resistance” was a powerful boost to consistency and creating nice looking Macintosh UIs
But there was still a lot le* to create on your own
![Page 4: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/4.jpg)
Developing a UI was still hard work
No internet. Open source was practically non-existent.
Hard to build (all native & assembly)
Long shelf life (long release cycles with 3.5” disk deployment
Reuse was something we longed for
![Page 5: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/5.jpg)
Developing a UI was still hard work
No internet. Open source was practically non-existent.
Hard to build (all native & assembly)
Long shelf life (long release cycles with 3.5” disk deployment
Reuse was something we longed for
![Page 6: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/6.jpg)
Developing a UI was still hard work
No internet. Open source was practically non-existent.
Hard to build (all native & assembly)
Long shelf life (long release cycles with 3.5” disk deployment
Reuse was something we longed for
![Page 7: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/7.jpg)
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.
’85-’05. Lots of proprietary frameworks.
![Page 8: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/8.jpg)
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)
Sharing with the world
![Page 9: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/9.jpg)
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)
Sharing with the world
Lesson: The power of sharing and multiplying!
![Page 10: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/10.jpg)
The Epiphany
![Page 11: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/11.jpg)
Netflix way of working
Different way of working, different culture
![Page 12: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/12.jpg)
Netflix way of working
Different way of working, different culture
1. 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.
![Page 13: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/13.jpg)
Netflix way of working
Different way of working, different culture
2. Culture - Rapid Experimentation Get it out live as fast as possible Fail fast Learn fast Don’t over think it
1. 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.
![Page 14: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/14.jpg)
Epiphany
![Page 15: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/15.jpg)
A
B
C
D
E
F
G
A'
B'
C'
D'
E'
F'
G'
C A'
Epiphany
![Page 16: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/16.jpg)
A
B
C
D
E
F
G
A'
B'
C'
D'
E'
F'
G'
C A'
93% thrown away
Epiphany
![Page 17: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/17.jpg)
Follow Build-Test-LearnDesign for volatility, throwaway-ability
At Netflix 90% or more of the UI code was thrown away every year
Doesn’t take too many tests to result in lots of throw away code
A
B
C
D
E
F
G
A'
B'
C'
D'
E'
F'
G'
C A'
93% thrown away
Epiphany
![Page 18: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/18.jpg)
Follow Build-Test-LearnDesign for volatility, throwaway-ability
At Netflix 90% or more of the UI code was thrown away every year
Doesn’t take too many tests to result in lots of throw away code
A
B
C
D
E
F
G
A'
B'
C'
D'
E'
F'
G'
C A'
93% thrown away
UI Layer =
Experimentation Layer
Epiphany
![Page 19: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/19.jpg)
Engineering experiences in a nimble world
Lessons Learned
![Page 20: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/20.jpg)
#1 Design for Volatility
![Page 21: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/21.jpg)
Stewart Brand - How Buildings Learn
![Page 22: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/22.jpg)
User Interface Shears Fastest
Our so*ware is always tearing itself apart (or should be)
Recognize that different layers change at different velocities
Stewart Brand - How Buildings Learn
![Page 23: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/23.jpg)
User Interface Shears Fastest
Our so*ware is always tearing itself apart (or should be)
Recognize that different layers change at different velocities
Stewart Brand - How Buildings Learn
All buildings are predictions. All predictions are wrong. There's no escape from this grim syllogism, but it can be softened. - Brand
![Page 24: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/24.jpg)
Design at different velocities by layer
![Page 25: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/25.jpg)
Recognize that different parts of Stack change at different velocities
“ a n y b u i l d i n g i s a c t u a l l y a h i e ra r c h y o f p i e c e s , e a c h o f w h i c h i n h e r e n t l y 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 i l d i n 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
Design at different velocities by layer
![Page 26: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/26.jpg)
#2 Start with
the Experience
![Page 27: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/27.jpg)
Experience vs Components
![Page 28: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/28.jpg)
Experience vs Components
![Page 29: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/29.jpg)
![Page 30: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/30.jpg)
![Page 31: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/31.jpg)
Experience & Experimentation First
![Page 32: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/32.jpg)
Stay honest & pure by having experience be the driver (not what your boss thinks or what looks good on your resume or what the loudest one in the room thinks)
Remember...Use before you reuse
Let the experience drive the engineering
Reuse is an engineering optimization. Use is what users do.
Why start with experience?
![Page 33: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/33.jpg)
#3 Build in Rapid
Experimentation
![Page 34: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/34.jpg)
Build in Rapid ExperimentationThink of the UI Layer as “The Experimentation Layer”Early rapid prototyping leads to learnings to get into the right ballpark
Follow with live A/B Testing. Lots of it.
Creates a healthy environment with constant customer feedback loopsContrast this with “Long Shelf Life” culture
![Page 35: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/35.jpg)
BeforeMost 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 the weekend, read the results on Monday, and come to conclusions starting Tuesday; then they rebuild new tests
Ries, Eric (2011-09-13). The Lean Startup: How Today’s Entrepreneurs Use Continuous Innovation to Create Radically Successful Businesses (p. 33). Random House, Inc.. Kindle Edition.
Lean UX: Key to Rapid Iteration
![Page 36: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/36.jpg)
Lean UX: Key to Rapid Iteration
![Page 37: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/37.jpg)
Lean UX: Key to Rapid IterationLean UX - co-located
![Page 38: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/38.jpg)
Lean UX: Key to Rapid IterationLean UX - co-located
Whiteboardto code
Code toUsability
And backagain...
Product/Design team UIEs Usability/Customers
![Page 39: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/39.jpg)
Remove the walls between teams
Use shared understanding instead of documentation
Make living code the design
Everyone has skin in the game
Lean UX: Key to Rapid IterationLean UX - co-located
Whiteboardto code
Code toUsability
And backagain...
Product/Design team UIEs Usability/Customers
![Page 40: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/40.jpg)
#4 Reuse Where
Possible
![Page 41: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/41.jpg)
Requirements for Lean UI Stack
Independent of the backend language
Flexible enough to run in either the server or in the client
Equally good at building web sites as it is building web applications
Pushable 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 at night)
Quick & easy to build & tear down components
![Page 42: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/42.jpg)
Example of Lean Stack
![Page 43: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/43.jpg)
![Page 44: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/44.jpg)
Startups move at Lean Speed
Meebo - Power of Python/DjangoSpawned Instagram, GameClosure, CloverAcquired by Google 2012
Rypple - Rapid prototyping/Starbucks UsabilityAcquired by Salesforce 2011
Togetherville - Many PivotsAcquired by Disney 2010
BagCheck - Mobile first, get it live early, build on open source stackAcquired by Twitter 2011
![Page 45: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/45.jpg)
Engineering Lean
It’s not all reuse. It is the experience.
Stop re-inventing what has already been invented
Github 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 and keep it flowing.
![Page 46: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/46.jpg)
Bringing Design to Life Quickly
The Mission
![Page 47: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/47.jpg)
![Page 48: The Lean Tech Stack](https://reader034.vdocument.in/reader034/viewer/2022050807/5440e433b1af9ff74b8b4582/html5/thumbnails/48.jpg)
Presentationbillwscott.com/share/presentations/2012/ow/
Blogshttp://looksgoodworkswell.comhttp://designingwebinterfaces.com
Follow me on twitter!@billwscott
Picture 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/
Bookhttp://designingwebinterfaces.com