Unveiling the Literal: What are the Physical Roots Powering Digital Design

04 Jun16:30 – 17:00 UTCStage: Main StageTalk

Checking session availability…

Hang tight while we load the latest updates.

Conceptual and abstract design is great, but sometimes, for users to get their jobs done most efficiently, why reinvent the wheel?

In this talk, Ryan explores the roots of common UI patterns and their physical origins. He then expands this into marketing strategies, product design and a real example of his award winning Service Design of the UK’s first paperless mortgage experience.

I explain that being on the Autistic spectrum means my mind struggles with conceptual and abstract thinking, and how this made me naturally gravitate to UX Design given its roots in physical design.

I begin by explaining the concept with real examples like car dashboards, UI components like accordions & carousels, and iconography like floppy disks!

Taking it up a level, I talk about ‘product-level; literalism, and how companies/products like Lyft, Google Sheets and FaceTime have embraced it to their advantage for adoption.

I showcase 2 real case studies;
1. Jones Knowles Ritchie’s work with Dominoes Pizza to redesign the product or packaging, using user research to inform the design using literalism.
2. My own, award-winning, design whilst at NatWest, of the UK’s first paperless mortgage experience.

I close with some future concepts, on how we can reverse modern technology, embrace literalism, to bring back nostalgic dopamine from days of old.

Unveiling the Literal: What are the Physical Roots Powering Digital Design

Ryan Kane at UXDX Community: AI for UX Research & Digital Design's Foundational Roots. Video: https://youtu.be/2X8mqA0cSYo

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.

Copying paper forms at Royal Bank of Scotland

[00:00:00] It's great to say hello to you. My name is Ryan Kane, and I'm head of user experience at the Weir Group. This is slightly different to the talk that we've just had with Jan, which was talking about embracing new technology to inform what we're doing. I'm going to give almost a polar opposite discussion, and a bit of thought leadership around how we look at the past and how we look at the physical world to inform the products that we design in the digital sphere.

[00:00:32] I've been looking after UX design and service design for over 15 years across multiple industries, from banking to digital education, grocery shopping and digital pharmacies. But it all started (and look at that nice fresh face of me) after I graduated and started with Royal Bank of Scotland here in the UK. My first job was on the digital transformation project.

[00:01:04] When I say digital transformation, my job was to take the paper forms that we used to fill out in the physical branches to open an account or to ask for some borrowing, and simply make them digital. There was no scope to improve the experience. There was no scope to remove duplication. Simply lift it from paper and put it into the digital world.

[00:01:32] As frustrating as this was, I did start to wonder: can there sometimes be a good reason to copy something from the physical world when we are designing new digital services or products? And especially, why would we copy that from an industry that we could all appreciate is part of a dying channel in banking?

Why replicate the physical world

[00:02:00] Why would we replicate something from the physical world? Well, we can use something almost without thinking if we have done the physical equivalent before. If it doesn't feel alien to us, then as human beings we will naturally believe it to be safe. Why would we reinvent the wheel? Take a speed dial in a car, for example.

[00:02:30] Whether it's made of plastic with a circle and a needle which physically moves, or whether it's a screen in front of you while you're driving, it still resembles the physical plastic speed dial that has been in cars for centuries. And there's the speed of use. When we use something without thought, we perceive ourselves to be using it in a more efficient way; we as users can get our job done faster, and we perceive less friction.

[00:03:07] Let's break it down a little more. It sounds cool, but what is literalism by definition? It's taking words, phrases or names in their usual and most basic sense, without any metaphor or exaggeration. It's a design concept, a concept that can be embraced and benefited from across all strands of design, and I'm going to talk about that in the next few minutes.

[00:03:42] For user experience, it can improve the success of our products. It de-risks deviation from the user experiences that we all work so hard to produce. And at the end of the day, it reminds us that we are all indeed human, and if something isn't broken, don't try and fix it.

A concrete thinker

[00:04:07] For some background on myself: like 3% of the world, I am on the autistic spectrum. I was diagnosed as an adult and classed as high-functioning, so it might not be immediately obvious. Certainly people who know me or have worked with me might be having a bit of a moment right now. But like most people with autism, I am what's known as a concrete thinker.

[00:04:38] I live in the here and now. I can be impulsive, reactive if you like, and I've had to train myself to spot where metaphors and similes are being used, because not everything in the world is meant literally. That's known as concrete thought. My brain treats words and phrases as a solid, indestructible construct, something that cannot be skewed, changed or even interpreted any differently, just like this young baseball star that you'll see on screen.

[00:05:25] That child, just like me, was taking that instruction literally, following it by fact and not applying any metaphorical analysis.

Literalism in UI components and icons

