Day 2 of a 4-day design intensive curriculum I created and taught at the iHub in Nairobi, Kenya as part of Microsoft's MySkills4Afrika program. This deck focuses on designing for the human form (including an introduction to all forms of natural user interface), elements of Microsoft's Scenario Focused Engineering process, and tips on using storytelling techniques like storyboarding to improve the humanistic focus of your design process.

2. Topics Covered
DAY 1
Introduction to Modern Design
Microsoft Design Principles
Design Process
Windows Building Blocks
Build 2014
DAY 2
Storytelling and the Human Fom
Natural User Interfaces
Mini-improv workshop: Storytelling
Storyboarding, Scenarios, and Personas
Technologies & Trends
DAY 3
Psychology of Design
Basic principles
Gamification
Motivational Design
DAY 4
Visual Design for Modern UI
Basics
Grids & Tiles
Typography
Color & Content

3. This is not a computer science class.
This class is not just for those that want to be designers
This is not an intro-level user experience class

4. Degree in Computer Science and Human-
Computer Interaction from Carnegie Mellon
University
Over 10 years of experience spanning
multiple industries: web, automotive, cloud
and server technology, education, theme
parks, and video games.
6.5 years at Microsoft
My current project: designing the future of
the connected experience for cars; helping
to define the future of Microsoft’s Internet of
Things
In my free time: I’m a professional improv
actress/teacher, singer, and video gamer.

8. - Touch & Haptic Feedback
- Voice control / Speech
- Gesture (movement through space)

9. lighter cognitive burden
new options
traditional input methods
don’t work

10. touch

11. Touch target size

13. Touch target size:
TWIST!

14. Visual feedback

15. Living with the
hand

16. Touch Gestures:
An Example

17. Trends on the
horizon

19. Defining
“grammar-based
interaction”

20. Defining “natural
language”

21. Speech listening
models

22. Lessons learned
from life as a
speech designer

26. Gesture input
models

29. State of the art

31. Hover and
proximity
detection

32. Gesture design
pitfalls
Poorly designed gestures can
cause physical harm to users!

36. Planning at
Microsoft
We use “scenario
focused design” as a
process to help us
ensure we’re building
the right products.
By learning a few of our
methods, your planning
will improve as well.

38. Personas don’t work when they’re not well-
communicated.

39. What makes a
good persona?

40. Persona traps

41. Personas: Practice and Theory
Personas, Participatory Design, and Product
Development: An Infrastructure for Engagement

42. How can we connect these learnings to our
design process? How do we ground ourselves
in our customers’ reality instead of our own?
Scenarios and storyboards.
iHub already teaches great courses on interviewing, personas, research and
contextual inquiry. We won’t dwell on that process here.

43. story
happy ending

44. S
P
I
C
I
E
R

45. Download attachments
Edit content
Share content with others
Send attachments
Forward meeting invites
Check meeting details
View content
Log into a VPN
Change corporate settings
Comply with IT policies
Stay secure
Communicate with others
Feel satisfied that work is
complete

46. Download attachments
Edit content
Share content with others
Send attachments
Forward meeting invites
Check meeting details
View content
Log into a VPN
Change corporate settings
Comply with IT policies
Stay secure
Communicate with others
Feel satisfied that work is
complete

48. piece of email
unlocks clicks new mail icon note
clicks on “reply”
beeps. new email
Excel attachment

49. Jane, a sales exec, has only 30 minutes before her flight to Chicago
leaves. While waiting, Jane notices an important message from her colleague,
Sue. Their partner has asked to see 3rd quarter projections as well as 2nd
quarter. Jane anxiously responds to her colleague to let her know that she got
the message but doesn’t have the 3rd quarter projections – can Sue send it to
her immediately, before her flight leaves?
<magic happens>
A couple of minutes later, Jane gets the 3rd quarter projections and has just
enough time to skim through it before boarding her flight, where she will read
it thoroughly. She is relieved and confident that she will be fully prepared for
her meeting.

50. Opportunity or problem
<Magic happens>
how
Happy ending

52. Intentional product scoping constraint
B) “Jane uses the dropdown to pick the right doc…”
Implementation detail
User context supported by research

54. Storyboarding

55. Dan Roam:
The Back of
the Napkin

56. Why storyboards?
Make our users’ context tangible & understandable
Get stakeholders emotionally connected
Convey the human results we’re looking for
Define success independent of a solution

57. It’s 5PM and Allison is on the
highways heading home from work.
Allison pulls into her garage after a
long day of work.
Allison turns off the engine and is
ready to head inside.
FRAME 1 FRAME 2 FRAME 3

58. Allison’s car chimes and a message
appears as it is read to her. The
system requires a major update that
will improve performance and
security. Allison particularly notices
that the car won’t be usable during
the update.
The car asks if she’d like the
update scheduled for late tonight,
but Allison is worried that her sick
son might get worse. Allison
instead chooses a time that’ll work
better for her.
Allison heads inside and checks in
on her son. She doesn’t give her car
any more thought that night.
FRAME 4 FRAME 5 FRAME 6

59. On Thursday night, as Allison is
turning off her car, she gets a
reminder that SPA will be applying
the update that night at 2AM.
Allison’s son is feeling better, so that
time doesn’t raise any red flags.
On Friday morning when Allison
wakes up, she has a notification
letting her know that the update was
successful. She’s glad she doesn’t
have to leave early to check on the
car and the update.
FRAME 7 FRAME 8

61. Do not include UI.
some

68. From Scott McCloud’s “Understanding Comics”

69. Wong-Baker FACES Pain Rating Scale

72. Sketching for
design

78. Use a pen if you can
Optional additional tools
Capture the sketches: scanner or digital photo

79. Take a pen and piece of paper
Experiment with lengths, directions, stroke speeds

80. Take a pen and piece of paper
Experiment with box sizes
Draw at least 20 boxes

81. Take a pen and piece of paper
Experiment with circle sizes.
Draw at least 20 circles
Play with ovals too

82. Take a pen and piece of paper
Experiment with widths, lengths, and tail styles
Straight arrows and curved arrows

83. Take a pen and piece of paper
Experiment with widths, lengths, and tail styles
Straight arrows and curved arrows

91. Windows 8 natively supports 3D printing
3D apps are generally expensive – market opportunity for
making 3D modeling more accessible
“Maker” culture empowers a new generation of enthusiasts,
but how can these makers be supported?
3D Printing