Framework and tools for UX and Service Design

Framework and tools for
UX and Service Design
Show me yours and I’ll show you mine
KONTRAPUNKT

Kontrapunkt © 2014 2/12
We are from Kontrapunkt
Katja Egmose
Senior Service Designer
Gunvor Jøsendal
UX Designer &
Project Manager
Kristina Kristensen
Junior Digital Designer

The framework
/ At the beginning (of a creative process)
/ The project dilemma
/ Considering the context
/ The phases
/ The project model
/ The toolbox

Some of our tools
/ Blueprints
/ Personas
/ Prototype testing
/ Service design canvas
What are we going to talk about?

At the beginning...

The project dilemma
Time
Knowledge
Decisions

Considering the context
/ Stakeholders
/ Timing/ deliveries
/ Project team experience
/ Budget
/ Users
/ Goals
/ SWOT
/ Technology
/ Trends
/ Values
/ +++

The Phases
Phase 1 Phase 2 Phase 3 Phase 4 Phase x
Discovery
Strategy
Project
Develop
Define
Concept
Design
Roll out
Execution
...Deliver
Documentation
Implementation

Phase 1 Phase 2 Phase 3 Phase 4
The Project Model
Phase x

Flexible framework +
wide range of tools
Overprepared and understructured

Gameplan
Personas
User journeys
KIS-workshopCard sorting
Brainstorm exercises
Wireframes
Concept models
Best practise scan
Moodboards
Context workshop
Dilemma exercises
Interviews
Prototype testing
Shadowing
Blueprint mapping
and analysis
Idea catalogue
Parking lot
Desk research
Design principlesStyle tiles
Stakeholder maps
Concept scenarios
Huddles
Mind maps
Use cases
Thinking hats
Huddles
Wingman
I DO ART
Team spiderweb
Toolbox
Service design canvas

4 of our favourites
Prototype testing
Personas
Blueprint mapping
and analysis

Blueprint - what and when?
In the beginning of a project, in the ‘discovery’ phase.
/ Blueprint
A method or technique that helps to improve an existing or future service.
/ Using existing user journeys
As part of a blueprint they describe what the user experiences before, after and while
experiencing the service
Both methods are used to map out all the various interactions and actions that occur when
a customer and company meet, making it possible to zoom in on details for specific touch
points e.g. ticket purchase, as well as zoom out to get an overview of overarching areas e.g.
static signage.

Why a Blueprint?
/ Customers expect an excellent travel experience
/ They don’t distinguish between touch-points when experiencing the service(s).
If part of the information is not delivered the right way or not at all then they
do not experience their travel as excellent (world class excellence was a goal).
/ The blueprint helps to keep an eye on the actual actions
of the passengers, and not just what they say about their travel.
It also provides transparency as to the internal organisation, connected
to each of the touch-points and experiences.

KONTRAPUNKT© 2013
HEADER
BACKSTAGE
FRONTSTAGE Xxx Xxx Xxx Xxx Xxx Xxx Xxx Xxx XxxXxx
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quis-
que euismod ullamcorper nulla.
Lorem ipsum dolor sit amet, con-
sectetur adipiscing elit. Quisque
euismod.
que Quisque non pharetra erat.
sectetur adipiscing elit.
consectetur adipiscing elit.
euismod ullamcorper nulla.
feugiat felis. Sed ornare ipsum.
euismod ullamcorper nulla, tem-
por feugiat felis dignissim quis.
sectetur adipiscing elit. Quisque.
que euismod ullamcorper nulla,
tem n.
Lorem ipsum dolor sit amet, tem-
sectetur adipiscing elit. Qipsumit.
Lorem ipsum dolor sit amet, con.
euismod ullamcorper nulla, tempor
feugiat felis dignissim quis.
One of them sees the digital signs
showing the station, and they
move a little bit away from the
door to a place where they can
still see the digital signs.
At Kgs. Nytorv she gets off and goes to the elevator where there
is a queue of people. One with a bike and a lot of ‘ordinary’ people.
tempor.
tempor.
euismod ullamcorper nulla, tem.
HEADER
consectetur adipiscing elit. Quis
feugiat felis. Sed ornare ipsum. Lorem ipsum dolor sit amet, felis
dignissim quis. Sed ornare ipsum.
Lorem ipsum dolor sit amet.
HEADER HEADER HEADER
Xxx Xxx Xxx Xxx Xxx Xxx Xxx Xxx XxxXxx
Xxx
USER
JOURNEY
XXX XXX
XXX XXX
XXX XXX
XXX XXX
XXX XXX
zzzzzzyyyyyyxxxxxx
Xxx
Xxx
Xxx
Xxx
Xxxxxxxxx Xxx
Xxx
Xxx Xxx
Xxx
Xxx
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
A Blueprint

