Designing for emotional delight

Pascal Potvin
UX Collective
Published in
12 min readAug 24, 2021

--

When was the last time that you used a product that left you with a smile — whether it be the overall product experience or a small unexpected moment? Every company has the same goal of building great products, but is there more we can do? Defining and delivering against your user’s problems does not mean that it will be delightful to use. Designers often work towards delivering products that respond to customer needs, that frictionless and functional… but not delightful.

Simplicity and utility are what will draw you towards the initial adoption of certain products, but the small and delightful experiences are what will keep you engaged and emotionally loyal to them. Never underestimate the power of delight to improve and go above and beyond the users’ experience. Designing for delight is all about establishing an emotional connection with your users and reminding them that there are real humans behind the design. It’s not actually about your product but users.

Don’t consider it a feature but an emotion. Make your product, service or app a joy to use by connecting feelings with features!

Robert Plutchik’s emotion wheel — CleverTap

In our latest IBM Design Q2 Design jam, the *Elevate Viz group wanted to explore designing for delight and more importantly, adding delight inside enterprise design software. (Elevate Viz is an IBM initiative with the goal of elevating visual engagement in our offerings through the use of illustrations, micro-interactions, creating memorable “visual-hooks”, etc.).

Design jams provide our designers with an opportunity to advance their craft, grow their network, and design the future of IBM! We asked designers to find and explore opportunities inside or beyond their current product spaces. This was their chance to uncover the opportunities hidden behind the “no’s”, the “we don’t have time’s” and the “we can’t build this”!

The last best experience that anyone has anywhere becomes the minimum expectation for the experience they want everywhere.

- Bridget Van Kralingen, Senior VP, IBM Global Business Services

Designing for delight is designing for moments

Delightful moments inside product experiences can be large or small — when done right, they fulfill the emotional needs of your users. It is this little feeling of happiness inside of you that is evoked by a sense of accomplishment or by that element of surprise.

According to NN Group’s article, A Theory of User Delight, they define two types of delight: surface delight and deep delight.

  • Surface delight is local and contextual; it is usually derived from largely isolated interface features.
  • Deep delight is holistic and is achieved once all user needs are met, including functionality, reliability, usability, and pleasurability.

It is no longer enough to just focus on usability, features, and product functionalities, we now need to go beyond those elements. To be able differentiate and to elevate ourselves above the competition, we need to focus on user delight, excitement and engagement. This should never be seen as an afterthought but included in our process. This is that special something, that secret sauce in which you add flavour, or your personal twist, to the overall experience.

Swrve — how to nudge your users

In our day-to-day lives, the word delight is often associated to describe pleasure. We should use delight as that magical ingredient that we use to make users fall in love with our products. Utilizing this secret sauce is a great way to differentiate ourselves and our products towards greatness.

It’s time to kick ass and chew bubblegum. And I’m all out of gum.

Arin Bhowmick, Vice President and Chief Design Officer

Delight only works when basic expectations are met

We can measure a design on a scale from frustration to delight. In the middle of this scale is a neutral point, where the design is neither frustrating nor delightful. It is good, it works, it is usable, useful, and effective. It‘s not necessarily memorable or remarkable. It’s a good and plain experience.

Moving a design from frustration to neutral points means we have to understand our users and meet their expectations and needs. We have to remove anything that causes frustration or confusion or slows down their tasks.

Scale design from good to great

Design can only hit a delight if it first meets the users’ basic expectations. If we get this right, we, as designers, can transform our designs from good to great. We can design an experience that goes beyond being neutral. Unexpected rewards or experiences may be a way for users to forget their frustrations during a process. Surface delight provides products with opportunities to be habit-forming:

  • Create higher and fidelity customer lifetime value
  • Offer greater pricing availability
  • Increase growth and referrals
  • Increase loyalty
  • Increase joy

Delight is something we add to an existing experience, that makes it fun and pleasurable. We design a product that goes beyond table stakes, provides joy, value, and put a smile in our users face. Designing for delight is all about establishing an emotional connection with our users which requires understanding multiple dimensions of the context and scenario to generate positive emotions at different points. We have to shift from designing for user experiences, to designing with emotions and humour.

