Service blueprints as an indispensable step toward successful digital services. A tool to orchestrate touchpoints and stakeholders in multi channel and cross-channel services. Presented at The Web and Beyond, Amsterdam 2012.

1. Service blueprints
An indispensable step towards successful digital
services
Susanne van Mulken
The Web and Beyond
September 26, 2012, Amsterdam
1

2. 2

3. Contents
• Challenges for ux designers
• What are service blueprints?
• How do they work in practice?
- Lessons learned
- Next steps
3

4. Ux design is getting ever more
more lexciting!
chal enging!
4

5. “Always and everywhere”
Companies want their products and
services available always and everywhere
• Through digital self-service touchpoints
• On multiple devices
• Across multiple channels
5

6. Existing
processes
are too
complex for
self-service

7. Digital future Website
is multi-
channel &
cross- Mobile
app
channel Call
centre
Repairer

8. Multiple
devices,
multiple
contexts
http://www.flickr.com/photos/yagankiely/5270761918/

9. Management
Ever Marketing
more
stake- Business
holders
Legal
IT

10. Increased
dependency
of back-end
systems

11. Challenges of digital self-service
• Many existing processes need redesign from a self-service perspective
• Coherence in multi-channel services
• Seamless cooperation between touchpoints
• Alignment of ever more stakeholders
• Heavier dependency of information from back-end systems

12. Screens page 1
A- Idle screen A1 - Login screen A1.1 - Home B - Control menu tree (Lv. 1 - collapsed) B - Control menu tree (Lv. 1 - expanded)
Back Exit
8
Mockups
<Project name> 1 Heating 1 Heating
<Project build/Software version>
Local controller login 50 2 Cooling 1.1 Boiler A
25 75
Recently used
2
0 100 3 Sunscreens 1.2 Boiler B
Login:
1 Find by number
Control 4 Lighting One 1.3 <Menu item>
Password: 1 3
2
5 Lighting Two 1.4 <Menu item>
Start
6 Lighting Three 1.5 <Menu item>
Q W E R T Y U I O P
7 Meeting room "Green" 2 Cooling
Setup Alarms
A S D F G H J K L 5
Soft keyboard area 4 5
8 Meeting room "Purple" 3 Sunscreens
Login
2 Z X C V B N M
?
1 .
. 4 Lighting One
.
.?123 space return 5 Lighting Two
Help Touchscreen
settngs 6 Lighting Three
Login Clear 6 7
4 3 7 Meeting room "Green"
1. Login button 1. Login IDs 1. Control button (See the page "menu navigation pattern" for (See the page "menu navigation pattern" for
Goes to Login screen. (Login functionality is Optional: 1) Locally-stored login ID's are Goes to custom built control menu tree. detailed comments) detailed comments)
optional on the local controller.) displayed in a drop-down list or 2) ID's are not Depending on login authorization users get
stored, a regular text input area for login name. different views e.g. by installation part or room.
2. Background image
Optional. (Becomes more relevant in case 2. Password entry field 2. Recently used button
touchscreen in placed outside the instalation Tapping in this field brings up a modal soft Shows a modal panel with the five most-
cabinet such as a meeting room or hotel room) keyboard to enter password. recently-used menu tree items, allowing direct
navigation to them.
3. Clear button
Resets Login and Password form elements to 3. Find by number button
default value. Allows direct navigation to a specific menu tree
item by numeric input.
4. Login button
Validates login and password combination, and 4. Setup button
if successful goes to Home screen. Goes to the default Setup menu. This menu is
structured based on the physical installation
5. Soft keyboard structure as used by the installer.
This keyboard only appears on screen when
the user taps the password field. Clicking 5. Alarms indicator
return hides it again. Shows the most urgent status of alarms that
have not been viewed or suppressed. With for
example orange and red color .
6. Help button
Goes to Help main screen.
7. Touchscreen settings button 8. Exit button
Goes to Touchscreen setup screen. (Under this Logs current user out of system and goes to
button is functionality such as language Idle screen.
selection, display and sound settings, etc)
7/9
OmniGraffle | Wireframe Template AnnekeL Modified on 23/06/2009 LocalGUI-TCX-V2.1.graffle
Wireframes Style guides
Sitemaps Typografie
Frutiger LightCondensed
Need for orchestration Frutiger Condensed
Frutiger BoldCondensed
Vertelfont Regular
Service blueprint
Vertelfont Bold
?
Storyboards
Personas
HiFi Prototypes
12

