Designing for the Gap

1. @quiffboy #CampDigital 17 Mar 2016
Designing For The Gap

2. Quasi-provocative
rhetorical question:

3. GODDAMN. TIME.EVERY.

4. Another potentially
provocative statement:

5. Start
Launch 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?

6. @quiffboy

7. .com

10. Northern User Experience
Manchester ~ Leeds ~ Newcastle ~ Liverpool
nuxuk.org ~ @nuxuk

11. Monday 25th April 2016
White Cloth Gallery, Leeds
Part of @leedsdigifest16
Tickets only £90
w: 2016.nuxcamp.uk
t: @nuxuk

14. So, about these gaps…

15. Designing complex
systems is hard, right?

16. Many techniques for gathering
information are inefficient

18. 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

19. 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!)

21. Start
Onboarding
screens
Content Home screenEnd
Launch app Sign in
Done
View itemClose app
Done
Upsell & sign in

22. 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

23. Start
Launch 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

24. Start
Launch 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

25. Start
Launch 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

26. Start
Launch 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
2
1
Needs
clarification Integration
point

28. If you really wanna get fancy…

29. Upsell screen(s) Home screen

30. ID 1Upsell screen(s) ID 2Home screen
Give ‘em an ID

31. Carousel of 3 panels:
- Upsell message
- Image of key feature
Sign in button
Register button
ID 1Upsell screen(s)
Menu icon
Welcome 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

32. And this way is better than
other ways because…?

33. Many tools

34. Something to point at

35. Allows working in parallel

36. Stakeholder ownership

37. Easily understood

38. Shared understanding

39. Got that?

40. Quick recap
This thing is awesome
Visualises the system(s)
It’s (fairly) quick to do
It’s (fairly) easy to understand
Living, evolving document
No gaps

42. Remember this?

44. 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

45. Questions?
Thanks :)
@quiffboy #CampDigital 17 Mar 2016