using storyboards to demonstrate user flows
DESCRIPTION
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.TRANSCRIPT
Using Storyboards to Demonstrate User Flows to Clients
Karl Kaufmann @karolus
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
User Flow Diagrams
Crystal clear to practitioners, but can clients follow?
If you can’t explain it simply, you don’t understand it well enough.
-ALBERT EINSTEIN
SolutionI6.0-Conduct Survey Screen
Facility X | Survey Y
NExt
Verification Criterium 3 Yes No Not Applicable
Verification Criterium 2 Yes No Not Applicable
Verification Criterium 1 Yes No Not Applicable
Survey Standard A
Add Comment
I5.0-Start Survey Screen
Facility X Surveys
Health FacilityService Assessment:
Sta r t
Performance Assessment:
S e l e c t
Start SurveyEnter Survey Date: X X X X X X
Benefits
• Clear, easy to understand
• Easily shared, on- and offline
• Annotatable-boosts collaboration
• Ability to quickly iterate helps with agile workflows
Broad View-Multiple FlowsI7.0-Complete Survey Screen
1GO
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 3 Yes No Not Applicable
Verification Criterium 2 Yes No Not Applicable
Verification Criterium 1 Yes No Not Applicable
Survey Standard A
Add Comment
1GO
HOME
1GO
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 og i n
I5.0-Start Survey Screen
Facility X Surveys
Health FacilityService Assessment:
Sta r t
Performance Assessment:
S e l e c t
Start SurveyEnter 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 SynchS 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 • • • XS 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 ReviewSurveys
Sy n c h a n d S e t t i n g s
I2.0-Initial Setup Screen
WelcomePlease Set up your Profile:USERName: Password:
URL:
I1.0-Introduction Splash Screen
Single Flow-High Detail
I7.0-Complete Survey Screen
1GO
HOME
I6.0-Conduct Survey Screen
Facility X | Survey Y
NExt
Verification Criterium 3 Yes No Not Applicable
Verification Criterium 2 Yes No Not Applicable
Verification Criterium 1 Yes No Not Applicable
Survey Standard A
Add Comment
I5.0-Start Survey Screen
Facility X Surveys
Health FacilityService Assessment:
Sta r t
Performance Assessment:
S e l e c t
Start SurveyEnter 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 ReviewSurveys
Sy n c h a n d S e t t i n g s
I2.0-Initial Setup Screen
WelcomePlease Set up your Profile:USERName: Password:
URL:
I1.0-Introduction Splash Screen
Alternate Flow
I7.0-Complete Survey Screen
1GO
HOME
I6.0-Conduct Survey Screen
Facility X | Survey Y
NExt
Verification Criterium 3 Yes No Not Applicable
Verification Criterium 2 Yes No Not Applicable
Verification Criterium 1 Yes No Not Applicable
Survey Standard A
Add Comment
I5.0-Start Survey Screen
Facility X Surveys
Health FacilityService Assessment:
Sta r t
Performance Assessment:
S e l e c t
Start SurveyEnter 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 ReviewSurveys
Sy n c h a n d S e t t i n g s
I1.0-Introduction Splash Screen
Storyboarding Goal
Helping more client stakeholders understand the application flow process boosts collaboration and
bolsters your business case.
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
Thank You
@karolus
karlkaufmann.com