Design meets Agile!
What is Service Design Thinking? And how does it relate to the agile world?!
!
Jens Otto Lange!
Mix IT 2014!
Lyon, 30.4.2014
Design Coach!
Digital Innovation Facilitor!


Workshops - Training - Projects

Linkedin me!
Xing me!
@jensottolange!
www.jensottolange.de
2
Digital Innovation Facilitator

Designing the process of design

© JensOttoLange.de 3
Why?
© JensOttoLange.de© JensOttoLange.de© JensOttoLange.de© JensOttoLange.de 4
http://commons.wikimedia.org/wiki/File:Max_Sch
%C3%BCler_Junge_Frau_am_Telefon.jpg
http://en.wikipedia.org/wiki/File:Cpc464.computer.
750pix.jpg
Photo:flickr/clasesdeperiodismo-EsterVargas
http://en.wikipedia.org/wiki/
File:Jimmy_Wales_accessing_Wikipedia.jpg
Photo:flickr/JensGyldenkærneClausen
mobile
mobile home
home
always on, all in one!
anywhere, anytime
© JensOttoLange.de 5
Digital
Transformation!
© JensOttoLange.de© JensOttoLange.de© JensOttoLange.de© JensOttoLange.de 6
Photo:flickr/clasesdeperiodismo-EsterVargas
always on, all in one!
anywhere, anytime
digital self services
design!
challenge
© JensOttoLange.de 7
Our highest priority is to
satisfy the customer!
through early and
continuous delivery of
valuable software!
Agile Manifesto
http://agilemanifesto.org/principles.html
© JensOttoLange.de 8
Value doesn’t usually
come from the delivery
of the software, but from
the use of the software!
Jeff Patton!
http://www.agileproductdesign.com/presentations/index.html

Jeff Patton: Personas, Profiles, Actors, & Roles: Modeling users to target successful product design
© JensOttoLange.de 9Photo: flickr/clasesdeperiodismo - Ester Vargas
User needs first
© JensOttoLange.de 10
Technology
Business
Product
© JensOttoLange.de
Mind the gap
11
Technology
Business
Product
© JensOttoLange.de
User focus
12
Technology
User
Business
User
Product
© JensOttoLange.de
Designer = 

user’s voice
13
Technology
User
Business
Design
Product
© JensOttoLange.de 14
How?
© JensOttoLange.de 15http://www.fotosimagenes.org/erwin-komenda
Erwin Komenda!
Product Designer 

of VW Beetle 

and Porsche!
an engineer
© JensOttoLange.de
First concept sketch of beetle
16Quelle: http://www.komenda.at/bp/kaefer1936.gif
© JensOttoLange.de 17
e/atlas/personen/herbert-bayer
s-Archiv Berlin
Source: http://zk-images.com/Jan13/HerbertBayer.jpg
Herbert Bayer!
Graphic

Designer

for Dorland

ad agency!
Bauhaus artist
© JensOttoLange.de 18
SpecimenofthetypefaceArchitypebayer.JimHood

http://en.wikipedia.org/wiki/File:ABayer.pn
© JensOttoLange.de 19http://en.wikipedia.org/wiki/File:Jesse-James-Garrett_Web2.0-Kongress_2007.jpg
Jesse James Garrett!
UX designer

at Adaptive Path
© JensOttoLange.de
Elements of User Experience
20
Surface

Graphics

Images
Skeleton

Prototypes!
Wireframes
Scope!
Requirements!
Specifications
Strategy!
User needs!
Business goals
Structure

Sitemaps

Interactions
Visual: Jesse James Garrett, The Elements of User Experience, second edition 2011
© JensOttoLange.de© JensOttoLange.de© JensOttoLange.de 21
90er
50er
10er
70er
Screens
Brands & Media
Hardware
Services
Communication Designer
Industrial Designer
User Experience Designer
Service Designer
3 D Product Design Stylist Formgestalter
2 D Visual Design Gebrauchsgrafiker
2/3 D + time Interaction Design
3 D + time + space Design Thinking
© JensOttoLange.de
Functional role emerges
22
Credits: Daniel Neubürger, Usability Day 2013

