The Lean Tech Stack

The Lean Tech StackEngineering Nimble ExperiencesBill ScottSr. Director UI EngineeringPayPalJuly 14Open Web Camp 2012

The Way it Was

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

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

’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.

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 ﬁrst carousel version)

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 ﬁrst carousel version) Lesson: The power of sharing and multiplying!

The Epiphany

Netflix way of workingDifferent way of working, different culture

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.

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

Epiphany

Epiphany A A B B C C D C D A E E F F G G

Epiphany A A B B C C D C D A E E F F G G 93% thrown away

Epiphany Follow Build-Test-Learn A A Design for volatility, throwaway- B B ability C C D C D A E E At Netﬂix 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

Epiphany Follow Build-Test-Learn A A Design for volatility, throwaway- B B ability C C D C D A E E At Netﬂix 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

Lessons LearnedEngineering experiences in a nimble world

# 1 Design for Volatility

Stewart Brand - How Buildings Learn

User Interface Shears Fastest Our so*ware is always tearing itself apart (or should be) Recognize that diﬀerent layers change at diﬀerent velocitiesStewart Brand - How Buildings Learn

User Interface Shears Fastest Our so*ware is always tearing itself apart (or should be) Recognize that diﬀerent layers change at diﬀerent 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

Design at diﬀerent velocities by layer

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

# 2 Start withthe Expe rience

Experience vs Components

Experience & Experimentation First

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.

#3 Build in RapidExpe rimen tation

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

Lean UX: Key to Rapid IterationBeforeMost sales of TurboTax at tax season led to conservative cultureOne major initiative a year.NowTest over 500 diﬀerent changes in a 2 1/2 month tax season.Running up to seventy diﬀerent 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.

Lean UX: Key to Rapid Iteration

Lean UX: Key to Rapid IterationLean UX - co-located

Lean UX: Key to Rapid IterationLean UX - co-located Product/Design team UIEs Usability/Customers And back again... Whiteboard Code to to code Usability

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

#4 Reuse W here Possible

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

Example of Lean Stack

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 ﬁrst, get it live early, build on open source stackAcquired by Twitter 2011

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 ﬂowing andkeep it ﬂowing.

The MissionBringing Design to Life Quickly

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/

http://designingwebinterfaces.com	5487
http://looksgoodworkswell.blogspot.com	1318
http://adrielservice.com	175
http://looksgoodworkswell.blogspot.co.uk	157
http://looksgoodworkswell.blogspot.in	152
http://looksgoodworkswell.blogspot.de	83
http://looksgoodworkswell.blogspot.ca	81
http://feeds.feedburner.com	47
http://looksgoodworkswell.blogspot.com.br	46
http://looksgoodworkswell.blogspot.nl	35
http://looksgoodworkswell.blogspot.com.au	32
http://looksgoodworkswell.blogspot.fr	26
http://looksgoodworkswell.blogspot.sg	22
http://looksgoodworkswell.blogspot.se	21
http://looksgoodworkswell.blogspot.kr	21
http://looksgoodworkswell.blogspot.tw	14
http://arianaelizalde.blogspot.com	13
http://feeds2.feedburner.com	12
http://translate.googleusercontent.com	11
http://looksgoodworkswell.blogspot.co.nz	11
http://looksgoodworkswell.blogspot.it	11
http://looksgoodworkswell.blogspot.mx	11
http://looksgoodworkswell.blogspot.jp	11
http://looksgoodworkswell.blogspot.com.es	11
https://twitter.com	10
http://looksgoodworkswell.blogspot.pt	10
http://eventifier.co	10
http://looksgoodworkswell.blogspot.ie	10
http://looksgoodworkswell.blogspot.ch	9
http://looksgoodworkswell.blogspot.be	9
http://looksgoodworkswell.blogspot.gr	8
http://looksgoodworkswell.blogspot.co.il	6
http://looksgoodworkswell.blogspot.cz	5
http://designinginterestingmoments.com	5
http://dashboard.bloglines.com	5
http://designingrichinterfaces.com	5
http://looksgoodworkswell.blogspot.fi	5
http://looksgoodworkswell.blogspot.hk	5
http://looksgoodworkswell.blogspot.no	4
http://www.newsblur.com	4
http://looksgoodworkswell.blogspot.ro	4
https://si0.twimg.com	4
http://looksgoodworkswell.blogspot.com.ar	3
http://theoldreader.com	3
http://looksgoodworkswell.blogspot.dk	3
http://www.hanrss.com	3
http://looksgoodworkswell.blogspot.ru	2
https://f.niepi.org	2
http://looksgoodworkswell.blogspot.co.at	2
http://www.netvibes.com	2
https://twimg0-a.akamaihd.net	2

The Lean Tech Stack

by Bill Scott on Jul 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

60 Embeds 7,957

Statistics

The Lean Tech Stack Presentation Transcript