lean engineering
how to make engineering a full lean UX partner
Web Directions South
30 Oct 2014
@billwscott
VP Engineering
Retail | Merchant | Payments
!
PayPal
continuous customer feedback (GOOB)
customer metrics drive everything
think it. build it. ship it. tweak it
fail fast. learn fast.
lots of experimentation... build/measure/learn
designing & engineering for
experimentation
netflix view of customer
paypal vs netflix
contrast this with a large enterprise like paypal in
2011
In 2011, even a simple
content copy change
could take as much as
4-6 weeks to get live to
site
paypal way of engineering & design (in 2011)
roll your own. disconnected delivery
experience. culture of long shelf life.
inward focus. risk averse.
change is hard
organizations contain anti-
bodies that resist change
behavior is deep seated
and reinforced
new dna inserted
jan 2012

fleshed out ui layer that could support rapid
experimentation.
march 2012

david Marcus became president of PayPal. set a
new charter for innovation.
april 2012

formed lean ux team to reinvent checkout
experience.
reinvent checkout project lean ux/engineering in action
reinvent checkout project lean ux/engineering in action
from whiteboard to code
reinvent checkout project lean ux/engineering in action
from whiteboard to code from code to usability
reinvent checkout project lean ux/engineering in action
from whiteboard to code from code to usability
learnings
reinvent checkout project lean ux/engineering in action
from whiteboard to code from code to usability
learningsstart again
before
after
change has started working its way out
LEANENGINEERING
enabling build/measure/learn
LEANENGINEERING
enabling build/measure/learn
four principles
1. enable learning
most organizations biggest challenge is moving
from a culture of delivery to a
culture of learning
enable continuous delivery
engineering has to make delivery a 

non-event
otherwise:
delivery dates drive the experience
feature-itus becomes prevalent
BDUF & waterfall prevail
little to no learning
a tale of two trains
departs infrequently
“gotta get my features on this train
or I will have to wait a long time”
departs all the time
“if I miss this train another one comes
in a few minutes”
enable prototyping in the engineering stack
because engineering teams are
not trying to solve the learning
problem, they see prototyping
as outside the engineering
discipline
!
this is a real engineering
challenge
engineer for the “living spec”
enable prototyping in the engineering stack
because engineering teams are
not trying to solve the learning
problem, they see prototyping
as outside the engineering
discipline
!
this is a real engineering
challenge
engineer for the “living spec”
make prototyping a first
class member of tech stack
stack circa 2011/early 2012
simple change could take minutes
to see
follows an “enterprise application”
model. ui gets built into the “app”
java
jsp***
restricted
capabilities*
prototyping
was hard
“ui bits” could
only live here
* assumed client developers were low-skill

* required server side java eng for simple client changes

** java server pages. server-side java templating solution
server side
components**
client
server
we blended prototype & production
we enabled the “ui bits” to be
portable between the prototyping
stack and the production stackjava (rhino js eng)node.js
{dust}
JS template
prototype
stack
production
stack
{dust}
JS template
either stack
java (rhino js eng)
production
stack
{dust}
JS template
new single stack: prototype & production
node.js
{dust}
JS template
prototype
stack
the final step is we made the
prototype stack and production
stack the same technology
throughout the application stack
java (rhino js eng)
production
stack
{dust}
JS template
new single stack: prototype & production
node.js
{dust}
JS template
prototype
stack
the final step is we made the
prototype stack and production
stack the same technology
throughout the application stack
2. design for experimentation
16 different test cells in the initial PS3 Launch (2010)
focus is on experimentation
!
the netflix way
16 different test cells in the initial PS3 Launch (2010)
focus is on experimentation
!
four distinct PS3 experiences launched on same day
the netflix way
the epiphany
you have to engineer
for volatility
change is the norm
experimentation is not a one time event
launching a product is giving birth to the
product. the product’s life just begins.
!
design for throwaway-ability
majority of the
experience code
written was thrown
away in a year
you have to engineer
for volatility
change is the norm
experimentation is not a one time event
launching a product is giving birth to the
product. the product’s life just begins.
!
design for throwaway-ability
majority of the
experience code
written was thrown
away in a year
the ui layer is the
experimentation layer
html5 enabled netflix’s experimentation model
new users will see your html5 experience
the onramp to onboarding is the lowly link
network delivery makes a/b testing
straightforward
netflix gambled on html5 for mobile (iOS,
android) and for game consoles, bluray players,
hdtvs, etc.
why? build/measure/learn. network delivery.
experiences must adapt
Our software is always tearing itself apart
(or should be)
Recognize that different layers change at
different velocities
All buildings are predictions. 

