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.
The Lean Tech Stack
Engineering Nimble Experiences
Bill Scott
Sr. Director UI Engineering
PayPal

July 14
Open Web Camp 20...
The Way it Was
Building a game
in 1985
Original Mac Quickdraw Toolkit
provided some GUI framework
pieces (like the Open File Box)

This b...
Developing a UI was still hard work




No internet. Open source was practically non-existent.

Hard to build (all native ...
Developing a UI was still hard work




No internet. Open source was practically non-existent.

Hard to build (all native ...
Developing a UI was still hard work




No internet. Open source was practically non-existent.

Hard to build (all native ...
’85-’05. Lots of proprietary frameworks.
       Orbiter. 3D Graphics Library

       ESYView. Wargame simulator & briefing ...
Sharing with the world
         Rico. One of the early Ajax/JS frameworks (2005)



         Launched Yahoo! Design Patter...
Sharing with the world
            Rico. One of the early Ajax/JS frameworks (2005)



            Launched Yahoo! Design ...
The Epiphany
Netflix way of working
Different way of working, different culture
Netflix way of working
Different way of working, different culture

1. Working Model - Experience-Driven
  Start with experie...
Netflix way of working
Different way of working, different culture

1. Working Model - Experience-Driven
  Start with experie...
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    ...
Epiphany
                             Follow Build-Test-Learn
   A            A'           Design for volatility, throwawa...
Epiphany
                             Follow Build-Test-Learn
   A            A'           Design for volatility, throwawa...
Lessons Learned


Engineering experiences
   in a nimble world
# 1 Design for
   Volatility
Stewart Brand - How Buildings Learn
User Interface
                                      Shears Fastest
                                      Our so*ware is a...
User Interface
                                      Shears Fastest
                                      Our so*ware is a...
Design at different velocities by layer
Design at different velocities by layer



Recognize that different parts of Stack change at different velocities

    “ a n ...
# 2 Start with
the  Expe rience
Experience vs Components
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 ...
#3 Build in Rapid
Expe rimen  tation
Build in Rapid Experimentation
Think of the UI Layer as “The Experimentation Layer”
Early rapid prototyping leads to learn...
Lean UX: Key to Rapid Iteration



Before
Most sales of TurboTax at tax season led to conservative culture
One major initi...
Lean UX: Key to Rapid Iteration
Lean UX: Key to Rapid Iteration
Lean UX - co-located
Lean UX: Key to Rapid Iteration
Lean UX - co-located




 Product/Design team                UIEs               Usability/...
Lean UX: Key to Rapid Iteration
Lean UX - co-located




 Product/Design team                UIEs               Usability/...
#4 Reuse W  here
    Possible
Requirements for Lean UI Stack
Independent of the backend language

Flexible enough to run in either the server or in the ...
Example of Lean Stack
Startups move at Lean Speed
Meebo - Power of Python/Django
Spawned Instagram, GameClosure, Clover
Acquired by Google 2012
...
Engineering Lean
It’s not all reuse. It is the experience.

Stop re-inventing what has already been invented

Github is yo...
The Mission
Bringing Design to Life
       Quickly
Presentation
billwscott.com/share/presentations/2012/ow/

Blogs
http://looksgoodworkswell.com
http://designingwebinterface...
The Lean Tech Stack
The Lean Tech Stack
The Lean Tech Stack
The Lean Tech Stack
Upcoming SlideShare
Loading in …5
×

of

The Lean Tech Stack Slide 1 The Lean Tech Stack Slide 2 The Lean Tech Stack Slide 3 The Lean Tech Stack Slide 4 The Lean Tech Stack Slide 5 The Lean Tech Stack Slide 6 The Lean Tech Stack Slide 7 The Lean Tech Stack Slide 8 The Lean Tech Stack Slide 9 The Lean Tech Stack Slide 10 The Lean Tech Stack Slide 11 The Lean Tech Stack Slide 12 The Lean Tech Stack Slide 13 The Lean Tech Stack Slide 14 The Lean Tech Stack Slide 15 The Lean Tech Stack Slide 16 The Lean Tech Stack Slide 17 The Lean Tech Stack Slide 18 The Lean Tech Stack Slide 19 The Lean Tech Stack Slide 20 The Lean Tech Stack Slide 21 The Lean Tech Stack Slide 22 The Lean Tech Stack Slide 23 The Lean Tech Stack Slide 24 The Lean Tech Stack Slide 25 The Lean Tech Stack Slide 26 The Lean Tech Stack Slide 27 The Lean Tech Stack Slide 28 The Lean Tech Stack Slide 29 The Lean Tech Stack Slide 30 The Lean Tech Stack Slide 31 The Lean Tech Stack Slide 32 The Lean Tech Stack Slide 33 The Lean Tech Stack Slide 34 The Lean Tech Stack Slide 35 The Lean Tech Stack Slide 36 The Lean Tech Stack Slide 37 The Lean Tech Stack Slide 38 The Lean Tech Stack Slide 39 The Lean Tech Stack Slide 40 The Lean Tech Stack Slide 41 The Lean Tech Stack Slide 42 The Lean Tech Stack Slide 43 The Lean Tech Stack Slide 44 The Lean Tech Stack Slide 45 The Lean Tech Stack Slide 46 The Lean Tech Stack Slide 47 The Lean Tech Stack Slide 48
Upcoming SlideShare
Lean UX Anti-Patterns
Next
Download to read offline and view in fullscreen.

23 Likes

Share

Download to read offline

The Lean Tech Stack

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

The Lean Tech Stack

  1. The Lean Tech Stack Engineering Nimble Experiences Bill Scott Sr. Director UI Engineering PayPal July 14 Open Web Camp 2012
  2. The Way it Was
  3. 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
  4. 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
  5. 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
  6. 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
  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 working Different way of working, different culture
  12. 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.
  13. 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. 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 Learned Engineering 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 velocities Stewart 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 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
  24. Design at different velocities by layer
  25. Design at different velocities by layer Recognize 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 with the 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 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.
  31. #3 Build in Rapid Expe rimen tation
  32. Build in Rapid Experimentation Think 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 loops Contrast this with “Long Shelf Life” culture
  33. Lean UX: Key to Rapid Iteration Before Most sales of TurboTax at tax season led to conservative culture One major initiative a year. Now Test 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.
  34. Lean UX: Key to Rapid Iteration
  35. Lean UX: Key to Rapid Iteration Lean UX - co-located
  36. Lean UX: Key to Rapid Iteration Lean UX - co-located Product/Design team UIEs Usability/Customers And back again... Whiteboard Code to to code Usability
  37. Lean UX: Key to Rapid Iteration Lean UX - co-located Product/Design team UIEs Usability/Customers And back again... Whiteboard Code to to code Usability Remove the walls between teams Use shared understanding instead of documentation Make living code the design Everyone has skin in the game
  38. #4 Reuse W here Possible
  39. 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
  40. Example of Lean Stack
  41. Startups move at Lean Speed Meebo - Power of Python/Django Spawned Instagram, GameClosure, Clover Acquired by Google 2012 Rypple - Rapid prototyping/Starbucks Usability Acquired by Salesforce 2011 Togetherville - Many Pivots Acquired by Disney 2010 BagCheck - Mobile first, get it live early, build on open source stack Acquired by Twitter 2011
  42. 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.
  43. The Mission Bringing Design to Life Quickly
  44. Presentation billwscott.com/share/presentations/2012/ow/ Blogs http://looksgoodworkswell.com http://designingwebinterfaces.com Follow me on twitter! @billwscott Book http://designingwebinterfaces.com 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/
  • MonaGonzalez7

    Dec. 4, 2021
  • GopalaKR

    Jul. 25, 2017
  • dawalama1

    Dec. 29, 2016
  • kamilswiatkiewicz1

    May. 2, 2016
  • sarfrazmushtaq

    Nov. 29, 2015
  • AAIIRREE

    Dec. 6, 2013
  • acuration

    Sep. 19, 2013
  • cyetain

    Jul. 7, 2013
  • navarro.angel

    May. 27, 2013
  • carlospdes

    Apr. 8, 2013
  • donbonvivant

    Feb. 3, 2013
  • aodou

    Jan. 19, 2013
  • jayinteractive

    Nov. 25, 2012
  • fpamela

    Nov. 15, 2012
  • mikerecords

    Nov. 15, 2012
  • grahamsmith38

    Jul. 24, 2012
  • rick

    Jul. 19, 2012
  • AAinslie

    Jul. 17, 2012
  • sugarfreejones

    Jul. 16, 2012
  • RoystonS

    Jul. 16, 2012

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.

Views

Total views

50,277

On Slideshare

0

From embeds

0

Number of embeds

22,476

Actions

Downloads

119

Shares

0

Comments

0

Likes

23

×