[00:05:33] But this has been happening in design for a long time. Let's break down some of the common user interface components that I'm sure we all use or interact with on a daily basis. Most of us will know the story of Hansel and Gretel. They left a trail of breadcrumbs as they ventured into the forest so that they always had a path home should they get lost. We developed breadcrumbs to give our users a route home should the destination page they end up on not quite be their planned journey.

[00:06:11] Now, who remembers these antique machines? I'm old enough to remember listening to radio stations with this, inserting a blank tape and hoping to record my favorite song when it was broadcast. It was very difficult to do, because in order to record you had to press and hold down two of the buttons at the same time, but the interface on this radio was only designed so that you could press one at a time. I think that should sound familiar to all of us here.

[00:06:49] Some of us might be able to hear this image in our heads just now: the leather creaking as the musician moves the instrument, expanding its range, allowing him to play with more dynamics and use more notes in the song. In the same way, we can use interaction to expand on content, allowing our users to navigate and expand the content that they wish to absorb.

[00:07:19] This one always creeped me out as a child, probably too many horror movies. But what I did like about these fairground carousels is that we would see the animals passing through rhythmically, from the first to the second to the third, and I was able to spot the little differences between the decoration on the horses. Again, that should sound familiar, and it's something we all use on a day-to-day basis.

[00:07:50] There's another obvious example that I'm sure we've all used, but I could go on and on about UI components. Another example is that literalism is hidden in plain view in the way that we use icons to communicate to our users and to each other, without even second-guessing what they are or what they mean. But how many computers actually have a spinning cog inside them? How many of us actually have a steel trash can in our office to dispose of rubbish? And how many of us actually have a calendar which flips as we go through the year in our diaries?

[00:08:35] This is the most interesting one. I have a niece who spends a lot of time with me at home, and I was introducing her to what a floppy disk was. I was disgusted when she asked me, "How did you 3D print the save button?" She'd never known the legacy of what a floppy disk was. The literalism of the design of that icon has transcended generations. They don't even know where it originates from, but they use that interaction without doubt.

Literalism in product naming

[00:09:11] Let's take it up a level. We've been at components; let's start looking at product-level literalism. How can we apply it to our brand strategies? The first place to look is how we name a product. If a product's name is familiar, easy to understand and just makes sense, then our users will remember it far more than something that they have to learn or decipher in the midst of using it. Companies have used that with great success.

[00:09:44] One caveat: I'm never going to say to anyone that the logo of a company should be exactly what the product is. But there are very subtle ways that we can achieve success. Before Uber took over, we may have used Lyft. That terminology comes from a piece of slang language here in the UK: to give someone a lift is to share transportation with them.

[00:10:18] PayPal have recently launched their own point-of-sale card reader payment device, Zettle, and again that comes from the terminology of settling a bill: "I'll meet you at the door after I've settled up." And one of the more obvious ones: I can remember, before iPhones, we would ask each other, "Can I get some face time with you?" And how many of us have said in our careers, "I'll save that to the drive"?

[00:10:46] These are just subtle little things that can bring success with literalism. But if it's not done correctly, it can actually start causing some problems and confusion. We probably all recognize this logo and know what the app is, but if I was explaining it to my grandparents: no, TikTok is not the sound of a clock. It's not a metronome app. And no, this isn't something that makes objects bigger.

[00:11:23] Here's a real test of social media history: this platform was not a climbing, woody-stemmed plant. The naming is not the sole thing that would determine success or failure of a product, but it is a subtle lens that can be used to improve those experiences.

Literalism in product strategy

[00:11:42] If we take it higher again and start looking at product strategy, newer offerings are capitalizing on their predecessors' confusion and building their brand strategy on literalism. I'm sure all of us on the call here at some point, if not right now, are using products and actually end up using the names of their competitors.

[00:12:09] I know that even though I'm forced to use Microsoft PowerPoint, I communicate with my colleagues and talk about the slides that I've made. Even when in Excel, I communicate by saying I've made a spreadsheet. And I'll also ask my colleagues, "Can you share the Word doc?" You can see that Google have capitalized on that in the naming and as a strategy for their products, and they're not the only ones.

[00:12:46] Literalism can also be used in a two-way direction. We can reflect within a brand or product the way that our users literally interpret our product. I'm sure we all recognize this one, and I'm not going to tell you that I think their logo should be a slice of pizza. But what I am going to do is share a fantastic example from an agency here in the UK known as Jones Knowles Ritchie.

[00:13:14] The agency was tasked with redesigning the packaging for Domino's. Through ethnographic studies, their user research found that 96% of Domino's pizzas were actually sold in pairs, two pizzas. They used that purchasing behavior of users to create a literal representation of the brand within the packaging, or as we would know it in the digital world, their interface: two boxes, one red and one blue, and when laid together on the customer's table, they make up the logo and the brand itself.

