Embracing Empathy

Tim Hudson at UXDX Europe. Video: https://youtu.be/lvbZ6BLuRdw

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

A confession about empathy

[00:00:08] Tim: Thank you all for joining the session. My name, as was said, is Tim Hudson. I work for a company called Adyen. We do payments; we'll get more into that in a moment. I'm here today to talk about embracing empathy. I'll tell you a little bit about empathy, and my view on empathy, or our view on empathy at Adyen.

[00:00:30] But first, a little bit about myself. I studied at Saint Martins College of Art in London, so I started as an artist. I still make paintings; I'll show you a link later if you're interested. But we're not going to talk about that today. We're going to talk about how I got into empathy at Adyen.

[00:00:53] I have a little confession to make. I'm talking about empathy, and does anybody know what this is? This is an NBI profile. It's a profile of your brain and how you work. And this is not just any NBI profile; this is my NBI profile. If you look at this section here, with this laser gun, wow, this says that I'm actually quite a strategist and imagineer. I'm quite creative. If you look at this section here, this is about socializing and empathizing. And if you look at this smallest section here, that's about empathy. What it actually says is: "Tim will most probably not be comfortable in an environment that requires him to be emotionally sensitive and show empathy and support on an ongoing basis." So I hold my hand up: I'm not really empathic. I'm more apathetic. It doesn't get better than that, so there you go.

What Adyen does

[00:01:58] Adyen, as it's frequently called: we make payments possible. We make it possible for your money to get from wherever you want to pay into the merchant's bank account. It's quite a complicated process. For many years it's been run on traditional rails, and we're disrupting, or trying to disrupt, that whole process of getting payments from one place to another. What makes us unique is this: here is the usual path a payment would take. A merchant would connect to a gateway; maybe you've heard of Stripe or some other gateways out there. But what we do is take all the pieces: the gateway, the risk, the processing. We are actually an acquirer and a processor. We just make it one system, so there are fewer points of failure, and we can keep the data connected along all the dots, all the way. So it's quite good.

[00:03:01] If you've got a Netflix account or a Spotify account, or you pay on Facebook, you probably pay through Adyen. We don't only do online sales and e-commerce; we have also moved over the last few years into point of sale. That means when you go into a Nike store and buy your shoes, you are also probably paying through Adyen.

[00:03:27] In product design, or what was called UX at first, where are our touch points? We make it possible to make the payment pages that you pay with online. Even though we don't make those pages ourselves, we create the framework for people to make those payment pages. We do make what we call the default page, and we also provide our own software for the terminals that you use to pay in stores. So that's one touch point, to shoppers, let's say. But our main customers are strictly business to business.

[00:04:05] You've heard about icebergs already this morning; we create icebergs. What does this iceberg represent in terms of Adyen? The tip of the iceberg is what we call the customer area, where our merchants log in and manage their payments. They'll manage the risk, manage the users, do the case management, that kind of stuff. Underneath the iceberg is what we do operationally inside Adyen for our customers. We can also manage risk, and there are many, many other financial operations that we perform. That's basically what our product designers and our UX mainly do at Adyen.

A very technical company

[00:04:44] Internally in Adyen, we have built a fantastic engine. When we talk about our software, we often refer to it as an engine, and we say we've built the best engine for payments that there is. We took the old rails of the payments flow and redesigned it from scratch. We're about 11 years old, and we often refer to it as one of the best engines in the world for payments: the Maserati engine. So what do we do in UX? Of course, we try to take this and make it into something like this.

[00:05:23] The guys who started Adyen are very, very technical. We're not a design thinking company at all, or we never were; this is where we're trying to get to, and this is where we're thinking about empathy. These guys have built a double-entry bookkeeping system and this kind of thing. These are guys who look out the window and don't see a landscape; they see numbers. It's very difficult for them to produce really nice interfaces. This is the sort of interface I was faced with when I started working at Adyen about five and a half years ago. It's very, very functional. The use of space isn't very good; it's just filling in some stuff.