All predictions are wrong. 

There's no escape from this grim
syllogism, but it can be softened.

Stewart Brand
enable lots of little bets
the big bet. ramping model results in
one experience (with some tweaks
along the way) after a long ramp up
time
lots of little bets. experimentation
model results in many experiences
being tested all along the way
vs
3. democratize innovation
two pizza team?
two pizza team?
keep teams small
democratize the code base
starting to use git repo model for continuous deployment
marketing pages
product pages
content updates & triggers into i18n, l10n, adaptation
components
works well with cloud deployment (devops model)
enables the train to be leaving all the time
work in open source model
internal github revolutionizing 

our internal development
rapidly replacing centralized 

platform teams
innovation democratized
every developer encouraged 

to experiment and generate repos 

to share as well as to fork/pull request
use open source religiously
nconf
async
q
supertest
4. give agile a brain
credit: Krystal Higgins
http://bit.ly/18uP7N1
agile is just a machine
it will crank ‘stuff’ out
it can be good or bad stuff
please don’t waste the machine
have a tight loop with our users
iterate to get experience “in the ballpark”
make it easy to iterate designs ahead of agile sprints
agile is just a machine
it will crank ‘stuff’ out
it can be good or bad stuff
please don’t waste the machine
have a tight loop with our users
iterate to get experience “in the ballpark”
make it easy to iterate designs ahead of agile sprints
the “brain” is our user
lean ux: enable a brain for agile
user interface engineering - agile scrum team (production)
lean ux - lean team track (prototyping)
engineering - agile scrum teamsprint 0
usability usability usability usability usability
release release release release
{agile
version 1.0
lean ux: enable a brain for agile
user interface engineering - agile scrum team (production)
lean ux - lean team track (prototyping)
engineering - agile scrum teamsprint 0
usability usability usability usability usability
release release release release
{agile
stories, user interface
code come over from the
leanux stream

!
n+2 is more feasible
because it actually
bootstraps the agile
stream
version 1.0
shared
understanding
deep
collaboration
continuous
feedback
how teams get the right mindset
the mind of the team
does your team
“defend the solution” or
“embrace the problem”?
rethink engineering in the
light of lean
1. enable learning
2. design for experimentation
3. democratize engineering
4. give agile a brain
LEANENGINEERING
!
!
Engineeringfor
build/measure/learn
designing web interfaces

O’Reilly
picture credits
http://www.flickr.com/photos/decade_null/2053134780/

http://www.flickr.com/photos/not_wise/182849352/

http://www.flickr.com/photos/37217398@N02/3442676067/

http://www.flickr.com/photos/hongiiv/4151964823/

Photo by Kim White: http://readwrite.com/2013/09/05/paypal-app-update-in-store-
payments#awesm=~ohHUppP9dhMmMG

http://www.flickr.com/photos/matthewpaulson/6176787688/

http://www.flickr.com/photos/olvrbrown/4542851399/

http://www.flickr.com/photos/juanpol/16287486/

http://www.flickr.com/photos/olvrbrown/4542851399/

http://www.flickr.com/photos/mbiskoping/6075387388/

http://www.flickr.com/photos/giesenbauer/4092794246/

http://www.flickr.com/photos/kowani/5565778790/

http://www.flickr.com/photos/ahockley/2657296577/

http://www.flickr.com/photos/90585146@N08/8222922317/

http://www.flickr.com/photos/therevsteve/3104267109/

Stewart Brand: How Buildings Learn (illustrations)

http://www.flickr.com/photos/light_seeker/7444052000/

Krystal Higgins: 

http://www.kryshiggins.com/sketchnotes-of-bringing-design-to-life-with-lean-ux-lean-engineering/

http://www.flickr.com/photos/epsos/8463683689/

http://www.flickr.com/photos/proimos/3473264448/

http://www.flickr.com/photos/janed42/5033842895/sizes/z/

http://www.flickr.com/photos/9619972@N08/1350940605/

http://www.flickr.com/photos/alanenglish/483251259/sizes/z/

http://www.flickr.com/photos/stuckincustoms/2380543038/
!
follow me on twitter
@billwscott

Wds leanengineering-141103233017-conversion-gate02

  • 1.
    lean engineering how tomake engineering a full lean UX partner Web Directions South 30 Oct 2014 @billwscott VP Engineering Retail | Merchant | Payments ! PayPal
  • 2.
    continuous customer feedback(GOOB) customer metrics drive everything think it. build it. ship it. tweak it fail fast. learn fast. lots of experimentation... build/measure/learn designing & engineering for experimentation netflix view of customer
  • 3.
    paypal vs netflix contrastthis with a large enterprise like paypal in 2011
  • 5.
    In 2011, evena simple content copy change could take as much as 4-6 weeks to get live to site
  • 6.
    paypal way ofengineering & design (in 2011) roll your own. disconnected delivery experience. culture of long shelf life. inward focus. risk averse.
  • 7.
  • 8.
  • 9.
    behavior is deepseated and reinforced
  • 10.
    new dna inserted jan2012
 fleshed out ui layer that could support rapid experimentation. march 2012
 david Marcus became president of PayPal. set a new charter for innovation. april 2012
 formed lean ux team to reinvent checkout experience.
  • 11.
    reinvent checkout projectlean ux/engineering in action
  • 12.
    reinvent checkout projectlean ux/engineering in action from whiteboard to code
  • 13.
    reinvent checkout projectlean ux/engineering in action from whiteboard to code from code to usability
  • 14.
    reinvent checkout projectlean ux/engineering in action from whiteboard to code from code to usability learnings
  • 15.
    reinvent checkout projectlean ux/engineering in action from whiteboard to code from code to usability learningsstart again
  • 16.
  • 17.
  • 25.
    change has startedworking its way out
  • 26.
  • 27.
  • 28.
  • 29.
    most organizations biggestchallenge is moving from a culture of delivery to a culture of learning
  • 30.
    enable continuous delivery engineeringhas to make delivery a 
 non-event otherwise: delivery dates drive the experience feature-itus becomes prevalent BDUF & waterfall prevail little to no learning
  • 31.
    a tale oftwo trains departs infrequently “gotta get my features on this train or I will have to wait a long time” departs all the time “if I miss this train another one comes in a few minutes”
  • 32.
    enable prototyping inthe engineering stack because engineering teams are not trying to solve the learning problem, they see prototyping as outside the engineering discipline ! this is a real engineering challenge engineer for the “living spec”
  • 33.
    enable prototyping inthe engineering stack because engineering teams are not trying to solve the learning problem, they see prototyping as outside the engineering discipline ! this is a real engineering challenge engineer for the “living spec” make prototyping a first class member of tech stack
  • 34.
    stack circa 2011/early2012 simple change could take minutes to see follows an “enterprise application” model. ui gets built into the “app” java jsp*** restricted capabilities* prototyping was hard “ui bits” could only live here * assumed client developers were low-skill
 * required server side java eng for simple client changes
 ** java server pages. server-side java templating solution server side components** client server
  • 35.
    we blended prototype& production we enabled the “ui bits” to be portable between the prototyping stack and the production stackjava (rhino js eng)node.js {dust} JS template prototype stack production stack {dust} JS template either stack
  • 36.
    java (rhino jseng) production stack {dust} JS template new single stack: prototype & production node.js {dust} JS template prototype stack the final step is we made the prototype stack and production stack the same technology throughout the application stack
  • 37.
    java (rhino jseng) production stack {dust} JS template new single stack: prototype & production node.js {dust} JS template prototype stack the final step is we made the prototype stack and production stack the same technology throughout the application stack
  • 38.
    2. design forexperimentation
  • 39.
    16 different testcells in the initial PS3 Launch (2010) focus is on experimentation ! the netflix way
  • 40.
    16 different testcells in the initial PS3 Launch (2010) focus is on experimentation ! four distinct PS3 experiences launched on same day the netflix way
  • 41.
  • 42.
    you have toengineer for volatility change is the norm experimentation is not a one time event launching a product is giving birth to the product. the product’s life just begins. ! design for throwaway-ability majority of the experience code written was thrown away in a year
  • 43.
    you have toengineer for volatility change is the norm experimentation is not a one time event launching a product is giving birth to the product. the product’s life just begins. ! design for throwaway-ability majority of the experience code written was thrown away in a year the ui layer is the experimentation layer
  • 44.
    html5 enabled netflix’sexperimentation model new users will see your html5 experience the onramp to onboarding is the lowly link network delivery makes a/b testing straightforward netflix gambled on html5 for mobile (iOS, android) and for game consoles, bluray players, hdtvs, etc. why? build/measure/learn. network delivery.
  • 45.
    experiences must adapt Oursoftware is always tearing itself apart (or should be) Recognize that different layers change at different velocities All buildings are predictions. 
 All predictions are wrong. There's no escape from this grim syllogism, but it can be softened. Stewart Brand
  • 46.
    enable lots oflittle bets the big bet. ramping model results in one experience (with some tweaks along the way) after a long ramp up time lots of little bets. experimentation model results in many experiences being tested all along the way vs
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
    democratize the codebase starting to use git repo model for continuous deployment marketing pages product pages content updates & triggers into i18n, l10n, adaptation components works well with cloud deployment (devops model) enables the train to be leaving all the time
  • 52.
    work in opensource model internal github revolutionizing 
 our internal development rapidly replacing centralized 
 platform teams innovation democratized every developer encouraged 
 to experiment and generate repos 
 to share as well as to fork/pull request
  • 54.
    use open sourcereligiously nconf async q supertest
  • 55.
    4. give agilea brain credit: Krystal Higgins http://bit.ly/18uP7N1
  • 56.
    agile is justa machine it will crank ‘stuff’ out it can be good or bad stuff please don’t waste the machine have a tight loop with our users iterate to get experience “in the ballpark” make it easy to iterate designs ahead of agile sprints
  • 57.
    agile is justa machine it will crank ‘stuff’ out it can be good or bad stuff please don’t waste the machine have a tight loop with our users iterate to get experience “in the ballpark” make it easy to iterate designs ahead of agile sprints the “brain” is our user
  • 58.
    lean ux: enablea brain for agile user interface engineering - agile scrum team (production) lean ux - lean team track (prototyping) engineering - agile scrum teamsprint 0 usability usability usability usability usability release release release release {agile version 1.0
  • 59.
    lean ux: enablea brain for agile user interface engineering - agile scrum team (production) lean ux - lean team track (prototyping) engineering - agile scrum teamsprint 0 usability usability usability usability usability release release release release {agile stories, user interface code come over from the leanux stream ! n+2 is more feasible because it actually bootstraps the agile stream version 1.0
  • 60.
  • 61.
    the mind ofthe team does your team “defend the solution” or “embrace the problem”?
  • 62.
    rethink engineering inthe light of lean 1. enable learning 2. design for experimentation 3. democratize engineering 4. give agile a brain LEANENGINEERING ! ! Engineeringfor build/measure/learn
  • 63.
    designing web interfaces
 O’Reilly picturecredits
http://www.flickr.com/photos/decade_null/2053134780/ http://www.flickr.com/photos/not_wise/182849352/ http://www.flickr.com/photos/37217398@N02/3442676067/ http://www.flickr.com/photos/hongiiv/4151964823/ Photo by Kim White: http://readwrite.com/2013/09/05/paypal-app-update-in-store- payments#awesm=~ohHUppP9dhMmMG http://www.flickr.com/photos/matthewpaulson/6176787688/ http://www.flickr.com/photos/olvrbrown/4542851399/ http://www.flickr.com/photos/juanpol/16287486/ http://www.flickr.com/photos/olvrbrown/4542851399/ http://www.flickr.com/photos/mbiskoping/6075387388/ http://www.flickr.com/photos/giesenbauer/4092794246/ http://www.flickr.com/photos/kowani/5565778790/ http://www.flickr.com/photos/ahockley/2657296577/ http://www.flickr.com/photos/90585146@N08/8222922317/ http://www.flickr.com/photos/therevsteve/3104267109/ Stewart Brand: How Buildings Learn (illustrations) http://www.flickr.com/photos/light_seeker/7444052000/ Krystal Higgins: http://www.kryshiggins.com/sketchnotes-of-bringing-design-to-life-with-lean-ux-lean-engineering/ http://www.flickr.com/photos/epsos/8463683689/ http://www.flickr.com/photos/proimos/3473264448/ http://www.flickr.com/photos/janed42/5033842895/sizes/z/ http://www.flickr.com/photos/9619972@N08/1350940605/ http://www.flickr.com/photos/alanenglish/483251259/sizes/z/ http://www.flickr.com/photos/stuckincustoms/2380543038/ ! follow me on twitter @billwscott