Survival

Kit
IBM Designcamp

IBM Design
The mission of IBM Design is to help IBMers improve the usability and usefulness of
our offerings. Our approach, IBM Design Thinking, changes the way the company
creates valueeverything from the way we make decisions to the way we collaborate
to the way we design our offerings. This Survival Kit supports IBM Design Thinking
through our skills development initiative, IBM Designcamp. For more information on
Designcamp, contact dcamp@us.ibm.com.
Our portfolio values:
Works Together

Works the Same

Works for Me

Tight integration across

core technologies and
interoperability with
complementary ones

Common look and feel

when targeting similar
personas

Focused on the user

across the entire offering
lifecycle (learn, buy, adopt,
maintain)

design.ibm.com

Introduction

So, youre ready to make your offering more delightful to use.

But where do you start? The IBM Designcamp Survival Kit is loaded with tools to get
you up and running with IBM Design Thinking: frameworks for managing a project,
understanding user needs, designing great interfaces, and documenting feedback.
Each page in this book is a worksheetan interactive document you can use directly
during the life of your project. Some are for personal use, while others will help you and
your team collaborate and brainstorm. And if you want to dive deeper into each design
discipline, weve compiled useful online resources in the back. Now you can get going,
and you can always come back if youre stuck.

Hills

Sponsor Users

Invest for Market

Outcomes

Envision the User

Experience

Explore

Understand

Evaluate

Prototype

Playbacks
Collaborate, Align,
Engage!

How to Use This Kit

The Survival Kit is a set of tools that put the user at
the center of your project. Each worksheet can be
used in isolation or as part of a broader set of
activities with your team and Sponsor Users. These
tools help you establish the IBM Design Thinking
framework, understand your users problems and
motivations, explore new concepts, prototype
designs, and evaluate with stakeholders. Implemented
successfully, this kit will help you produce experiences
that engage, enable, and delight.
Remember, this is not a cookbook or a set of recipes.
Nor is it a process or methodology. Its a set of
recommended practices that will help you think
orthogonally and move beyond feature-centric
delivery.

What Youll Need

You dont need a MacBook Pro to do IBM Design
Thinking; our needs are simple. Prepare your
workspace with pads of sticky notes of various colors,
some markers, and a drawing surface (a whiteboard
or large pad will do). These tools encourage every
team member to engage in the thinking behind the
design. If your team is distributed, there are plenty of
virtual substitutes. And youll want to jump to a
computer for higher fidelity renderings of personas
and prototypes to share with your team.

Suggested Activities
There are infinite ways to use the worksheets in this
kit. Here are a few ideas to get you started:

IBM Design Thinking Ramp-Up1.5 Hours

Jumpstart your team with IBM Design Thinking with
some activities that personalize the tools. Tell them
you are seeking input for how to rethink your project
framework and ask them to generate Empathy Maps
(p. 12) and Scenario Maps (p. 14,17) for each role on a
project. An Empathy Map should take 15 minutes and
a Scenario Map 30 minutes.
Hills Workshop1 Hour per Hill
Align your teams around the goals for the project
using the Hills (p. 4) worksheet. Think in terms of
focused and measurable improvements in user
experience.
Research Distillation5 Hours
After concluding your ethnography and user studies,
youll have lots of notes to pore through. Take an
afternoon to begin distilling this research. Write one
observation or insight per sticky note and put it on the
wall. Look for patterns (p. 6) and distill into high-level
personas (p. 10). Dig into each using Empathy Maps
(p. 12), quantitative personas (p. 11), and as-is Scenario
Maps (p. 14).
Ideation1 hour
When you need to infuse your project with new ideas,
host an ideation session with a pointed prompt. Keep
your ideation rules (p. 18) and transformation cards (p.
19) close by. For equal participation, ask each team
member to write 10 ideas, one per sticky note. Put
them on the wall continue to encourage lots of wild
ideas, regardless of feasibility. Then look for patterns
and combinations (p. 6) before distilling to what the
team can implement.

