INCLUSIVE &
ACCESSIBLE

UX PRACTICES
How Low-Fi Artifacts Promote
Whole-Team Collaboration

Balanced Team SF 2013
@brittan...
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
Sunday, November 3, 13
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m

4

4
POLY-SKILLED
CO-LOCATED
SELF-MANAGING
TEAMS
OF
@br i ttanyhunter

Sunday, November 3, 13

MAKERS

@atom icobje ct

http://...
Strategy
Scenarios
Sketching
Planning

Coding

Prototypes
IA & IxD Patterns
v
Markup
Validation

@br i ttanyhunter

Sunday...
PRODUCT
BACKBONE

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
PERSONAS
CONTEXT SCENARIOS

DETAILED WIREFRAMES

USER OBSERVATION

USABILITY TESTING
@br i ttanyhunter

Sunday, November 3...
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
tl;dr
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
too perfect
easily misread
time consuming

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomic...
200+
HOURS

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
LOW-FI
STORYBOARDS

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
Easily
Scannable
Format

User
Persona

Key
Interface
Elements

Context

Narrative
@br i ttanyhunter

Sunday, November 3, 1...
Easily
Scannable
Format

User
Persona

Key
Interface
Elements

Context

Narrative
@br i ttanyhunter

Sunday, November 3, 1...
SOMEWHAT
POLISHED
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
LESS
POLISHED

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
WORKFLOWORIENTED
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
LABELS
DETAIL
SKETCHES

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
TRACING &
REPRODUCING

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
QUICK
REFERENCE

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m

23
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
Wow! I can’t believe how
much we accomplished
this week!
Elements

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje...
The storyboard document
is unbelievably useful for
communicating with other
decisionmakers at my
company.

@br i ttanyhunt...
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
?
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
High-Fi Mockups of Key Interfaces

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.c...
CLICKABLE
PROTOTYPES

Proto in Browser

v

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomic...
@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://spin .atomicobject.co m
Storyboard with sticky/scribbles on it

MALLEABLE
ARTIFACTS

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

h...
33%
FEWER HOURS

spent on storyboards vs wireframes

@br i ttanyhunter

Sunday, November 3, 13

@atom icobje ct

http://sp...
THANK
YOU!

@brittanyhunter
http://www.atomicobject.com

Balanced Team SF 2013

@br i ttanyhunter

Sunday, November 3, 13
...
Upcoming SlideShare
Loading in...5
×

Inclusive and Accessible UX Practices: How Low-Fi Artifacts Promote Whole-Team Collaboration

657

Published on

Brittany Hunter, Atomic Object

High-fidelity, carefully-annotated wireframes and design mockups are brittle and time-consuming to manage, often requiring expensive software and specialized skill to create and maintain. In this talk, Brittany will share case studies of how poly-skilled product teams of designers and developers at Atomic Object share tasks and collaborate on UX, focus on the user, and iterate on design quickly by using low-fidelity sketches, storyboards, and mockups. She will share techniques for creating flexible, easily-managed design artifacts, as well as discuss the benefits and caveats of these techniques. This talk was originally presented at Agile & Beyond 2013 and has been updated to include more case studies from recent projects.

Published in: Business, Technology

Inclusive and Accessible UX Practices: How Low-Fi Artifacts Promote Whole-Team Collaboration

  1. 1. INCLUSIVE & ACCESSIBLE UX PRACTICES How Low-Fi Artifacts Promote Whole-Team Collaboration Balanced Team SF 2013 @brittanyhunter http://www.atomicobject.com Sunday, November 3, 13
  2. 2. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  3. 3. Sunday, November 3, 13
  4. 4. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m 4 4
  5. 5. POLY-SKILLED CO-LOCATED SELF-MANAGING TEAMS OF @br i ttanyhunter Sunday, November 3, 13 MAKERS @atom icobje ct http://spin .atomicobject.co m 5 4
  6. 6. Strategy Scenarios Sketching Planning Coding Prototypes IA & IxD Patterns v Markup Validation @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m Hi-fidelity Hi-fidelity Design Design
  7. 7. PRODUCT BACKBONE @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  8. 8. PERSONAS CONTEXT SCENARIOS DETAILED WIREFRAMES USER OBSERVATION USABILITY TESTING @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  9. 9. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  10. 10. tl;dr @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  11. 11. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  12. 12. too perfect easily misread time consuming @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  13. 13. 200+ HOURS @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  14. 14. LOW-FI STORYBOARDS @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  15. 15. Easily Scannable Format User Persona Key Interface Elements Context Narrative @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  16. 16. Easily Scannable Format User Persona Key Interface Elements Context Narrative @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  17. 17. SOMEWHAT POLISHED @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  18. 18. LESS POLISHED @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  19. 19. WORKFLOWORIENTED @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  20. 20. LABELS DETAIL SKETCHES @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  21. 21. TRACING & REPRODUCING @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  22. 22. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  23. 23. QUICK REFERENCE @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  24. 24. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m 23
  25. 25. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  26. 26. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  27. 27. Wow! I can’t believe how much we accomplished this week! Elements @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  28. 28. The storyboard document is unbelievably useful for communicating with other decisionmakers at my company. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  29. 29. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  30. 30. ? @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  31. 31. High-Fi Mockups of Key Interfaces @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  32. 32. CLICKABLE PROTOTYPES Proto in Browser v @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  33. 33. @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  34. 34. Storyboard with sticky/scribbles on it MALLEABLE ARTIFACTS @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m 33
  35. 35. 33% FEWER HOURS spent on storyboards vs wireframes @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m
  36. 36. THANK YOU! @brittanyhunter http://www.atomicobject.com Balanced Team SF 2013 @br i ttanyhunter Sunday, November 3, 13 @atom icobje ct http://spin .atomicobject.co m

×