http://www.produktbezogen.de/wie-man-den-richtigen-ux-designer-findet-ein-3-schritte-guide/
Design!
One fits all!
Make it pretty!
What the hell ..
yesterday
© JensOttoLange.de
Functional role emerges
23
Copywriting!
Content Design
Interaction
Design
Visual

Design
User

Research
Credits: Daniel Neubürger, Usability Day 2013

http://www.produktbezogen.de/wie-man-den-richtigen-ux-designer-findet-ein-3-schritte-guide/
today
© JensOttoLange.de 24
What is
Service
Design?
© JensOttoLange.de 25
„Customer experience …
starts when you first
hear about Amazon from
a friend, and ends when
you get the package in
the mail and open it.“!
source: http://method.com/ideas/10x10/lets-get-physical-with-services

Foto: http://commons.wikimedia.org/wiki/File:Jeff_Bezos_2005.jpg
Jeff Bezos!
CEO of Amazon
© JensOttoLange.de© JensOttoLange.de© JensOttoLange.de© JensOttoLange.de 26Source: Forrester Research, http://blogs.forrester.com/kerry_bodine/13-10-04-how_does_service_design_relate_to_cx_and_ux
User Experience!
design and development 

of digital interactions
Service Design!
design and implementation 

across entire customer journey
Customer
Experience!
design, implementation,

and management 

across entire

customer journey
How customers
perceive their
interactions with
your company.
UX
SD
CX
© JensOttoLange.de© JensOttoLange.de 27
Car2Go
Grafik: Service Design Berlin
© JensOttoLange.de© JensOttoLange.de 2828
http://www-edc.eng.cam.ac.uk/tools/
http://designingwithpeople.rca.ac.uk/methods/persona
Example !
Persona
© JensOttoLange.de© JensOttoLange.de 29
has the problem 

for our solution
Persona
Mark Stickdorn und Jacob Schneider persona development in „This is Service Design Thinking“

Credits Darstellung: Thomas Stegmann, storythinkers
© JensOttoLange.de© JensOttoLange.de 30
is benchmark 

for our ideas
Persona
Mark Stickdorn und Jacob Schneider persona development in „This is Service Design Thinking“

Credits Darstellung: Thomas Stegmann, storythinkers
© JensOttoLange.de© JensOttoLange.de 31
eases communication
among stakeholders
Persona
Mark Stickdorn und Jacob Schneider persona development in „This is Service Design Thinking“

Credits Darstellung: Thomas Stegmann, storythinkers
© JensOttoLange.de© JensOttoLange.de 32
is the hero of our
innovation story
Persona
© JensOttoLange.de© JensOttoLange.de 33
Persona is the hero of the story
wants …!
!
short business trip to Berlin.!
cycle from main station 

to customer’s office.
because ….!
!
fastest connection!
sunny day
Who?

Jens, Hamburg!
Design Coach!
Frequent cyclist
© JensOttoLange.de© JensOttoLange.de 34
A friend already
uses Call-A-Bike …
It’s a service of
Deutsche Bahn …
I learned they have
a mobile app …
© JensOttoLange.de© JensOttoLange.de 35
It’s easier to
register on a
big screen …
© JensOttoLange.de© JensOttoLange.de 36
Where to go?

Maybe
„services“ …
© JensOttoLange.de© JensOttoLange.de 37
© JensOttoLange.de© JensOttoLange.de 38
© JensOttoLange.de© JensOttoLange.de 39
How much?
© JensOttoLange.de© JensOttoLange.de 40
Yes,
Bahncard!"
Complicated!
© JensOttoLange.de© JensOttoLange.de 41
Not that
easy …
© JensOttoLange.de© JensOttoLange.de 42
123456709
876543T_S9
© JensOttoLange.de© JensOttoLange.de 43
Arrived in Berlin …
Where
to go?
© JensOttoLange.de© JensOttoLange.de 44
:-)
© JensOttoLange.de© JensOttoLange.de 45
© JensOttoLange.de© JensOttoLange.de 46
?
© JensOttoLange.de© JensOttoLange.de 47
© JensOttoLange.de© JensOttoLange.de 48
?
© JensOttoLange.de© JensOttoLange.de 49
Bahncard?"
EC Card?
© JensOttoLange.de© JensOttoLange.de 50
Number
out dated
© JensOttoLange.de© JensOttoLange.de 51
I call via
app …
© JensOttoLange.de© JensOttoLange.de 52
© JensOttoLange.de© JensOttoLange.de 53
Ok, let’s
go!
© JensOttoLange.de© JensOttoLange.de
The story of the customer journey …
54
Provider
known!
app?
how?

