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. *Original Landing Page of Mint
Source: Analog
Prototype #1 “Interactive” Deliverable Due Thurs 3/8 by 9am
post a link &/or upload screenshots along with any insights from at least 3 tests with users to our website
categories: “Project 3” & “Iterations”
What
Start building the next steps beyond your Experience Map and Landing Page to create an Interactive
Prototype that targets a behavioral goal and emotional response that motivates action. This will likely be 3-5
key views including "onboarding" of a new user. The more functional the better. Then find users that
resemble your point of view(s) and test your interactive prototype with them.
How
Your Interactive Prototype should be clickable or touchable on your intended device eg iPhone/mobile,
desktop and live within your envisioned context eg a game inside Facebook. If you're creating a web
experience, consider using invisionapp.com to create clickable views and a sharable link. If you're creating a
mobile app, consider using keynotopia.com to create touchable views that can be loaded on a phone.
Remember to apply the principles from our visual and interaction design projects. Users should be able to
begin using your app in a flow and understand it's potential function. Use the feedback capture grid method
and synthesize key insights from your tests that will guide your next iterations.
Why
Feedback fundamentally changes when users begin to have control and simulate the experience in a realistic
way. Hand-waving can only go so far before you need to make something real enough to test that it's useful.
Learning how to create Interactive Prototypes is also essential to communicating and collaborating in the
engineering/development process.
Evaluation
Does it communicate a compelling POV?
Does the page elicit visceral, behavioral and/or reflective emotions? Are people attracted to the
experience?
Do people take action and understand how and why they do?
24. 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://justinmind.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/
25. 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!
![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)]](https://image.slidesharecdn.com/dp3deliverable2-120303023622-phpapp02/85/design-project-3-emotional-design-deliverable-2-1-320.jpg)