[00:06:07] This is what I was faced with to begin with. There were no front-end developers; there was nobody who knew how to do HTML and CSS. There were no UX designers at all. In fact, there wasn't even any design. So this is what I and the team have been doing over the past five years. When I first got there, they gave me this, and I said, "We've got to design something." Oh yeah, a hunk of black plastic, and that's good, but I want to use Photoshop. This was a Linux machine. I want to use Photoshop and stuff like that, and they said, "No, no, you've got Inkscape." So I'm like, "Yeah, right."

[00:06:50] I felt a bit like an island. There were all these really intelligent developers developing these functional systems, and here's me saying, "No, we've got to make it look pretty, and it's got to be usable for our customers." People didn't really get that. And here you see the environment we were in. I brought the first Mac screen into Adyen, but you see it's all black and white. Everybody got these black screens and black desks, and they weren't really in an environment that made them feel like producing something good-looking and well-functioning.

The Adyen formula and three principles

[00:07:26] How do we work at Adyen? We have this basic set of principles that we call the Adyen formula. As you see, there are eight of them here. You don't have to read them all; I'm going to pick out a few that are important to me in doing my job at Adyen. One thing we say to all our employees is: we don't hide behind email, instead we pick up the phone. That really means just go and talk to people. Don't waste time. Don't even pick up the phone if you're in the same office. We encourage people to just go and talk all the time: talk at the coffee machine, whatever. Do not waste time with red tape or anything like that; just go see the person.

[00:08:07] We also say, which was quite difficult for me: we launch fast and iterate. Payments is a fast-paced game, and everybody's trying to get in there, so it's about launching fast. When you think about developing and making UX possible when you've got something like this built into your core culture and your core values, anything we're trying to do on the front end is like trying to change the wheels on a fast-moving car. All the time, every month, we're releasing, releasing, releasing software. There are a hundred developers coding, coding, coding, and we've got no UXers and no front-end coders.

[00:08:52] This is what our design process looked like back in the day. We went and got some definition, and then we built it. Where does empathy fit in here? Well, it doesn't really. Maybe when you're defining it you can listen to what the customers want. I assume you're all in UX, or you're developers, and everybody knows that this is the path we should have: define, research. There are lots of points in here to put empathy into what you're building. But when you've got no time to do that, and you're trying to sell this to a fast-functioning company, it's quite difficult to get these points in and get empathy, and to do this whole process.

[00:09:32] So we wanted to start from somewhere a bit smaller. I wanted to start from principles, just three simple principles: we want our interface to be intuitive, consistent and helpful.

Short-term memory and a data dashboard

[00:09:45] This was the kind of interface we were faced with back then. We do payments, and data is very important, so I've just picked one example out of the whole of what we call the back office and the customer area, just to make a point of what was going on. Here you see we had data. Great; not many people did at the time, not many payment service providers did, but we did. And you see it looked quite pretty: lots of colors and stuff. But what's actually going on? If you look at the principles, intuitive and helpful, this actually isn't very intuitive, and it's not actually very helpful. But how could I say that to the guys who built it?

[00:10:34] If you look here, we've got a graph that's orange and green, but what does it mean? It doesn't say anything. This doesn't align with this one, or this one with this one, so if you're looking at comparisons, that's difficult. This is some kind of pie chart; don't get me started on pie charts, we'll get to that later. And what does this tell you? Let's assume we're talking about payments: how are we doing in the world? It's a map of the world. We're doing pretty green in Europe, if you're not colorblind, and in the rest of the world, pretty shitty brown. But that's okay, they said, because when you roll over, you will see the number of sessions, and when you roll out again, it disappears.

[00:11:21] I said, people haven't got good short-term memories. How are they going to remember that when they're comparing figures? Who's got a good short-term memory here? Has anybody got a good short-term memory? Come on, you, my staff, don't be shy. One? No, she's scratching her head. Anybody else? Let's do a little test, shall we?

[00:11:46] I'm going to show you a couple of pictures. I'm going to show you this picture of a house, and then another picture of the same house. It's almost identical, but there is one change in the picture. All I want you to do is remember this picture in your short-term memory, look at the next picture, and see if you can see what's changed. If you have, don't shout out, because then you'll ruin it for everybody else. Just raise your hand slowly if you've seen what's going on here. Picture number one, picture number two. Did you see what's changed there? Come on, I'm running 25 minutes already. We'll go back: picture number one. Did you see it that time? Come on, somebody's got a good short-term memory. Picture number two. Anybody? Oh, somebody. Well done. We'll stop at one then.