Glossary
Backlog
A document used to align the team on the user stories
to deliver, their priority, and their status.
Client Playbacks
A series of ad hoc Playbacks delivered to clients
under NDA that demonstrate the market drivers and
user experience of the offering in development.
Playback 0
A milestone Playback at which the team commits to
delivering a particular user experience and begins
refining and delivering the design in parallel.
Delivery Playbacks 1-N
A series of milestone Playbacks at which the team
demonstrates end-to-end scenarios it is delivering
using live code and/or high-fidelity mockups.
Design Thinking
A process for envisioning the user experience that
involves diverging and converging on solutions.
Epic
A codable grouping of user stories that spans
scenarios so user stories do not repeat across epics.
For example, As a user, I want to manage my email.
Persona
A user archetype based on role and other
characteristics that influence how a user interacts with
the offering. Housed within the Release Blueprint
Application and linked to from the Release Blueprint.
Playback
A demo of the user experience of the offering in
development, used to collect feedback from and align
the team, stakeholders, and go-to-market.

Hill
A business goal for your relase, framed around user
experience. A project usually has three Hills and a
technical foundation.
Hills Playback
A milestone Playback at which the team commits to
the outcomes, or Hills, it wants to achieve in the
project and begins envisioning the user experience.
Project
A set of team activity scoped by a Release Blueprint
and a set of Hills. A project might have one or more
releases of code.
Release Blueprint
A wiki documenting a projects progress from Hills to
user stories. It also contains strategic thinking behind
the Hills and links to personas and design documents.
Scenario
A single workflow through an experience,
decomposable into steps. Each step should translate
to a codable user story.
Sponsor Users
Users engaged throughout the project to represent
target personas for a project. Sponsor Users are often
expected to lead Playbacks.
UI Spec
A design document that communicates user interface
requirepements. Housed within the Release Blueprint
Application and linked to from the Release Blueprint.
User Story
A codeable requirement expressed in terms of user
experience. For example, As a user, I want to search
for my customers by their first and last names.

Table of Contents

Table of Contents
Core Practices

Design Thinking

Understand

Explore

16

Prototype

24

Evaluate

32

Collaboration

38

Resources

42

IBM Designcamp

Empathy Map
TBD
TBD

Core Practices

Hills

Sponsor Users

Invest for Market

Outcomes

Envision the User

Experience

Playbacks
Collaborate, Align,
Engage!

Survival Kit

Hills
Hills align your team around the business
goals of your project.
Use this sheet to plan each Hill. Who
does your Hill impact? What value are you
delivering? And how will you measure it? Use
a combination of market and user research to
illuminate the current state and opportunities.

Persona(s) or Role(s)

Current State

Metric(s)

Hill

Sub-Hills

Future State

IBM Designcamp

Playbacks
Playbacks are checkpoints to review the
state of the project.
Use this diagram to define which team
members you include, as well as the
objectives of each Playback cycle. Daily
Playbacks should include your core working
group; weekly Playbacks design, engineering,
and PLM; milestone Playbacks the entire
team, stakeholders, and Sponosr Users; and
Client Playbacks select clients.

Me

Daily
Weekly
Milestone
Client

Survival Kit

Stakeholder Map
TBD
TBD

Design Thinking

Explore

Understand

Evaluate

Prototype

IBM Designcamp

Road to Playback 0
Use these mental spaces and checkpoints
to navigate through to your Playback 0.
Understand your user, explore concepts,
prototype solutions, and evaluate with users
and other stakeholders. Plan design thinking
activities for each space. Remember this
process can be nonlinear and bidirectional.

Hills
Playback

Understand
Are your
personas
and as-is
stories ready?

Explore
Are your to-be
stories ready
and technical
questions
identified?

Prototype
Are your UI
and technical
prototypes
ready?

Evaluate
Are your
blueprint and
rough sizings
ready?

