using storyboards to demonstrate user flows

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

kkaufmann@karlkaufmann.com

karlkaufmann.com