Hasso Plattner Institute of Design - Emotional Design dmedia2012 - Design Project 3 Design Project 03: Motivate Me    What...
Challenge❖ Design an emotionally charged digital experience thatmotivates measurable behavior❖ If you don’t have an idea r...
Experience Map Deliverable Due Thurs 3/1 by 9ampost to website categories: “Project 3” & “Experience Map”WhatExperience ma...
*Original Landing Page of MintPrototype #1 “Landing Page” Deliverable Due Thurs 3/1 by 9ampost to website categories: “Pro...
Ex. Experience Map: Service SystemNoticeHeadlines &Themes                       Timeline                             +    ...
Ex. Experience Map: Service SystemNotice                       template   Source:User at top                             a...
Ex. 10 Experience Map: Social Software Community SystemNoticeDifferent                    NoticeElements of                ...
Ex. Experience Map: Social Software Community SystemUser Profile                Past Experiences                           ...
Ex. Experience Map: Task Towards GoalNotice                      Notice User ReliefScenario                    +          ...
Ex. Experience Map: Key Feature Benefit                                         Notice                                     ...
Ex. Experience Map: Use Case Scenarios                                         Notice                                     ...
Ex. Experience Map: HumorNotice                       Extremeemotional                                    Source: XKCDTrig...
Ex. Experience Map: Laymen ExplanationNotice                      Notice          Source:Framing with                Expla...
Ex. Experience Map: System MetaphorNotice                      Notice      Source: OpenPrinciples of               Future ...
Ex. Experience Map: Social Software Community SystemNotice                      NoticeHeadlines &                 Conflicts...
Ex. Experience Map: ColorscriptNoticeColor                       Noticecontrast                    Transitions   Source: T...
Ex. Landing Page: Google                           NoticeNotice Logo                Calls to                           act...
Ex. Landing Page: FacebookWelcome                      Multiple                             Calls to   Source:+           ...
Ex. Landing Page: AmazonLogo Tagline               Use of “we”+                          +             Source:Value       ...
Ex. Landing Page: Twitter                            PicturesHierarchy                            ++                      ...
Ex. Landing Page: AirBnb                           Call to                           actionHierarchy                      ...
Ex. Landing Page: Artsy                          Contrast ofFeatured Piece            Type+                         +     ...
Ex. Landing Page: Duplos Contrast of               Treatment Face & Background                +             Source: +     ...
Ex. Landing Page: ForklyNoticeTreatment of               NoticeHeadlines &                PhotoHierarchy                  ...
Ex. Landing Page: TimehopNoticeTreatment of                Call toType &                      Action    Source:Background ...
Ex. Landing Page: Tiny ReviewFeatured Posts                  Logo &                                Description   Source:+ ...
Ex. Landing Page: Tiny Review                                RandomSite Theme                      Interactive+           ...
Resources7 Basic Emotional Design Principles1. Use clues from nature2. Show visual and cognitive contrast3. Add an analogy...
RECOMMENDED READING Designing for Emotion http://www.abookapart.com/products/designing-for-emotion Emotional Interface Des...
Upcoming SlideShare
Loading in …5
×

dmedia 2012 - Design Project 3 - Emotional Design

1,427 views
1,267 views

Published on

http://dmedia.stanford.edu

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,427
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