13. What are service blueprints?
13

14. Services - Frontstage and backstage
Physical
evidence
Physical
Frontstage
Customer evidence
employee
actions
frontstage actions
Backstage
backstage employee
actions
Support
processes
(& IT)
14

15. Restaurant service (example)
Physical Website
Restaurant Waiter’s Interior
Menu Menu
Table dress
Bill
building uniform design up
evidence
Customer Online Study
Arrival Hand coat Take a seat Order Wachten Eat & drink Pay
actions reservation menu
Line of external interaction
Frontstage Welcome, take
Explain Bring &
employee coat, lead to
table menu
Take order Serve meal
explain bill
actions
Line of visibility
Backstage Make Register
Bring coat to Bring order
employee reservation for
customer
cloakroom
table as
to kitchen
Prepare bill
‘occupied’
actions
Line of internal interaction
Support Prepare
meal
Reservation Reservation Update cash Cash
processes system
Cloakroom
system register register
(& IT)
15
Update stock

16. In practice (at Informaat)
16

17. How do we view service blueprints at Informaat?
1. Link between service design and touchpoint design
2. Heart of an interactive ux design platform
17

18. 1. Link between service design and touchpoint design
Service design Touchpoint design
Service blueprint
Customer journey Hi-fi prototype
18

19. Service blueprints - Different forms and styles
Dialing IBM-HELP to get assistance with Lotus Notes
Carrie Chan | IBM T.J Watson Research Center, Hawthorne NY | 6.15.07
Blueprinting ideas v.4
service evidence
problem with Lotus Lotus Notes Ticket number
Notes Mail and Mail and
Calendar syncing Calendar syncing
works
customer steps
DIAL NAVIGATE PRE-RECORDED MENU TALK TO AGENT WAIT FOLLOW AGENT’S STEPS TO SOLVE PROBLEM PROBLEM HANG UP?
SOLVED
hazard line
Dislike calling call centers how long am i being
onstage
put on hold for?
i’m pressing ‘3’ and
nothing is happening...
6D1511 is before
6A1511 in the menu
choices... did I hear is he even listening to
6D1511 correctly? me? he seems to be what is a ticket number?
he’s assuming i know all the typing a lot. and not
customer’s journey
IBM language even though I’ve paying attention.
repeatedly told him I was new
finally, the agent is back he’s talking really fast
he’s apologizing for soft-
ware malfunction - is this
the same problem i was
just having? or should i be
worrying about something
else?
he solved the
problem!
Twitter Experience
line of of visibility
area visibility
Physical Tweet Blog Post Comment Form Tweet Twitter Profile
DM button on Twitter
URL on Twitter profile
Evidence Profile
representative
service
User
Give introductory speech. Ask for employee serial Present customer with menu options to Introduce yourself. Ask customer what Look up information regarding Ask what error message Proceed to follow steps outlined in documentation.
Actions Confirm that the Ask customer to write down the ticket number.
number. redirect call. Apologize for software problem they’re having. Lotus Notes Mail and Calendar the customer is getting. Clicks on link customer’s problem
Reads blog post Email this ticket number to the customer.
Comments on post @Replies to Tweet Follows on Twitter DMs over Twitter Visits Website
script
malfunction. syncing on database. is solved.
Redirect call after customer inputs a Thank customer for calling IBM HELP.
choice. Ask if they are on or Ask if the customer
off site. has any other
problems.
provider’s steps
Line of Interaction
backstage
WAIT FOR CALL DIRECT CALL TO PROPER DEPT. INTRODUCTION GET PROBLEM FIND SOLUTION TO PROBLEM WALK CUSTOMER THROUGH PROBLEM SOLUTION CONCLUDE GIVE TICKET NUMBER
Onstage
Contact Post to Twitter Publish blog post Responds to comment Respond to @Reply Analyze followers Respond to DM Analyze web logs
Person
application
backstage
processes
P P P P P P P P P P P P P P
support
Line of Visibility
implementation account executives product executives (BTO) operational executives (SO)
Backstage Review, edit, &
Review, edit, & Review, edit, & Review, edit, &
Contact approve blog post
approve comment
approve responce approve responce
reply
Person
Line of Internal Interaction
Support CoTweet ExpressionEngine ExpressionEngine CoTweet Metricly CoTweet
Metricly & Google
Processes Analytics