Playback 0

Survival Kit

Sticky Notes
Use sticky note diagrams to find patterns
when using design thinking methods.
Get all your thoughts and ideas on the wall
with one phrase per sticky note. These can be
Hill ideas, user research observations, design
conceptswhatever youre brainstorming
on. Seek out relationships and groupings by
moving the notes around. Tear sticky notes
into strips for voting.

Clusters and Piles

Links

Grids

Axes

Circles and Targets

Metaphors

Adapted from The Design Gym

Explore

Understand

Evaluate

Prototype

Survival Kit

Stakeholder Map
Stakeholder maps organize peoples
expectations of a project.
Identify people internally and externally who
have a stake in the outcome of the project.
Post them to a wall, using two sticky notes
per person. On the first, draw the persons
face and note his or her name and role.
On the second, write a quote expressing
the stakeholders thoughts, opinions, or
expectations. Arrange the stakeholders
on the wall based on dimensions such as
organizational relationship or sentiment.

IBM Designcamp

Contextual Inquiry
Use this checklist to prepare for on-site
user studies.
When observing a users workflow, prepare
your mission and documentation methods
ahead of time. Remember to go on site and
into the users work environment to capture
the real workflow.

Identify what you want to learn

Do it alone

Prepare script for interviews

Bring assumptions or biases

Note pain points, goals, and behaviors

Study proxies or fake users

Note work-arounds and cheat sheets

Remove users from work environment

For large n, use a spreadsheet to log

Bring recording devices
Take notes and pitctures

10

Survival Kit

Persona
Personas communicate archetypes of
users.
Outline common traits among groups of users
using the following dimensions. This rubric
follows the Release Blueprint template, but
you may choose to include other metrics or
representations depending on research goals
and the audience of the artifact.

Name

Title

Role

Age

Skills

Education

Motivations

Work Environment

Scenarios

Concerns

Tasks

Pain Points

IBM Designcamp

Quantitative Personas
Compare and contrast personas against
meaninfgul dimensions.
Based on your research agenda and findings,
identify metrics to create rapid quantitative
personas. If dimensions are on a scale, use
a slider. If weighing many dimensions, use a
radar chart.

11

12

Survival Kit

Empathy Map
Empthy maps rapidly put the team in the
users shoes.
Draw three intersecting lines, and illustrate
the face of the persona in the middle. Fill
in with writing or sticky notes: what the
user thinks (expectations and reactions),
sees (environment and interface), says
(quotes), does (actions), feels (values), and
hears (instructions or feedback) during
the experience. At the bottom, list pains
(frustrations and obstacles) and gains (goals
and strategies).

Thinks

Hears

Sees

Feels

Says

Does

Pains

Gains

IBM Designcamp

Customer Journey Map

As-is and to-be journey maps visualize the
lifecycle of engaging with an offering.
For a particular user and use case, log in
the x-axis the stages in the lifecycle, such
as adopting, using, updating, and sunsetting
an offering. Choose one or more metrics to
diagram in the y-axis, such as satisfaction or
engagement. Annotate the diagram with real
or representative thoughts from the user.

13

As-Is Scenario Map

Scenario maps let teams rapidly document
collective understanding of workflows.
Post a row of sticky notes on a wall
representing the steps of a users as-is
workflow. Beneath each step, create a column
of color-coded sticky notes representing
questions and comments relating to that step.
For comments, consider the dimensions of
the Empathy Map at each step, as well as
technologies and context. Once questions are
answered, post comments over them.

IBM Designcamp

Pain Points & Opportunities

Identify pain points for users and
opportunities to improve the design.
With your empathy maps and scenarios in
sight, write sticky notes identifying prominent
pain points. Use a second sticky note color
to identify opportunities for the design. Each
pain point should have a corresponding
opportunity, though some opportunities might
not relate to pain pointsfor example those
that respond to market trends or anticipate
future pain points.

15

Explore

Understand

Evaluate

