inclusive & accessible ux practices – how low-fidelity artifacts promote whole-team...
DESCRIPTION
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.TRANSCRIPT
Balanced Team SF 2013
@brittanyhunter http://www.atomicobject.com
How Low-Fi Artifacts PromoteWhole-Team Collaboration
INCLUSIVEACCESSIBLE
&
UX PRACTICES
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
Monday, November 11, 13
4@brittanyhunter @atomicobject http://spin.atomicobject.com 4
Monday, November 11, 13
5@brittanyhunter @atomicobject http://spin.atomicobject.com 4
POLY-SKILLEDCO-LOCATED
TEAMSOF
SELF-MANAGINGMAKERS
Monday, November 11, 13
Hi-fidelity Design
v
@brittanyhunter @atomicobject http://spin.atomicobject.com
Strategy
Scenarios
Sketching
Planning
Prototypes
IA & IxD Patterns
Markup
Validation
CodingHi-fidelity
Design
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
PRODUCTBACKBONE
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
CONTEXT SCENARIOSDETAILED WIREFRAMES
USER OBSERVATIONUSABILITY TESTING
PERSONAS
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
tl;drMonday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
too perfect
easily misread
time consuming
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
200+HOURS
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
LOW-FISTORYBOARDS
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
User Persona
Context
Key Interface Elements
Easily Scannable
Format
Narrative
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
SOMEWHATPOLISHED
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
LESSPOLISHED
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
WORKFLOW-ORIENTED
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
DETAILSKETCHES
LABELS
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
TRACING &REPRODUCING
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
QUICKREFERENCE
Monday, November 11, 13
23@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
Wow! I can’t believe how much we accomplished
this week!Elements
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
The storyboard document is unbelievably useful for
communicating with other decisionmakers at my
company.
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
?@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
High-Fi Mockups of Key Interfaces
@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
v
Proto in Browser
@brittanyhunter @atomicobject http://spin.atomicobject.com
CLICKABLEPROTOTYPES
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
Monday, November 11, 13
33
Storyboard with sticky/scribbles on it
@brittanyhunter @atomicobject http://spin.atomicobject.com
MALLEABLEARTIFACTS
Monday, November 11, 13
@brittanyhunter @atomicobject http://spin.atomicobject.com
33%FEWER HOURS
spent on storyboards vs wireframes
Monday, November 11, 13
Balanced Team SF 2013
@brittanyhunter http://www.atomicobject.com
@brittanyhunter @atomicobject http://spin.atomicobject.com
THANK YOU!
Monday, November 11, 13