Process and flow diagrams, even when well executed, can still be difficult to follow for clients unfamiliar with standard design processes. Illustrated storyboards offer design teams a method to present user flows in an easy-to-follow format that adds substance to a seemingly abstract process, helping to involve stakeholders more fully in the project.

1. Using Storyboards to Demonstrate
User Flows to Clients
Karl Kaufmann @karolus

2. Illustrating the Process
• Exhaustive documentation is good for estimating and job scoping,
but oftentimes not for explaining the application to clients
• As the adage/cliché states: a picture is worth a thousand words—
perhaps more when it comes to documentation
• Helping more stakeholders understand the flow boosts both
collaboration and your business case

3. User Flow Diagrams

4. Crystal clear to practitioners,
but can clients follow?

5. If you can’t explain it simply, you don’t
understand it well enough.
-ALBERT EINSTEIN

6. Solution
I6.0-Conduct Survey Screen
Facility X | Survey Y
NExt
Verification Criterium 3Yes No Not Applicable
Verification Criterium 2Yes No Not Applicable
Verification Criterium 1Yes No Not Applicable
Survey Standard A
Add Comment
I5.0-Start Survey Screen
Facility X Surveys
Health Facility
Service Assessment:
Sta r t
Performance
Assessment:
S e l e c t
Start Survey
Enter Survey Date: X X X X X X

7. Benefits
• Clear, easy to understand
• Easily shared, on- and offline
• Annotatable-boosts collaboration
• Ability to quickly iterate helps with agile workflows

8. Broad View-Multiple Flows
I7.0-Complete Survey Screen
GO
HOME
I6.1-Complete Survey Screen
Facility X | Survey Y
This survey is now
Complete.
FinishBacK
Go back to make edits, or click finish to complete the
survey and return to home.
I7.2-Synch Survey Screen
I6.0-Conduct Survey Screen
Facility X | Survey Y
NExt
Verification Criterium 3Yes No Not Applicable
Verification Criterium 2Yes No Not Applicable
Verification Criterium 1Yes No Not Applicable
Survey Standard A
Add Comment
GO
HOME
GO
HOME
I5.1-Edit Selected Survey Screen
Verification Criterium 3
Yes
No
Not Applicable
Verification Criterium 2
Yes
No
Not Applicable
Verification Criterium 1
Yes
No
Not Applicable
Survey Standard B
Add Comment
I6.2-Upload LOgin Screen
Please Log in to upload
your reports
User Name: (Current user)
Password:
L o g i n
I5.0-Start Survey Screen
Facility X Surveys
Health Facility
Service Assessment:
Sta r t
Performance
Assessment:
S e l e c t
Start Survey
Enter Survey Date: X X X X X X
I5.2-Select Surveys to Synch Screen
Survey Synch Manifest
S U R V E Y DAT E FA C I L I T Y
S U R V E Y A X X X X FA C I L I T Y X
S U R V E Y G X X X X FA C I L I T Y X
S U R V E Y P X X X X FA C I L I T Y Y
S U R V E Y R X X X X FA C I L I T Y X
Please carefully review this list-after synching, no further
changes can be made.
uploadBacK
I4.1-Review Surveys Screen
Review My Surveys
S u r v e y Dat e X Y Z Stat u s
S u r v e y A X X X X • • • •
S u r v e y B X X X X • • • •
S u r v e y C X X X X • • • •
S u r v e y D X X X X • • • •
S u r v e y E X X X X • • • •
In Progress | Complete | Submitted
U p l oa d S u r v e y s
I4.0-Select Facility Screen
Select Facility:
Region: S e l e c t
District: S e l e c t
Facility: S e l e c t
Sta r t S u r v e y
I4.2-Select Surveys to Synch Screen
Select Surveys to Synch
S U R V E Y DAT E X Y Z O K ?
S U R V E Y A X X X X • • • •
S U R V E Y B X X X X • • • •
S U R V E Y C X X X X • • • •
S U R V E Y D X X X X • • • X
S U R V E Y E X X X X • • • •
Sta r t U p l oa d
I3.0-Home Screen
Select ACtion:
Start
Survey
Review
Surveys
S y n c h a n d S e t t i n g s
I2.0-Initial Setup Screen
Welcome
Please Set up your Profile:USERName:
Password:
URL:
I1.0-Introduction Splash Screen

9. Single Flow-High Detail
I7.0-Complete Survey Screen
GO
HOME
I6.0-Conduct Survey Screen
Facility X | Survey Y
NExt
Verification Criterium 3Yes No Not Applicable
Verification Criterium 2Yes No Not Applicable
Verification Criterium 1Yes No Not Applicable
Survey Standard A
Add Comment
I5.0-Start Survey Screen
Facility X Surveys
Health Facility
Service Assessment:
Sta r t
Performance
Assessment:
S e l e c t
Start Survey
Enter Survey Date: X X X X X X
I4.0-Select Facility Screen
Select Facility:
Region: S e l e c t
District: S e l e c t
Facility: S e l e c t
Sta r t S u r v e y
I3.0-Home Screen
Select ACtion:
Start
Survey
Review
Surveys
S y n c h a n d S e t t i n g s
I2.0-Initial Setup Screen
Welcome
Please Set up your Profile:USERName:
Password:
URL:
I1.0-Introduction Splash Screen

10. Alternate Flow
I7.0-Complete Survey Screen
GO
HOME
I6.0-Conduct Survey Screen
Facility X | Survey Y
NExt
Verification Criterium 3Yes No Not Applicable
Verification Criterium 2Yes No Not Applicable
Verification Criterium 1Yes No Not Applicable
Survey Standard A
Add Comment
I5.0-Start Survey Screen
Facility X Surveys
Health Facility
Service Assessment:
Sta r t
Performance
Assessment:
S e l e c t
Start Survey
Enter Survey Date: X X X X X X
I4.0-Select Facility Screen
Select Facility:
Region: S e l e c t
District: S e l e c t
Facility: S e l e c t
Sta r t S u r v e y
I3.0-Home Screen
Select ACtion:
Start
Survey
Review
Surveys
S y n c h a n d S e t t i n g s
I1.0-Introduction Splash Screen

11. Storyboarding Goal

12. Helping more client stakeholders
understand the application flow
process boosts collaboration and
bolsters your business case.

13. Wrap-Up
Suggested Resources
• Bill Buxton: Sketching User Experiences, Morgan Kaufman, 2010
• Kevin Cheng: See What I Mean, Rosenfeld Media, 2012
• Betty Edwards: Drawing from the Right Side of the Brain, Tarcher,
2012

14. Thank You
@karolus
kkaufmann@karlkaufmann.com
karlkaufmann.com