• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design Project 3 Emotional Design Deliverable 2
 

Design Project 3 Emotional Design Deliverable 2

on

  • 1,393 views

 

Statistics

Views

Total Views
1,393
Views on SlideShare
1,324
Embed Views
69

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 69

http://dschool.stanford.edu 69

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Design Project 3 Emotional Design Deliverable 2 Design Project 3 Emotional Design Deliverable 2 Document Transcript

    • 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)]
    • 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
    • *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?
    • Ex. Interactive digital Prototype - Mobile - Instagram
    • Example Interactive digital Prototype on Device
    • Example Interactive digital Prototype on Device
    • Example Interactive digital Prototype on Device
    • Ex. Interactive digital Prototype - Web - Pinterest
    • Ex. Interactive digital Prototype - Web - Pinterest
    • Ex. Interactive digitalPrototype - Web - Pinterest
    • Ex. Interactive digital Prototype - Web - Pinterest
    • Ex. Interactive digital Prototype - Web - Pinterest
    • Ex. Interactive digital Prototype - Web - Pinterest
    • Ex. Interactive digitalPrototype - Web - Pinterest
    • Ex. Interactive digital Prototype - Web - Pinterest
    • Ex. Interactive digital Prototype - Web - Pinterest
    • Ex. Interactive digital Prototype - Web - Charity Water
    • Ex. Interactive digital Prototype - Web - Charity Water
    • Ex. Interactive digital Prototype - Web - Charity Water
    • Ex. Interactive digital Prototype - Web - Charity Water
    • Ex. Interactive digital Prototype - Web - Charity Water
    • Ex. Interactive digital Prototype - Web - Charity Water
    • Ex. Interactive digital Prototype - Web - Charity Water
    • 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/
    • 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!