{"id":12848,"date":"2024-09-15T17:10:59","date_gmt":"2024-09-15T17:10:59","guid":{"rendered":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/"},"modified":"2024-12-29T18:43:48","modified_gmt":"2024-12-29T18:43:48","slug":"emotional-design-examples","status":"publish","type":"post","link":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/","title":{"rendered":"Emotional Design Examples: How to Enhance Your Product UI\/UX Design"},"content":{"rendered":"<p>Think back to that one app that makes life better for you. What made it unique to you? Can you list the things you love about it? If you&#8217;ve ever had a fantastic <a href=\"https:\/\/userpilot.com\/role\/ux-design\" target=\"_blank\" rel=\"noopener noreferrer\">product experience<\/a> when using an app, you\u2019ve seen emotional design examples in action.<\/p>\n<p>At first glance, emotional design feels negligible.<\/p>\n<p>Some SaaS founders would argue that functionality trumps all. But here\u2019s a twist: emotional design makes the difference between failed and successful apps<strong>.<\/strong> For people to love your app, they must feel an emotional connection to it.<\/p>\n<p>In this article, you\u2019ll learn why emotional design is important, what it means, and how you can use emotional design to enhance your product UI\/UX design.<\/p>\n<p>Ready? Let\u2019s get right into it.<\/p>\n<h2 id=\"2nvv6\">What is emotional design?<\/h2>\n<p>Emotional design is the process of designing products to evoke emotional responses such as delight or excitement from a user. This way, you create products people find valuable, usable, and desirable.<\/p>\n<p>Emotional design focuses on creating an exceptional <a href=\"https:\/\/userpilot.com\/blog\/user-experience-metrics-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">user experience<\/a>. It is based on the idea that if users have a positive reaction to a product it leads to greater user loyalty, and ultimately increasing revenue.<\/p>\n<h2 id=\"7b0ek\">How emotional design impacts the user experience and product adoption<\/h2>\n<p>Gone are the days when all you needed was a functional product. Today, emotional design impacts the user experience by enhancing user satisfaction, customer loyalty, and trust. It also helps people <a href=\"https:\/\/userpilot.com\/blog\/user-adoption\/\" target=\"_blank\" rel=\"noopener noreferrer\">adopt a product<\/a> faster.<\/p>\n<p>Here are other ways emotional design can have an impact:<\/p>\n<h3 id=\"3hou\">Creates a positive emotional reaction that drives product stickiness<\/h3>\n<p>When people love using a product, they become emotionally attached to it and keep using it. This is called <a href=\"https:\/\/userpilot.com\/blog\/increase-product-stickiness-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">product stickiness<\/a>.<\/p>\n<p>When a product sticks, it means the product is satisfying the user\u2019s needs, and soon enough, they\u2019ll spread the word about it.<\/p>\n<h3 id=\"89nia\">Decreases the automated negative emotional response to bugs<\/h3>\n<p>When users have a positive experience, they have a higher level of tolerance and will overlook minor bugs<\/a> or defects in any product.<\/p>\n<p>This is because when we\u2019re happy, our bodies are more relaxed and more positive. And we\u2019re very forgiving too.<\/p>\n<p>A good example is using colorful graphics and a good microcopy<\/a> to distract users from a broken link.<\/p>\n<h3 id=\"83i7h\">Increases adoption due to positive experiences<\/h3>\n<p>As human beings, we buy using emotion first and then justify our actions with logical reasons. A well-designed product gives us every reason to buy it.<\/p>\n<p>Combined with great functionality, this leads to an increase in <a href=\"https:\/\/userpilot.com\/blog\/product-adoption-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">product adoption<\/a>.<\/p>\n<h3 id=\"8u8kt\">Provides a competitive advantage to a SaaS company<\/h3>\n<p>Emotional design is the secret sauce to every successful SaaS company.<\/p>\n<p>Companies like Slack have mastered this secret to creating products that users love and recommend. With it, they easily dominated the internal communication category, putting them above all their competition.<\/p>\n<h2 id=\"7sq80\">The prerequisites of emotional design<\/h2>\n<p>It all starts with a product that works. A good design might catch a user\u2019s eye at first sight, but they&#8217;ll churn if it doesn&#8217;t live up to expectations.<\/p>\n<p>It&#8217;s like using a beautiful website with a long loading time. How frustrating is that?<\/p>\n<p>If design attracts the user, functionality keeps them interested. Both parts play an equal role, but if one is prioritized over the other, the product suffers.<\/p>\n<p>Maslow\u2019s hierarchy of needs explains this concept better and it can be applied directly to emotional design.<\/p>\n<p>For a product to satisfy a user\u2019s needs, it must answer three basic design questions: How useful is it? How innovative is it? Is the product easy to use and understand?<\/p>\n<ul>\n<li><strong>Functionality:<\/strong> Build a product that\u2019s easy to navigate, accessible, and user-friendly. When users derive value from a product, it\u2019s easy to retain and convert them into paying customers.<\/li>\n<li><strong>Usability:<\/strong> How easily can customers understand the product&#8217;s UI? Does it pay attention to details like helping them complete tasks faster?<\/li>\n<li><strong>Reliability:<\/strong> Most people have a positive emotional response to products that are reliable. Do they constantly fear when using your product? Or are they certain they won&#8217;t be disappointed?<\/li>\n<\/ul>\n<p>When a product meets all three criteria, then designers can move on to identify the emotions they want users to feel when using it.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/Similarities-Between-Maslows-Hierarchy-of-Needs-and-Emotional-Design_eb16e2dfb374debb8d5013009d2f2525_800.png 1x, https:\/\/images.storychief.com\/account_6827\/Similarities-Between-Maslows-Hierarchy-of-Needs-and-Emotional-Design_eb16e2dfb374debb8d5013009d2f2525_1600.png 2x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/Similarities-Between-Maslows-Hierarchy-of-Needs-and-Emotional-Design_eb16e2dfb374debb8d5013009d2f2525_800.png 1x, https:\/\/images.storychief.com\/account_6827\/Similarities-Between-Maslows-Hierarchy-of-Needs-and-Emotional-Design_eb16e2dfb374debb8d5013009d2f2525_1600.png 2x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Similarities-Between-Maslows-Hierarchy-of-Needs-and-Emotional-Design_eb16e2dfb374debb8d5013009d2f2525_800.png\" alt=\"Similarities-Between-Maslows-Hierarchy-of-Needs-and-Emotional-Design\" \/><\/picture><figcaption>Maslow\u2019s hierarchy theory.<\/figcaption><\/figure>\n<h2 id=\"6oe8e\">How to evoke emotions using Dan Norman&#8217;s three levels of emotional design<\/h2>\n<p>In his book, Emotional Design: Why we love (or hate) everyday things, Don Norman breaks down the emotional connection into three stages\u2014visceral, behavioral, and reflective. These stages are connected, i.e., they happen in sequential order.<\/p>\n<ol type=\"1\">\n<li><strong>Visceral:<\/strong> This is what happens the first time you see a product. Some call it a gut feeling. Others call it intuition. Whichever you choose to call it, visceral design informs how a user perceives a product.<\/li>\n<li><strong>Behavioral:<\/strong> How easily do users find your app? What features matter most to them? This is what behavioral design answers.<\/li>\n<li><strong>Reflective: <\/strong>This is when users make a conscious decision after using a product. Was it easy to use? Enjoyable? Or was it difficult for them to complete a task? This is where they decide to either stick around or bounce.<\/li>\n<\/ol>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/Dan-Normans-three-levels-of-emotional-design_11b6f72547540da141db6b4b3d7e9978_800.png 1x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/Dan-Normans-three-levels-of-emotional-design_11b6f72547540da141db6b4b3d7e9978_800.png 1x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Dan-Normans-three-levels-of-emotional-design_11b6f72547540da141db6b4b3d7e9978_800.png\" alt=\"Dan-Normans-three-levels-of-emotional-design\" \/><\/picture><figcaption>Dan Norman&#8217;s three levels of emotional design.<\/figcaption><\/figure>\n<h2 id=\"6bp7l\">Visceral emotional design examples<\/h2>\n<p>Visceral emotions are feelings that are very deep and difficult to control. Just like love at first sight. Or when you have a gut feeling about something. That is what visceral design is all about.<\/p>\n<p>In SaaS, this translates to the <a href=\"https:\/\/userpilot.com\/blog\/the-aha-moment-for-product-onboarding-activation\/\" target=\"_blank\" rel=\"noopener noreferrer\">&#8220;AHA&#8221; moment<\/a> or moments that you create for your users. It usually happens during the <a href=\"https:\/\/userpilot.com\/blog\/first-time-user-experience-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">first-time user experience<\/a>, right before a user creates an account or during the <a href=\"https:\/\/userpilot.com\/blog\/saas-signup-flow\/\" target=\"_blank\" rel=\"noopener noreferrer\">signup<\/a> experience.<\/p>\n<p>But if it doesn&#8217;t happen during these moments, it doesn&#8217;t mean it won&#8217;t happen later on. These first Aha moments are crucial as they will trigger an <a href=\"https:\/\/userpilot.com\/blog\/user-behavioral-analysis\/\" target=\"_blank\" rel=\"noopener noreferrer\">emotional response<\/a> that influences how users feel about your product.<\/p>\n<p>Here are some examples:<\/p>\n<h3 id=\"d2gcl\">Drive positive emotional experiences with the right copywriting<\/h3>\n<p>Waiting times are frustrating. Rather than having users wait, fill them with loading screens that help users understand what\u2019s going on. For example, you can add short messages to confirm the app is loading.<\/p>\n<p>Let\u2019s take a look at how <a href=\"https:\/\/userpilot.com\/userpilot-demo\" target=\"_blank\" rel=\"noopener noreferrer\">Userpilot<\/a> does it.<\/p>\n<p>On the loading page<\/a> of the main app dashboard, we show the app functionality with small graphics, <a href=\"https:\/\/www.hubspot.com\/brand-kit-generator\/icon-maker\" target=\"_blank\" rel=\"noopener\">icons<\/a>, and short messages, confirming that the app is loading. Combine this with in-app experiences like <a href=\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/\" target=\"_blank\" rel=\"noopener noreferrer\">tooltips<\/a> and <a href=\"https:\/\/userpilot.com\/blog\/modal-ux-design-2022\/\" target=\"_blank\" rel=\"noopener noreferrer\">modals<\/a> to increase profits.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/userpilot-loading-page-emotional-design-examples_ae0c86875ac7ab2d84ba785d49e50fa1_800.png 1x, https:\/\/images.storychief.com\/account_6827\/userpilot-loading-page-emotional-design-examples_ae0c86875ac7ab2d84ba785d49e50fa1_1600.png 2x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/userpilot-loading-page-emotional-design-examples_ae0c86875ac7ab2d84ba785d49e50fa1_800.png 1x, https:\/\/images.storychief.com\/account_6827\/userpilot-loading-page-emotional-design-examples_ae0c86875ac7ab2d84ba785d49e50fa1_1600.png 2x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/userpilot-loading-page-emotional-design-examples_ae0c86875ac7ab2d84ba785d49e50fa1_800.png\" alt=\"userpilot-loading-page-emotional-design-examples\" \/><\/picture><figcaption>Use loading pages to create a better <a href=\"https:\/\/userpilot.com\/role\/ux-design\" target=\"_blank\" rel=\"noopener noreferrer\">product experience<\/a>.<\/figcaption><\/figure>\n<p>An alternative is to use tips or inspirational messages to make the wait more enjoyable. Again, let\u2019s look at this example from <a href=\"https:\/\/userpilot.com\/userpilot-demo\" target=\"_blank\" rel=\"noopener noreferrer\">Userpilot<\/a>.<\/p>\n<p>This inspirational message comes up while loading the Chrome extension builder, with which you can create <a href=\"https:\/\/userpilot.com\/blog\/in-app-guidance-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">in-app experience<\/a> flows for users. See how the graphics and message tell a story? Use that.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/userpilot-extension-loading-message-good-ux-example_fd61458044ba96536f68dcb282fc1baa_800.png 1x, https:\/\/images.storychief.com\/account_6827\/userpilot-extension-loading-message-good-ux-example_fd61458044ba96536f68dcb282fc1baa_1600.png 2x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/userpilot-extension-loading-message-good-ux-example_fd61458044ba96536f68dcb282fc1baa_800.png 1x, https:\/\/images.storychief.com\/account_6827\/userpilot-extension-loading-message-good-ux-example_fd61458044ba96536f68dcb282fc1baa_1600.png 2x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/userpilot-extension-loading-message-good-ux-example_fd61458044ba96536f68dcb282fc1baa_800.png\" alt=\"userpilot-extension-loading-message-good-ux-example\" \/><\/picture><figcaption><a href=\"https:\/\/userpilot.com\/userpilot-demo\" target=\"_blank\" rel=\"noopener noreferrer\">Userpilot<\/a> builder loading message.<\/figcaption><\/figure>\n<h3 id=\"b909s\">Inspire positive associations with clever images and messages<\/h3>\n<p>Would you rather speak to a robot or a friend?<\/p>\n<p>Tiny details like the tone of voice dictate how people respond to a product. A friendly microcopy humanizes the product and inspires action. A lack of it gives customers a reason to <a href=\"https:\/\/userpilot.com\/blog\/reduce-churn-rate\/\" target=\"_blank\" rel=\"noopener noreferrer\">churn<\/a>.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/slack-emotional-design-examples_29a8246aca3a4ce8c892132d31361634_800.png 1x, https:\/\/images.storychief.com\/account_6827\/slack-emotional-design-examples_29a8246aca3a4ce8c892132d31361634_1600.png 2x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/slack-emotional-design-examples_29a8246aca3a4ce8c892132d31361634_800.png 1x, https:\/\/images.storychief.com\/account_6827\/slack-emotional-design-examples_29a8246aca3a4ce8c892132d31361634_1600.png 2x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/slack-emotional-design-examples_29a8246aca3a4ce8c892132d31361634_800.png\" alt=\"slack-emotional-design-examples\" \/><\/picture><figcaption>Source: Slack<\/figcaption><\/figure>\n<h3 id=\"4r7lp\"><strong>Use micro-videos to enhance the first-time user experience<\/strong><\/h3>\n<p>Would you rather watch a video or read through a long text to learn about a new app? While text might help to an extent, <a href=\"https:\/\/userpilot.com\/blog\/video-onboarding-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">video is more effective in onboarding new users<\/a>.<\/p>\n<p>It&#8217;s more visual, more actionable, and more personal.<\/p>\n<p>Replace the blank <a href=\"https:\/\/userpilot.com\/blog\/empty-state-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">empty state<\/a> with tutorial videos. Just like Loom did with this screen. See how they took advantage of the empty state to display <a href=\"https:\/\/userpilot.com\/blog\/video-tutorials\/\" target=\"_blank\" rel=\"noopener noreferrer\">video tutorials<\/a> to create a connection with the user.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/emotional-design-examples-videos-loom_cf812dce71d6e0286a31f2f5a98bd864_800.png 1x, https:\/\/images.storychief.com\/account_6827\/emotional-design-examples-videos-loom_cf812dce71d6e0286a31f2f5a98bd864_1600.png 2x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/emotional-design-examples-videos-loom_cf812dce71d6e0286a31f2f5a98bd864_800.png 1x, https:\/\/images.storychief.com\/account_6827\/emotional-design-examples-videos-loom_cf812dce71d6e0286a31f2f5a98bd864_1600.png 2x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/emotional-design-examples-videos-loom_cf812dce71d6e0286a31f2f5a98bd864_800.png\" alt=\"emotional-design-examples-videos-loom\" \/><\/picture><figcaption>Source: Loom<\/figcaption><\/figure>\n<h2 id=\"4sk32\">Behavioral emotional design examples<\/h2>\n<p>Behavioral design is centered on the user&#8217;s behavior when interacting with a product. It focuses on the usability of an app, which includes elements like product effectiveness, efficiency, engagement, and ease of use.<\/p>\n<p>Empathy is the provenance of behavioral emotional design.<\/p>\n<p>It begins at the first stage of design thinking, where designers visit users in their natural environment and question their behavior. So, when designing products, it&#8217;s important to ask yourself how you can make your users&#8217; experience as pleasant as possible.<\/p>\n<h3 id=\"324nf\">Personalize the onboarding experience for each user<\/h3>\n<p>How do you feel when something is designed just for you? Special, right?<\/p>\n<p>That\u2019s the power of a personalized onboarding experience. Instead of taking every user through a generic user journey, add a personal touch.<\/p>\n<p>A great example of this is expressed in this <a href=\"https:\/\/userpilot.com\/blog\/user-onboarding-best-practices\/\" target=\"_blank\" rel=\"noopener noreferrer\">onboarding flow<\/a> from Notion. Observe how their users are categorized into two segments. Everything from the image to the microcopy and even the CTA is customized for each user segment.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/notion-personalized-branched-onbaording-emotional-design-examples_9d5fd50cf7caca97adcdd856df4077c6_800.png 1x, https:\/\/images.storychief.com\/account_6827\/notion-personalized-branched-onbaording-emotional-design-examples_9d5fd50cf7caca97adcdd856df4077c6_1600.png 2x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/notion-personalized-branched-onbaording-emotional-design-examples_9d5fd50cf7caca97adcdd856df4077c6_800.png 1x, https:\/\/images.storychief.com\/account_6827\/notion-personalized-branched-onbaording-emotional-design-examples_9d5fd50cf7caca97adcdd856df4077c6_1600.png 2x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/notion-personalized-branched-onbaording-emotional-design-examples_9d5fd50cf7caca97adcdd856df4077c6_800.png\" alt=\"notion-personalized-branched-onbaording-emotional-design-examples\" \/><\/picture><figcaption>Behavioral emotional design examples from Notion.<\/figcaption><\/figure>\n<h3 id=\"88s23\">Use interactive videos to enhance the experience<\/h3>\n<p>Help users engage with your product&#8217;s features easily with step-by-step <em>handholding<\/em>.<\/p>\n<p>Use small-driven actions (look like <a href=\"https:\/\/userpilot.com\/blog\/onboarding-tooltips-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">tooltips<\/a> but are not) that guide users step by step, telling them what to do. Once an action is performed, the next clue is triggered.<\/p>\n<p><strong>The result:<\/strong> a positive experience even when engaging with more complex features. Take inspiration from how Kommunicate helps users set up their chatbot for the first time.<\/p>\n<p>Focus on how the cursor interacts with the UI elements and makes it feel like someone is at the other end of the screen.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/INTERACTIVE-WALKTHROUGH-emotional-design-examples_213c1c5c295362c96017e6f866570df5.gif 1x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/INTERACTIVE-WALKTHROUGH-emotional-design-examples_213c1c5c295362c96017e6f866570df5.gif 1x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/INTERACTIVE-WALKTHROUGH-emotional-design-examples_213c1c5c295362c96017e6f866570df5.gif\" alt=\"INTERACTIVE-WALKTHROUGH-emotional-design-examples\" \/><\/picture><figcaption>Create interactive walkthroughs with <a href=\"https:\/\/userpilot.com\/role\/ux-design\" target=\"_blank\" rel=\"noopener noreferrer\">Userpilot<\/a>.<\/figcaption><\/figure>\n<h3 id=\"3bg11\">Focus on contextual in-app communication and guidance<\/h3>\n<p>The key here is being <a href=\"https:\/\/userpilot.com\/blog\/contextual-onboarding-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">contextual<\/a>.<\/p>\n<p>Don&#8217;t clutter the UI, show help when the user needs it.<\/p>\n<p>When users walk through your product, don\u2019t leave them alone to figure it out on their own. Make <a href=\"https:\/\/userpilot.com\/blog\/in-app-guidance-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">in-app guidance<\/a> part of the experience and blend it in across the journey.<\/p>\n<p>This way, you can create a design that follows your brand and display the right message when users need it.<\/p>\n<p>In-app guidance could be small hints like hotspots that drive the user&#8217;s eye to one UI element. Here\u2019s an example of how you can set up a hotspot with <a href=\"https:\/\/userpilot.com\/userpilot-demo\" target=\"_blank\" rel=\"noopener noreferrer\">Userpilot<\/a>. Check out how this micro-video directs the user\u2019s eyes to demonstrate how they can change the animation type in a simple step.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/hotspot-emotional-design-examples-userpilot-product-engagement_c25e7e5bb67c1a3e18d72f216b54d906.gif 1x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/hotspot-emotional-design-examples-userpilot-product-engagement_c25e7e5bb67c1a3e18d72f216b54d906.gif 1x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/hotspot-emotional-design-examples-userpilot-product-engagement_c25e7e5bb67c1a3e18d72f216b54d906.gif\" alt=\"hotspot-emotional-design-examples-userpilot-product-engagement\" \/><\/picture><figcaption>Create In-app guidance with <a href=\"https:\/\/userpilot.com\/userpilot-demo\" target=\"_blank\" rel=\"noopener noreferrer\">Userpilot<\/a>.<\/figcaption><\/figure>\n<p>Likewise, use small tooltips that offer short information and help users discover the product&#8217;s main functionality. Combine with great microcopy to help the user understand the function of a feature in seconds to help them engage better with it.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/emotional-design-examples-tooltip_a30b345ac92261cb595dd69616bbe9f6_800.png 1x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/emotional-design-examples-tooltip_a30b345ac92261cb595dd69616bbe9f6_800.png 1x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/emotional-design-examples-tooltip_a30b345ac92261cb595dd69616bbe9f6_800.png\" alt=\"emotional-design-examples-tooltip\" \/><\/picture><figcaption>Use tooltips for a better <a href=\"https:\/\/userpilot.com\/role\/ux-design\" target=\"_blank\" rel=\"noopener noreferrer\">onboarding experience<\/a>.<\/figcaption><\/figure>\n<p>You can also use a banner to keep users updated on the latest changes without disrupting their experience.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/banner-emotional-desing-examples_46cdeae532087b5f63abe8c6903c66a8_800.png 1x, https:\/\/images.storychief.com\/account_6827\/banner-emotional-desing-examples_46cdeae532087b5f63abe8c6903c66a8_1600.png 2x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/banner-emotional-desing-examples_46cdeae532087b5f63abe8c6903c66a8_800.png 1x, https:\/\/images.storychief.com\/account_6827\/banner-emotional-desing-examples_46cdeae532087b5f63abe8c6903c66a8_1600.png 2x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/banner-emotional-desing-examples_46cdeae532087b5f63abe8c6903c66a8_800.png\" alt=\"banner-emotional-desing-examples\" \/><\/picture><\/figure>\n<p>There\u2019s nothing more frustrating than interrupting people to make a <a href=\"https:\/\/userpilot.com\/blog\/new-feature-announcement-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">new feature announcement<\/a>. Banners resolve this issue, here&#8217;s how you can build one with <a href=\"https:\/\/userpilot.com\/userpilot-demo\" target=\"_blank\" rel=\"noopener noreferrer\">Userpilot<\/a>.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/banners-userpilot-dashboard-emotional-design-example_e20f431759c041ef0ebadb6866f65a6e.gif 1x, https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/banners-userpilot-dashboard-emotional-design-example_e20f431759c041ef0ebadb6866f65a6e.gif 2x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/banners-userpilot-dashboard-emotional-design-example_e20f431759c041ef0ebadb6866f65a6e.gif 1x, https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/banners-userpilot-dashboard-emotional-design-example_e20f431759c041ef0ebadb6866f65a6e.gif 2x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/banners-userpilot-dashboard-emotional-design-example_e20f431759c041ef0ebadb6866f65a6e.gif\" alt=\"banners-userpilot-dashboard-emotional-design-example\" \/><\/picture><figcaption>Source: <a href=\"https:\/\/userpilot.com\/userpilot-demo\" target=\"_blank\" rel=\"noopener noreferrer\">Userpilot<\/a><\/figcaption><\/figure>\n<h2 id=\"e0rd8\">Reflective emotions design examples<\/h2>\n<p>Reflective design examines the emotional response of a user after using a product. This is where you consciously evaluate a product. You might ask questions like:<\/p>\n<ul>\n<li>Did the product solve your problem?<\/li>\n<li>How did you feel?<\/li>\n<li>Would you use the product again?<\/li>\n<li>Or is it a no-no for you?<\/li>\n<\/ul>\n<p>In the case of an online store, for example, this could mean how people feel after shopping for the first time. If the shopping experience was frictionless, they would share their experience and always come back.<\/p>\n<p>Reflective design is impacted by the overall experience of engaging with your product or customer support\/success teams.<\/p>\n<p>You can impact and change the perception of negative experiences with good <a href=\"https:\/\/userpilot.com\/blog\/feedback-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">UI feedback<\/a> that will leave a feel-good impression. With this, it\u2019s easy to uncover <a href=\"https:\/\/userpilot.com\/blog\/happy-path-ux\/\" target=\"_blank\" rel=\"noopener noreferrer\">unhappy paths<\/a> and increase <a href=\"https:\/\/userpilot.com\/blog\/increase-product-stickiness-saas\/\" target=\"_blank\" rel=\"noopener noreferrer\">product stickiness<\/a>.<\/p>\n<h3 id=\"cqgia\">Humanize your product with funny error messages<\/h3>\n<p>We all make errors\u2026 humans and products alike.<\/p>\n<p>But a good error message humanizes your product and keeps users entertained when this happens. It replaces the initial feeling of irritation and transforms the user experience into a memorable one.<\/p>\n<p>Like this funny error code that Asana generates when something goes wrong. When you need to pass this to the support team, telling them &#8221;5 evil cobras jog sadly&#8221; kind of puts a smile on your face. Of course, the error might have a big impact on the user&#8217;s job so make sure to take support issues seriously.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/asana-funny-error-message-emotional-design-examples_d2d3590c202c1c6d1688fc840a980a60_800.png 1x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/asana-funny-error-message-emotional-design-examples_d2d3590c202c1c6d1688fc840a980a60_800.png 1x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/asana-funny-error-message-emotional-design-examples_d2d3590c202c1c6d1688fc840a980a60_800.png\" alt=\"asana-funny-error-message-emotional-design-examples\" \/><\/picture><figcaption>Source: Asana<\/figcaption><\/figure>\n<h3 id=\"3rken\">Use color and contrast with accessibility and usability in mind<\/h3>\n<p>Color has been occasionally linked in psychology to dictating how we respond to situations. When combining colors and contrasts, prioritize <a href=\"https:\/\/userpilot.com\/blog\/usability-vs-user-experience\/\" target=\"_blank\" rel=\"noopener noreferrer\">usability<\/a> as well as accessibility to cater to all user segments.<\/p>\n<p>A great example of this is Asana. To help users with impaired vision, they toned down their color scheme to make their experience more comfortable for everyone.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/asana-color-code-emotional-design-examples_9e79addf0121bc79cc2ece1015e9f225_800.png 1x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/asana-color-code-emotional-design-examples_9e79addf0121bc79cc2ece1015e9f225_800.png 1x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/asana-color-code-emotional-design-examples_9e79addf0121bc79cc2ece1015e9f225_800.png\" alt=\"asana-color-code-emotional-design-examples\" \/><\/picture><figcaption>Source: Asana<\/figcaption><\/figure>\n<h3 id=\"5svpd\">Evoke positive emotions with gamification elements<\/h3>\n<p>Entertain users with <a href=\"https:\/\/userpilot.com\/blog\/ux-gamification\/\" target=\"_blank\" rel=\"noopener noreferrer\">gamification<\/a> elements. There are lots of SaaS companies doing this, but nothing beats Asana&#8217;s little monsters, called <a href=\"https:\/\/asana.com\/guide\/help\/tasks\/celebrations\" target=\"_blank\" rel=\"nofollow noopener\">celebration creatures<\/a>.<\/p>\n<p>Celebration creatures celebrate the successes of individuals and teams, for example, when you complete a task.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/images.storychief.com\/account_6827\/asana-emotional-design-examples_904a5206bf880aaeba96e410db6fa02b_800.png 1x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/images.storychief.com\/account_6827\/asana-emotional-design-examples_904a5206bf880aaeba96e410db6fa02b_800.png 1x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/asana-emotional-design-examples_904a5206bf880aaeba96e410db6fa02b_800.png\" alt=\"asana-emotional-design-examples\" \/><\/picture><figcaption>Source: Asana<\/figcaption><\/figure>\n<p>These little creatures add personality to the brand and make it memorable. Plus, they have all the great effects of gamification, which drives more engagement. We all tend to repeat actions that drive positive emotions and success.<\/p>\n<figure class=\"image strchf-type-image regular strchf-size-regular strchf-align-center\"><picture><source srcset=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/Asana-gamification-emotional-design-examples_1431f3629a05e3bc6e0fc2adbc51d0c4.gif 1x\" media=\"(max-width: 768px)\" \/><source srcset=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/Asana-gamification-emotional-design-examples_1431f3629a05e3bc6e0fc2adbc51d0c4.gif 1x\" media=\"(min-width: 769px)\" \/><img decoding=\"async\" src=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/Asana-gamification-emotional-design-examples_1431f3629a05e3bc6e0fc2adbc51d0c4.gif\" alt=\"Asana-gamification-emotional-design-examples\" \/><\/picture><figcaption>Source: Asana<\/figcaption><\/figure>\n<h2 id=\"c70h\"><strong>Conclusion<\/strong><\/h2>\n<p>At the end of the day, emotional design is all about designing for people. People care about how they feel when they&#8217;re using products, so you need to consider how your product makes users feel during their moment of interaction.<\/p>\n<p>This plays a large role in a user&#8217;s willingness to use your product over other similar ones. It&#8217;s important to make sure that your product meets the user&#8217;s needs without alienating them with a bad overall experience.<\/p>\n<p>Want to build product experiences code-free with Userpilot? <a href=\"https:\/\/userpilot.com\/userpilot-demo\" target=\"_blank\" rel=\"noopener noreferrer\">Book a demo call<\/a> with our team and get started!<\/p>\n<div class=\"poptin-embedded\" data-id=\"1d66c0f9f7f4d\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Looking for emotional design examples to enhance your product experience? People care about how they feel when they&#8217;re using products, so you need to consider how your product makes users feel during their moment of interaction. We&#8217;ve compiled visceral, behavioural and reflective designs for you<\/p>\n","protected":false},"author":51,"featured_media":12850,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[488],"tags":[64,52,201,421,51],"class_list":["post-12848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-engagement","tag-product-adoption","tag-product-experience","tag-user-experience","tag-user-journey-map","tag-user-onboarding-experience"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Emotional Design Examples: How to Enhance Your Product UI\/UX Design<\/title>\n<meta name=\"description\" content=\"Looking for emotional design examples to enhance your product experience? We&#039;ve compiled visceral, behavioural and reflective designs for you\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Emotional Design Examples: How to Enhance Your Product UI\/UX Design\" \/>\n<meta property=\"og:description\" content=\"Looking for emotional design examples to enhance your product experience? We&#039;ve compiled visceral, behavioural and reflective designs for you\" \/>\n<meta property=\"og:url\" content=\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Thoughts about Product Adoption, User Onboarding and Good UX | Userpilot Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-15T17:10:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-29T18:43:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1876\" \/>\n\t<meta property=\"og:image:height\" content=\"1228\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sophie Grigoryan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophie Grigoryan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/\"},\"author\":{\"name\":\"Sophie Grigoryan\",\"@id\":\"https:\/\/userpilot.com\/blog\/#\/schema\/person\/de37c23746f7aa52492f6c97b1f222cf\"},\"headline\":\"Emotional Design Examples: How to Enhance Your Product UI\/UX Design\",\"datePublished\":\"2024-09-15T17:10:59+00:00\",\"dateModified\":\"2024-12-29T18:43:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/\"},\"wordCount\":2309,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png\",\"keywords\":[\"product adoption\",\"product experience\",\"User Experience\",\"user journey map\",\"User Onboarding Experience\"],\"articleSection\":[\"User Engagement\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/\",\"url\":\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/\",\"name\":\"Emotional Design Examples: How to Enhance Your Product UI\/UX Design\",\"isPartOf\":{\"@id\":\"https:\/\/userpilot.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png\",\"datePublished\":\"2024-09-15T17:10:59+00:00\",\"dateModified\":\"2024-12-29T18:43:48+00:00\",\"author\":{\"@id\":\"https:\/\/userpilot.com\/blog\/#\/schema\/person\/de37c23746f7aa52492f6c97b1f222cf\"},\"description\":\"Looking for emotional design examples to enhance your product experience? We've compiled visceral, behavioural and reflective designs for you\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#primaryimage\",\"url\":\"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png\",\"contentUrl\":\"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png\",\"width\":1876,\"height\":1228,\"caption\":\"Emotional Design Examples: How to Enhance Your Product UI\/UX Design\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/userpilot.com\/blog\/#website\",\"url\":\"https:\/\/userpilot.com\/blog\/\",\"name\":\"Thoughts about Product Adoption, User Onboarding and Good UX | Userpilot Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/userpilot.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/userpilot.com\/blog\/#\/schema\/person\/de37c23746f7aa52492f6c97b1f222cf\",\"name\":\"Sophie Grigoryan\",\"url\":\"https:\/\/userpilot.com\/blog\/author\/sofi\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Emotional Design Examples: How to Enhance Your Product UI\/UX Design","description":"Looking for emotional design examples to enhance your product experience? We've compiled visceral, behavioural and reflective designs for you","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/","og_locale":"en_US","og_type":"article","og_title":"Emotional Design Examples: How to Enhance Your Product UI\/UX Design","og_description":"Looking for emotional design examples to enhance your product experience? We've compiled visceral, behavioural and reflective designs for you","og_url":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/","og_site_name":"Thoughts about Product Adoption, User Onboarding and Good UX | Userpilot Blog","article_published_time":"2024-09-15T17:10:59+00:00","article_modified_time":"2024-12-29T18:43:48+00:00","og_image":[{"width":1876,"height":1228,"url":"https:\/\/userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png","type":"image\/png"}],"author":"Sophie Grigoryan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sophie Grigoryan","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#article","isPartOf":{"@id":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/"},"author":{"name":"Sophie Grigoryan","@id":"https:\/\/userpilot.com\/blog\/#\/schema\/person\/de37c23746f7aa52492f6c97b1f222cf"},"headline":"Emotional Design Examples: How to Enhance Your Product UI\/UX Design","datePublished":"2024-09-15T17:10:59+00:00","dateModified":"2024-12-29T18:43:48+00:00","mainEntityOfPage":{"@id":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/"},"wordCount":2309,"commentCount":0,"image":{"@id":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png","keywords":["product adoption","product experience","User Experience","user journey map","User Onboarding Experience"],"articleSection":["User Engagement"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/userpilot.com\/blog\/emotional-design-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/","url":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/","name":"Emotional Design Examples: How to Enhance Your Product UI\/UX Design","isPartOf":{"@id":"https:\/\/userpilot.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#primaryimage"},"image":{"@id":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png","datePublished":"2024-09-15T17:10:59+00:00","dateModified":"2024-12-29T18:43:48+00:00","author":{"@id":"https:\/\/userpilot.com\/blog\/#\/schema\/person\/de37c23746f7aa52492f6c97b1f222cf"},"description":"Looking for emotional design examples to enhance your product experience? We've compiled visceral, behavioural and reflective designs for you","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/userpilot.com\/blog\/emotional-design-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/userpilot.com\/blog\/emotional-design-examples\/#primaryimage","url":"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png","contentUrl":"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2022\/06\/Emotional-Design-Examples-How-to-Enhance-Your-Product-UI-UX-Design_98aded5d927a1970d97caf77fe5b90e7_2000.png","width":1876,"height":1228,"caption":"Emotional Design Examples: How to Enhance Your Product UI\/UX Design"},{"@type":"WebSite","@id":"https:\/\/userpilot.com\/blog\/#website","url":"https:\/\/userpilot.com\/blog\/","name":"Thoughts about Product Adoption, User Onboarding and Good UX | Userpilot Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/userpilot.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/userpilot.com\/blog\/#\/schema\/person\/de37c23746f7aa52492f6c97b1f222cf","name":"Sophie Grigoryan","url":"https:\/\/userpilot.com\/blog\/author\/sofi\/"}]}},"_links":{"self":[{"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/posts\/12848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/comments?post=12848"}],"version-history":[{"count":5,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/posts\/12848\/revisions"}],"predecessor-version":[{"id":253328,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/posts\/12848\/revisions\/253328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/media\/12850"}],"wp:attachment":[{"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/media?parent=12848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/categories?post=12848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/tags?post=12848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}