Design Project 3 Emotional Design Deliverable 2

1,569 views
1,455 views

Published on

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,569
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Design Project 3 Emotional Design Deliverable 2

  1. 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 well 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. 2. Challenge❖ Design an emotionally charged digital experience thatmotivates 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 emotionsrelated to digital intimacy or identity*❖ Final prototype should be interactiveDeliverables❖ 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. 3. *Original Landing Page of Mint Source: AnalogPrototype #1 “Interactive” Deliverable Due Thurs 3/8 by 9ampost a link &/or upload screenshots along with any insights from at least 3 tests with users to our websitecategories: “Project 3” & “Iterations”WhatStart building the next steps beyond your Experience Map and Landing Page to create an InteractivePrototype that targets a behavioral goal and emotional response that motivates action. This will likely be 3-5key views including "onboarding" of a new user. The more functional the better. Then find users thatresemble your point of view(s) and test your interactive prototype with them.HowYour 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 youre creating a webexperience, consider using invisionapp.com to create clickable views and a sharable link. If youre creating amobile 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 tobegin using your app in a flow and understand its potential function. Use the feedback capture grid methodand synthesize key insights from your tests that will guide your next iterations.WhyFeedback fundamentally changes when users begin to have control and simulate the experience in a realisticway. Hand-waving can only go so far before you need to make something real enough to test that its useful.Learning how to create Interactive Prototypes is also essential to communicating and collaborating in theengineering/development process. EvaluationDoes it communicate a compelling POV?Does the page elicit visceral, behavioral and/or reflective emotions? Are people attracted to theexperience?Do people take action and understand how and why they do?
  4. 4. Ex. Interactive digital Prototype - Mobile - Instagram
  5. 5. Example Interactive digital Prototype on Device
  6. 6. Example Interactive digital Prototype on Device
  7. 7. Example Interactive digital Prototype on Device
  8. 8. Ex. Interactive digital Prototype - Web - Pinterest
  9. 9. Ex. Interactive digital Prototype - Web - Pinterest
  10. 10. Ex. Interactive digitalPrototype - Web - Pinterest
  11. 11. Ex. Interactive digital Prototype - Web - Pinterest
  12. 12. Ex. Interactive digital Prototype - Web - Pinterest
  13. 13. Ex. Interactive digital Prototype - Web - Pinterest
  14. 14. Ex. Interactive digitalPrototype - Web - Pinterest
  15. 15. Ex. Interactive digital Prototype - Web - Pinterest
  16. 16. Ex. Interactive digital Prototype - Web - Pinterest
  17. 17. Ex. Interactive digital Prototype - Web - Charity Water
  18. 18. Ex. Interactive digital Prototype - Web - Charity Water
  19. 19. Ex. Interactive digital Prototype - Web - Charity Water
  20. 20. Ex. Interactive digital Prototype - Web - Charity Water
  21. 21. Ex. Interactive digital Prototype - Web - Charity Water
  22. 22. Ex. Interactive digital Prototype - Web - Charity Water
  23. 23. Ex. Interactive digital Prototype - Web - Charity Water
  24. 24. Resources7 Basic Emotional Design Principles1. Use clues from nature2. Show visual and cognitive contrast3. Add an analogy and map actions to artifacts4. Make things physical5. Have a lasting first impression through welcoming and responsiveness6. People should identify themselves with your design7. Be human and communicate with a personalityTOOLS & RESOURCESPrototypinghttp://invisionapp.comhttp://justinmind.com/http://fieldtestapp.comhttp://keynotopia.comhttp://tumblr.comhttp://wordpress.com http://wordpress.orgUser feedbackhttp://verifyapp.comhttp://fivesecondtest.comhttp://revisu.comhttp://reinvigorate.nethttp://www.slideshare.net/LauraKlein1/who-do-i-talk-to-now-diy-user-research-for-startupsDetecting emotionhttp://www.designandemotion.org/toolsmethods/http://www.premo-online.com/en/how-does-it-work/http://twittersentiment.appspot.comhttp://www.emotionwisegroup.org/emotion-testEMOTIONAL SITES & MASHUP EXAMPLEShttp://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. 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!

×