20. Service blueprints at Informaat
Blueprint: Sales support
20

21. Ans is in de buurt Ans vraagt advies Haar nieuwe polis is klaar
Ans
Touchpoints
Frontstage
services
Backstage
services
21

22. PREVENTIE AANVRAAG B
18 jaar
Zelf werk/
opleiding Werkgesprek
gevonden met AD of RIB
voor de Wajoger
Gebeurtenissen
Sociaal Begeleiding
16 jaar: 17,5 jaar Nakijken
Aanvragen medisch en Samen met AD Terugkoppeling (gedeeltelijke)
(evt rondom stage) Eerste Terugkoppeling participatieplan
wajong arbeidskundig Opstellen beslissing krijgen Uitkering
Informatie Adviesgesprek beoordeling en goedkeuren
raadplegen onderzoek participatieplan ontvangen
op school 18 jaar krijgen
laten doen
Geen werk
kunnen vinden
plaatsings naar eig
gesprek kunnen
potentiele brieven sch
werkgever netwerk
Contact leggen en on- Voorlichtng Wajonger toegwezen Kennis nemen van Werkgesprek Signaal naar SMZ Kennis nemen van (optioneel) Over- Op zoek naar
derhouden met Pre- geven aan pre- krijgen. SMO en oordeel leiden dat participatieplan beslissing SMZ dragen aan reinte- goede match
ventief netwerk wajongers gereed is gratie bedrijf
(VSO’s, instellingen.)
Arbeids Deskundige
Taken van de
Uitwerken par- Contact opnemen
In kaart brengen - SMZ verzoeken om
ticipatieplan met potentiele werk-
potentiele inst- Wajonger vastleg- een beoordeling
gevers
room gen.
SMZ voorzien van Participatieplan op- Begeleiding sollici-
bekende gegevens sturen naar Wa- taties
vanuit het netwerk in jonger
de pre-wajong fase.
NIEUWE WAJONG Hoe deze kaart
in te vullen:
Help mee het proces te verbeteren
22

23. Service blueprint 1 2 3 Service blueprint
"Virtual route" Claims "Virtual route" Claims
Claims service blueprint.graffle Mon Sep 10 2012
More or less Expertise lookup (postcode lookup of contractors);
generic
provisions to Policy coverage check: quick check to see if one of
support the your policies are applicable
decision to
claim or not: Generic BM calculator: easily readable tool from
which to read what happens to BM under what
conditions
Phase
Damage occurs Claim information Determine approach Report claim
User activity
General
Online
claim information Select product
Website (website)
E-mail Online
R3+ R3+
SMS Generic BM calculator
Expertise lookup R3+ Channel
Policy coverage check (Cust. dom.) choice? Offline
No No Offline
General Claim
Offline Damage Pursue Yes Yes Consider Determine costs
affects Yes Continue Yes Claim via CCC
claim information not Review policy coverage Stop
occurs claim? premium/ for self-settlement claim?
(policy, brochure) claiming?
BMI?
No No
Claim via third-
Damage not party repairer Stop
claimed
Other channel
Mobile phone
System activity GetPropositionData GetNetworkContractors GetPolicies
System SAP SAP
23

24. What works well
Schade melden (voorbeeld)
• Holistic view of service
MarketingComm /
Mobiele Mobiele
Physical Mobiele
ProductDev Website
• All relevant touchpoints app app app
evidence
• Visual, easy-to-understand
language Customer Marketing / Foto’s
Schade- UX Schade Schade
actions proces
opvragen
nemen van
schade
aan- details
melden melden
• All stakeholders ‘on board’
Frontstage
• Eases reality and feasibility checks
(employee) Proces Gegevens Gegevens
actions HR
uitleggen opnemen opnemen
Operations
Backstage
Dossier
(employee) aanmaken
actions
Support
processes IT
ERP Klantbeeld
& IT
24