Blueprints
Pros
/ Creates a shared overview and understanding over the clients current customer
touch-points, including an indication of organisational ownership
/ Creates a tool for everyone on the project to ‘put ourselves in the passengers shoes’, and
examine the clients service through the users experiences
/ Identifies current gaps and challenges of the current service set up, as well as identify areas
with opportunities for change and/or potential for improvement.
Cons
/ Takes a lot of time to uncover and discover all touch points, user interactions
and organisational set-ups
/ There is a risk to be wrapped up in details and forgetting to see the bigger picture
/ It can be difficult for the client to review the blueprint because of the amount of
details and because it will most likely be a new tool.

How to do existing user journeys
/ Observe or follow the users when they are experiencing the service
/ Be more than one person observing, we are normally two. One who focus on
the user and one to focus on the surroundings
/ Do a follow up interview on things that are not necessarily visible e.g. tickets
/ Summarise the user stories to a max. of five
/ Draw them up for the blueprint but remember that they might not follow the existing ‘flow’
KONTRAPUNKT© 2013
HEADER
BACKSTAGE
euismod.
que Quisque non pharetra erat.
tem n.
sectetur adipiscing elit. Qipsumit.
Lorem ipsum dolor sit amet, con.
At Kgs. Nytorv she gets off and goes to the elevator where there
is a queue of people. One with a bike and a lot of ‘ordinary’ people.
tempor.
tempor.
HEADER
consectetur adipiscing elit. Quis
feugiat felis. Sed ornare ipsum. Lorem ipsum dolor sit amet, felis
dignissim quis. Sed ornare ipsum.
Lorem ipsum dolor sit amet.
Xxx
USER
JOURNEY
User 2
User 3
User 5
User 4
User 1
zzzzzzyyyyyyxxxxxx
Xxx
Xxx
Xxx
Xxx
Xxxxxxxxx Xxx
Xxx
Xxx Xxx
Xxx
Xxx
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

How to do frontstage and backstage
/ Observe and/or follow the personnel when they are working on the service
/ Categorise / group things to not get into too many details
/ Colour code it helps to visually show larger perspectives
/ Use and learn the terms the client uses
/ Be thorough and cover all relevant aspects
HEADER
BACKSTAGE
tem n.
tempor.
tempor.
HEADER
User 3
User 5
User 4
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Blueprint post it’s mock up

How to start a blueprint
/ A large wall in your office
/ A lot of post it’s in different colours
/ The researchers and designers with notes from their field work
/ A representative from the client
/ Pens and pencils in colours
/ Big pieces of paper
/ Coffee and tea etc.

Personas - what, when and why?
/ A fictional character representing a user archetype
Descriptions based on a combination of ‘real’ data, field studies and
personal experience.
/ Why use personas?
Good way of getting a common understanding and language in regards
to the end users.
A tool to help qualify and create perspective when considering solu-
tions.
Helps with keeping track of needs and expectations, when there are
several target groups involved.
/ When to use a persona?
The process of creating the personas serve as a constructive part of in-
itial mapping and context discovery, and throughout the project they
serve as a tool for both the internal design process and external com-
munication.

What could a persona look like?

Examples

Creating personas
Interviews and exercises with
representatives from the defined
target groups.
Documentation and summary of
insights, tendencies and quotes.
Based on the findings, the
design team puts together and
describe a group of personas.

Using the personas
Use and verbalize personas in
communicating the reasoning
behind your design choices.
Present back to the client, hearing their
feedback and insights.
Create common language and under-
standing about the basic user needs and
common contexts.
Create a format for them, making them
handy reminders on a day-to-day basis.
Provides a common language for the
design team, e.g.. for evaluating, qual-
ifying and sparring in different solu-
tions.

Pros
/ Easy to do (and you don’t need a lot of materials)
/ Fun
/ Great communication tool (both internally and with the client)
/ Double win: Good exercise for clarification and mapping a field AND a good you get a
tool you can use throughout the process.
/ Helps turn (and keep) the ‘users’ actual people
/ Makes a good and easy-to-use tool for keeping the end-users top of mind

Cons
/ Not ‘real’ - and should not be used as science or as a substitute to testing
/ Not very precise (there are a lot of assumptions involved)
/ It’s hard to make sure the persona does inherit too much of your own wants and needs
/ Can be hard for some people to understand (e.g.. in distinction to target groups, market
research )
Personas pros and cons

What do you need to make a persona?
/ Input from and about the relevant target groups (interviews, work-
shops, data, surveys, studies etc.)
/ A lot of post it’s and pictures of different types of people
/ Your whole design team to provide input, and help you shape the
personas
/ A checklist for basic info that should be covered for each persona
/ A framework for documenting the results, making them easy to use
and share