[00:12:44] What's actually happening here? Ready? I always put kittens in, because that brings empathy for me. Did anybody see Men in Black? I've just got this little thing in my hand, and all your memories just go, like this. No, what's actually going on here is, if you noticed, I put a white blank screen in the middle. When you look at something, cognitively, your brain doesn't see the whole picture. It's these little parts of the picture; your eyes dart around, and it builds up this frame in your mind of the picture. When I put that white screen in the middle, what I'm effectively doing is wiping your short-term memory, because your brain thinks, "Hang on, forget what I've just seen and see something else." That's what's happening. Unless you're looking at the exact spot that changes, when we've got the white screen at the changeover you won't actually notice what's going on, and I guess none of you were really looking at that spot.

[00:13:45] Let me show you again, and I'm going to remove that white blank screen. I'm not going to do the Men in Black thing anymore. Ready? Picture one, picture two. Who saw it that time? Anybody see it? Anybody not see it? Okay. So what we end up with is not a map of the world in green and shitty brown; we just end up with some bar charts, which clearly show how you're doing in each of the regions. That's a bit more intuitive, and a bit more helpful to our customers.

Pie charts, bar charts and height

[00:14:13] And a pie chart. Oh God, here we go, pie charts. This is not just a pie chart; this is lying with data. Can anybody see how this is lying with data? A number of people. I'll just point out: since when is 19.5 bigger than 21.2? It doesn't really work, does it? Who the hell would want to do that, I have no idea. But moving swiftly on.

[00:14:42] We are not very good at looking at circles. Pie charts are not very good, and I try to eliminate them from Adyen. I give everybody this talk as an introduction session, and I say to everybody at Adyen: look at these circles. Which is the second largest dark green shape there? Can you spot it? You probably can, but it's not that easy. And to make it more difficult, I could say: take these three dark green shapes. I love doing this, by the way; I wish my cat was here. I did do this presentation for the cat just to practice, and this is where it all broke down. Anyway, take these three shapes: are they bigger or smaller than this shape? Quite difficult to do, right? It's quite difficult because what I'm asking you to do is take a circle, and our brains are not good at looking at circles, minus another circle, and see what's left. That's not really an easy thing to do.

[00:15:39] But bar charts, height and width, are quite easy to look at, and it's easy for us to judge. Why is that? Everybody just stand up for a minute. Come on, I'm just making sure you're not asleep. Good, good. That took a bit longer than I wanted it to. Just have a look around the room. Have a look at your neighbor: are you taller or smaller than your neighbor? Look at somebody at the back of the room: are you taller or smaller? I'm on a stage, but you can probably guess if you're taller or smaller than me. Exactly. You can sit down, thank you.

[00:16:13] It's instinct. We've got a built-in instinct to know about height and width. Where does that come from? I guess when we were growing up as cavemen, with these animals around, anything bigger than us we wanted to run away from, and anything smaller we wanted to kill and eat. So there we go, it's built in. It's a lot easier for people to read bar charts, so just use bar charts. It's a lot more intuitive.

[00:16:39] Now, if you want to create empathy for yourself: what I'm trying to do is make Adyen employees empathize with our customers. If I wanted our customers to empathize with Adyen, that's completely the other way around. I could use pie charts, even though I hate them and I think they're not very intuitive. I could use them in something like infographics. Why would I do that? Why does a pie chart create empathy the other way around? If you think about it, we like circles. We're not very good at judging them, but we like them. Why do we like circles? Anybody know? We've got round faces and round eyes, and we like to look at round faces and round eyes. The bigger and rounder the face and the rounder the eye, the more empathy. Oh. Moving swiftly on.

From functional to meaningful, and the design system

[00:17:36] What do we do at Adyen? We call them product designers now. We're all split into streams, and we've got a different product designer on each stream: we've got fraud, risk, and data and reporting. We go through and tell people these things. We say: look, we want to not be just a functional company. Here's the ladder to product success; you may have seen this, or maybe not. We want to move from functional to usable and comfortable, and we want to make that experience delightful and meaningful if we can.