The digital handshake at NatWest

[00:14:00] Now I'm going to share an example from my own experience. When working with NatWest Bank here in the UK, I was leading the design of the UK's first paperless mortgage experience. I expected the usual user research findings: how people are nervous at certain transactions, how they read the dichotomy of a user interface. But one revelation was a surprise to me.

[00:14:31] Here in the UK, and I'm sure across the globe in this culture, buying your first property and securing your first mortgage is a rite of passage into adulthood. However, it's equally an aspiration as it is a fear. Through the diary study research that I did, the users' fears and their nerves peak highest, and then plummet in the most positive way, the moment that they shake hands with their mortgage advisor.

[00:15:07] They walk into the branch and they're nervous. Have they prepared the right information? Are they going to get the outcome that they wish for? When a friendly member of staff embraces them through a handshake and reassures them, "Everything is going to be OK. I'm going to help you through this. Let's go into a private space," that was where we saw the highest nerves turn into the most positive plummet.

[00:15:33] How could we replicate that in a non-face-to-face experience? When we want to deliver the efficiency of a paperless digital mortgage application, how do we handle and cater for the users' needs here? I solved that problem with literalism. The digital handshake was the most radical UX concept that the bank had come across in its history. It involved severe infrastructure change and drastic staff culture change.

[00:16:08] But by keeping our users' discovered needs at the heart, we were able to deliver a new concept that allowed our customers to receive a personalized video from their remote mortgage advisor. They would receive business card details, knowing that they could contact them at any point. They would have tailored preparations to do remotely: what documents to gather, what information to prepare.

[00:16:37] They could run an internet speed checker, the same way that they would check how they would get to the branch if it was face to face, and where they would park. That same mentality was being used here digitally: checking their internet, checking their camera and their microphone. And most crucially, we were able to set their expectations for the next steps through a video.

[00:17:01] I wanted to probe that deeper, and I studied the mortgage advisor himself and the way that he would hack the process to make it better for his customers. I looked at how he was embracing technology to remove some of the manual steps from being done face to face, asking his customers to take pictures of crucial documents ahead of their mortgage meeting. Again, it was about protecting that hack and that interaction from the physical world, and making sure that it still has a place within the digital world.

[00:17:40] I was able to front-load the paperwork step, having the customers provide all of their documents and information before they needed to speak with the mortgage advisor. Not only did it mean that they could do some of these nervous processes from the comfort of their own house, but it meant that the interaction done over video or over the phone was more efficient and reduced in time.

[00:18:07] The benefits of that project meant that over 100,000 mortgages were applied for through the digital process in one year. This saved the bank 4.4 million sheets of paper per year. More crucially for our users, it reduced the timeline from first inquiry to receiving their mortgage by 25 days on average. I've been lucky enough to receive, alongside the teams that I worked with at the time, awards for the innovation of that experience, and I'm very proud to have worked on that project.

Delayed gratification: Camp Snap and Blockbuster

[00:18:53] Another fantastic example that I wanted to share with you, from outside my experience, is photography. It's something that we all do; we have a powerful camera built into the phone in our pockets right now. But how does literalism within product design influence the digital versus film photography revolution? Not all of us will remember cameras that didn't have screens. We would take our picture and be able to look through a little preview view of the lens.

[00:19:29] Ultimately, we had to wait until we submitted the spool of pictures to a local supermarket, for example, to have them developed. That might take days or weeks, but we would have that excitement, and sometimes disappointment, when we got the photographs back after that delay. What it did give us was delayed gratification. We had a new experience, a new interaction where we could reflect on those photographs and almost relive the experience from days, weeks, months or years before.

[00:20:04] Instead, taking the picture with our phones or modern digital cameras gives instant gratification with no follow-up experience. And more importantly for me, we were focusing on the screen and not the subject that we were taking pictures of. Could we introduce features to the digital cameras in our smartphones where we take a picture but delay the reveal? That way we can focus on enjoying the experience at the time and have some form of delayed gratification.

[00:20:41] Then I discovered a product called Camp Snap. Camp Snap is a cheap, robust and accessible digital camera with no screen. The job to be done it discovered for its users was to give clients the vintage feel of a real camera taking a real live picture, without making it inaccessible, so that newbies to photography could join in, while also being able to deliver a traditional film-style image.

[00:21:17] When you look at the end product, there's no screen distraction, there is a flash, it's robust and it's incredibly affordable; at the moment it's working out at around 50 or 70 dollars. This gives you the flexibility of a digital product, being able to take almost a thousand pictures and connect them to your device when you get home. You do get the delayed gratification, and you do get the removal of distraction to focus on the here and now, but with the flexibility and efficiency of a digital camera. What's more, it can give you that beautiful resemblance to a real film picture.

