@quiffboy #CampDigital 17 Mar 2016

Designing For The Gap

Quasi-provocative rhetorical question:

GODDAMN. TIME.EVERY.

Another potentially provocative statement:

StartLaunch app

Launch app Is logged in? BBC ID sign in/register process

Sign in or register

Upsell & sign in process

Onboarding process

Sign inNo

Yes

Has onboarded?

No

Home screen

Yes Done

Content

Done

View item

End

Share

Native share panel

Close app

ShareUser shares content

Done

Why am I stood here?

@quiffboy

.com

Northern User Experience Manchester ~ Leeds ~ Newcastle ~ Liverpool

nuxuk.org ~ @nuxuk

Monday 25th April 2016

White Cloth Gallery, Leeds

Part of @leedsdigifest16

Tickets only £90

w: 2016.nuxcamp.ukt: @nuxuk

So, about these gaps…

Designing complex systems is hard, right?

Many techniques for gathering information are inefficient

Page A Page B

Is this true?

Page C Page D

Yes No

Link label

Link label

Start

End End

Standard flow chart notation

PDFDownload

How?

1. Start with a zoomed out view

2. Agree the high-level flow quickly

3. Don’t get hung up on the detail (yet!)

Start Onboarding screens

Content Home screenEnd

Launch app Sign in

Done

View itemClose app

Done

Upsell & sign in

And then…

1. Identify stakeholders for each part of the system

2. Work with them to flesh out detail on their part

3. Continually iterate, validate and distribute

4. Fill in those gaps

StartLaunch app

Launch app Is logged in? BBC ID sign in/register process

Sign in or register

Upsell & sign in process

Onboarding process

Sign inNo

Yes

Has onboarded?

No

Home screen

Yes Done

Content

Done

View item

End

Share

Native share panel

Close app

ShareUser shares content

Done

BBC ID sign in/register process

Upsell & sign in process

Onboarding process

Content

StartLaunch app

Launch app Is logged in? BBC ID sign in/register process

Sign in or register

Upsell & sign in process

Onboarding process

Sign inNo

Yes

Has onboarded?

No

Home screen

Yes Done

Content

Done

View item

End

Share

Native share panel

Close app

ShareUser shares content

Done

BBC ID sign in/register process

Upsell & sign in process

Onboarding process

Content

The bit users care

about

Complex sub-process

Complex sub-process

Complex sub-process

StartLaunch app

Launch app Is logged in? BBC ID sign in/register process

Sign in or register

Upsell & sign in process

Onboarding process

Sign inNo

Yes

Has onboarded?

No

Home screen

Yes Done

Content

Done

View item

End

Share

Native share panel

Close app

ShareUser shares content

Done

BBC ID sign in/register process

Upsell & sign in process

Onboarding process

Content

StartLaunch app

Launch app Is logged in? BBC ID sign in/register process

Sign in or register

Upsell & sign in process

Onboarding process

Sign inNo

Yes

Has onboarded?

No

Home screen

Yes Done

Content

Done

View item

End

Share

Native share panel

Close app

ShareUser shares content

Done

21

Needs clarification Integration

point

If you really wanna get fancy…

Upsell screen(s) Home screen

ID 1Upsell screen(s) ID 2Home screen

Give ‘em an ID

Carousel of 3 panels: - Upsell message - Image of key feature

Sign in buttonRegister button

ID 1Upsell screen(s)

Menu iconWelcome message + user’s first name

List of exam subjects: - Subject name - Subject icon - Read/unread flag - % complete

ID 2Home screen

List the elements on

page

Give ‘em an ID

And this way is better than other ways because…?

Many tools

Something to point at

Allows working in parallel

Stakeholder ownership

Easily understood

Shared understanding

Got that?

Quick recapThis thing is awesome

Visualises the system(s)

It’s (fairly) quick to do

It’s (fairly) easy to understand

Living, evolving document

No gaps

Remember this?

Where I stole those images from…• 360-degree corkscrew stunt in James Bond

movie The Man with the Golden Gun

• Alligator & Model, Florida, 1950s

• Polar Bear (Ursus maritimus) close-up. Hudson Bay, Churchill, Manitoba, Canada

• 15 surprising facts about cars

• The real story of the UN Human Rights Council

• Home Sweet Art Room: Creating a Welcoming Environment

• Fallout Vault Boy

• Café wall illusion

• Kim Jong Un Looking at Things

• You Are Mine

• Europe's longest place name

• Star Trek TOS Season 2: My Top 5 Fave Episodes

• Agent Cooper's famous thumbs up

• Toowong railway station in Brisbane, Australia

Questions?

Thanks :)

@quiffboy #CampDigital 17 Mar 2016