How to use illustration to improve UX

Hello, welcome to our webinar. My name is Kate Evans, and I’m Emily Trotter.

We’re both senior UX designers at the design team in the middle, with a particular interest in background in illustration. In fact, we both studied as a degree.

At Nomensa or strategic user experience design agency, we combine expertise in psychology user centric design accessibility and technology to create great digital experiences. Today we’re talking about using illustration within digital experiences, we’re advocating for this and our aim today is to share with you why you should use it, but also how you can actually create it.

But first, what is an illustration, to make sure we all begin on the same page. Here’s a quick recap on how we like to define a station, amongst other types of content. So, we think illustration sits between icons and photos. An icon represents a single meaning or direction. The reason for existence is to be super clear with the ability to span multiple languages.

So generally, everybody knows the meanings of common icons, or loans and in the end, settings coax save icons home icons are just some examples. A photo is an exact representation of a subject matter. There are certain scenarios where this is crucial when selling physical products, or for advertising the type of accommodation or a travel destination, or if you need to reference a person who exists in real life. illustrations that then sit in the middle there communicate an idea or a series of ideas. This fills the niche we’re using a photo might not be relevant, as it could be misleading, or distracting, because of the unnecessary exactness of detail, and also where more visual complexity than an icon can offer is required to communicate his message.

And just to mention a couple of other types of content, copy, we’re all familiar with copywriting it’s usually the base method of content communication and diagrams use the plotting exact data in a visual way so a bit like a photograph they’re serving up an exact representation of their subject matter. There are always going to be grey areas where a piece of content floats between two definitions, or combines elements of more than one definition, but putting a structure of definition like this in place serves as a useful base to refer back to. Cool. So, we’ve heard about what an illustration is, but what do we mean by UX illustration.

This is where we get a little bit more specialist. What we’ve done is compared its use to other kinds of illustration in order to create our own definition of UX illustration. But before we get to that, we want to first show you a nice example of UX illustration in action that we feel really encapsulates our definition. So Dropbox is a company who have always used illustration to give a playful edge to the brand. And they’ve brought some of that in their into their actual products as well. If you run out of space in your Dropbox account, this little guy will pop up to suggest that you upgrade your account.

This moment takes into account how a user might be feeling and alleviates that it’s effective because it adds a bit of light relief to the situation, which might otherwise be quite stressful for someone. This is a really good example of UX illustration. So this brings us neatly back to our definition of UX illustration. Say UX illustration helps to shape digital experiences and is validated by usability testing, just let that sink in for a moment. Okay, we’re gonna show you loads more examples of how we and others have used UX illustration throughout this webinar, but to get us going.

Here’s a nice example from JustEats. So, either have embraced illustration throughout their brand. And in this example you can see how using animated illustrations creates a mood of lively expectation, they’ve captured captured that feeling of, we can have whatever we want for dinner tonight. So before the user has even begun their digital journey. The site has already prepped their mood. Notice also that the use of illustration here rather than photography has made sure that the subject matter is not a destruction illustration creates the possibility of tasty food, not an exact representation of a specific meal. So they don’t look.

They don’t see the illustration and think I like that restaurant is it from. So we think currently when talking about illustration being used in a digital sense. The most common thing people think of when they read an article online. Sometimes it has an illustration to support it. This is called editorial UX illustration is different. So let’s talk through why that is. Couple of technical problems that I think.As our agency we are often using illustration to make a difficult process more easy to understand, but how do we keep from oversimplifying the story. I guess it depends on whether or not you need to you need to deep dive into the details. I think at that point. If you want to go into the details of a story. Then, you don’t need to necessarily illustrate it I think it’s more useful upfront when you’re trying to get across the overview of what’s going on. It depends what you mean by story, I

guess, and I would say, test it, as well, do the best job that you think is right, and then test it with some users. And that will kind of validate the work you’ve done. And, yes, it’s quite a tricky question that yeah I’m totally understand where you’re coming from. Yeah, I think for us we just go through that process of working with UX consultant on the journeys themselves and kind of doing what we think is the best solution to the problem and test it to see how the users react. Just looking for question, recording. Yes.

Do you have one signature style, or can you switch up depending on the client you’re

working for.

Well, the idea is to switch it up a little bit, really, because if you go through all those points that we talked through, then you probably will come across a style that is different from a signature style. Because, rather than doing something for you you’re doing something for someone else. That being said, there probably will be similarities between clients in some way because, you know, with a look, you know, it’s your artwork and there will probably be a thread that runs through. It looks similar, but ideally, yeah, I mean, varieties is key, really.

Yeah. Great, yeah, this. Yeah, definitely. So it kind of again depends on the project and the client like when you’re discussing with the client what they want it depends whether they used illustration in their brand previously or if you’re forging a new style for them. I’m going to say, you need to kind of take into account the audience. So you all the time you’re kind of looking for parameters for every job you stopped looking for these constraints in order to narrow down to, to an end product. But yeah, I guess, personally I do have a similar kind of signature style just how my hand, naturally draws stuff.

Yeah.

Yeah, I think a bit of both.

Like a for another question. Do you get sign off on an illustration, while it’s still just a pencil sketch before you really refine it or do clients like to see a finished piece.

That’s quite interesting. Yeah, that kind of links into who signs off what part of the process whether UX illustration.

I think person, I think that if you were to sign off a sketch. Then, I don’t think the person, signing off, Sunday itself would really know or have any visibility of what they’re signing up for. I mean, you know sketches or style in itself really.

So, what you probably need to do is create in a way like almost like a style style type thing. Like a sample piece. And in the different styles that you might give to them to choose from. If it’s more than one, and get sign off that way. And then once you’ve got sign off with the polished visual style on an example, then you can start sketching out the rest of the illustration, under the assumption that it will come out the other end in that style that they signed off.

Yeah. Yeah. Sure do one more question.

Yeah. Yeah. Okay, um, awesome really long questions I was trying to read it textbooks is comically small scrolling in it can surely answer this question.

Yes, there we go. Yeah. So Mark has said, do you add this to the price of project, or as an additional service. You mentioned that it can be the first thing to get scrapped so wondering how you reduce or remove that risk to keep project high quality and communicate as best you can. So I suppose. This would go back to the flow chart that we showed quite near the beginning, which was the idea of that is to help you identify the possibility of adding illustration into a project like much earlier in the process so that it can kind of be scoped in and kind of seeing it as it’s a part of the design, really. But I guess. So many of these answers are depends on the project but i think you know just raising awareness of how it was treated can help us, it’s something that we’re trying to do in order to get people thinking about it earlier in the process so that it can be costed in

the beginning. Yeah. Yeah, but it’s difficult because, um, you know, if it does come in halfway through, or if it is identified after a round of testing, it might make it more tricky to get it, though in within the cost of the project but generally, if we raise awareness early then we can get in. From the off.

Yeah, yeah. Okay.

Oh, the rest of them are just nice comments.

Thank you so much to everyone who joined us the webinar and anyone who’s going to watch it at a later date. Yeah. Yep, that’s it for us. Yeah. Thanks very much, everybody. Hello, welcome.