IBM Designcamp Survival Kit

7/26/2019 IBM Designcamp Survival Kit

1/52

Survival

Kit

IBMDesigncamp


2/52

IBMDesignThe 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 [email protected].

design.ibm.com

Works Together

Tight integration across

core technologies and

interoperability withcomplementary ones

Works the Same

Common look and feel

when targeting similar

personas

Works for Me

Focused on the user

across the entire offering

lifecycle (learn, buy, adopt,maintain)

Our portfolio values:


3/52

Introduction

So, youre readyto 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.

Understand

Explore

Prototype

Evaluate

Hills

Invest for Market

Outcomes

Sponsor Users

Envision the User

Experience

Playbacks

Collaborate, Align,

Engage!


4/52

How to Use This KitThe 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 DesignThinking; 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 thinkingbehind 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 thewall. 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 par ticipation, ask each team

member to write 10 ideas, one per sticky note. Putthem 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.


5/52

GlossaryBacklog

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 theproject 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.


6/52

Table of Contents

Core Practices 1

Design Thinking 4

Understand 7

Explore 16

Prototype 24

Evaluate 32

Collaboration 38

Resources 42

Table of Contents


7/52

IBM Designcamp

Empathy Map

TBD

TBD

Core Practices

Hills

Invest for Market

Outcomes

Sponsor Users

Envision the User

Experience

Playbacks

Collaborate, Align,

Engage!


8/52

2 Survival Kit

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.

Hills

Current State Future State

Metric(s)

Hill

Sub-Hills

Persona(s) or Role(s)


9/52

IBM Designcamp 3

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.

Playbacks

Daily

Weekly

Milestone

Client

Me


10/52

4 Survival Kit

Stakeholder Map

TBD

TBD

Design Thinking

Understand

Explore

Prototype

Evaluate


11/52

IBM Designcamp 5

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.

Road to Playback 0

Hills

Playback

Playback 0

Understand

Explore

Prototype

Evaluate

Are your

personas

and as-is

stories ready?

Are your to-be

stories ready

and technical

questions

identified?

Are your UI

and technical

prototypes

ready?

Are your

blueprint and

rough sizings

ready?


12/52

6 Survival Kit

Clusters and Piles Links Grids

Axes Circles and Targets Metaphors

Adapted from The Design Gym

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.

Sticky Notes


13/52

Understand

Explore

Prototype

Evaluate


14/52

8 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.


15/52

IBM Designcamp 9

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

Prepare script for interviews

Note pain points, goals, and behaviors

Note work-arounds and cheat sheets

For large n, use a spreadsheet to logBring recording devices

Take notes and pitctures

Do it alone

Bring assumptions or biases

Study proxies or fake users

Remove users from work environment


16/52

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.

Motivations Work Environment Scenarios

Concerns Tasks Pain Points

Name Title

Role Age

Skills Education


17/52

IBM Designcamp 1

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.

Quantitative Personas


18/52

12 Survival Kit

Empathy Map

Thinks

SeesHears

Does

Pains Gains

SaysFeels

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).


19/52

IBM Designcamp 13

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.


20/52

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.

As-Is Scenario Map


21/52

IBM Designcamp 15

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.

Pain Points & Opportunities


22/52

Understand

Explore

Prototype

Evaluate


23/52

IBM Designcamp 1717 Survival Kit

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 arti fact as a

springboard for ideation on par ticular steps.

Each to-be scenario should be documented

in the Release Blueprint in support of a Hill.

To-Be Scenario Map


24/52

18 Survival Kit

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.

Ideation Rules

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

1

2

3

4

5

6

7

Adapted from Alex Osborn and IDEO


25/52

IBM Designcamp 19

Combine!

How about anassortment?

Adapted from Alex Osborn

Reverse!

Reverse roles?

Substitute!

Take another

approach?

Combine!

How about an

alloy?

Modify!

Change shape?

New Use!

Put to other use?

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.

Transformation Cards


26/52

20 Survival Kit

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.

Social Mechanics

Translucence

Reinforcement

Community

Sharing

Competition


27/52

IBM Designcamp 2

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.

Adapted from Chris Carella

Points

Achievements

Quests

Leaderboards

Levels

Gifts


28/52

22 Survival Kit

Storyboard

Storyboards visualize your scenario.

Use frames or a slide deck to represent yourscenario 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.


29/52

IBM Designcamp 23

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.

Moodboard


30/52

Understand

Explore

Prototype

Evaluate


31/52

IBM Designcamp 25

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.


32/52

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


33/52

IBM Designcamp 27

Responsive Design

Responsive design adapts layouts to

different screen sizes.

Sketch wireframes of your layout as rendered

on dif ferent 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?


34/52

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.


35/52

IBM Designcamp 29

