http://dmedia.stanford.edu

1. Hasso Plattner Institute of Design - Emotional Design
dmedia2012 - Design Project 3
Design Project 03: Motivate Me
What Are You Going to Do?
Design Project 1 focused on what a user can see (visual design). Design Project 2 will focus on
what a user does (interaction design). Over the next two weeks we'll design a mobile app that
helps an individual improve some aspect of their personal health. Take a broad definition of
“health” and consider exercise, nutrition, monitoring, prevention, education, disease, or any
other topic that you might find relevant. Also consider both physical healthSource: Emotional Equations
and mental health.
What’s the Point? This project has three learning goals:
❖ Use the principles of visual, interaction, and emotional design to communicate
an experience
❖ Target a behavioral goal and intentionally craft an emotional response that
motivates action
❖ Create an interactive prototype with the least amount of user behavior needed
to accomplish a goal and feel [insert intended emotion(s)]

2. Challenge
❖ Design an emotionally charged digital experience that
motivates measurable behavior
❖ If you don’t have an idea redesign an existing digital experience*
Constraints
❖ Anything digital, on any device
❖ The behavioral goal for users ideally creates social good
❖ If you don’t have an emotion to focus on target emotions
related to digital intimacy or identity*
❖ Final prototype should be interactive
Deliverables
❖ Due Thurs 3/1: One page experience map & prototype #1
“Landing Page”
❖ Due Thurs 3/8: Prototype #2 “Interactive”
❖ Due Thurs 3/15: Present final prototype & any insights

3. Experience Map Deliverable Due Thurs 3/1 by 9am
post to website categories: “Project 3” & “Experience Map”
What
Experience maps visually communicate a story or scenario about core
interaction(s) and the surrounding context that a user feels. Some
focus on a detailed task view while others visualize the system level
perspective. Often characters, dialogue, actions, uses, emotional
states, motivational triggers, metaphors, &/or principles are depicted.
How
Map out your target user as they walk through the most likely
scenario(s) you envision for the digital experience. Show why they’re
motivated and how they feel after your intervention. Be sure to
visualize details about the context. You can use a story board to help.
Why
Use the experience map to align people with your vision and to inform
the interaction design map as you move to higher resolution.
Evaluation
Does it communicate a compelling POV?
Do the potential interactions elicit emotion?
Do people want the experience to be real?

4. *Original Landing Page of Mint
Prototype #1 “Landing Page” Deliverable Due Thurs 3/1 by 9am
post to website categories: “Project 3” & “Iterations”
What
Landing pages are an age old tradition in Silicon Valley and provide just
enough information to entice people to take action. Often just a logo,
clever copy, provocative imagery, valued benefits, key features &/or a
strong call to action.
How
Start with copy and develop a strong one liner POV that people can
understand immediately. Focus on a key value of the experience you’re
offering. Visualize 3 characteristics you want to impute and create an
emotional connection by showing brand personality.
Why
Landing pages are a great way to communicate the essence of a digital
experience, prioritize the most important feature(s) and help “fake it ‘til
you make it.” They’re also good for running experiments and testing.
Evaluation
Does it communicate a compelling POV?
Does the page elicit visceral, behavioral and/or reflective emotions?
Do people want to take action?

5. Ex. Experience Map: Service System
Notice
Headlines &
Themes Timeline
+ Source:
+ Those Pesky Users
Speech Callouts
Bubbles

6. Ex. Experience Map: Service System
Notice template Source:
User at top adaptive Path

7. Ex. 10 Experience Map: Social Software Community System
Notice
Different Notice
Elements of Use of arrows
Customer & icons Source:
Journey + Adaptive Path
+ Feeling &
Opportunities Experience Bar

8. Ex. Experience Map: Social Software Community System
User Profile Past Experiences
Source:
+ + nform Experience Map
Motivators Processes

9. Ex. Experience Map: Task Towards Goal
Notice Notice User Relief
Scenario + Source: Storytelling
+ UI Action
+ for User Experience
Task Setup Next Question?

10. Ex. Experience Map: Key Feature Benefit
Notice
emotion
+
Setup of
Problem &
Solution
Notice
Comparison
+
Key Feature
Benefit
Source: Google
Chrome Book

11. Ex. Experience Map: Use Case Scenarios
Notice
Point of
View
+
High level
product
description &
Inspiration
Notice
Context
of Use
+
Motivation
Triggers
+
Emotional
states
of users
Source: UX
Driven Startup

12. Ex. Experience Map: Humor
Notice Extreme
emotional Source: XKCD
Trigger User Response

13. Ex. Experience Map: Laymen Explanation
Notice Notice Source:
Framing with Explanation Dan Roam
Title of System
+
User Response

14. Ex. Experience Map: System Metaphor
Notice Notice Source: Open
Principles of Future Teacher Talk
Engagement Questions