Prototype

17

Survival Kit

To-Be Scenario Map

To-be scenario maps let teams rapidly
ideate on future workflows.
Post a row of sticky notes on a wall
representing the steps of a users to-be
workflow. Beneath each step, create a column
of color-coded sticky notes representing
questions, comments, and ideas relating to
that step. Once questions are answered, post
comments over them. Use this artifact as a
springboard for ideation on particular steps.
Each to-be scenario should be documented
in the Release Blueprint in support of a Hill.

IBM Designcamp

17

18

Survival Kit

Ideation Rules
These simple rules structure the chaos of
ideation.
Ideas with big potential can be killed easily
by negative attitudes, so keep these rules
nearby or write them on the board before a
brainstorm. Remember to build on ideas by
saying. Yes, and... But keep things focused,
stick to one strand at a time, and remember
when its time to distill your ideas.

Defer judgment

Encourage wild ideas

Build on the ideas of others

Stay focused on the topic

One conversation at a time

Be visual

Go for quantity

Adapted from Alex Osborn and IDEO

IBM Designcamp

Transformation Cards
Transformation cards help unstick your
ideas.
Transformation cards are suggestions of how
to change or combine your existing ideas.
Make a deck out of index cards or sticky
notes, and pick one at random when the team
feels stuck. Any modifying verb could work:
magnify, minify, rearrange, adapt, etc.

Combine!
How about an
assortment?

Reverse!
Reverse roles?

Substitute!
Take another
approach?

Combine!
How about an
alloy?

Modify!
Change shape?

New Use!
Put to other use?

Adapted from Alex Osborn

19

20

Survival Kit

Social Mechanics
Social mechanics encourage cooperation
and collaboration.
How do you want your users to interact with
each other. What behaviors do you want to
encourage. Use this toolbox of dynamics to
strategically introduce social mecahnics into
your tasks.

Translucence

Sharing

Reinforcement

Competition

Community

IBM Designcamp

Game Mechanics
Game mechanics can incentivize users to
engage in particular tasks.
Think of your task as a game.. Whats the
goal? What actions must be taken? And
whats the reward? Use this toolbox of
incentives to strategically introduce game
mechanics into your tasis.

Points

Leaderboards

Achievements

Levels

Quests

Gifts

Adapted from Chris Carella

21

22

Survival Kit

Storyboard
Storyboards visualize your scenario.
Use frames or a slide deck to represent your
scenario map or wireframes in a particular
progression. This should be a walkthrough of
a flow through the system that demonstrates a
use case. This helps illuminate small details in
the progression and communicates the story
to a wider audience.

IBM Designcamp

Moodboard
Moodboards prototype the emotional
content of your experience.
Using a mix of images, colors, textures,
typography, and copy, convey the emotion
your experience should engender in the user.
The message should be grounded in user
research and used to align the team during
prototyping.

23

Explore

Understand

Evaluate

Prototype

IBM Designcamp

Site Map and Flow

Site diagrams organize the content of your
application.
As you spec out your application and
begin wireframing, its often helpful to map
out content. Site maps organize content
hierarchically, while flows organize content
based on navigation flows.

25

26

Survival Kit

Wireframes
Wireframes prototype your user interface
visually.
While wireframes come in all styles and
levels of detail, its best to stay low-fidelity
for as long as possible to explore many
different variations and make changes easily.
Wireframes can be created top-down by filling
in your screen real estate and bottom-up by
piecing elements together.

Place elements here

IBM Designcamp

Responsive Design
Responsive design adapts layouts to
different screen sizes.
Sketch wireframes of your layout as rendered
on different screen sizes. Consider aspect
ratio, text size, scrolling direction, native
interactions, and the size of interactive or
clickable elements. Which elemements will
shrink, move, or change completely?

27

28

Survival Kit