dmedia 2012 - Design Project 3 - Emotional Design

  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. Experience Map Deliverable Due Thurs 3/1 by 9ampost to website categories: “Project 3” & “Experience Map”WhatExperience maps visually communicate a story or scenario about coreinteraction(s) and the surrounding context that a user feels. Somefocus on a detailed task view while others visualize the system levelperspective. Often characters, dialogue, actions, uses, emotionalstates, motivational triggers, metaphors, &/or principles are depicted.HowMap out your target user as they walk through the most likelyscenario(s) you envision for the digital experience. Show why they’remotivated and how they feel after your intervention. Be sure tovisualize details about the context. You can use a story board to help.WhyUse the experience map to align people with your vision and to informthe interaction design map as you move to higher resolution.EvaluationDoes it communicate a compelling POV?Do the potential interactions elicit emotion?Do people want the experience to be real?
  4. 4. *Original Landing Page of MintPrototype #1 “Landing Page” Deliverable Due Thurs 3/1 by 9ampost to website categories: “Project 3” & “Iterations”WhatLanding pages are an age old tradition in Silicon Valley and provide justenough information to entice people to take action. Often just a logo,clever copy, provocative imagery, valued benefits, key features &/or astrong call to action.HowStart with copy and develop a strong one liner POV that people canunderstand immediately. Focus on a key value of the experience you’reoffering. Visualize 3 characteristics you want to impute and create anemotional connection by showing brand personality.WhyLanding pages are a great way to communicate the essence of a digitalexperience, prioritize the most important feature(s) and help “fake it ‘tilyou make it.” They’re also good for running experiments and testing.EvaluationDoes it communicate a compelling POV?Does the page elicit visceral, behavioral and/or reflective emotions?Do people want to take action?
  5. 5. Ex. Experience Map: Service SystemNoticeHeadlines &Themes Timeline + Source:+ Those Pesky UsersSpeech CalloutsBubbles
  6. 6. Ex. Experience Map: Service SystemNotice template Source:User at top adaptive Path
  7. 7. Ex. 10 Experience Map: Social Software Community SystemNoticeDifferent NoticeElements of Use of arrowsCustomer & icons Source:Journey + Adaptive Path+ Feeling &Opportunities Experience Bar
  8. 8. Ex. Experience Map: Social Software Community SystemUser Profile Past Experiences Source:+ + nform Experience MapMotivators Processes
  9. 9. Ex. Experience Map: Task Towards GoalNotice Notice User ReliefScenario + Source: Storytelling+ UI Action + for User ExperienceTask Setup Next Question?
  10. 10. Ex. Experience Map: Key Feature Benefit Notice emotion + Setup of Problem & Solution Notice Comparison + Key Feature Benefit Source: Google Chrome Book
  11. 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. 12. Ex. Experience Map: HumorNotice Extremeemotional Source: XKCDTrigger User Response
  13. 13. Ex. Experience Map: Laymen ExplanationNotice Notice Source:Framing with Explanation Dan RoamTitle of System + User Response
  14. 14. Ex. Experience Map: System MetaphorNotice Notice Source: OpenPrinciples of Future Teacher TalkEngagement Questions
  15. 15. Ex. Experience Map: Social Software Community SystemNotice NoticeHeadlines & ConflictsThemes ++ Source: ImageThink Use ofSpeech Arrows &Bubbles Color
  16. 16. Ex. Experience Map: ColorscriptNoticeColor Noticecontrast Transitions Source: The Art+ + of PixarScale Environment
  17. 17. Ex. Landing Page: Google NoticeNotice Logo Calls to action Source:+ + Wayback MachineHierarchy White Space
  18. 18. Ex. Landing Page: FacebookWelcome Multiple Calls to Source:+ Action Wayback MachineUse Cases
  19. 19. Ex. Landing Page: AmazonLogo Tagline Use of “we”+ + Source:Value Featured Wayback MachineProposition
  20. 20. Ex. Landing Page: Twitter PicturesHierarchy ++ Source: HighlightedValue Features Wayback MachineProposition
  21. 21. Ex. Landing Page: AirBnb Call to actionHierarchy + Source:+ Pictures & Wayback MachineBig Image pricing
  22. 22. Ex. Landing Page: Artsy Contrast ofFeatured Piece Type+ + Source:White Space Placement of Artsy logo
  23. 23. Ex. Landing Page: Duplos Contrast of Treatment Face & Background + Source: + Interactive Duplos Surprises Conversational
  24. 24. Ex. Landing Page: ForklyNoticeTreatment of NoticeHeadlines & PhotoHierarchy + Source:+ Forkly ScrollingDownload Call on Deviceto Action
  25. 25. Ex. Landing Page: TimehopNoticeTreatment of Call toType & Action Source:Background + Timehop+ JokeKey Question
  26. 26. Ex. Landing Page: Tiny ReviewFeatured Posts Logo & Description Source:+ + TinyReviewHumor Download
  27. 27. Ex. Landing Page: Tiny Review RandomSite Theme Interactive+ + Source: Its This For ThatHumor Share Call to Action
  28. 28. 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://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/
  29. 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!

×