Boost Fertility New Invention Ups Success Rates.pdf
Â
Tyson Kallberg, Designing for Usability, WarmGun 2013
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
ïŹnd speciïŹc problems to prototype
build a solution that is just as speciïŹc
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
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
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
17.
18.
19.
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*
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 ïŹexible enough for dozens of brands
- again built in quartz
- used real data from brands
30. - used curves to extrapolate a palette from 2 colours
31. - this was the ïŹnal 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
33.
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