Opportunities

Delightful experiences are usually triggered from a situation or a particular customer touchpoint in the overall user journey such as waiting moments, consuming data, upgrading, etc. There’s no one size fits all approach here. We live in a very competitive market and finding new ways to differentiate ourselves while adding value to our users is what we all strive for. We are all on a mission to create meaningful designs and user experiences that build deeper connections with their products.

Unexpected results can help turn frustration into delight / bethybrightanddark.com

There are many ways, approaches and possibilities to achieve delight in your products. The first step will always be to take the time to really understand users — from figuring out what matters to them, their pain points, and what kind of opportunities could fill these gaps.

Let’s take a closer look at different dimensions (areas) of opportunities that you could easily inject back into your product spaces.

Brand personality

With so many different businesses trying to make a name for themselves, injecting brand personality inside your product can be the way you differentiate yourself from the competition.

Mailchimp does a really good job at this. When you’re about to send out your first campaign, the accompanying animation shows how stressful it is. Mailchimp brings empathy to the design: by combining animated cartoons with tongue-in-cheek messages like “This is your moment of glory”, Mailchimp softens the nervousness of sending your first emails.

Mailchimp — Demonstrating brand personality

Micro-interactions

Focusing on user emotions plays a huge role in UI interactions. We all know the importance of micro-animations in products but we can also use them in a way to show a response to an action someone creates.

Look for opportunities inside your products to make the UI experience feel like there’s a human on the other end, not a computer. Think of providing the user with a reward when they accomplish personal goals. For example, when a user reaches inbox zero, create deeper engagement with the app using features like animation.

Shopify — app animation examples
Pull to refresh example — James G. / Dribbble

Tactile-like feedback shows the software is actively responsive to the user’s input. Such behaviours make load-times a little more tolerable and entertaining.

Twitter changed it for everyone with their pull to refresh. Simple, yet effective product feedback, this simple gesture was quickly adopted by thousands of apps because it makes the experience of a data update really smooth.

Helping users when they are not expecting it

These delightful moments don’t always need to include highly visual elements or animations. The goal here is to also look for opportunities that will help users out in the end when they least expect it. In this example, long Wi-Fi passwords were replaced with a “share password”. The objective of sharing a password was made easier while keeping private information secure and simplifying user’s lives.

Live product feedback

This was another industry changer. Uber’s ride-share application provides live feedback and context information (who is picking you up, what car they drive, driver ratings, etc.), all while you wait. With this new feature, you actually felt listened to. As we know, many other companies have adopted this strategy with their apps and services. You can now track your pizza delivery on your phone and know exactly when it will arrive.

Pin Code Verification Features — Uber

Auto-population

Apple’s iOS auto-populating feature helps you quickly share your current location with your friends — making your life easier. Just type “I’m at” (make sure to hit the spacebar after “at”) and you will then see the current location appear just above your keyboard. Simply tap it to send your location and voilà! A pin with a quick link to get directions to your location will be sent.

Another great example of simplifying user’s lives by avoiding them to type out the entire address. Thank you iOS!

Learning

You turn the dial, and immediately get product feedback from Nest indicating that it is learning. This type of interaction or product feature makes technology feel more human — turning a boring old thermostat into something modern and useful. Who still wants the boring old thermostat when you can have this cool stuff in your house. The Nest Thermostat is a beautiful device designed to make your home smarter. It is easy to use and keeps you comfortable while saving you money. Nice product response and it learns from you.

Example of Nest thermostat learning interaction — Nest

Injecting delight inside IBM products

We’ve looked at some external product examples as well as some areas of opportunities to help you get inspired for your next adventure. Designers across IBM go through the same flow when we are looking at injecting delight and thought it would be interesting to share some of our real-life examples. It starts with inspiration, drawing some big ideas, finding metaphors and analogies, including each individual in the team.

Example from brainstorming session — IBM

We take all these ideas and turn bring them to life, letting our creative juices run wild. We prototype, we test, and we iterate until we get it right.

Expressive motion

This is an example of expressive motion and how it delivers enthusiastic and vibrant responses to interactive moments.