[00:18:12] With our software, what does that mean? How do we show them what that means? I don't know if you're familiar with thermostats, but this is an example of something that's functional and something that's maybe classed as meaningful or delightful to use. Why is that? With this one, you just press the buttons and it makes your radiators come on when you want. This one learns when you really want it to come on, and it even provides a nightlight when you walk to the bathroom at night.

[00:18:39] How do we get our product there? How do we try to do that? Here's one thing we've done with terminals. We've taken a not-so-nice interface, tried to think about all that kind of stuff, and built it into our terminals. I've got sound.

[00:19:15] This is another interface that we have. If you see, this is the kind of settings page we would have had before: just lots of stuff to fill in, lots of ticks. Now we're working with a design system, our own design system, which we call the Adyen design language, and we've tried to put some more information there. It's not just a tick box; we've tried to add some information. This is what the design system looks like. It starts in Sketch, and then we get our very experienced developers to build it as libraries, so the other front-end developers can go on and use it.

Making people experience it

[00:19:51] But I have an important question. Why did I make you stand up a minute ago? Why did we do the exercise with memory? What I'm trying to do here, and this is what I put our developers and everybody who works at Adyen through, is make you experience exactly what I'm talking about. It's okay to tell people and show people, and make them sit there and see this thermostat and understand it. But when you stood up, hopefully you'll remember, because you're using more of your senses, touch, smell, sight, sound, thinking, "Oh yeah, that was about pie charts, I shouldn't use pie charts," and that memory test. I'm making you empathize with the user. Because the user has got to actually click and remember all the data as they're rolling in and rolling out, and that doesn't hit home until you make somebody do it, until I prove to you, "Hey, cognitively you're not very good at this stuff, so let's think about the user." This is how we're trying to bring empathy within Adyen.

[00:21:04] I talked to you about the environment we worked in, and I showed you it was all black and white computers. One thing we've been doing is making our offices look nicer. You see these places like Google, with the sleep pods and that kind of thing: a great environment. Why can't we have that environment? This has really worked. These are our offices around the world; we've now got 14 offices. You see Singapore, New York, San Francisco. We try to make them look beautiful, so the people working there are surrounded by good design.

Design sprints and a code of conduct

[00:21:30] We've started to do design sprints. Those who were at the workshop yesterday, very good on design sprints. Who knows what design sprints are? Great. They are very useful. Last time I gave this talk we hadn't started doing them. I've recently done five or six design sprints, and they've been absolutely wonderful, if you can get the buy-in.

[00:21:49] Now, the buy-in is quite difficult. I took this to our strategy team, and I said, "We've got to do design sprints, this is going to be great." I told them about this book, and you know what they saw? Five days. Five days for a team of people? "Gosh, we launch fast and iterate." Yes, I know, I know, but look, this is going to be so useful. What I did do is a bit of research. There are some very smart people called AJ&Smart, from Berlin; big up to them, they were fantastic. They've been working with design sprints for a long time, and they've made Design Sprint 2.0. If you're going to use design sprints, please look at this, because it's only four days, and it's not four days with all the expensive people.

[00:22:33] This was the old system: Monday, Tuesday, Wednesday, you map, you sketch, you decide, and the whole group is there for the first three days, and then you prototype, and test on Friday. With Design Sprint 2.0 you get it all done, you prototype on Wednesday and test on Thursday. This has been very successful at Adyen. It's great, so I highly recommend it.

[00:22:56] You can see that when we do the user testing on these design sprints, we've actually set up two rooms. We film the person doing the tests, we film the screen as well, and we have that beamed to another room, and we get everybody from the team, developers and everyone, watching that and going through it with the people. That's also very useful. They all make notes, and then they can see how their wonderful ideas worked, or the other way around.

[00:23:23] What we've also done, talking about our developers, is make a code of conduct for our developers. You don't have to read this either; I'm just going to point out a couple that I managed to squeeze in there. There are a lot of guidelines here, but the two that are really important to me are: we think like a merchant, so go and meet them. We want everybody in our company to go and meet the merchants. And: a product is only finished when it has a face and is validated with a live customer.

[00:23:52] And, oh, it's a wrap. Thank you. We do have a stand if you want to come and talk to us. You see Nick, the head of product design, there; we've got Thomas, who's our design system developer. If you're interested in a job, come and talk to us. And you can see here we've got a tech blog on Medium, we've got careers if you're interested, and this Instagram, the secret code machine, is mine if you want to see the paintings. Thank you very much.