Color Palette

Color palettes convey emotion to the user.

Select a palette from the 40 colors in theIBM color wheel. Consider the relationships

among the colors: monochromatic hues,

complementary colors, or similar shades of

different colors.


36/52

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-to-

header 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 LightHelvetica 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 BookLubalin Book Italic

Lubalin Demi

Lubalin Demi Italic

Janson Roman

Janson ItalicJanson BoldJanson Bold Italic

Bodoni LightBodoni Light Italic

Bodoni RegularBodoni Italic

Bodoni Medium

Bodoni Medium Italic

Bodoni Bold

Bodoni Bold Italic

Arial Regular

Arial Italic

Arial Bold

Arial Bold Italic


37/52

IBM Designcamp 3

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.

Details

Normal Hover

Down Disabled


38/52

Understand

Explore

Prototype

Evaluate


39/52

IBM Designcamp 33

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

Test software and equipment

Create forms and surveys

Perform a dry run

Recruit and schedule participantsInvite observers and assign roles

Provide users an overview

Ask to voice thoughts and actions

Debrief after each task and at the end

Thank the participant

Encourage users to think out loud

Ensure adequate recording

Bring preconceptions

Ask biased questions

Laugh or get frustrated

Get defensive

Explain rationales or limitationsTry to state the participants rationale

Ask for design advice

Ask about the future


40/52

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


41/52

IBM Designcamp 35

Prioritization matrices organize feedback

and requirements.

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.

Prioritization Plot

Attribute Impact

AttributeS

ize


42/52

36 Survival Kit

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.

Story Map

Hills

Epics

User Stories


43/52

IBM Designcamp 37

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.

Planning Poker

0 1 2 3

5 8 13 21

34 55 89 ?


44/52

38 Survival Kit

Stakeholder Map

TBD

TBD

Collaboration

Product

Management

Design Engineering


45/52

IBM Designcamp 39

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.

Release Blueprint

Business OpportunityWhat is the problem, value, and market size?

Competitive AnalysisWho is your competition and how will you differentiate?

Hill 1 Hill 2 Hill 3 Technical Foundation

Scenarios

User Stories


46/52

40 Survival Kit

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.

Team

Sponsor Users

PLMs Designers Engineers

Lead

Current Count

Sponsor Clients

Target Count

Skills Gaps

Hill 1 Allocation

Hill 2 Allocation

Hill 3 Allocation

TF Allocation


47/52

IBM Designcamp 4

Set a timeline to structure your milestones.

Project deliverables are primarily structuredaround 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.

Timeline

Hills Playback Playback 0 Delivery Playback Delivery Playback Delivery Playback

Delivery Playback Client Playback Client Playback Client Playback Client Playback


48/52

Resources

42 Survival Kit

Design Research

Web Survey Tool (EFM)

ibm.biz/BdxG7N

Human-Centered Design Toolkit

hcdconnect.org/toolkit

Avoid Bullshit Personas

bit.ly/bspersonas

Service Design Tools

servicedesigntools.org

d.school Bootcamp Bootleg

bit.ly/bbootleg

Contextual Inquiry

bit.ly/coninquiry

Scenario Mapsbit.ly/experiencemaps

Complexity Analysis


CogTool


Interaction Design

Patterntap Library

patterntap.com

UI Patterns Library

ui-patterns.com

Mobile Patterns Library

mobile-patterns.com

GUI Tooklits Library

guitoolkits.com

Balsamiq Wireframing

balsamiq.com

PowerMockup Wireframing

powermockup.com

Mobile Wireframe Templatesbit.ly/mobilewires

UX Mag

uxmag.com

Wireframes Magazine

wireframes.linowski.ca

Smashing Magazine

smashingmagazine.com


49/52

IBM Designcamp 43

Visual Design

IBM Brand

ibm.com/brand

Best Designs Gallery

thebestdesigns.com

Noun Project

thenounproject.com

Kuler Color Mixer

kuler.adobe.com

Color Game

color.method.ac

Information Design Patterns

infodesignpatterns.com

Specctr Fireworks Annotationsspecctr.com

Web Design Tuts+

webdesign.tutsplus.com

Design Development

One UI

ibm.biz/BdxG76

Gridpak Grid Generator

gridpak.com

Twitter Bootstrap GUI Framework

twitter.github.com/bootstrap

JQuery JavaScript Library

jquery.com

Framer Prototyper

framerjs.com

Drawscript Vector Converter

drawscri.pt

CSS Zen Gardencsszengarden.com

Web Development Tuts+

net.tutsplus.com

Mobile Development Tuts+

mobile.tutsplus.com


50/52


51/52


52/52

Stakeholder Map

TBD

TBD

Documents

IBM Designcamp Survival Kit