25. Room for improvement
• Some swimlanes are less relevant
Service blueprint / FBTO.nu - Je verzekeren - Nieuwe klanten - Online Versie: Ccncept v. 0.5
Pagina 1 van 5
Service blueprint / FBTO.nu - Je v
• Can quickly get big and complex
Kan deze premieberekening op
Autotrader plaats vinden qua BDS,
Phase
Ontdek Speedtrap en Look&feel?
Oriënteer
Klant
akkoord Nee Lees tip over FBTO, klik
Lees tip over FBTO
User actions
Ga naar FBTO homepage ? deeplink naar site
• Typical aspects of digital, multi-
Beantwoord relevante
vragen Lees suggestie Lee
Kies thema/event Dit is mogelijk een aantal
dekkingen tegelijk
User interface voor FBTO
website wordt gevormd Ja
o.b.v. Customer Portal (CP)
channel services stay too implicit X Partner sites
X X
X
X
Touchpoints
Sociale netwerken FBTO.nl
Partner sites
Partnered widgets Fora FBTO.nl
Sociale netwerken
FBTO website FBTO.nl Partner sites
Google Partnered widgets
Banners op andere sites Sociale netwerken
Partnered widgets
Line of interaction
A
Source heeft
Front stage actions
Nee
profieldata?
Deeplink naar dialoog op
site To
Geef suggestie(s) incl
Geef samenvatting van argumentatie(s)
Ja
antwoorden weer
Toon thema's en events Nee
Bied mogelijkheid / Vraag Stel relevante vragen
toestemming klant voor t.a.v. thema/event Klant
ophalen gegevens akkoord?
A
Line of visibility
Ja
Bep
Voorinvullen bekende
Sla bezoek aan de site op
Back stage actions
gegevens obv intentie, b
in cookie A: Optioneel kan de klant source, profiel etc Bepaal aanbod / H
via deze weg ook zijn suggestie incl premie
(antwoorden) F
profielgegevens uit het
sociaal netwerk op laten Haal profiel gegevens Haal relevante vragen op
halen op uit sociaal netwerk o.b.v. intentie Sla antwoorden op in
profiel sessie variabele
intentie komt van thema/
event/metadata bij banner, SAP RTOM?
of van bep. proces dat klant SAP PM
Line of internal interaction Waar zijn de vragen die kiest (bijv auto premie
FZB
FLS
gesteld moeten worden om berekenen) etc.
de suggesties te bepalen
processes & systems
opgeslagen? Is dit ook in
RTOM of elders?
Supporting
BRE (SAP RTOM?)
Service blueprint
25

26. Informaat’s service blueprint
• Adaptation of the basic format Service blueprint
EXPLORE INSURANCE
- service phases INQUIRE CALCULATE PREMIUM
Reference dialogues Select coverage
TOUCHPOINT AGNOSTIC Provide premium determinants
User actions
& receive quote
- user actions = customer story START
YES
Provide ID
Vehicle
identified? YES Vehicle price
> €75K?
NO
Review + tune
object
characteristics
Provide
birthdate
Search
address
without
postal code?
NO
Provide Postal
code + House
number
Address
found? YES
Provide
damage
free years
Choose
coverages
Receive
calculated
premium
+ logic
Calculate NO
premium based NO YES
on vehicle
id Provide street, house number,
residency
NO
Select vehicle characteristics
Customer portal
- each touchpoint its own
RESPONSIVE WEB
Employee portal
swimlane
INTERNAL WEB DESKTOP
Touchpoints
Mobile app
iOS
- 1x service provisions instead Mail
@
of 2x employee actions
provisions
Service
Calculate
Provide Gather premium determinants Get coverages premium &
product info provide quote
- layers for extra information
processes & IT
Support
ERP ERP CRM KCS RDW ERP
• Interactive version
Adapted service blueprint
27