Q&A

[00:24:27] Host: Great talk. Tim, can you hang out for just a few minutes? We might have a few questions. I think we have a few minutes for questions. Anybody have a question for Tim? Nope? Well, I have a couple of questions. You guys recently IPO'd, is that right?

[00:24:51] Tim: We did.

[00:24:51] Host: That's a big step for any company. I know you guys have been around for 11 years now. Has that changed any of your thinking? Is that anything that shows up in the design group, the UX product team?

[00:25:04] Tim: We knew we were going to do the IPO for a long time; it had been on the cards for a long time. Pieter, our CEO, spoke to everybody about it before we did it, and it was very clear: the IPO means nothing to us. It's just the shareholders we had, who we didn't know, being changed for different shareholders that we don't know. So it means nothing to us on a daily basis. All it means is we've got different shareholders, and it's another day as usual. So no, the IPO hasn't changed anything in the way that we work.

[00:25:33] Host: That's great. And when did you join the company?

[00:25:36] Tim: I joined five and a half years ago, March 2000 [?], so about halfway through the company's life.

[00:25:41] Host: And are there any metrics that you use to judge the success of your implementation of more customer empathy?

[00:25:52] Tim: It's good, because getting metrics on what we do was hard; there were no metrics at the start. We've introduced systems like an internal system, because we're in payments we can't use any cloud systems. The data is very precious, so we're not using Google Analytics, but we've got an internal data metrics system for our back office, so we're using that. Of course, support tickets are a great metric. Now all designers have got full access to all support tickets, and you can go and look at those in Looker and that kind of stuff. So yes, this has changed now.

[00:26:24] Host: That's great. Any questions? Yes, we have some questions, great. Let's get a mic over here, and state your name and company as well.

[00:26:34] Audience: How are you? My name is Charles, I'm a UX researcher at Primerica. I want to go back to your point about pie charts and how confusing they are to interpret. You recommended we use bar graphs instead, and then you showed us a photo of a puppy and how we feel empathy towards the puppy. So now I'm trying to... I'm lost.

[00:27:02] Tim: Okay, sorry. No, the point was, and I was in two minds whether to remove those two slides or not, so I'm glad you pointed this out: what I'm trying to do at Adyen is build empathy from within, so from within the iceberg towards our customers. The point with the pie charts is that they would make our customers empathize towards us. If we put out some infographics with pie charts or circles on them, our customers would then empathize towards us. If you want to do that, that's a good way to do it. I still don't think pie charts are very good. What I'm trying to do is make our team empathize towards our customers. So it's just a bit of a switch around. Sorry if it was confusing.

[00:27:50] Audience: Yes, clear now.

[00:27:52] Tim: Does anybody else want to pick me up on pie charts? Great question.

[00:27:58] Host: Any other questions out there? Yeah, one more in the back there, or a couple. And remember to state your name and your company.

[00:28:10] Audience: Hi, this is Javier from On Track [?]. I'm the chief product officer. I was wondering, how do you combine design sprints with the regular work?

[00:28:23] Tim: Well, we say design sprints are a tool; you can use them if you want. The streams are set up in such a way that we have two leaders of the stream, a product lead and a tech lead, and we've got front-end and back-end developers and business strategists in there. I've been touting design sprints as a good idea, but we by no means enforce them. Before anybody takes on a design sprint at Adyen, I have to make sure they've filled in just a little thing to let me know that they're serious about it: that they're going to put the time and effort in, and that they're going to do the homework beforehand. They need to find the experts to speak, and they need to make sure they've got the resources to carry on with whatever we've designed in the design sprint. There are a lot of conditions, and we say, "Look, these are the conditions, and I'm not going to let you do a design sprint unless you do that."

[00:29:17] We build it in so that the pauses where a design sprint would naturally fit are when they've finished a major project and they get to the end of a release. When they get to a release and they're embarking on the next new project, that would be a good time, depending on how big the project is, to do a design sprint. We want it to fit in naturally; we don't want to force anybody to do it.

[00:29:44] Host: Great, I think that's it. Thanks, Tim. Remember to check out his art.