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
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
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 flexible 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 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
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