[00:22:12] How far could this concept go? Blockbuster Video: as a child I used to visit there on a Friday after school and choose the movies that I would be allowed to watch over the weekend. When certain movies were in high demand and were already rented out, it meant that the supply was changing every week. That meant I wasn't searching an overwhelming collection of movies. I could efficiently select something, and it also meant that my options would change and feel new and fresh every week.

[00:22:54] I'm sure we all spend a lot of time on streaming platforms, probably spending more time looking for movies than we do watching them. What if Netflix could limit their selection and rotate it on a weekly basis? That way we have limited options, but a more efficient route to selecting a movie to watch.

How to apply literalism

[00:23:17] I've shared with you some examples from my own experience and from outside my industry, and I've talked about it as a concept. But crucially, before we have some questions, let's finish with how we can all take away literalism as a design concept and apply it to the great work that we're all doing. It's an obvious one, but immerse yourselves with your users and your customers.

[00:23:49] Interestingly, focus on how they are meeting their needs at the moment, in the absence of your product. How are they getting their job to be done finished now? Are they hacking the process? Are they employing additional products? Find out how they are meeting that need in the physical world, and we can replicate that digitally.

[00:24:10] Find the points of that journey that delight them, or the points where their anxiety has reduced the most, and make the case to ensure that those interactions will exist in your future experience. Your adoption rates will improve if the user is already being served by something they're familiar with and you translate it into a digital format.

[00:24:41] This has been a snapshot and a whirlwind tour. I could speak about this for hours, but hopefully I've left you with enough understanding and some inspiration on what you can take away and apply. I'd love to spend a couple of minutes taking any questions or any thoughts, Rory.

Q&A

[00:24:58] Host: Excellent, thank you very much, Ryan. That was a really nice history lesson through some of the things that maybe some of the younger viewers wouldn't recognize. The good old 3D-printed save button. If anybody has any questions, please do write them in, but I'm going to jump in with the first question. The delayed gratification: I think that would be a very difficult pitch to Netflix. It's like Amazon, "we're the everything store"; Netflix is the everything catalog. To try to pitch that it might be better to reduce it... Is that just destined to be a niche product like the camera, because it wouldn't appeal to everybody? When do you think this could work best?

[00:25:45] Ryan: It could be niche, and it could be an optional feature. I certainly would choose to use it. I have young children and my time is precious, so when I do get a moment to select a movie, I get frustrated by spending more time searching than I do watching. So it could be optional. I think one way the case could be made, and it's actually a very good example of how KPIs and measurement can help the UX argument, is that data must exist in a company like Netflix where you could easily calculate the time being spent searching and then abandoning versus the time spent watching.

[00:26:24] Apply the change, drop it to a few A/B users, and simply time that and measure whether it's different. I think a case can be made with data. And as you say, if it is niche, maybe it's a way that we can apply a preference for certain users. I, as a persona, have a job to be done when it comes to Netflix that's currently not being served.

[00:26:47] Host: That's a great example: make it optional and then see whether the adoption is there. The other one I have is about protecting. You said to take things like the handshake, the example that you gave. What I would see is that as time goes on, that probably falls away a bit. It might be something that some of the older customers remember from the interaction in the bank, but the newer customers, younger people, might be thinking, "Well, that's not really relevant." How do you, over time, figure that out? Do you sunset some elements of your product over time?

[00:27:29] Ryan: Yes. I think we should naturally be sunsetting elements as user needs change and our personas change. What to take away from that example, when I talked about how to apply it, is to study what works in the physical world and protect it. Even if people now just expect a mortgage to be digital and have never gone through that physical experience, they still have the same nerves and the same fears.

[00:27:57] Though you're not replicating what it was like for them the last time they were in a branch and shook someone's hand, you're addressing that need before they even feel the fears. The older generation will feel the improvement, and for the younger generation you're delivering what they would expect and what they demand. The important bit there is to study with your users where their nerves peak most, and find out what exists in the physical world to address it. It might not be exactly the same when you create it digitally, but don't lose it just because you're going digital.

[00:28:30] Host: Excellent, that's a great example. We had a comment from Mason saying: could an "available for X days" icon on the film or series increase the scarcity effect and reduce the search time?

[00:28:43] Ryan: Yes, I think for some it could. I know for me that would put the fear in, and I would need to quickly binge-watch it before I lost it. But whatever solution you apply, the job to be done is "reduce my options for efficiency" and "make the stock feel fresh." There's a number of solutions that we could build. The important thing is to find the job to be done and make sure you're addressing it digitally.