Pushing past “neutral” UX design to “delightful” design can break down barriers and get a product to the point that a user has an emotional relationship with the product. In this talk, I will give examples of how this works.
Want to see more talks from LabsCon 2019? Check out our YouTube Playlist.
Yeah, I’m Steven. I guess I should explain the name of my presentation. It’s meant to be a double entendre. I heard some French people in. It’s meant to be like cannon, defined as a regulation decreed by church or like the weapon, like I’m blasting delight because it’s kind of silly and ironic because you’re not supposed to overdo it and there’s too much delight here.
Yeah, sure. And it’s okay for you to laugh at me, which you should. That’s why, that’s what this product is here for you all today. No general what have you. We will not have time.
Yeah, I’m a designer. I’m a product designer, also UX/UI designer. I, some of my favorite work outside of UX design has been graphic designer, motion graphics designer, illustration design. So, general pretty big art nerd and a recovering art director. Yes, Eric here, the other member of the Denver, Detroit Labs, Denver office, hired me as an art director and we transitioned pretty quickly into UX and UI.
But most of the UI, first, is like a visual designer and motion graphics designer. And that’s how I kind of squirmed my way into UX and UI. I was kind of a blunt instrument of a UI designer and kind of used some of my strengths there to get into UX design. So I’m a product designer now.
I worked with Eric. He hired me at Ibotta where I started there as an art director. It’s an app that gives cash back for buying everyday things, groceries, online shopping, Ubering. When Eric started there it was something like, oh, employees, six, but were there six users?
Yeah, zero users.
Zero users. Okay, well there’s like two million active users now, something like that and like 50 million downloads and a half million per month and all sorts of half a billion dollars paid back to users.
And so you’re wondering why I’m doing this to you today. Well, I use, like I said, graphic design, illustration and motion graphics to get a transition in product design, a UX design. And I was hearing a lot of what my strengths were in UX design, which was charm and delight.
And again, I was using this as a blunt instrument and I wanted to find out how it was useful and how to really weaponize it and use it more like a scalpel. And I didn’t know what charm was and how it’s different from delight and how they’re overdone like it is in this presentation. But there’s something bigger than just charm and just delight.
And what that is is emotions, and those are powerful, of course. They influence our perception, our decision-making and our memory. The more emotional experience, the better we remember that experience. So I needed clarity and since getting some of that and doing some research over the years as a UX designer, I got to a point where I wanted to share this with you all and how we can implement it into our work when it’s necessary and understand how that’s important.
So it can be, it can be useful for everybody. Strategists, delivery leads, especially developers, QAS. I think it can be important for all of us to understand this. To differentiate these, this is kind of how I’m going to define it and this is the framework I’ve been using. Charm is like small touches. It’s just, it’s kind of like decoration. It’s kind of like cake, cake, decoration.
That’s okay. It’s still doing some stuff for emotions, though. I’ll get to that. It doesn’t necessarily help usability, but it is additive and it does put a smile on someone’s face. And then there are things that are charming, like this small bit of charm with Venmo. When you cash out, there’s that, a button that just forms into a dot and just flies up into the checkmark. It’s not much, but that is just charming and it is additive and it just, it is a little bit of feedback and a little bit of personality and delight that’s in the details.
It’s doing things to add excitement to interactions and to mimic what the user is feeling and to pay that back. Think of it as icing on the cake, again, but it’s visual and sometimes auditory reward in our digital products. Nielsen Norman Group would call this superficial delight or surface delight.
Sure, and it’s reflecting what the user is feeling. It’s kind of paying back and rewarding, which I think is something that Toby alluded to earlier. Yeah, no, Jonathan did, rewarding the dog. That’s important for instruction, important for education is rewarding when someone has done something that’s kind of difficult or requires some effort to get there.
You can consider the tone, of course. Consider the personality of the product. If it’s early in a product’s life cycle, considering the personality of the product is something that should be a primary exercise before adding delight.
Emotional design. It’s, I’d say the sum of all these things and more. It’s contextually correct communication with users at key moments, and I know that’s kind of a mouthful, but I’ll explain. It’s doing things to create an emotional connection between a user and a product and giving a sense of humanity to a digital product or service.
And that’s something that we do with everything. We assign, we anthropomorphize things all the time. We always give humanity to things as we observe them in the world. So why don’t we try to give some humanity to our products and services that we create because users are going to be doing that anyway. So we can try to control that.
So how does this fit into UX design? Well, we can measure design on a scale from frustration to delight. And middle is a neutral point where the design or the experiences in neither frustrating nor delightful. Doesn’t suck, maybe, but it’s not sweet, just a neutral experience. To get there, we have to remove the frustrating bits to get there. Once we get there, there’s pressure to ship new features fast and push emotional design or charm delight to later, or to never, often.
The result when we have this neutral product and we don’t address humanizing or adding charm or delight or emotional experiences, often our clients or we are spending money on advertising to compensate for bad retention rates because there’s no humanity that we’ve created ourselves because we’re unaware or we’ve underestimated the value of emotional design.
So I’m going to try to help with the framework so we have a little bit of an understanding. There’s a functional hierarchy defined by Aaron Walter, a VP of design education at Envision, or he once was at least. The most important parts, the foundational parts that you have to make sure it’s, product is functional and then it’s got to be reliable so it can’t be crashing. It’s got to be usable. A user has to be able to navigate their way through it.
And then, and then to add those final touches to give it some humanity or some personality, or some life, which comes with some charm and delight. This guy has a great book, I’ll tell you about it later. It’s hard to argue with these hierarchy of principles as you’ve all built and developed products and services, but it’s got to be achieved in this order. It defines the basic needs that a user, a product has to fulfill before the next can be addressed.
So a beautiful app won’t accomplish it if it’s just beautiful, right? Now, what it means to be pleasurable, that was at the top of that pyramid. It creates a stronger connection with the users. I’ve got a story. When I first moved to Denver, it was in 2008 right in the middle of the financial crisis and there was a lot of just anger and general resentment going on around there. And I was new to the city and I was riding my bike to work and someone, it was in the morning and I was kind of, un caffeinated and someone kind of shouted at me, “Good morning.”
And it really caught me off guard because when someone shouts something from you on the street from the sidewalk, you kind of expect, that was a fuck you. So I was like, but good, but good morning. So that, right away, that little, I had just moved to Denver. There was this emotional connection that was created right then. Just kind of happiness and being gentle and friendly that I had with Denver. Part of the reason I love it so much. Now, I am a Detroit native and I do love Detroit. Now I’m just comparing this kind of connection that was made for me.
You create a human-like personality of the products, you anthropomorphize the products, and then you create a better connection and that makes an ongoing relationship which could create some greater retention. I find it usually does, especially if the foundational levels are achieved first.
That same guy made, I guess it’s a pretty obvious quote now that I look at it, but it’s a kind of a mysterious force and it just attracts us to others or to products and repels us from ones that don’t have personality.
Anybody use Headspace, ever? It’s functional and it helps users quickly find contextual guided meditation. I suggest you try it, it’s, there’s like a freemium version. It’s reliable, it’s consistent, it’s effectively, it’s getting users to their lessons. It’s sorted and what have you. And it’s usable, the app is very simple. It features on the focus of types of medication/relaxation based on mood or goal. And it is pleasurable if you’ve already seen those animations, I think it’s got a distinct personality. There’s great button feedback. There’s a playful aesthetic that doesn’t take itself too seriously. It’s an effective use of a UI. It doesn’t get in its own way.
This is one of Toby’s points. User’s expectations or customer’s expectations, you should always try to take those expectations into the equation. What we can do to repair moments of failure or to exceed users’ expectations or double down on wins. And this, this exudes personality or kind of humanity. So, I’m going to try to get into kind of a how-to.
So first there are ground rules you have to keep in mind. It’s got to be clear. Nothing comes at the expense of clarity, ever. Remember, you’re creating the personality of the product, so you don’t want that personality to be an unclear thing. It’s got to be clear if it’s got to be actual kind of human-like. And consistency is key. Don’t overdo it.
It’s hard to not blast the delight cannon for me, for an illustrator and a motion graphics designer. It’s not completely unjustifiable. You know if you can nerd out on drawing or illustrating, or, don’t let your attempt at delay become noise though. So, okay, let’s start at journey mapping. Show of hands if you’ve created one or used one at the job. Nice.
So it’s a visual story that provides insights into a customer’s journey from a customer’s point of view, not from the business’s point of view, not from your point of view. From the customers. There’s a lot of different things you can visualize, a lot of metrics. But I won’t get into journey maps but, but let’s kind of assume that you’ve talked to some users and can identify some critical moments. This is the one we used recently at Ibotta, and blurred out some of the IP there.
But you, you identify those critical moments and uncover the things that cause those critical moments. And you can kind of list those by those moments and make note of the causes and the outcomes because this will help you shape the personality and the interactions that you’re going to create. And you focus on the dramatic ones. And there’s a good-in, good-out factor. A useful journey map requires empathy.
It’s really listening and moderating, talking to users, customers. If I can give you any powerful research, any advice for research, it’s just empathy. You remove yourself from the product you’re building, if you can. Try playing the role of a third party moderator, if you ever do this, never an employee of the company or the product, just use common language, never technical jargon.
And you start making a list of the emotions that the user’s having. Maybe this is something you’ve already done on your way there to the journey maps, but another step that is really useful to creating some confidence on the following steps is visualizing what this is like for users. Literally, storyboarding is becoming a really popular exercise for UX and it’s good for context.
Okay, so celebrating the highs. You can use charm to create delight by celebrating the highs. So thanking for a purchase or for an activation, rewarding engagement or loyalty. Mimicking users’ emotions when you’re doing this. And delight is reflecting what the user’s feeling and maybe injecting a little bit extra considering, make sure you’re considering the tone. And this is something when you do this, that the user can attribute to themselves and it increases confidence in their ability to use your product or service again.
So we’ve identified some key moments, and let’s look at the highs real quick. Here’s the positive emotions we listed out at this key moment that we can leverage to create delight and a human-like relationship. Again, you try to mimic the user’s emotions. This means you’re celebrating something the user can attribute to themselves.
I need Duolingo users. Do they overdo it a little bit? But it increases confidence and it creates a relationship and a returning user. Did you already see the owl? Okay, think about this. The context is important, but it’s much like a handwritten note and it requires getting to know something about your user to do this. Some things that you can consider, it can, context is important, but repeat customers are, this is, you can reach your users when you know that they’re a repeat customer or they’re power users.
This is an example of when we surprised a qualified power user with an animation. That’s kind of a bonus at a high-key moment. They did something difficult. There was a bonus, a monetary bonus that’s that was non-visual here that was kind of a part of the product, but this is just an additive delight moment the user, to reflect that the user accomplish something difficult and that’s cool. The visual’s an attempt to add something even more.
Some more. There are customer birthdays. When you reach out to the customer when it’s their birthday it’s another human-like connection that lets them know that you’re paying attention. This great surprise came from a local bike shop that I shopped at like once before this. This is probably a pretty low cost, but considering the tier of customer that I can probably get to as a mountain bike customer, it’s pretty low cost.
So there’s not a ton of charm, but it’s delightful. It’s personal, it’s contextual. It’s surprising that I was on that list. Is there a connection now? Hell yeah, and then they even gave me a beer at the shop on another visit and yeah, there’s definitely a connection now. Again, these are times that you can reach out to your customers, create that connection.
New Speaker: Customers who engage support. Possibly not a positive moment to engage the customers, but it’s still an important one. Just an idea, think about if a customer of your product or services reached out to help or customer support and you kind of fix the issue or something like that. Think about what if on the next visit you messaged them and it was like, Hey Rick, glad you’re back. You know, thanks for chatting with us a week ago or something like that. It’s a human-like conversation that’s happening there that you can use to engage the customer.
Completely random acts work sometimes, too. Think about that good morning thing that happened with me in Denver. Also, consider timing and frequency. You don’t want to overdo it. Think about the budget and how valuable a user is versus how much you’re spending to create these moments of course, and test into efficiency.
Some things about the lows. You can do some things to soften the lows, to create an emotional connection to design for emotion. So fixing the problem or getting back to neutral first. That’s key of course, but just adding an animation if something bad happens for users, that’s BS. You don’t want to do that. That’s lack of awareness. But there’s something called customer service, sorry, customer recovery in some places when they do this intentionally. They, it’s different of course from customer retention and customer acquisition, but it’s a deliberate exercise that some products and services engage in. There’s something called the service recovery paradox. There’s huge opportunity here.
This is a situation where a customer thinks more highly of an organization after it’s corrected an issue that the customer might have had compared to how the customer would view the company if the no service and correction ever happened in the first place. It’s kind of a huge opportunity.
KLM does this thing where they proactively update a customer instead of letting them find out on their own and getting to the gate, they proactively let them know and they give them some options if a flight is delayed. It’s immediate, it’s contextual, it’s useful, it’s easy to reference information. This is customer recovery. They even offer to have the customer have some conversations with their customer support department.
Some other things to do to soften the lows. Again, be proactive, if you can. Allow customers to give feedback, allow some communication. Being snarky or self-deprecating is always a really bad idea. I don’t know if you ever would have had the opportunity to use Washington Mutual Bank, but they were snarky and tried to be funny and self-deprecating when they had failures, and that bank is out of business now.
You’ve seen like some browsers or some services. If there’s like a 404, if there’s like Chrome, if there’s no internet service that’s not something that they can control but they’re at least they’re offering something, like a quirky little thing like a game to pass some time.
Okay. So I’m going to talk about making some of this stuff. Take those low moments and use them as starting points in user flows when you’re sketching and thinking about task flows. Some deliverables as we go along and of the things that that devs will possibly implement. Some INAP messages will work, again, depending on the context. Some animations I’ve worked on, I’ll talk about animations more. GIFs will work, typically more in emails. I’ll talk about some of the other animations if you care. I’ve used like Illustrator After Effects and some of the other design software to make these things.
I forgot to change the wording here. That’s my own little bit of surprise and delight. Naughty language is delightful, isn’t it? Oh Lottie, I don’t know if you’ve heard of this plugin. It’s a really lightweight plugin for React, for HTML, iOS, and Android. It’s a lightweight plugin that uses SVG animations to implement any sort of animations that are just really lightweight and it’s not like a GIF that’s just like image after image after image. It’s just subtle charm in interaction that you can use.
So, subtle charm in interaction and feedback. Again, if it’s part of the personality and it’s not just the menu, the hamburger menu, flipping into an X and then just being like, boom, we did some animation and some surprise and delight. Remember Daniel, that’s what we saw. Think about the overall personality of the product, think about deliberately doing this across the product.
And that’s that plugin I was talking about. Okay. So charm and delight are facets of emotional design, but to bring it all together, you add designing for moments, and that is how you get to that emotional design as a whole, that creates a human-like relationship. Just some quick references. If we ever get to this point, we can look at some steps that I found to be successful. And here’s some of my sources, if you want to check those out. And I think I might have a couple of minutes for some questions if you have. We don’t. We’re not doing questions. Cool. Thanks, everyone.