Designing for Usability: Asana's 5 Dimensions of Prototyping Fidelity

1. designing for usability
five dimensions of prototyping fidelity
- intro about me
- overview: prototypes as designers, dimensions, examples

2. prototypes are like unicorns
- prototypes are a lot like ‘the unicorn’ (designer-engineer hybrid)
> next ‘big thing’ for the design process
> idea better than reality
- skill-set mismatch for most people
* How many people can build something faster in code as they can in a graphics app?

3. so what about the rest of us?
-
take stock of your skill set
find specific problems to prototype
build a solution that is just as specific
don’t get lost in the weeds
best prototypes explore things ‘photoshop’ can’t

4. 5 dimensions of prototyping
- new to me
> but, good mental framework
- this is like the good/fast/cheap triangle

5. visual
sketch of pixel-perfect mock?
- simple, visual fidelity

6. interaction
click-through prototype or fully interactive?
- granularity of interactions
> do I tap on the screen anywhere and it advances vs. every button does what it should

7. breadth
how many use cases do you cover?
- how many things can I do

8. depth
happy path, or all the edge cases?
- validation errors, loading states, etc…

9. data
lorem ipsum or real data?
- using real data -> better yet user’s data
- most often overlooked

10. full product
- all the things
caution that following examples are just ‘typical’

11. paper
- basic visuals
- potential for good breadth
- fast to get up and running

12. motion
after effects, quartz composer
- animation tests, transitions
- can be high on data/interactivity, typically is not

13. click-through
fireworks, invision, keynote
- can be strong in many dimensions -> takes a lot of time

14. examples
- examples are of all very focused prototypes
- solves problems faster than photoshop

15. font prototype
- needed to test fonts quickly in situ
- fast html prototype
- bare-bones implementation

16. - image in the background, text is all html elements
- simple controls at bottom to change fonts
- easy to test new fonts

20. data visualization
-
background on problem: integrate infographics
problems with most infographics (worse than tabular data, narrative)
goal: focus on the narrative of the game (hockey!)
use of QC
> brought in feed data
> used QC to ‘sketch’ visualizations
numerous tests, but these are the interesting ones

21. *How many people know what Hockey is?
*How many people have watched Hockey?
*How many people care about Hockey?
- x,y coords of plays
- plays are coloured
- notice rink
- notice predictable locations of different plays
- can be played out over-time
- seen on websites today
- noisy

22. -
!
x axis: where play is on ice (side)
y axis: time
HRs are period breaks
dot colour, again, playtype
- common problem of all graphs, noise
NOISE == everything looks the same

23. - stripped out ‘noisy’ plays
- focused on shots + goals
- x-axis: time
- y-axis: shot differential
> home shot == line goes up
> away shot == line goes down
- dots are goals, green home, red away
*shape is what’s interesting*

24. another balanced game

25. a super back-and-forth game
* note stripped out overtime in example*

26. really lopsided game
notice basic visual fidelity

27. - brought through 30 or so games
- noticed lots of different shapes
* Story about playoff game at office *

28. colour system
- problem: old white label app, required tons of assets, needed to reduce assets
> needed to be flexible enough for dozens of brands
- again built in quartz
- used real data from brands

29. Old: 100+ assets + 2 colours
Goal: 1-5 assets, 2 colours

30. - used curves to extrapolate a palette from 2 colours

31. - this was the final palette (also in QC), had to build prototype of screen

32. - built elements ‘natively’ in QC
- allowed for quick tweaking of curves live with colours
- allowed us to test edge cases like pure whites, blacks, same colours

34. - some logic in here about reverse text colour over different bgs

35. - was able to hand over equations to devs after
- app can be built out of 2 colours + 2 assets

36. every prototype is different
•
don’t build more than you need
•
answer questions that aren’t easily
solved with mockups
•
use the technique that fits the task

37. questions?
@tysonkallberg