UX as a discipline is made up of a number of micro-disciplines: information architects, interaction designers, user researchers, visual designers, etc. Seemingly new titles are invented every few weeks. During a project many of us wear multiple hats, and it can be difficult to straddle these often conflicting roles, and to bridge the gaps between them. Added to this, we're only human and it's natural that we get drawn towards the activities we enjoy. On a good day we might be able to spot this happening and mediate our actions accordingly, but if we're not careful it can be all too easy for us to gloss over the tricksy stuff in favour of the shiny, the sexy or the seemingly simple. However, complex systems have many nooks and crannies that are easy to miss and if we don't deal with them early on, the bits that we subconsciously gloss over will come back to haunt us. Over the last couple of years I've developed an approach that helps ensure these tricksy areas of our systems don't fall between the cracks in our own bias. Using an approach that combines the documenting of system flows and user journeys iteratively alongside key stakeholders, domain experts, business analysts, designers, developers, and other disciplines. I've found a way of capturing what happens between our pages, so we can design for the edge and the problem cases, and so we can design for the gaps.

1. @quiffboy @umbracoUKfest #umbukfest 4 Nov 2016
Designing For The Gap

2. Quasi-provocative rhetorical question:

3. GODDAMN. TIME.EVERY.

4. Another potentially provocative statement:

5. From @jcolman:

6. 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?

7. @quiffboy

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

15. But that’s irrelevant

16. Let’s talk about gaps, baby…

17. Designing complex systems is hard, right?

18. If you don’t design systems, they just happen

19. Many techniques for gathering information are inefficient

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

21. How >= What

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

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

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

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
BBC ID sign in/
register process
Upsell & sign in
process
Onboarding
process
Content

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

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

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

30. Keys are key

31. Journey
start or end
Page
Document
Group of pages
Key
Action
3rd-party
integration
TBC
Manual
operation
Decision
Inline
update
Automated
operation
Workflow outlined
elsewhere in doc

33. If you really wanna get fancy…

34. Upsell screen(s) Home screen

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

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

37. My thing is better
than your thing

38. So. Many. Tools.

39. Something to point at

40. Allows working in parallel

41. Iterative and incremental

42. UML? My arse!

43. Easily understood

44. Shared understanding

45. Stakeholder ownership

46. Empowerment

47. Got that?

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

50. Remember this?

51. 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
• Bad Bacteria
• W1A
• Here’s one we made earlier
• Fallout Vault Boy
• Kim Jong Un Looking at Things
• Café wall illusion
• Two stone tablets
• UML Diagram
• Europe's longest place name
• Star Trek TOS Season 2: My Top 5 Fave Episodes
• You Are Mine
• My Hero
• Agent Cooper's famous thumbs up
• Toowong railway station in Brisbane, Australia

52. Questions?
Thanks :)
@quiffboy @umbracoUKfest #umbukfest 4 Nov 2016