Paper prototype testing - when and why?
Do your prototype testing when it makes sense!
/ Early in the process before designing
/ When changes can be made easily
Why?
/ Prototype testing can clarify design issues
/ It can give you and your client new information about your users
/ It can be used as a reference tool
/ It can create understanding for you and your client

What we had in the room
/ Two types of paper prototypes
/ A lot of post it’s
/ An observer taking notes and pictures
/ A representative from the client
/ Pens and pencils in colours
/ Big pieces of paper
/ A camera and computer

/ The context
How often do you go online?
What kind of websites do you like?
How often do you use the internet in terms of finding travel updates?
When do you check for updates in terms of traveling?
How many times do you check for travel updates?

/ About the prototypes
What do you think of it?
What do you push when you want to...?
What do you think will happen if you...?
Is this relevant for you?

/ Summary
Which of the prototypes do you prefer? And why?
What should we do to make it even better?
Is there something else we haven’t talked about?
Questions when testing

Generic symbols and colours

Pros
/ Creates knowledge about your users
/ Your clients may see new perspectives in their users
/ Can be used as an reference tool between you and your client
/ Can be used as a verification for your ideas

Cons
/ Users do not always choose the designers favourite
/ It takes time to make all the necessities such as questions, prototypes,
find users (or get your clients to), a place to test etc.
/ Some clients have a hard time understanding why testing is necessary

Live prototype testing pros and cons

Service design canvas - what and when?
When a service idea or concept is described or has been through its first round of tests its is
important to consider a wider context and look at the concept or service proposition from all
perspectives.
Different tools can be used to validate or justify the concept.

We use the service design canvas as part of the introduction to the different service
propositions in our idea catalogues which often describes the concepts behind the
service propositions.

Public tools - making them your own
Business model Canvas for getting a fairly detailed perspective on a business case

Title of service proposition
Input
Users
What are the key issues and areas for opportunities the
users can benefit from improvement on ?
Best practice og trends
What are the best practices and trends that can inspire the
service ?
Organisation
What are the vision and values that can be emphasized by
the service
Results
Implementation
How will the service be implemented, technology
and organisational factors included ?
Effect
What effect will the service have on the market ?
Future potential
What effect will the service have long term on the
business ?
Proposition
Describe the concept, including who it affects
and involve.
The business
Investments
What are the build and on-going investments ?
Describe the obvious necessary actions and implementations.
Revenue
What opportunities for revenue generation are there ?
Service succes
What are the measurable goals for the service and what are the
non measurable goals ?

/ Input
Helps to keep focus on the users, the trends and the vision, displaying the wider context.
/ Proposition
Description of the concept.
/ Results
Displays the anticipated opportunities and considerations for the service.
Title of service proposition
Input
Users
What are the key issues and areas for opportunities the
users can benefit from improvement on ?
Best practice og trends
What are the best practices and trends that can inspire the
service ?
Organisation
the service
Results
Implementation
How will the service be implemented, technology
and organisational factors included ?
Effect
What effect will the service have on the market ?
Future potential
What effect will the service have long term on the
business ?
Proposition
Describe the concept, including who it affects
and involve.
The business
Investments
Revenue
Service succes

/ The business
As designers we don’t calculate the exact amount of money a service can generate through
its value to the users or organisation - but in the service design canvas we relate the service
to relevant business perspectives
Organisation
the service
business ?
The business
Investments
Revenue
Service succes

Pros
/ Can be used to create a shared understanding for designers and clients
/ Takes the first step at addressing the business side of the proposed initiatives
/ Provides a wider context including users, trends, potential and KPI’s
Cons
/ It is in some ways a speculative model
/ It is only a light weight version on what really needs to be done
/ For some UX designers it can be difficult to work with as it is something of a stretch from their
usual activities

How to start working with the canvas
/ Download our template or create your own and print out in A3
/ A lot of post it’s to collaborate on suggestions to the A3’s
/ Pens and pencils
/ Hold a workshop and involve the researchers, strategists, designers
project managers that has worked on defining and sketching
the service proposition
/ Ask for help if there is something you don’t understand. Anyone
trained in sales and marketing can help you understand more about
revenue models

Thank You for listening
Contact:
Katja Egmose, Senior Service Designer, keg@kontrapunkt.com
Gunvor Jøsendal, UX designer & project manager, gjo@kontrapunkt.com
KONTRAPUNKT

Framework and tools for UX and Service Design

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Similar to Framework and tools for UX and Service Design

Similar to Framework and tools for UX and Service Design (20)

Recently uploaded

Recently uploaded (20)

Framework and tools for UX and Service Design