Digital Product Design: Understanding Emotional Design | Jake + Garron | Skillshare

Digital Product Design: Understanding Emotional Design

Jake + Garron, Product Designers @ Intuit & Facebook

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (14m)
    • 1. Introduction & Why Emotional Design?

      1:24
    • 2. Project Introduction

      0:32
    • 3. Storyboards & Journey Lines

      1:46
    • 4. "Ownable Moments"

      2:38
    • 5. Design Techniques to Create Emotional Experiences

      2:28
    • 6. Real World Examples of Emotional Design

      1:09
    • 7. Project Demonstration

      4:16

About This Class

In this course, we will take a look at all types of apps and experiences that use emotional design to create a better connection with their users.  We will walk through our approach to incorporating emotional design and show how it applies to a popular, everyday product like Uber.  It will culminate in a project where you will use the tools and techniques that you learn during the course and apply them to an app or experience yourself.  If you are looking to take the next step in designing products that create a closer connection with your users, then you are in the right place.

Transcripts

1. Introduction & Why Emotional Design?: designing for people can be really messy. Web and mobile experiences have come a long way, Though thinking back only 5 to 10 years, the focus of online products was on how the Internet was revolutionizing everyday tasks. Today, with hundreds of new websites and maps launch daily, it takes more than its functionality to make it big when designing experiences, a lot of people put emotion and delight at the top of the hierarchy of needs. It makes sense. It's our goal, as designers make people fall in love with our experiences so much that they tell others about it. The problem is that emotion is usually prioritized last or is an afterthought at the cost of making sure you hit, ease and benefit. There is a clear separation between that emotion and delight compared to the ease and functionality that is not table stakes. I'm Jake Maynard, and I am guarantee Ekstrom, and we're both interaction designers that into it, having worked on products like QuickBooks into attacks online and TurboTax In this course, we'll take a look at all types of APS and experiences that use emotional design to create better connections with their users. We will walk through our approach to incorporating emotional design and show how it applies to a popular everyday product like uber. It will culminate in a project where you will use the tools and techniques that you learned during the course and apply them to an app or experience for yourself. If you're looking to take the next step in designing products that great a closer connection with your users, then you're in the right place. 2. Project Introduction: After learning about our approach, we were walking through an example of applying our emotional design principles to uber. For your project, you will follow the same steps that we will show you and use our emotional design principles to improve an app or experience yourself. You will compile a journey line for your chosen product. Identify a key notable moment and the emotions tied to it, as well as create concepts for how to inject emotional design into that moment. By adding your project to the Project Gallery, you will inspire others with new ways to add emotional designed to different products. 3. Storyboards & Journey Lines: storyboards are a great tool to show a customer problem and illustrate our product and solve that problem. Airbnb famously used customer insights to build empathy and eventually product innovations by storyboard and key emotional experiences in the customer journey, they use storyboards to connect their product to the rial actions of their users. Well, giving a talk, that 99 new conference job debia said this. So how do we bridge our script? Talk about the code of Airbnb to these real world experiences. We storyboard and the storyboard like crazy. Last year we embarked on an ambitious project map, the entire guest and host terrain of Airbnb, and we did it through illustration. We looked at key emotional moments of the journey, and we drew them. We visualize that and what it's done for us. It's allowed our entire company to achieve a whole new level of empathy with our customers . It's allowed us to align around a common vision similar to storyboards, journey lines, air tool usedto overlay, customers, emotions on top of key parts of the experience. It could be a handy tool when trying to identify improvement opportunities for a product or experience to create a journey line captured every step in a customer's journey for a specific experience. In this example, I'm documenting the grocery store experience. Ask yourself what triggers these events? When is it done? What happens next? Do you want to be as detailed as possible? Because you can always combined events later? Next, Give each moment an emotional rating from the lowest being misery to the top. Being delight Your your journey line should have some highs and lows. Like not being able to find a parking spot at the beginning is low. Getting a free sample from the deli counter is a high point. Now that we've learned about storyboards and journey lines, we'll walk you through what exactly a notable moment is in the next section. 4. "Ownable Moments": we like to refer to the highs and lows that you saw in the journey line exercise as vulnerable moments. These could be defined as moments in the experience where you know or can identify a change or escalation in emotion, either good or bad. What we're not talking about our East earnings in Zappos is mobile app. When you shake the phone, kittens fall from the top of the screen. Is this delightful? Maybe if you like cats. But while Easter eggs are a sprinkling of fun throughout the experience, they're not identifying a critical emotional point and curating that experience. Easter eggs certainly have their place, but we're talking about tapping into moments that are already emotional for our customers, and designing experiences with that in mind. And little moments are not meant to create or invoke an emotion. They're meant to identify the users in motion so that you can lean into it. If the user is excited or feeling proud, celebrate the movement, prolong that good feeling, pat them on the back. But here's the thing. Emotional design is not just about delight and positive emotion. In reality, emotional design is about all emotions good and especially bad. If the user is feeling uncertain or fearful, don't shy away from that or sweep it under the rug. Instead, lean into that emotion. Let the user know that you understand where they are emotionally and offer a way to put them at ease. Treated with due care and respect, notable moments have the power to transform a mediocre experience into a delightful talked about moment, but ignored. A notable moment can leave the user feeling abandoned and frustrated. A great example of an honorable moment is when you get your bank card and start using it. Generally, it tends to be a delight. Er, in your experience with the bank, started in 2009. Simple. Aimed to create a better bank. One thing they pride themselves on is their customer experience. When you receive your card in the mail, it is attached to a piece of cardboard with a quirky little message. Laser engraved on it. The bottom part of the cardboard peace can be detached to create a little wallet that holds your card by a blue rubber band. Not only did simple think about the elegant design of the contents, they also thought about the context in which the user would be receiving card the shows that their journey to creating a better bank simple didn't stop with revolutionizing the digital banking experience. They created a better physical banking experience and a delightful customer touch point with wallet. Now that we know what honorable moments are, the next section will cover what design techniques are available to redesign these moments to engage emotionally with your users. 5. Design Techniques to Create Emotional Experiences: there are many design techniques you can employ to create an emotional connection with your user. In this section, we will describe three such techniques. Visual design, content design and motion design will go over these techniques at a high level and then in the next section, will do a deep dive into products that are using these techniques to elicit emotional responses in their users. In Don Norman's book Emotional Design, he talks about the three levels of processing and experience visceral, behavioral and reflective. He points out that the 1st 2 are very much about the now Where's reflective is about how you will interpret the experience in the future. Although all three levels of processing are important, the visceral level is paramount in creating and fostering emotional experiences, Aaron Walter said. Appearance can greatly influence perceptions, and we carry that mental model with us when sizing up a website in his book Designing for Emotions because of its influence on perception, visual design is a powerful tool in the emotional designers. Toolbox use it to lean into emotion by removing chrome, removing you I and removing clutter. Overall, we can also use visual designed to mimic the emotion the user is feeling the user is feeling accomplished. The visual design should feel celebratory. Content design is arguably the most effective emotional design tool there is because it's the fastest way for your user to get to know your products, personality and your users. Identifying with the product is the biggest hurdle in connecting emotionally. There are many strategies for successful content designed, including personalization, micro copy, wit and humor, and surprise, to name a few. Make sure did not conflict with your products personality. When using surprise, we'll review examples of this in the next section. Motion design and visual design are generally attached with hit, and motion design is an extremely effective way to appeal to users emotions. For most of us, we have fond memories of Saturday morning cartoons with their bright colors and upbeat animations. But these aren't just techniques that appeal to Children. Think about shows like Simpsons or Pixar movies. They're wildly successful for the same reasons. The vivid, realistic motion design paired with beautiful visual design will create an emotional connection with people of all ages. Although we have highlighted three techniques to add emotions, this is just the start feel free to try other things like adding sound. Teoh creator amplify emotions as well as interactions that connect with your users on an emotional level. In the next section will take a look at Riel World examples of products that are using these techniques and seeing great results. 6. Real World Examples of Emotional Design: Now that we've learned some techniques for adding emotional designed to a product or experience, let's take a look at some examples that are already out there. Mail Chimp is doing this really well. Sending an email marketing campaign doesn't sound like an awfully exciting thing to do right. But they nail the O noble moments. One being successfully sending an email campaign. It's a long, arduous process. But let me tell you, when you get a high five from Friday of own Tremper Heim the fourth after sending the email , you start looking forward to it. They had an amazing viral response to this. People actually started high fiving Freddie back. We heard rumor that someone hit their screen so hard they broke it. Not sure if that's true, but how cool is that as a designer to elicit such an emotional and even physical response? One example of how you can use content designed Teoh add emotions is from TurboTax. When starting your taxes, TurboTax asked users, How are you feeling about doing your taxes this year? If user answers don't ask germ attacks acknowledges that feeling by saying a lot of people feel the same way. The good news. Our customers rate us an average of 4.8 out of five stars by leaning into the user's emotions. TurboTax Bild's report and adds a human touch the experience. 7. Project Demonstration: for the course project, we will put into practice all of the tools and techniques we've learned. If you currently are designing an APP, product or service as your day job or on the side, feel free to use. That is the subject for this project. If not, go ahead and use an app of your choice. But we suggest Venmo or any banking app, Spotify or any music, app or straw or any fitness app. So let's look at an example since we talked about it earlier. Let's go with uber step one. Put yourself in the shoes of the APP user, even create a persona if you think it would help. But what we're going to do is create a journey. Not all of the high and low points along the users journey with the APP for uber. We're going to use Carol as our persona and create a journey line for an experience she has with uber carolers on her way to an interview but is, as usual running late. She opens up uber to see if there is a driver nearby, and thank goodness there's one only three minutes away. But as soon as she goes to request the ride. Uber tells her that her credit card on file expired, and she needs to enter a new form of payment. This is just her luck. This is only going to make her more late for her interview. But finally she requests her ride and she's in the car on her way. The driver is pleasant, and they have a nice conversation. But all Carol can think about is that she might be late for her interview. All of a sudden, Carol gets a weird feeling. She looks up and notices the driver has taken a wrong turn. What would have been a 10 minute drive will now be a 14 minute drive, and Carol was already cutting it close. But finally, Carol gets to her interview and somehow just on time, in part due to the fact that she can just jump out of the car and not worry about Peyton. Step two. Identify one of these points on the journey map as an honorable moment. Remember, a notable moment is a point in the product experience where you can identify a change or escalation and emotion. It could be positive or negative emotion once you've chosen your own herbal moment, identify all the motions. You imagine the user feels at that point in the experience. So based on the journey line we've created for Carol's Amber experience, we're going to choose the fifth point when the driver took a wrong turn that made the trip longer. It is a notable moment because there is an escalation and emotion and the users time matters. Getting them to their destination in a timely fashion is paramount. If I were to put myself in Carroll shoes, I imagine the emotions that would be feeling our anxiety about running late and frustration that she's being charged for a longer ride. Step three. Now that we've identified a notable moment and identified the associated emotions, it's time to curate the experience. We're going to use the techniques we discussed earlier as a reminder. These techniques include, but are not limited to visual design, content design and motion design, as mentioned in the course. Instead of ignoring the emotion the user is feeling, it is crucial to lean into it. Take, for example, this scenario with Carol and her anxiety and frustration over running late, there is no realistic or legal way of getting Carol to her destination any faster. So what else can we do? Well, as we identified, Carol is feeling to emotions, anxiety and frustration. So let's see if we can solve for them one at a time. First, we can send her a push notification, telling her we know she's off course and that since we value her time, we're giving her $5 off her next uber ride. What this does this shows that we know something is wrong. We understand her frustration, and we're doing something about it. The key here is that this all happens in real time. Otherwise, we missed the moment when that emotion is happening, or as we like to call it, the moment of truth. And to get her mind off for anxiety. We could entertain Carol for the rest of the ride with geographically relevant tidbits and trivia. For example, as Carol is passing over the Coronado Bridge on her way to her interview, anxious that she's running late, the uber app tells her that the first driver across the bridge when it first opened was Ronald Reagan in 1969. All right, so we hope that walk through gives you a good idea of how you can complete this project. Also attached as a PDF worksheet to help you through these three steps, feel free to use that as a way to organize your thoughts. You can either stop there or for you overachievers. You can wire frame or prototype your emotional experience. We look forward to seeing what you all come up with.