To create great design you need to understand how your users do their work. You can do that using CARD, a collaborative method that gets your team on the same page about your user's workflow. Apply it to desktop, web, or mobile apps. New to task analysis? Looking for new ways to collaborate with your developers? Or variations you can use with your work? This method is for you!

1. 1
Real-World CARD
A Tool for Task Analysis & Design
By Len Conte, Mark Ainscow, Debbie Cook, Stephen Reinach & Lissa Story
Verify
understanding of
data from other
packages in
MATLAB
T2
Gone outside
boundary of
current tool set
T3
Has reached a
pain threshold and
needs to solve
something
T4
Developing an
algorithm
T6
Trying out
MATLAB to see if
it is satisfactory
T7
Curious about
some data
T8
Triggers
Boss has set a
problem to solve
T1
I do it in MATLAB
because it‟s
already open
T21
Wing it!
T15
Is the data
in a local
text file?
Yes
Other workflows not
explored
E.g. local binary,
scanned from journal,
live feed, etc.
Also, problems
specific to cell arrays
not addressed
START
Open data in
text editor
Preprocess data
(Optional)
Copy from text editor,
paste into MATLAB
Google
“MATLAB” and
My File format
Search DOC for
correct read
function
Make fake
(small) file with
same format to
test
RESEARCH
Choose proper import
method for data format,
content, size
File -> Import
Import wizard
No
Too Big?
Yes
Reduce size of file
Out of memory error
(graceful)
Double-click on file in
Current Directory
Browser (MAT-file)
T11
Appropriate “load” or
“read” function
TRY TO LOAD
Use MATLAB tools
for data-specific
import process
Can‟t right-click on
file in Windows
Explorer and get
MATLAB-related
functions
Can‟t single-click
import a file from the
Editor
Indications that load
succeeded are easy
to miss
There is no indication
that the load result is
useful
No
“Load” fails (ok) but
doesn‟t suggest
alternatives (bad)
Data loads?
Header rows in text
file which are not
labels (metadata)
Data type of imported
data does not match
type in file
Yes
*Search Doc for
file suffixes
*Tools directory
for importers
Go back to
“Research”
MATLAB doesn‟t
crash – data is
visible
somewhere in
MATLAB for
checking
Progress bar or
spinning icon for
confirmation
Open imported
arrays in array editor
At some point
you have to start
and see what
goes wrong
Weak date support –
no “date” data type
WHOS, etc. in
command window
Inspect in Import
Wizard, Array Editor,
Workspace Browser
CHECK DATA
Correlate data in file
with variables and
strings in MATLAB
Excel shows
immediately and
directly what was
imported – MATLAB
doesn‟t
Checking imported
data against file may
require multiple tools
*Hard to examine
edges of large data
sets (e.g. four
corners of matrix)
Data in MATLAB
matches data in
the file
No
Imported data
correct(ed)?
Yes
Thumbnail views of
data
*Can‟t do simple
visualization
transforms in GUI –
transpose, log, etc.
*Tools for examining
3D data (sliders,
slices)
DATA (numbers) is
properly loaded and
plottable
G3
Correct data “by
hand”
Go back to “Research”
Metadata
handled?
Create and name
variables in Array
Editor
METADATA
Manage labels,
notes, odd data types
Name variables in
Import Wizard,
Workspace browser,
Command line
No provision for
metadata (notes, etc)
Use Scribe and
labeling (later)
Punt Metadata
No
Yes
MAKE DATA
PLOTTABLE
Is the correctly
imported data
complete and
plottable?
Find NaNs and deal
with them
*Examine corners of
data, look for gaps,
same number of
crows throughout,
etc.
Checking :>2D data
a special problem
Spreadsheet type
editing of numerical
data
Metadata in
MATLAB
matches data in
the file
Metadata loaded and
plottable
G3
Two vectors are
incommensurate
>> plot(x,y)
(command line)
MAKE DATA
“VISUAL”
Create a new figure –
launch plot tools
Plot from Workspace
Browser
Go to Help on “plot”
or “graph”
Preconceived Idea or
standard format
T16, 17, 18, 19
Plot Picker(s)
All data and labels
plot?
No way, dude
Yes
All necessary
data and labels
are in working
figure
Figure is ready for
analysis
G4
*Plot looks wrong, but
it is right (distorted by
outlier)
Plotting labels on x
axis is problematic
*Hard to get data
from a plot – no
single point
*Highlight single data
item in plot and edit it
Change scaling
DOC and Help
Demos and
examples
Numbers are
right?
Spreadsheet type
editing of numerical
data
Processing with
functions in
command window
Transform the data
Remove outliers
Review problem
statement
SHOW OFF THE
DATA
Do the numbers
fit the plot?
FIND AND TRY
BETTER PLOT
TYPES
Reconsider data
Yes
No
Plot picker(s)
Change plot
Plot
adequately shows
data?
Try another
Yes
No
All necessary
data correctly
represented in
the plot
*Transform data by
reorganizing it instead
of reducing or
throwing data away
G10
*Segregate noise
G11
Data and labels
are workable for
analysis
purposes
Data is adequately
visualized
G7
So many plots, so
little time
Hard to find Plot
Picker(s)
*Switching families of
displays is a short
mental step, but a
long process
Frustrating number of
iterations
It‟s hard to know
what the best is when
you haven‟t seen it
yet
Replot from
command line or
picker
SHOW THE
SOLUTION
Work with the data
view to understand
and explain the data
Zoom and/or Pan
Data tips
Ginput
Figure Property
Editor
Change View
(Camera Toolbar)
Get smaller subset or
known data to work
with
Right View for
understanding?
No
Yes
Back to change the
plot
Really bad
Review problem
statement
Is data within
acceptable
parameters?
T10
Does Data match
hypothesis?
T9
Many modes for
exploration
Zoom and pan at the
same time?
How bad is it?
Not so bad
Plot Tools
Command line
Inspector
Figure Toolbar
LET ME COUNT
THE WAYS TO
WORK WITH THE
PLOT
Which tool should I
use?
Do they work
together?
Need to add
explanations to
data
T19
Concerned with
the appearance of
the data
T22
LEGEND AND
COLORBAR
Add legend and
colorbar first so
they don‟t mess up
your plot later
Add legend and/or
colorbar
Scribe
ADDING WORDS
Lay in the details of the
message
Add data to plot
(commands to script)
title, labels, dataticks,
etc.
Inserting annotation
starts plot edit mode
Start Plot Edit Mode Data Tips
MOVING THINGS AROUND
Organize for presentation
Align figure and
legend
Align multiple figures
Change View
(Camera Toolbar)
Commands expect
HG proficiency
Writing formatting
code is HARD
Text formatting is
hard (subscript,
superscript)
*Log x-axis
superscripts hard to
read on MAC
*Did not know about
“Latek”
It isn‟t obvious how to
add Greek or
scientific symbols to
the text
*Can‟t easily reset
variables to colormap
Plot Edit mode is
hard to find
It‟s still easier toi
annotate in another
application
*No minimal, light
grey (one pixel)
gridlines
*Polar plots!!!
Equation editor like
MS Word
*Function to convert
a colordef to line
handles
*Mouse down on line
to convert color on it
from list
*No group legend (x
legend entries with y
lines each)
*Not obvious you can
edit legend text
directly
*Must do legends first
because they
dominate space
Legends cannot be
mxn
*The manner in
which we use
handles within
legends has changed
in the last three
releases
*There are different
modes of access to
MATLAB figures, but
only the first is
obvious
Message is
clear?
No
Yes
Communicate
effectively to Boss
G6
Tufte smiles
G12
Looks professional
G14
SAVE
Next?
AUTOMATION
Unexplored
Export or
Print
Needs to insert info
into a document
T5
Need data in an
electronic format
T20
Build something to do
the same thing
tomorrow
G9
Generate M-code
Edit/Save script until
it works
Code replicates
the plot?
Running a
script?
Not everything can
be automated
Lock Legend – Plot
distance
Don‟t know how big
is too big until you fail
Data is in MATLAB
G1
No way to tie
metadata to data
Data plottable?
Fig-file
T12
Back to “research”
Yes
No
Data is ready for
presentation
treatment
Understand and
accept the data
G8
Camera Toolbar Unexplored workflow
(Moving to another
application)
Unexplored Workflow
(Exporting and
Printing)
Punt automation Automation doesn‟t
offer the options I
want
Automated input
code doesn‟t link up
with automated figure
code
Unexplored workflow
(Cut, copy, paste)
Reconsider data
Can‟t set defaults for
new figures (e.g. “box
off”
Get Raw Data Into MATLAB Check Data Against File Bring In Labels, Names, Notes First Shot at a Plot Clean the Data Manipulate and Explore the Data Dress and Display the Data Get the Plot Out
Yes
Yes
Yes
No
Automate
Collaborative Analysis of Requirements for Design

2. 2
What Will We Do?
Time Section
9:00 Introduction
9:20 Create a current workflow
10:30 Break
11:00 Create a current workflow (cont.)
12:30 Lunch
1:45 Create a future workflow
3:00 Break
3:30 Create a future workflow (cont.)
4:15 Share success story
4:45 Plan for CARD

3. 3
Why Care about CARD?
 Get team on same page – consensus
and shared understanding
 Generate task analyses
 Generate workflows
 Clarify/generate requirements
 Generate idea/vision of future projects
 Prioritize features and requirements
 Find issues that fall between the
„cracks‟
 Help get you to a design

4. 4
What Will You Learn?
You‟ll learn to:
 Use a task analysis tool
called CARD
 Apply best practices when
using CARD
 Identify when to use CARD
and its variations

5. 5
What is „Task Analysis‟?
An information gathering technique that helps us:
• Understand how users perform work to accomplish
goals
• Move from requirements (the what) to design (the how)

6. 6
What are Some Task Analysis Methods?

7. 7
How to Choose?
Low
Effort
Rich
Data
Builds
Consensus
Visual Generates New
Workflow
Questionnaire X
Interview X
Contextual Inquiry X X
Reality Map X X
CARD: Big Picture X X X
CARD: Current X X X
CARD: Future X X X X

8. 8
 A tool for performing task analysis or design where
users and stakeholders, guided by a facilitator,
collaborate in construction of workflows.
What is CARD?
I think I’d rather manage
a large software
development project.

9. 9
Using CARD to Get to a Design
Yes
Yes
Yes No
No
No
Research users & their goals
Your
Method
Your Task Analysis
Method
Future Design Scenario
Current
WorkFlow
Big Picture
(optional)
Bluesky
(optional)
Future Workflow
BRIDGE (optional)
Your
Method
Do you understand users and their goals?
Do you understand current workflow?
Do you want to use CARD to get to a design?
System Under Design
Wireframes, click-thrus, paper prototypes, sketches, workflow designs, API’s

10. 10
Current Workflow

11. 11
Using CARD to Get to a Design
Yes
Yes
No
No
Current
WorkFlow
Big Picture
(optional)
Do you understand users and their goals?
Do you understand current workflow?
Your
MethodResearch users & their goals
Your Task Analysis
MethodCurrent Workflow

12. 12
Travelocity - Car Rental:
Scenario
 User: Stephen, an infrequent traveler who loves a
good online deal.
 Goal: Stephen will be traveling to Pasadena, CA,
to attend the Tournament of Roses Parade
Jan 1, 2014. He needs to rent a car while
he is out there on vacation.
 Task: Find the best rental car deal possible using
discounts available to him. He has an Avis
discount # and is also a AAA member.

13. 13
Travelocity - Car Rental:
Video

14. 14
Anatomy of a Current Workflow
Solution
Task
Pain
Decision
GoalDecisionTask SolutionPain
Goal
Time

15. 15
Travelocity - Car Rental:
Constructing the Flow
 User: Stephen, an infrequent traveler who loves a
good online deal.
 Goal: Stephen will be traveling to Pasadena, CA,
to attend the Tournament of Roses Parade
Jan 1, 2014. He needs to rent a car while
he is out there on vacation.
 Task: Find the best rental car deal possible using
discounts available to him. He has an Avis
discount # and is also a AAA member.

16. 16
Break

17. 17
Travelocity - Car Rental:
Validate the flow
 Pick someone to walk through the flow as „user‟
– Make sense? Everything covered?
 Add phases and a title

18. 18
Travelocity - Car Rental:
Debrief: Creating a Current Workflow
 Doing
– How‟d it go?
– What did you find challenging? Easy? Puzzling?
 Facilitation
– What did you notice about our facilitating?

19. 19
Anatomy of a Current Workflow
Title
Phase/Activity
Solution
Task
Pain
Connection
Decision
Goal
Double
Box

20. 20
Supporting Materials (Optional)
 Agenda
 Ground rules
 Description of target users
 Scenario
 Out of scope
 Terminology
 Legend
 Parking Lot

21. 21
Who is Involved?
 Participants
– Real or surrogate users
 Facilitator
– Leads the activity
 Sponsor (optional)
– Champion
 Observers (optional)
– Role is similar to an observer at a usability session

22. 22
Why use CARD?
 Provides visual model of the current work
– Helps you see bottlenecks and other puddles of pain
– Helps you see the length of the flow and its phases
– Helps you see decision points
 Collaborative
 Creates buy-in
 Scales to larger more complex workflows
– Multi-user/swim lanes
– Accommodates branching
 Captures solutions

23. 23
Current Workflow: What Are Some Variations?
 If you are familiar with the flow, you create it and
validate it with the team.
 Create current flows one on one with key participants.
You do the consolidation.
 Time box the activity (60 minutes)
 Save time by having participants brainstorm tasks
ahead of time.
 Create the current flow on the whiteboard (no cards, no
paper, no problem)
Just do it!

24. 24
Lunch!

25. 25
Future Workflow

26. 26
No
Research users and their goals
Yes
Yes
Using CARD to Get to a Design
Do you understand users and their goals?
Yes
No
Your
Method
Use
Cases
Current
WorkFlow
Big Picture
(optional)Current Workflow
Could you use CARD to get to a design?
Future Workflow
Bluesky
(optional)Future Workflow
Do you understand current workflow?

27. 27
Travelocity - Car Rental:
Create a Future Workflow
1. Individually brainstorm steps for a new future flow
2. At your tables as a group, construct a future workflow

28. 28
Break

29. 29
Travelocity - Car Rental:
Create a Future Workflow (cont.)
construct a future flow continued
3. Verify the new flow
4. Walk through the future flow (as the user)
– Compare to your current flow
 Did some (or all) of the pains go away?
 Were any of the solutions incorporated into your workflow?

30. 30
Travelocity - Car Rental:
Debrief: Creating a Future Workflow
 How‟d it go?
– What did you find challenging? Easy? Puzzling?
 Facilitation
– Was there anything different about our facilitation that you
noticed?

31. 31
Travelocity - Car Rental:
Debrief: Creating a Future Workflow
 Future = Something you can build = „to be‟
 Contrast with current workflow
– Fewer pains
– Shorter flow
– Incorporates some solutions from current flow
 You may still have solutions left over
– Constraints may still exist
 Facilitation
Verify
understanding of
data from other
packages in
MATLAB
T2
Gone outside
boundary of
current tool set
T3
Has reached a
pain threshold and
needs to solve
something
T4
Developing an
algorithm
T6
Trying out
MATLAB to see if
it is satisfactory
T7
Curious about
some data
T8
Triggers
Boss has set a
problem to solve
T1
I do it in MATLAB
because it‟s
already open
T21
Wing it!
T15
Is the data
in a local
text file?
Yes
Other workflows not
explored
E.g. local binary,
scanned from journal,
live feed, etc.
Also, problems
specific to cell arrays
not addressed
START
Open data in
text editor
Preprocess data
(Optional)
Copy from text editor,
paste into MATLAB
Google
“MATLAB” and
My File format
Search DOC for
correct read
function
Make fake
(small) file with
same format to
test
RESEARCH
Choose proper import
method for data format,
content, size
File -> Import
Import wizard
No
Too Big?
Yes
Reduce size of file
Out of memory error
(graceful)
Double-click on file in
Current Directory
Browser (MAT-file)
T11
Appropriate “load” or
“read” function
TRY TO LOAD
Use MATLAB tools
for data-specific
import process
Can‟t right-click on
file in Windows
Explorer and get
MATLAB-related
functions
Can‟t single-click
import a file from the
Editor
Indications that load
succeeded are easy
to miss
There is no indication
that the load result is
useful
No
“Load” fails (ok) but
doesn‟t suggest
alternatives (bad)
Data loads?
Header rows in text
file which are not
labels (metadata)
Data type of imported
data does not match
type in file
Yes
*Search Doc for
file suffixes
*Tools directory
for importers
Go back to
“Research”
MATLAB doesn‟t
crash – data is
visible
somewhere in
MATLAB for
checking
Progress bar or
spinning icon for
confirmation
Open imported
arrays in array editor
At some point
you have to start
and see what
goes wrong
Weak date support –
no “date” data type
WHOS, etc. in
command window
Inspect in Import
Wizard, Array Editor,
Workspace Browser
CHECK DATA
Correlate data in file
with variables and
strings in MATLAB
Excel shows
immediately and
directly what was
imported – MATLAB
doesn‟t
Checking imported
data against file may
require multiple tools
*Hard to examine
edges of large data
sets (e.g. four
corners of matrix)
Data in MATLAB
matches data in
the file
No
Imported data
correct(ed)?
Yes
Thumbnail views of
data
*Can‟t do simple
visualization
transforms in GUI –
transpose, log, etc.
*Tools for examining
3D data (sliders,
slices)
DATA (numbers) is
properly loaded and
plottable
G3
Correct data “by
hand”
Go back to “Research”
Metadata
handled?
Create and name
variables in Array
Editor
METADATA
Manage labels,
notes, odd data types
Name variables in
Import Wizard,
Workspace browser,
Command line
No provision for
metadata (notes, etc)
Use Scribe and
labeling (later)
Punt Metadata
No
Yes
MAKE DATA
PLOTTABLE
Is the correctly
imported data
complete and
plottable?
Find NaNs and deal
with them
*Examine corners of
data, look for gaps,
same number of
crows throughout,
etc.
Checking :>2D data
a special problem
Spreadsheet type
editing of numerical
data
Metadata in
MATLAB
matches data in
the file
Metadata loaded and
plottable
G3
Two vectors are
incommensurate
>> plot(x,y)
(command line)
MAKE DATA
“VISUAL”
Create a new figure –
launch plot tools
Plot from Workspace
Browser
Go to Help on “plot”
or “graph”
Preconceived Idea or
standard format
T16, 17, 18, 19
Plot Picker(s)
All data and labels
plot?
No way, dude
Yes
All necessary
data and labels
are in working
figure
Figure is ready for
analysis
G4
*Plot looks wrong, but
it is right (distorted by
outlier)
Plotting labels on x
axis is problematic
*Hard to get data
from a plot – no
single point
*Highlight single data
item in plot and edit it
Change scaling
DOC and Help
Demos and
examples
Numbers are
right?
Spreadsheet type
editing of numerical
data
Processing with
functions in
command window
Transform the data
Remove outliers
Review problem
statement
SHOW OFF THE
DATA
Do the numbers
fit the plot?
FIND AND TRY
BETTER PLOT
TYPES
Reconsider data
Yes
No
Plot picker(s)
Change plot
Plot
adequately shows
data?
Try another
Yes
No
All necessary
data correctly
represented in
the plot
*Transform data by
reorganizing it instead
of reducing or
throwing data away
G10
*Segregate noise
G11
Data and labels
are workable for
analysis
purposes
Data is adequately
visualized
G7
So many plots, so
little time
Hard to find Plot
Picker(s)
*Switching families of
displays is a short
mental step, but a
long process
Frustrating number of
iterations
It‟s hard to know
what the best is when
you haven‟t seen it
yet
Replot from
command line or
picker
SHOW THE
SOLUTION
Work with the data
view to understand
and explain the data
Zoom and/or Pan
Data tips
Ginput
Figure Property
Editor
Change View
(Camera Toolbar)
Get smaller subset or
known data to work
with
Right View for
understanding?
No
Yes
Back to change the
plot
Really bad
Review problem
statement
Is data within
acceptable
parameters?
T10
Does Data match
hypothesis?
T9
Many modes for
exploration
Zoom and pan at the
same time?
How bad is it?
Not so bad
Plot Tools
Command line
Inspector
Figure Toolbar
LET ME COUNT
THE WAYS TO
WORK WITH THE
PLOT
Which tool should I
use?
Do they work
together?
Need to add
explanations to
data
T19
Concerned with
the appearance of
the data
T22
LEGEND AND
COLORBAR
Add legend and
colorbar first so
they don‟t mess up
your plot later
Add legend and/or
colorbar
Scribe
ADDING WORDS
Lay in the details of the
message
Add data to plot
(commands to script)
title, labels, dataticks,
etc.
Inserting annotation
starts plot edit mode
Start Plot Edit Mode Data Tips
MOVING THINGS AROUND
Organize for presentation
Align figure and
legend
Align multiple figures
Change View
(Camera Toolbar)
Commands expect
HG proficiency
Writing formatting
code is HARD
Text formatting is
hard (subscript,
superscript)
*Log x-axis
superscripts hard to
read on MAC
*Did not know about
“Latek”
It isn‟t obvious how to
add Greek or
scientific symbols to
the text
*Can‟t easily reset
variables to colormap
Plot Edit mode is
hard to find
It‟s still easier toi
annotate in another
application
*No minimal, light
grey (one pixel)
gridlines
*Polar plots!!!
Equation editor like
MS Word
*Function to convert
a colordef to line
handles
*Mouse down on line
to convert color on it
from list
*No group legend (x
legend entries with y
lines each)
*Not obvious you can
edit legend text
directly
*Must do legends first
because they
dominate space
Legends cannot be
mxn
*The manner in
which we use
handles within
legends has changed
in the last three
releases
*There are different
modes of access to
MATLAB figures, but
only the first is
obvious
Message is
clear?
No
Yes
Communicate
effectively to Boss
G6
Tufte smiles
G12
Looks professional
G14
SAVE
Next?
AUTOMATION
Unexplored
Export or
Print
Needs to insert info
into a document
T5
Need data in an
electronic format
T20
Build something to do
the same thing
tomorrow
G9
Generate M-code
Edit/Save script until
it works
Code replicates
the plot?
Running a
script?
Not everything can
be automated
Lock Legend – Plot
distance
Don‟t know how big
is too big until you fail
Data is in MATLAB
G1
No way to tie
metadata to data
Data plottable?
Fig-file
T12
Back to “research”
Yes
No
Data is ready for
presentation
treatment
Understand and
accept the data
G8
Camera Toolbar Unexplored workflow
(Moving to another
application)
Unexplored Workflow
(Exporting and
Printing)
Punt automation Automation doesn‟t
offer the options I
want
Automated input
code doesn‟t link up
with automated figure
code
Unexplored workflow
(Cut, copy, paste)
Reconsider data
Can‟t set defaults for
new figures (e.g. “box
off”
Get Raw Data Into MATLAB Check Data Against File Bring In Labels, Names, Notes First Shot at a Plot Clean the Data Manipulate and Explore the Data Dress and Display the Data Get the Plot Out
Yes
Yes
Yes
No
Automate
Choose Data file
from Current
Directory Browser
- Confirmation
message
- Progress bar
- Better error
handling
Load preview to
- Open in MATLAB
- Make a guess on
the file format and
preview with
suggested plot type
Subsample large files
for display and
diagnostic purposes
Data file Too Big?
Will subsampled
data do the job?
Sheaf of solutions for
oversize files
Yes
No
Most recently used
selected first for
given data/file
combinations (and
plot)Smart Importing
System tracks most
frequently used, most
recently used, and
offer them
preferentially
Operations on paged
(oversize) files in
memory
Data is in MATLAB
G1
DATA (numbers) is
properly loaded and
plottable
G3
Metadata loaded and
plottable
G3
Figure is ready for
analysis
G4
Augmented
Import Tool
Prioritize steps just
taken for next use
(mru, mfu with
profile)
Save a “profile” of he
original file, and
attach the importing
steps
Offer to save
decisions made while
importing a file
Open variables
created in workspace
in Array Editor
Offer to save
imported data to a
mat-file
Offer to Save
Everything
Analysis
routines
elsewhere in
MATLAB?
Pass data to analysis
module (Simulink,
Stats tool, curve
fitting, etc.)
Use mru, mfu to
suggest analysis
modules
Remember this path
and this option
Analyze
Edit data in figure
point-by point and by
groups
Replace original with
transformed data and
save both
Yes
No
“Load” makes
suggestions on
failure
*Data transformed by
reorganizing it instead
of reducing or
throwing data away
G10
*Noise segregated
G11
Clean and Transform Data
No
Apply Simulink,Toolboxes, etc.
Yes
All data
and metadata imported
correctly and ready for
analysis
Check data in import
wizard (all three
views)
Each file type
requires a different
“fixit” bag of tricks –
lead user to them
(e.g. allow importing
data as smaller –
non-double) type
Flag and dump file
names, column
headers, case
names, notes, etc.
into metadata
repository
Allow user to collect
catalog of (preferred)
plots which are
important to him
Make a “date” data
type
Metadata repository
Spreadsheet view –
check numbers and
labels
Plot View – select
best plot with plot
picker view to scan
and check data
Text Editor – view
for checking data
against file
Ability to collect lots
of “profiles” from
different users to
selece/choose first
load profiles
Create Labels, etc.,
automatically from
metadata
Check
all data and
metadata
Everything
OK
Data not
importing
correctly
Plot not right
for checking
data
Use mru, mfu to suggest import and plot preferences
Data is “clean” -
ready for observation
and inference
Live Plot
Catalog
Users add plots they
have written, plots
from MATLAB
Central, etc.
Winnows plot types
by smarts about data,
use history, and
perhaps direct
questions to user
Thumbnails can be
reasonable size if
they are prioritized –
less likely ones
relegated to “More
types”
Click on one of a set
of Thumbnail views
to see preview of real
data (like Excel)
A hybrid figure
window with
choosing tools
Users remove
options they will
never use – or
designate favorites
User chooses plot
type and creates
figure with plotted
data and metadata
Caveat:
Thumbnails must be
adequate size or they are
useless. This puts a high
priority on screening the
large catalog so as to
present a small group
likely to contain the right
plot well
Supply relevant
commands to
command line
Plot is suitable?
No
“Real” Thumbnails can
be facilitated by a
combination of
background processing
and immediately drawing
users‟ (preliminary)
selections
Yes
Live thumbnails can be
confusing, inaccurate,
error-prone, and
confusing. Be careful
Plot
is for “telling a
story”
Plot is intended as
part of a tool for
downstream users
e.g. building in the
Slice-O-Matic
(Unexplored)
No
Yes
Zeigen und Reden
(Show)
Combine several
Camera Toolbar
modes into a scene
view mode (Google
Earth)
Combine pan, zoom,
rotate into a single
explore mode
Think about keeping
modes as orthogonal
as possible. If users
want two modes at
once, perhaps we
need one mode with
a property or a minor
mode
Camera toolbar is
half about exploring
and half about
appearance
One annotation mode
that brings up a
palette with arrow,
double arrow, text,
etc – these become
sub-modes
Data-space
annotations
Combine data
cursors with other
annotations
Refactor text
annotation
More work needed
on Legend – extra
session for legend
planned
Metadata

32. 32
Who is Involved?
 Participants
– Real or surrogate users
– Other team members
 Facilitator
– Leads the activity
 Sponsor (optional)
 Observers (optional)
How Many Participants?
• Optimal 3-5 - no more than 6

33. 33
Why Use CARD to Create a Future Workflow?
 Provides a visual model of it
– Helps you see newly arranged tasks
– Helps you see the length of the new flow and its phases
– Leverages solutions from current workflow
 Collaborative
 Creates buy-in
 Validates that important pains have been solved
 Helps generate requirements grounded in a “future vision”
 Scales from small to large workflows

34. 34
Future Workflow: What are some Variations?
 Focus on the “happy path”
 Use a small group (1-3 participants)
 Time box the activity (60 minutes)
 Do it 1 on 1 with customer surrogates then validate
with others

35. 35
Using CARD to Get to a Design
Yes
Yes
Yes No
No
No
Research users and their goals
Future Design Scenarios
Your
Method
Your Task Analysis
Method
Current
Workflow
Big Picture
(optional)
Bluesky
(optional)
Future Workflow
BRIDGE (optional)
Do you understand users, roles and goals?
Do you understand current workflow?
Big Picture
(optional)
Bluesky
(optional)
BRIDGE (optional)
Could you use CARD to get to a design?
Design
Wireframes, click-thrus, paper prototypes, sketches, design cases, API’s

36. 36
CARD Case Study - EZDeploy

37. 37
Overview of the Builder Product
JavaTM Application
Wrapper
MATLAB Code
Bloated Library
File

38. 38
Overview of the Builder Product
Java TM Application
Wrapper
MATLAB Code
Bloated Library
File

39. 39
Overview of the Builder Product
Enterprise Application
Wrapper
MATLAB Code
Bloated Library
File

40. 40

41. 41

42. 42

43. 43

44. 44

45. 45
The Plan
Produce a current workflow…

46. 46
Who was Involved?
 Participants
– Selected customers who had called
our technical support team (2)
– Advanced support team (2)
 Facilitator
– UXer (1)
 Sponsor
– Development Lead (1)
 Observers
– Developers (~3)
– Validation Team (~2)
– Documentation Writer (1)

47. 47
Current workflow

48. 48
Immediate Results
 Pain problem areas were identified as puddles of pink
 The facilitators and internal surrogates worked with the
customers to explore problem areas

49. 49
Immediate Results
 The team (observers) enjoyed hearing the customers‟
perspective and were clamoring for more involvement
 The team‟s beliefs were confirmed that the process
involved the expertise of many types of users

50. 50
Immediate Results
 Development team was able to identify quick fixes for
areas of low hanging fruit

51. 51
What next?

52. 52

53. 53
The Next Phase - Construct the Future
Workflow
 Invited the same team as the current flow
– But no customers (IP and Patent)
 Developers participated in the design of the flow

54. 54
Future Workflow
Builder Blue Sky Workflow – Configuration Segment
Triggers
Existing code base in C#
or .NET
Want to move something off
my plate; give it to someone
else
Upgrade MATLAB
Problem to solve
- MATLAB by Design
- MATLAB fastest route; high
confidence
Request to formalize or
productize code. Specific
examples include:
-Move product from R&D to
Manufacturing /
commercialization
- Request for prototype or
proof of concept
- Request for a solution or
algorithm created in MATLAB
Existing GUI that I want to
turn into a Web application
Add button to
MATLAB IDE to evoke
Deploytool.
Show all the possible
targets, then get the
user to configure as
necessary
User pushes button on
MATLAB IDE to start
deploytool (user)
Has deploytool already
been configured
(system)
User selects which
targets they would like
to install (User)
Check to see if Builder
product is installed
and bought
Provide information
with links in the doc
etc to provide links
Target may be a
deployable CTF
target.
MathWorks Builder NE
Acquisition process
(User)
Lots of manual steps,
user needs to install
the framework
Does the user want to
install the .NET
framework? (User)
Deploytool Guides
User through
installing .NET
framework on their
machine
Let’s the user run
preferences, and
settings
Probes system to give
config options
System will check
configuration of
machine to make sure
all the components
and files for .NET are
installed
User may not elect to
install the framework.
If the framework is not
installed, the only
deployable component
will be the deployable
CTF.
Deploytool launches
tests, system, runtime,
verify, and config
Did it pass the tests?
Deploytool tells the
user what is missing
Go to
A
A
Goals
Machine configured
with .NET framework
Machine configured
without .NET framework
No
No
Yes
Yes
No
User can create an
“integration project”
within the MATLAB
IDE, or select an
individual file to deploy
(right mouse clicking
or equivelent).
User can select a
target if in the
integration project.
Will only perform a
bare syntax check
during coding. Slightly
different for different
targets
Selecting specific
target will allow syntax
check on M code if
user wants to
Triggers
Existing code base in C#
or .NET
Want to move something off
my plate; give it to someone
else
Upgrade MATLAB
Problem to solve
- MATLAB by Design
- MATLAB fastest route; high
confidence
Request to formalize or
productize code. Specific
examples include:
-Move product from R&D to
Manufacturing /
commercialization
- Request for prototype or
proof of concept
- Request for a solution or
algorithm created in MATLAB
Existing GUI that I want to
turn into a Web application
User has written their
code or has chosen
the code they want to
deploy. The code is
arranged into an
integration project.
(User)
User can create an
“integration project”
within the MATLAB
IDE, or select an
individual file to deploy
(right mouse clicking
or equivelent).
Is the user creating
a .NET assembly or
generic CTF? (User)
Create CTF (System)
Assign M-Components
to .NET classes
(System)
DepFun
Licensing – Which M
files deploy
Which targets may
wrap these M-Files
Create the CTF? (System
and user)
Create CTF (System)
DepFun
Licensing – Which M
files deploy
Which targets may
wrap these M-Files
Under certain circumstances
the CTF may not need to be
created – e.g. If this is the
second time around because
a new target is specified.
Create .NET Wrapper
(System)
Create Binary
(System)
.NET Assembly
Yes
No
CTF
Deployable .NET Assembly
(and optional generic CTF
component)
CTF and Assembly
packaged together
Deployable generic CTF
component
Builder Blue Sky Workflow – MATLAB Programmer Segment
The upper route will produce a
generic CTF component only. It is
thought that the person responsible
for creating this will have no
knowledge of .NET assemblies and
will able to pass this component to the
integrator. The integrator can then
modify or edit the interface when they
receive the component. No .NET
framework needs to be installed and
configured on the MATLAB
programmer’s machine as the target
is not specific. The only target
available will be the generic CTF if no
framework is installed. This route
would be preferred by MATLAB
programmers who have no
experience with .NET
The lower route will produce a .NET assembly and a generic CTF
component if desired. It is thought that the person responsible for creating
this will have a knowledge of the target language. Following this route is for
the more expert programmer, and knows how to define the .NET interface
within MATLAB. This would allow the user produce the .NET assembly that
can be immediately incorporated into the enterprise model without
modification.
Deployable generic CTF
component
Deployable .NET Assembly
(and optional generic CTF
component)
Does the integrator think
that the interface is OK?
Opens interface in
GUI and makes
changes as necessary
GUI separate from
MATLAB. Allows
integrator to change
interface as needed
Create .NET Wrapper
(System)
Create Binary
(System)
No
Yes
The integrator can
create any target,
provided they have a
MATLAB license for
that target
Integrate Assembly
into enterprise system
The lower route will produce a .NET assembly and a generic
CTF component if desired. It is thought that the person
responsible for creating this will have a knowledge of the target
language. Following this route is for the more expert
programmer, and knows how to define the .NET interface within
MATLAB. This would allow the user produce the .NET assembly
that can be immediately incorporated into the enterprise model
without modification.
The upper route will produce a generic CTF component only. It is
thought that the person responsible for creating this will have no
knowledge of .NET assemblies and will able to pass this component to
the integrator. The integrator can then modify or edit the interface
when they receive the component. No .NET framework needs to be
installed and configured on the MATLAB programmer’s machine as the
target is not specific. The only target available will be the generic CTF
if no framework is installed. This route would be preferred by MATLAB
programmers who have no experience with .NET
Builder Blue Sky Workflow – Integrator Segment
The integrator
receives either
Deployable CTF
or .NET Assembly. It
may be that in the
case of the .NET
Assembly, the
Integrated assembly

55. 55
There was an Ah-Ha Moment
 I have no idea what it was but the developers were
really excited about it, and they were able to remove a
chunk of the workflow which contained a lot of pink

56. 56
Customers tried to solve our problem for us…
And the bloated library file?
Size doesn‟t matter…
We provided an automatic download in an installer
for their customers…
…believe it or not.
“Make it smaller!”
…and they were happy.

57. 57
Technical support set out on a project to understand
and improve through root cause analysis (RCA)
Before CARD…
Our Previous Attempt at Dealing with
Customer Support Calls

58. 58
Root Cause Analysis

59. 59
 We had poorly defined categories
 Our Root Cause Analysis method looked at one
customer issue at a time
 Which call were we supposed to pick? (~100/mo)
Three Problems with Our Approach to
Classifying Issues

60. 60
Our Categories Looked Like This…
Flickr: jessicareeder

61. 61
 “This was hard”
 Lots of arguing about what was a category
 Could something be in two categories?
 Could the categories change?
 “Why are we doing this?”
 “I don‟t like you”
Consequences of Our Process…

62. 62
Talked with the quality folks at MathWorks
“Trouble organizing issues? Are you focusing on the
evidence? Do you have a workflow?”
Workflow? Did you say Workflow??
We Needed to Fix an Inefficient Process

63. 63
Why Categorize Against a Workflow?
Workflows or other value stream maps provide a
wonderful framework for categorizing evidence.
Evidence tends to be less controversial.

64. 64
We Used CARD to Define Our Categories
1. Steps in the current flow became categories
2. Did it collaboratively with the development team to get
buy in
3. Et voila! You have categories!
Verify
understanding of
data from other
packages in
MATLAB
T2
Gone outside
boundary of
current tool set
T3
Has reached a
pain threshold and
needs to solve
something
T4
Developing an
algorithm
T6
Trying out
MATLAB to see if
it is satisfactory
T7
Curious about
some data
T8
Triggers
Boss has set a
problem to solve
T1
I do it in MATLAB
because it‟s
already open
T21
Wing it!
T15
Is the data
in a local
text file?
Yes
Other workflows not
explored
E.g. local binary,
scanned from journal,
live feed, etc.
Also, problems
specific to cell arrays
not addressed
START
Open data in
text editor
Preprocess data
(Optional)
Copy from text editor,
paste into MATLAB
Google
“MATLAB” and
My File format
Search DOC for
correct read
function
Make fake
(small) file with
same format to
test
RESEARCH
Choose proper import
method for data format,
content, size
File -> Import
Import wizard
No
Too Big?
Yes
Reduce size of file
Out of memory error
(graceful)
Double-click on file in
Current Directory
Browser (MAT-file)
T11
Appropriate “load” or
“read” function
TRY TO LOAD
Use MATLAB tools
for data-specific
import process
Can‟t right-click on
file in Windows
Explorer and get
MATLAB-related
functions
Can‟t single-click
import a file from the
Editor
Indications that load
succeeded are easy
to miss
There is no indication
that the load result is
useful
No
“Load” fails (ok) but
doesn‟t suggest
alternatives (bad)
Data loads?
Header rows in text
file which are not
labels (metadata)
Data type of imported
data does not match
type in file
Yes
*Search Doc for
file suffixes
*Tools directory
for importers
Go back to
“Research”
MATLAB doesn‟t
crash – data is
visible
somewhere in
MATLAB for
checking
Progress bar or
spinning icon for
confirmation
Open imported
arrays in array editor
At some point
you have to start
and see what
goes wrong
Weak date support –
no “date” data type
WHOS, etc. in
command window
Inspect in Import
Wizard, Array Editor,
Workspace Browser
CHECK DATA
Correlate data in file
with variables and
strings in MATLAB
Excel shows
immediately and
directly what was
imported – MATLAB
doesn‟t
Checking imported
data against file may
require multiple tools
*Hard to examine
edges of large data
sets (e.g. four
corners of matrix)
Data in MATLAB
matches data in
the file
No
Imported data
correct(ed)?
Yes
Thumbnail views of
data
*Can‟t do simple
visualization
transforms in GUI –
transpose, log, etc.
*Tools for examining
3D data (sliders,
slices)
DATA (numbers) is
properly loaded and
plottable
G3
Correct data “by
hand”
Go back to “Research”
Metadata
handled?
Create and name
variables in Array
Editor
METADATA
Manage labels,
notes, odd data types
Name variables in
Import Wizard,
Workspace browser,
Command line
No provision for
metadata (notes, etc)
Use Scribe and
labeling (later)
Punt Metadata
No
Yes
MAKE DATA
PLOTTABLE
Is the correctly
imported data
complete and
plottable?
Find NaNs and deal
with them
*Examine corners of
data, look for gaps,
same number of
crows throughout,
etc.
Checking :>2D data
a special problem
Spreadsheet type
editing of numerical
data
Metadata in
MATLAB
matches data in
the file
Metadata loaded and
plottable
G3
Two vectors are
incommensurate
>> plot(x,y)
(command line)
MAKE DATA
“VISUAL”
Create a new figure –
launch plot tools
Plot from Workspace
Browser
Go to Help on “plot”
or “graph”
Preconceived Idea or
standard format
T16, 17, 18, 19
Plot Picker(s)
All data and labels
plot?
No way, dude
Yes
All necessary
data and labels
are in working
figure
Figure is ready for
analysis
G4
*Plot looks wrong, but
it is right (distorted by
outlier)
Plotting labels on x
axis is problematic
*Hard to get data
from a plot – no
single point
*Highlight single data
item in plot and edit it
Change scaling
DOC and Help
Demos and
examples
Numbers are
right?
Spreadsheet type
editing of numerical
data
Processing with
functions in
command window
Transform the data
Remove outliers
Review problem
statement
SHOW OFF THE
DATA
Do the numbers
fit the plot?
FIND AND TRY
BETTER PLOT
TYPES
Reconsider data
Yes
No
Plot picker(s)
Change plot
Plot
adequately shows
data?
Try another
Yes
No
All necessary
data correctly
represented in
the plot
*Transform data by
reorganizing it instead
of reducing or
throwing data away
G10
*Segregate noise
G11
Data and labels
are workable for
analysis
purposes
Data is adequately
visualized
G7
So many plots, so
little time
Hard to find Plot
Picker(s)
*Switching families of
displays is a short
mental step, but a
long process
Frustrating number of
iterations
It‟s hard to know
what the best is when
you haven‟t seen it
yet
Replot from
command line or
picker
SHOW THE
SOLUTION
Work with the data
view to understand
and explain the data
Zoom and/or Pan
Data tips
Ginput
Figure Property
Editor
Change View
(Camera Toolbar)
Get smaller subset or
known data to work
with
Right View for
understanding?
No
Yes
Back to change the
plot
Really bad
Review problem
statement
Is data within
acceptable
parameters?
T10
Does Data match
hypothesis?
T9
Many modes for
exploration
Zoom and pan at the
same time?
How bad is it?
Not so bad
Plot Tools
Command line
Inspector
Figure Toolbar
LET ME COUNT
THE WAYS TO
WORK WITH THE
PLOT
Which tool should I
use?
Do they work
together?
Need to add
explanations to
data
T19
Concerned with
the appearance of
the data
T22
LEGEND AND
COLORBAR
Add legend and
colorbar first so
they don‟t mess up
your plot later
Add legend and/or
colorbar
Scribe
ADDING WORDS
Lay in the details of the
message
Add data to plot
(commands to script)
title, labels, dataticks,
etc.
Inserting annotation
starts plot edit mode
Start Plot Edit Mode Data Tips
MOVING THINGS AROUND
Organize for presentation
Align figure and
legend
Align multiple figures
Change View
(Camera Toolbar)
Commands expect
HG proficiency
Writing formatting
code is HARD
Text formatting is
hard (subscript,
superscript)
*Log x-axis
superscripts hard to
read on MAC
*Did not know about
“Latek”
It isn‟t obvious how to
add Greek or
scientific symbols to
the text
*Can‟t easily reset
variables to colormap
Plot Edit mode is
hard to find
It‟s still easier toi
annotate in another
application
*No minimal, light
grey (one pixel)
gridlines
*Polar plots!!!
Equation editor like
MS Word
*Function to convert
a colordef to line
handles
*Mouse down on line
to convert color on it
from list
*No group legend (x
legend entries with y
lines each)
*Not obvious you can
edit legend text
directly
*Must do legends first
because they
dominate space
Legends cannot be
mxn
*The manner in
which we use
handles within
legends has changed
in the last three
releases
*There are different
modes of access to
MATLAB figures, but
only the first is
obvious
Message is
clear?
No
Yes
Communicate
effectively to Boss
G6
Tufte smiles
G12
Looks professional
G14
SAVE
Next?
AUTOMATION
Unexplored
Export or
Print
Needs to insert info
into a document
T5
Need data in an
electronic format
T20
Build something to do
the same thing
tomorrow
G9
Generate M-code
Edit/Save script until
it works
Code replicates
the plot?
Running a
script?
Not everything can
be automated
Lock Legend – Plot
distance
Don‟t know how big
is too big until you fail
Data is in MATLAB
G1
No way to tie
metadata to data
Data plottable?
Fig-file
T12
Back to “research”
Yes
No
Data is ready for
presentation
treatment
Understand and
accept the data
G8
Camera Toolbar Unexplored workflow
(Moving to another
application)
Unexplored Workflow
(Exporting and
Printing)
Punt automation Automation doesn‟t
offer the options I
want
Automated input
code doesn‟t link up
with automated figure
code
Unexplored workflow
(Cut, copy, paste)
Reconsider data
Can‟t set defaults for
new figures (e.g. “box
off”
Get Raw Data Into MATLAB Check Data Against File Bring In Labels, Names, Notes First Shot at a Plot Clean the Data Manipulate and Explore the Data Dress and Display the Data Get the Plot Out
Yes
Yes
Yes
No
Automate

65. 65
How We Did it
Looked at
the first
call
Noted where in the
workflow the user saw the
issue
Categorize
it!
Went to
next call

66. 66
Resulting Graph

67. 67
Our Categorization Sessions…
 Performed monthly
 Lasted no longer than one hour
 Categorized at a rate of 80-100 per hour

68. 68
Facilitation Challenges
 Focus on the sole issue and where in the workflow, and
nothing else
 Facilitator had to watch the clock and come down on
“discussion”
 Development teams try to solve during the session.
DON‟T LET THEM!

69. 69
How We‟ve Applied this Categorization
Technique
 Provided prioritization for enhancements
– Have a good understanding of weak parts in the workflow
 The enhancement effect
– Visualize version specific graphs

70. 70
CARD‟s Impact on EZDeploy
 EZDeploy goes live in six weeks
 Provided us with a five year plan
 The Deployment workflow was completely redesigned
through CARD
 Our future workflow from four years ago is very close to
our current workflow
 We will categorize against this workflow and measure
the success/failure of any enhancements to the product
over release cycles
 Our workflows are robust and we‟ve proven it
 Some teams don‟t want to do any product design and
development without doing CARD first

71. 71

72. 72
Success Stories Q & A

73. 73
Planning

74. 74
Taking a Step Back:
What UCD Activities Have You Conducted?
 Focus groups
 Contextual interviews
 Brainstorming
 Paper prototyping
 Usability Testing
 K-J Method (aka, Affinity Diagramming)

75. 75
How Do You Plan for Other Usability Activities?
 Try to understand why you‟re doing the activity
 Determine your goal(s)
 Understand or think about users and their goals
 Determine who to recruit
 Decide which UCD method will be most effective
 Create a plan for the activity, for example:
– Test tasks
– Interview questions
 Figure out which stakeholder(s) to include

76. 76
Hands-on Activity:
Planning a CARD Session
Use the template provided to plan for your own CARD
activity.
 Think about a current or upcoming project where you
might leverage CARD. Answer the following questions:
 Why might CARD be a useful tool in this situation?
 What questions did you ask to help decide?
 Work individually to fill out the planning template we
provided.
– Capture any challenges this project might pose.
– Identify specific strategies you plan to use to overcome these
challenges.

77. 77
Hands-on Activity:
Report out: Planning a CARD Session
 What challenges did you identify?
 What strategies did you come up with to deal with the
challenges?
 What was different about creating a CARD plan
compared to a test or interview plan?

78. 78
What Makes CARD Different?
 Capturing or designing a workflow
 Facilitating multiple participants
 Learning curve
 Can be a considerable time investment
 Often difficult to focus discussion
 Stakeholders can be active participants, building the
flow themselves
Stakeholders‟ emotional engagement can be high!

79. 79
Lessons Learned
Bottom line: CARD really is NOT all that different!
 In the immortal words of Winston Zeddemore
– “We have the tools,
we have the talent”
 Leverage the skills you already have!
 Take into account higher levels of
stakeholders‟ emotional engagement when planning.
Just do it!

80. 80
Supporting Resources

81. 81
Supporting Resources
Bridging User Needs to Object Oriented GUI Prototype via Task Object Design
Chapter 2 User interface Design by Tom Dayton, Al McFarland, Joseph Kramer
Workflow Modeling: Tools for Process Improvement and Application Development
Chapter 8 Workflow Process Modeling by Alec Sharp and Patrick McDermott
The Persona Lifecycle
Chapter 10 Reality and Design Maps by Tamara Adlin and Holly Jamesen Carr
Designing for the Digital Age by Kim Goodwin
Chapter 16 Designing the Form Factor and Interaction Framework
Mental Models by Indi Young
Chapter 10 Create the Mental Model
Layered Participatory Analysis: New Developments in the CARD Technique
Michael J. Muller
UPA 2005 The BRIDGE
Len Conte, Eugenie Bertus, Scott Isensee

82. 82
CARD Tutorial Presenters
 Len Conte – len.conte@mathworks.com
 Mark Ainscow – mark.ainscow@mathworks.com
 Debbie Cook – debbie.cook@mathworks.com
 Stephen Reinach – stephen.reinach@mathworks.com
 Lissa Story – lissa.story@mathworks.com