register?

pricing? where? how? aha!call! ok!
Customer
© JensOttoLange.de© JensOttoLange.de
… with all its obstacles…
55
Provider
known!
app?
how?

register?

pricing? where? how? aha!call! ok!
Customer
© JensOttoLange.de
known!
app?
how?

register?

pricing? where? how? aha!call! ok!
© JensOttoLange.de
… is a story of interactions that …
56
Provider
Customer
ResolutionJourneySetting
Line of Interaction
© JensOttoLange.de
known!
app?
how?

register?

pricing? where? how? aha!call! ok!
© JensOttoLange.de
… spans time and multiple touchpoints …
57
Touchpoints
afterduringpre
© JensOttoLange.de
known!
app?
how?

register?

pricing? where? how? aha!call! ok!
© JensOttoLange.de
… supported by corporate functions
58
Brand: frontstage staff & frontend systems
Operations: backstage staff & backend systems
afterduringpre
© JensOttoLange.de© JensOttoLange.de
Horizontal flow vs. vertical silos
59
Marketing ProductsSales / POS Service Social Media
Software Development
Human Resources
Finance
Perceive Select Buy Get Help Recommend
© JensOttoLange.de© JensOttoLange.de
Collaborate to ease the flow
60
Marketing ProductsSales / POS Service Social Media
Human Resources
Finance
Software Development
Perceive Select Buy Get Help Recommend
© JensOttoLange.de 61
Customer
Journey and
Persona are the
core artefacts of
Service Design
© JensOttoLange.de 62
Technology
User
Business
Design
Product
What?
Why?
How?
desirable
viable
feasible
Design Thinking
© JensOttoLange.de 63
Cross-functional teams to co-create
© JensOttoLange.de© JensOttoLange.de 64
Open work spaces
Foto: Jens Otto Lange, Betahaus Berlin
© JensOttoLange.de© JensOttoLange.de
Design Thinking process
65
Visual: Process of D-School Potsdam
Problem space Solution space
© JensOttoLange.de 66
Design Thinking
is a method 

and a mind set 

to innovate
© JensOttoLange.de
known!
app? where? aha! ok!
© JensOttoLange.de
Brand: frontstage staff & frontend systems
Operations: backstage staff & backend systems
afterduringpre
67
how?

register?

pricing? how? call!
Focus on broken experiences
© JensOttoLange.de 68
Design research tools
Designer at LeGrand http://www.youtube.com/watch?v=pDOBLJkOZ6Y
MAKESAY
DO
© JensOttoLange.de 69
Create a persona (sample)
© JensOttoLange.de 70
Point of View: Frame the problem
© JensOttoLange.de© JensOttoLange.de 7171
Co-create ideas
© JensOttoLange.de© JensOttoLange.de
Co-creation is team building
7272
Theme
Theme
Theme
Silos Team
SolutionProblem
© JensOttoLange.de 73
Story telling as a Prototype …
© JensOttoLange.de 74
Assign ideas to story
© JensOttoLange.de 75
Tell to test, listen to feedback
© JensOttoLange.de 76© JensOttoLange.de
Paper Prototyping first!
© JensOttoLange.de 77
Collect lots of ideas
http://www.gv.com/lib/the-product-design-sprint-divergeday2
© JensOttoLange.de 78
Bodystorm interactions
Source: 2. Creativity Jam Hamburg
© JensOttoLange.de 79
Work out critical interactions
© JensOttoLange.de
Discuss!
interaction
storyboards
80
© JensOttoLange.de 81
Test with paper prototypes
© JensOttoLange.de© JensOttoLange.de
Elevator Pitch as a product vision
82
For < user >, 

who < need >, 