15. Ex. Experience Map: Social Software Community System
Notice Notice
Headlines & Conflicts
Themes +
+ Source: ImageThink
Use of
Speech Arrows &
Bubbles Color

16. Ex. Experience Map: Colorscript
Notice
Color Notice
contrast Transitions Source: The Art
+ + of Pixar
Scale Environment

17. Ex. Landing Page: Google
Notice
Notice Logo Calls to
action Source:
+
+ Wayback Machine
Hierarchy
White Space

18. Ex. Landing Page: Facebook
Welcome Multiple
Calls to Source:
+ Action Wayback Machine
Use Cases

19. Ex. Landing Page: Amazon
Logo Tagline Use of “we”
+ + Source:
Value Featured Wayback Machine
Proposition

20. Ex. Landing Page: Twitter
Pictures
Hierarchy
+
+ Source:
Highlighted
Value Features Wayback Machine
Proposition

21. Ex. Landing Page: AirBnb
Call to
action
Hierarchy
+ Source:
+
Pictures & Wayback Machine
Big Image pricing

22. Ex. Landing Page: Artsy
Contrast of
Featured Piece Type
+ + Source:
White Space Placement of Artsy
logo

23. Ex. Landing Page: Duplos
Contrast of Treatment
Face &
Background + Source:
+ Interactive Duplos
Surprises
Conversational

24. Ex. Landing Page: Forkly
Notice
Treatment of Notice
Headlines & Photo
Hierarchy + Source:
+ Forkly
Scrolling
Download Call on Device
to Action

25. Ex. Landing Page: Timehop
Notice
Treatment of Call to
Type & Action Source:
Background + Timehop
+ Joke
Key Question

26. Ex. Landing Page: Tiny Review
Featured Posts Logo &
Description Source:
+ + TinyReview
Humor Download

27. Ex. Landing Page: Tiny Review
Random
Site Theme Interactive
+ + Source:
Its This For That
Humor Share Call to
Action

28. Resources
7 Basic Emotional Design Principles
1. Use clues from nature
2. Show visual and cognitive contrast
3. Add an analogy and map actions to artifacts
4. Make things physical
5. Have a lasting first impression through welcoming and responsiveness
6. People should identify themselves with your design
7. Be human and communicate with a personality
TOOLS & RESOURCES
Prototyping
http://invisionapp.com
http://fieldtestapp.com
http://keynotopia.com
http://tumblr.com
http://wordpress.com http://wordpress.org
User feedback
http://verifyapp.com
http://fivesecondtest.com
http://revisu.com
http://reinvigorate.net
http://www.slideshare.net/LauraKlein1/who-do-i-talk-to-now-diy-user-research-for-startups
Detecting emotion
http://www.designandemotion.org/toolsmethods/
http://www.premo-online.com/en/how-does-it-work/
http://twittersentiment.appspot.com
http://www.emotionwisegroup.org/emotion-test
EMOTIONAL SITES & MASHUP EXAMPLES
http://www.postsecret.com/
http://www.fmylife.com/
http://9gag.com/
http://itsthisforthat.com/
http://dearphotograph.com/
http://grouphug.us/
http://1thingapp.com/
http://ushahidi.com/
http://www.fluther.com/
http://cowbird.com/
http://storycorps.org/
http://ohlife.com/
http://www.tweetfeel.com/
http://www.wefeelfine.org/

29. RECOMMENDED READING
Designing for Emotion
http://www.abookapart.com/products/designing-for-emotion
Emotional Interface Design
http://thinkvitamin.com/design/emotional-interface-design-the-gateway-to-passionate-users/
Emotional Design
http://www.jnd.org/books.html#42
Attractive Things Work Better
http://jnd.org/dn.mss/emotion_design_attractive_things_work_better.html
3 Ways Good Design Makes You Happy
http://www.ted.com/talks/don_norman_on_design_and_emotion.html
Selective Memory
http://www.metropolismag.com/story/20090318/selective-memories
Emotional Design: People and Things
http://jnd.org/dn.mss/emotional_design_people_and_things.html
How to cultivate emotional engagement
http://blog.kissmetrics.com/mixed-feelings/?wide=1
Design For Emotion and Flow
http://www.boxesandarrows.com/view/design-for-emotion
Design For Emotion
http://designforemotion.com/
Design for Emotion Examples
http://www.design-emotion.com/
Emotional Equations
http://emotionalequations.com/
Advice For Success
- Do several cycles. Most iterations wins!
- Consider focusing on one behavior goal to help guide your experience map
- Consider focusing on one emotion that drives motivation on your landing page
- Beg, borrow and steal resources, images, tools, icons, buttons, graphics etc,
- Scope your app for the learning goals of the assignment... aka: KEEP IT SIMPLE!