It’s about how the product feels for the user. Conscious transitions and feedback guide the user, reduce cognitive load and make interactions pleasant and enjoyable. Check out IBM Watson Studio explorations Part 1, Part 2, and Part 3, and you will see how all the pieces fit together to elevate the experience. The solid design combined with smooth animations = delight.

Color is used in meaningful ways throughout the design. The drag and drop color animation is a good example of being intentional with design and shaping the execution around the user’s actions. It is this little feeling of happiness inside of you that is evoked by a sense of the vibrating and surprising interactive moment.

IBM Watson Studio — animations and transitions exploration by Ruben Fernandez and Andrew Smith

Injecting AI transparency

We explored the opportunity of visualizing an automatic data matching process to offer more transparency for users and make the experience more engaging.

Using classic progress indicators to indicate the data being processed, quickly looses users’ attention. Once the loading is complete, users have no idea what happened to their data during the process which may impact their trust of AI and its results.

Demonstrating the transparency of AI through visualization

By offering more details on what is actually happening behind the scenes, and by using a simple visual language, voice and tone, and providing meaningful progress updates, we are able to reduce users’ uncertainty about the AI processes. This in return, helps users to build trust with the system. This process allows them to learn what the system is doing with their data which in return empowers them to take action to improve their data quality and efficiency. Through transparency, a product is able to turn waiting or loading moments into a memorable, and even learning, opportunities.

As designers, we need to look for these types of opportunities — turning a neutral experience into a moment of delight. Make sure you provide additional value to the user while doing this!

Take action

By now, you may be asking yourself what are the secrets of designing these types of moments? How can I achieve these in my own products or services? Designing for delight is designing for moments… and functionality should always come first. When it comes to your design process, you need to address the element of emotion in a careful systematic way, rather than as an afterthought.

Here are some steps to help you through this journey:

Start with mood boards and do your research: Find inspiration externally and internally. Don’t limit yourself to similar products. Inspiration can, and should, come in all shapes and forms.

Identify use cases in your offerings: Pick a moment inside your products that is unexpected. What area in your product could benefit from an emotional connection?

A customer journey could reveal several possible opportunities. At any moment inside this journey, a user could be frustrated, anxious, unsure, and sitting there waiting for something to happen. These moments (or opportunities) need to be understood deeply. Your design solution should address them and reinforce positiveness and help overcome negative emotions.

Focus on one thing, details matter: Limit yourself to one thing, or one moment. If you try too hard or do too many things at once, you will be doing the opposite of delight and will put your users in cognitive overload

Pick and choose the right moment in the journey to convey the response. There are three possible ways to respond to customer emotions:

  • Visceral (appearance, visual language, tone, or voice)
  • Behavioral (how it works, behaves, or responds)
  • Reflective (how it is interpreted or understood)

Deliver meaning as an outcome: “Meaning” in designing for delight is purpose fulfilled. You should be designing for meaning rather than with meaning. Meaning is more powerful than emotions and transcends value.

Design and demo: As with any other element of product design, we should be continuously testing. Designing. Testing. Designing. Testing. Injecting meaning within a delight-driven design is an iterative process that should be based on continuous experimentation and improvement.

Conclusion

Never underestimate the power of delight to improve the users’ experience. We should be embracing it and finding meaningful opportunities to inject them into our products. We need to remember that designing for delight is not about our products but about creating that unexpected reward for our users.

Functionality, reliability and usability should always be our end goal and the pursuit of delight should not block any of these pieces. It’s about crafting an end-to-end story together. Adding moments of delight into your current task flow. However, that will be. Making sure we remove technical terms, use natural language, add some fun and humour, but most important: be intentional in the design.

Don’t just look at features, but emotions. Find ways to make your products a joy to use. Have fun and explore!!!

*Members of our Elevate Viz group. None of this would be possible without them: Marion Brülls, Tiffany Shine, Cameron Calder, Andrew Smith, David Levinson, Rubben Fernandez, Ivy Leung.

Pascal Potvin is a Design Principal within IBM’s Cloud and Cognitive portfolio. He is all ears for your take on anything design, feel free to connect with him on Linkedin.

--

--

I help founders and leaders translate vision into user experiences that drive growth and unlocks revenue. | Design Principal | MBA | Avid observer