< name > is a < category >, 

that < main benefit >.!
!
Other than < main alternative >!
we < Unique selling proposition >.
82
Format nach Geoffrey Moore „Crossing the Chasm“
© JensOttoLange.de© JensOttoLange.de
Think and make iterations
83
Jeff patton Building Better Products Using User Story Mapping
Idea … from rough to fine
© JensOttoLange.de 84
Digitalize !
prototypes
source: Foto Jens Otto Lange, 3. Creativity Jam Hamburg!
Video zu Prototyp: https://www.youtube.com/watch?
v=ms51rAKmI_E&list=PLJUPJYghMbrTCDwAykaxvx8o7ZYSM4TdC

Pop App auf https://itunes.apple.com/de/app/pop-prototyping-on-paper/id555647796?mt=8
© JensOttoLange.de
Keynote & Powerpoint
85
© JensOttoLange.de
Wireframe
86
Simple Moqups-Wireframe (online only)
source: Jens Otto Lange, Projektbeispiel für Verlagssite
Magazintitel
© JensOttoLange.de 87
Interfaces to
development
© JensOttoLange.de© JensOttoLange.de
Whirls instead of waterfalls
88
the big jump
step by step
© JensOttoLange.de 89
Empiric process control
Risk reduction
© JensOttoLange.de© JensOttoLange.de© JensOttoLange.de
Fuzzy goals
90
digital!
Product
new = unknown!
intuitive!
empiric!
open-ended
Goalcorridor
© JensOttoLange.de
Cone of Uncertainty
9191
final!
requirements!
Concept 

draft
http://en.wikipedia.org/wiki/Cone_of_Uncertainty
shared

vision
Release
Project length
4 x
2 x
1/2 x
1/4 x
High risk
zone
Varianceofestimation
Goalcorridor
digital
Product
© JensOttoLange.de 9292
http://en.wikipedia.org/wiki/Cone_of_Uncertainty
4 x
2 x
1/2 x
1/4 x
Design to define

Requirements with Design Thinking
Agile to refine

Development with Scrum
digital 

Product
Varianceofestimation
final!
requirements!
Concept 

draft
shared

vision
Release
Project length
Goalcorridor
High risk zone
© JensOttoLange.de 93
User Story Mapping
© JensOttoLange.de
Contruct user story map
94
• Customer Journey: What wants the user do with the software? !
• Which functions offers the software to the user?!
• Successive (horizontal) or optional (vertical) interactions of user with software?
Jeff Patton: Building Better Products Using User Story Mapping
Customer

Journey
vertical=„or“
Funktions
© JensOttoLange.de
Prioritize user stories
95
• Which features are needed to build a minimal viable product !
• Priotitize to fullfill user needs and business value!
• Value is based on business goals
Jeff Patton: Building Better Products Using User Story Mapping
Customer

Journey
Functions
vertical=„or“
-optional+
1. Release

Minimal Viable Product
2. Release
3. Release
© JensOttoLange.de 96
Innovation Story

Customer Journey

Design Thinking
Digital
Interaction
Story

Screen Flow

UX Design
Scrum User Story

description of feature

Agile Development
Foto: http://commons.wikimedia.org/wiki/File:Russian-Matroshka_no_bg.jpg?uselang, erstellt von FangHong, bearbeitet von Gnomz007
© JensOttoLange.de
Designers work with product owners
97
Product
backlog
Sprint
backlog
Sprint
Planning
Why & What?

Requirements: Product Team
How?

Delivery: Dev Team
Customer
Designer
© JensOttoLange.de
Product team 2 sprints in advance
98
Sprint
Product Team

Discovery
Support DesignReview
SprintSprint
Dual-Track Scrum
Research
http://www.svpg.com/dual-track-scrum/
98
Innovation Track
Development Track
Developer

Delivery
print
Marty Cagan - Silicon Valley Product Group
© JensOttoLange.de 99
Design to define!
Agile to refine
Design Coach!
Digital Innovation Facilitor!


Workshops - Training - Projects

Linkedin me!
Xing me!
@jensottolange!
www.jensottolange.de
100
Digital Innovation Facilitator!

design-meets-agile-mixit14