Grid
Grids offer a flexible structure for laying
out elements and enable responsive
design.
Choose a number of columns appropriate for
your content. The higher the number the more
flexible. Draw your column dividers lightly over
the dotted lines, and lay your elements down
on top of the grid. Cutting your elements out
of another sheet of paper or sticky notes will
let you easily rearrange.

IBM Designcamp

Color Palette
Color palettes convey emotion to the user.
Select a palette from the 40 colors in the
IBM color wheel. Consider the relationships
among the colors: monochromatic hues,
complementary colors, or similar shades of
different colors.

M Color Palette

Color Wheel

29

30

Survival Kit

Typography
Good type is readable and balanced and
establishes the right information hierarchy.
Choose fonts from the IBM library for
your primary, secondary, and tertiary text.
Consider the category of typeface (serif, slab
serif, or sans-serif) and the weight and style of
the font (bold, italic, etc.). Keep your body-toheader font size ratio to around 2, line spacing
to around 1.5 em, and paragraph spacing to
around .75 em. Columns should be between
45 and 75 characters wide.

Helvetica Neue Light Condensed

Helvetica Neue Condensed
Helvetica Neue Light
Helvetica Neue Light Italic
Helvetica Neue Roman
Helvetica Neue Roman Italic
Helvetica Neue Medium
Helvetica Neue Medium Italic
Helvetica Neue Bold
Helvetica Neue Bold Italic

Lubalin Extra Light

Lubalin Extra LIght Italic
Lubalin Book
Lubalin Book Italic
Lubalin Demi
Lubalin Demi Italic
Janson Roman
Janson Italic
Janson Bold
Janson Bold Italic

Bodoni Light
Bodoni Light Italic
Bodoni Regular
Bodoni Italic
Bodoni Medium
Bodoni Medium Italic
Bodoni Bold
Bodoni Bold Italic
Arial Regular
Arial Italic
Arial Bold
Arial Bold Italic

IBM Designcamp

Details
Fit and finish makes your design feel
cohesive.
Poor attention to detail is often the first defect
users notice. Practice here with this series
of buttons. Use color, gradients, strokes,
and drop shadows to style its various states.
Remember to keep changes subtle and keep
your light source consistent.

Normal

Hover

Down

Disabled

31

Explore

Understand

Evaluate

Prototype

IBM Designcamp

User Testing
Use this checklist to prepare for real-time
task-based tests.
When gathering feedback from users,
prepare your prototypes, questions, and
documentation methods ahead of time. This
should be done by an objective third party
(not the designer), though others should tag
along for first-hand observation.

Prepare scenarios and tasks

Bring preconceptions

Test software and equipment

Ask biased questions

Create forms and surveys

Laugh or get frustrated

Perform a dry run

Get defensive

Recruit and schedule participants

Explain rationales or limitations

Invite observers and assign roles

Try to state the participants rationale

Provide users an overview

Ask for design advice

Ask to voice thoughts and actions

Ask about the future

Debrief after each task and at the end

Thank the participant
Encourage users to think out loud
Ensure adequate recording

33

34

Survival Kit

Feedback Capture Grid

Feedback capture grids facilitate real-time
capture or post-hoc unpacking of feedback
on presentations and prototypes.
Section off a blank page or whiteboard into
quadrants for things users like, critiques,
questions raised, and ideas. Fill in each
quadrant with hand-written or sticky notes.

Adapted from Stanford d.school

IBM Designcamp

Prioritization Plot
Prioritization matrices organize feedback
and requirements.

Attribute Size

Whether using surveys to define Hills or

unpacking feedback on prototypes, all
requirements need to be prioritized. This
framework can give you a sense of whats
most important. This can also be used
internally to prioritize Hills and scenarios.

Attribute Impact

35

36

Survival Kit

Story Map
The story map documents your evolving
user story backlog.
Post a row of Hills, one per sticky note, on the
top row. Beneath, post a row of epics (user
story groupings) that fall under each Hill. For
each epic, post a column of associated user
stories. Prioritize the stories vertically and
draw a line representing the stories required in
the Minimum Viable Product.

Hills

Epics

User Stories

IBM Designcamp

Planning Poker
Planning poker helps estimate relative
sizings of user stories.
Allocate to each team member a collection of
poker chips or cards labeled with the following
numbers representing relative sizings. For
each user story, each team member should
put down their estimate simultaneously to
avoid bias.

13

21

34

55

89

37

38

Survival Kit

Stakeholder Map
TBD
TBD

Collaboration

Product
Management

Design

Engineering

IBM Designcamp

39

Release Blueprint
The Release Blueprint documents the
progression from market opportunities and
Hills to scenarios and codable user stories.
Use this worksheet to outline the key
concepts of your Blueprint. Start with a
summary of current market needs and
competitive landscape. Provides the objective
of each Hill, as well as scenarios and user
stories derived from user research.

Business Opportunity

What is the problem, value, and market size?

Hill 1

Scenarios

User Stories

Hill 2

Competitive Analysis

Who is your competition and how will you differentiate?

Hill 3

Technical Foundation

40

Survival Kit

Team
Track of your team allocations and skills
ratios.
For each project, document your sponsor
sclients and users, as well as key staffing
metrics. Identify gaps in staffing and skills,
especially pertaining to design talent.

Sponsor Clients

Sponsor Users

PLMs
Lead
Current Count
Target Count
Skills Gaps
Hill 1 Allocation
Hill 2 Allocation
Hill 3 Allocation
TF Allocation

Designers

Engineers

IBM Designcamp

Timeline
Set a timeline to structure your milestones.
Project deliverables are primarily structured
around Playbacks, where you will review the
state of the project across Hills. In each box,
set a date for the milestone, and beneath,
outline the deliverables.

Hills Playback

Playback 0

Delivery Playback

Delivery Playback

Delivery Playback

Delivery Playback

Client Playback

Client Playback

Client Playback

Client Playback

41

42

Survival Kit

Resources

Design Research

Interaction Design

Web Survey Tool (EFM)

ibm.biz/BdxG7N

Patterntap Library
patterntap.com

Human-Centered Design Toolkit

hcdconnect.org/toolkit

UI Patterns Library
ui-patterns.com

Avoid Bullshit Personas

bit.ly/bspersonas

Mobile Patterns Library

mobile-patterns.com

Service Design Tools

servicedesigntools.org

GUI Tooklits Library

guitoolkits.com

d.school Bootcamp Bootleg

bit.ly/bbootleg

Balsamiq Wireframing
balsamiq.com

Contextual Inquiry
bit.ly/coninquiry

PowerMockup Wireframing
powermockup.com

Scenario Maps
bit.ly/experiencemaps

Mobile Wireframe Templates

bit.ly/mobilewires

Complexity Analysis
hcdconnect.org/toolkit

UX Mag
uxmag.com

CogTool
hcdconnect.org/toolkit

Wireframes Magazine
wireframes.linowski.ca
Smashing Magazine
smashingmagazine.com

IBM Designcamp

Visual Design

Design Development

IBM Brand
ibm.com/brand

One UI
ibm.biz/BdxG76

Best Designs Gallery

thebestdesigns.com

Gridpak Grid Generator

gridpak.com

Noun Project
thenounproject.com

Twitter Bootstrap GUI Framework

twitter.github.com/bootstrap

Kuler Color Mixer

kuler.adobe.com

JQuery JavaScript Library

jquery.com

Color Game
color.method.ac

Framer Prototyper
framerjs.com

Information Design Patterns

infodesignpatterns.com

Drawscript Vector Converter

drawscri.pt

Specctr Fireworks Annotations

specctr.com

CSS Zen Garden

csszengarden.com

Web Design Tuts+

webdesign.tutsplus.com

Web Development Tuts+

net.tutsplus.com
Mobile Development Tuts+
mobile.tutsplus.com

43

Stakeholder Map
TBD
TBD