UX Designers

We'll first of all look at why it is that user experience has become so important now. Now, anybody who's been around the usability or the human-computer interaction area will be aware that user experience has become perhaps the major buzzword when employing anybody. So, in the past you might have got a job in interaction design or as a usability engineer.

Now, what you'll see more than anything is that people ask for *user experience specialist*. Now, very often what they mean by that is exactly the same. They want you to include the same thing. So, in the past, if you were designing interactions, you'd think about user experience. If you were asked to design user experience, you'd think about usability. But the fact that the *name* has become dominant tells you something about a change in emphasis.

And so, whereas it perhaps used to be a *minor* aspect of the role of designing interfaces and designing interactions, now it's become perhaps one of the major roles. Experience clearly matters, whether it's iPhones or Facebook. It's now *why* people often go to a computer system. They want it to make them feel things. They want it to be part of excitement or interest

or basically emotion in general. You might be talking to a loved one over a video channel or you might be playing a game in Facebook. These are clearly very, very critical. If you think about the phone as an example, if you went back – I was trying to think – 20 years, now even this – and I've got my house phone here, which is a pretty big phone – that would have been little. The first mobile phones were like bricks. It was almost like holding a book to your ear. Now, it's the iPhone.

The first mobile phones were about communication, wanting to be connected with people. And, actually, if you see satellite phones today, they're still pretty much like that – chunky things. Whereas the iPhone is very much about being an iPhone user, about the sleekness of it, about the design of it. Interestingly enough, even those early phones – there was a strong set of emotional values attached to them. People would have *fake* phones because they couldn't afford a real phone.

This is fake *mobile phones*. So, you have a fake mobile phone. So, you could sort of pull it out on the train and have it sitting there, and people would think, "Oh my goodness! There's an important person, having a mobile phone." So, actually, even those early phones – the actual phone (the real phone) was about utility. However, those fake phones were about the fact that a phone says something about who you are. And – boy – is that true of phones nowadays! Emotion is part of being human.

It's not just part of our technological experience of being human; it's part of being human. Without emotion, in many ways we don't exist fully. And that's sort of evident when things go wrong and people have accidents or illnesses which damage their emotional being. However, this isn't a new thing. You know, emotion has *always* been important. This isn't something that's happened in the last five to ten years. In fact, within the user interface community, one of the early standards that mentioned usability

was ISO 9241. And it talked about three crucial issues for user interfaces. One of them was *effectiveness*. Does it do the right thing? Does it get things done that are important? The second was *efficiency*. Does it do that with the minimum effort – the minimum mental effort, the minimum physical effort? Or is it taking extraneous effort that's unnecessary?

And, very often, people only quote those two because there was a third one, as well, which was *satisfaction*. Does it make you feel good? Do you feel happy having used this system or used this piece of software? And that last one is often missed entirely. And it's all about the emotion – the way you feel. And so, it was often ignored, often missed in the past.

What's now happened is that's become perhaps in some ways more important than the other two. Emotion is important because it's good to feel emotion. But also, emotion affects the bottom line in business. If your employees are happy, they tend to be more productive. So, if you're designing a production line or an office or wherever the environment, if you can have software and systems that make people feel good,

they'll tend to work better. And certainly you want your *customers* to feel happy because they are the people who are usually going to buy your goods. So, if you've not made your customers happy, they don't buy anything. So, emotion is important to us as humans,

but it's also important from a business point of view.

User research is a crucial part of the design process. It helps to bridge the gap between what we think users need and what users actually need. User research is a systematic process of gathering and analyzing information about the target audience or users of a product, service or system. Researchers use a variety of methods to understand users, including surveys, interviews, observational studies, usability testing, contextual inquiry, card sorting and tree testing, eye tracking

studies, A-B testing, ethnographic research and diary studies. By doing user research from the start, we get a much better product, a product that is useful and sells better. In the product development cycle, at each stage, you’ll different answers from user research. Let's go through the main points. What should we build? Before you even begin to design you need to validate your product idea. Will my users need this? Will they want to use it? If not this, what else should we build?

To answer these basic questions, you need to understand your users everyday lives, their motivations, habits, and environment. That way your design a product relevant to them. The best methods for this stage are qualitative interviews and observations. Your visit users at their homes at work, wherever you plan for them to use your product. Sometimes this stage reveals opportunities no one in the design team would ever have imagined. How should we build this further in the design process?

You will test the usability of your design. Is it easy to use and what can you do to improve it? Is it intuitive or do people struggle to achieve basic tasks? At this stage you'll get to observe people using your product, even if it is still a crude prototype. Start doing this early so your users don't get distracted by the esthetics. Focus on functionality and usability. Did we succeed? Finally, after the product is released, you can evaluate the impact of the design.

How much does it improve the efficiency of your users work? How well does the product sell? Do people like to use it? As you can see, user research is something that design teams must do all the time to create useful, usable and delightful products.

Personas are one of these things that gets used  in very, very many ways during design. A persona is a rich description or description of a user. It's similar in some sense, to an example user, somebody that you're going to talk about. But it usually is not a particular person. And that's for sometimes reasons of confidentiality.

Sometimes it's you want to capture about something slightly more generic than the actual user you talked to, that in some ways represents the group, but is still particular enough  that you can think about it. Typically, not one persona, you usually have  several personas. We'll come back to that.   You use this persona description, it's  a description of the example user,   in many ways during design. You can ask  questions like "What would Betty think?"

You've got a persona called / about Betty, "what would  Betty think" or "how would Betty feel about using this aspect of the system? Would Betty understand this? Would Betty be able to do this?"   So we can ask questions by letting those personas  seed our understanding, seed our imagination.   Crucially, the details matter here. You want to make the persona real. So what we want to do is take this  persona, an image of this example user,   and to be able to ask those questions: will  this user..., what will this user feel about  

this feature? How will this user use this system  in order to be able to answer those questions?  It needs to seed your imagination well enough.  It has to feel realistic enough to be able to   do that. Just like when you read that book  and you think, no, that person would never   do that. You've understood them well enough that  certain things they do feel out of character. You need to understand the character of your  persona.

For different purposes actually, different levels of detail are useful. So I'm going to sort of start off with   the least and go to the ones which I think are  actually seeding that rich understanding.  So at one level, you can just look at your  demographics. You're going to design for warehouse   managers, maybe. For a new system that goes into  warehouses. So you look at the demographics, you might have looked at their age. It might be that on the whole that they're   older. Because they're managers, the older end. So  there's only a small number under 35. The majority  

are over 35, about 50:50 between those who are in  the sort of slightly more in the older group.  So that's about 40 percent of them in  the 35 to 50 age group, and about half   of them are older than 50. So on the whole  list, sort of towards the older end group.   About two thirds are male, a third are female.  Education wise, the vast majority have not got   any sort of further education beyond school. About 57 percent we've got here are school.  

We've got a certain number that have done basic  college level education and a small percentage   of warehouse managers have had a university  education. That's some sense of things.   These are invented, by the way, I should say, not  real demographics. Did have children at home. The people, you might have got this from some big  survey or from existing knowledge of the world,   or by asking the employer that you're  dealing with to give you the statistics.   So perhaps about a third of them have got children  at home, but two thirds of them haven't. 

And what about disability? About three  quarters of them have no disability whatsoever.   About one quarter do. Actually, in society  it's surprising. You might... if you think   of disability in terms of major disability,  perhaps having a missing limb or being   completely blind or completely deaf. Then you start relatively small numbers.   But if you include a wider range of disabilities,  typically it gets bigger. And in fact can become  

very, very large. If you include, for  instance, using corrective vision with   glasses, then actually these numbers  will start to look quite small.  Within this, in whatever definition they've  used, they've got up to about 17 percent with   the minor disability and about eight percent  with a major disability. So far, so good. So now, can you design for a  warehouse manager given this? Well,  

you might start to fill in examples for  yourself. So you might sort of almost like   start to create the next stage. But it's hard. So let's look at a particular user profile. Again,   this could be a real user, but let's imagine  this as a typical user in a way. So here's Betty Wilcox. So she's here as a typical user.  And in fact, actually, if you look at her, she's   on the younger end. She's not necessarily the  only one, you usually have several of these.  And she's female as well. Notice only up to  a third of our warehouse ones are female. So  

she's not necessarily the center one. We'll come  back to this in a moment, but she is an example user. One example user. This might have been  based on somebody you've talked to, and then you're sort of abstracting in a way. So, Betty Wilcox. Thirty-seven, female, college education. She's got children at home, one's  seven, one's 15. And she does have a minor disability, which is in her left hand. And  it's there's slight problem in her left hand.  

Can you design, can you ask, what would Betty  think? You're probably doing a bit better at   this now. You start to picture her a bit. And you've probably got almost like an image   in your head as we talk about  Betty. So it's getting better.   So now let's go to a different one. You know, this  is now Betty. Betty is 37 years old. She's been a   warehouse manager for five years and worked for  Simpkins Brothers Engineering for 12 years. She didn't go to university, but has studied  in her evenings for a business diploma.

That was her college education. She has two children  aged 15 and seven and does not like to work late.   Presumably because we put it  here, because of the children.   But she did part of an introductory  in-house computer course some years ago.   But it was interrupted when she was promoted,  and she can no longer afford to take the time.   Her vision is perfect, but a left hand movement,  remember from the description a moment ago,   is slightly restricted because of an  industrial accident three years ago. 

She's enthusiastic about her work and  is happy to delegate responsibility   and to take suggestions from the staff. Actually,  we're seeing somebody who is confident in her   overall abilities, otherwise she wouldn't  be somebody happy to take suggestions.   If you're not competent, you don't. We sort of see that, we start to see a   picture of her. However, she does feel threatened  – simply, she is confident in general – but she   does feel threatened by the introduction of  yet another computer system. The third since she's been working at Simpkins Brothers. So now, when we think about that, do you have a better vision of Betty?

Do you feel you might be in a position to start talking about..."Yeah, if I design this sort of feature, is this something that's going to work with Betty? Or not"? By having a rich  description, she becomes a person. Not just a set of demographics. But then you  can start to think about the person, design for the person and use that rich human understanding you have in order to create a better design.

So it's an example of a user, as I said not  necessarily a real one. You're going to use this as a surrogate and these details really, really matter. You want Betty to be real to   you as a designer, real to your clients as you  talk to them. Real to your fellow designers  as you talk to them. To the developers around  you, to different people. Crucially, though, I've already said this, there's not just one. You usually want several different personas because the users you deal with are all different.

You know, we're all different. And the user group – it's warehouse managers – it's quite a relatively narrow and constrained set of users, will all be different. Now, you can't have one persona for every user,   but you can try and spread. You can look at the range of users.   So now that demographics picture I gave,  we actually said, what's their level of education? That's one way to look at that range. You can think of it as a broad range of users.

The obvious thing to do is to have the absolute  average user. So you almost look for them:   "What's the typical thing? Yes, okay." In my  original demographics the majority have no college   education, they were school educated only. We said that was your education one,   two thirds of them male – I'd have gone for  somebody else who was male. Go down the list, bang   in the centre. Now it's useful to have that center  one, but if that's the only person you deal with,   you're not thinking about the range. But certainly you want people who in some sense  

cover the range, that give you a sense  of the different kinds of people.   And hopefully also by having several, reminds  you constantly that they are a range and have   a different set of characteristics, that there  are different people, not just a generic user.

Wireframing is like creating a blueprint for a website or app. Imagine you want to build a house before the builders start. An architect draws a simple sketch showing where the rooms will be, where the doors and windows go, and how everything connects in the same way when making a website or app. Wireframing is the first step. It's a basic, no frills outline of how the pages will screens will look. It helps designers and developers plan with things will be placed like buttons, images and text. It's not about the colors or fancy details.

It's more about the structure and layout, like arranging the rooms in a house. Wireframes help make sure everything fits together well before the actual building or coding begins. Creating a wireframe during a UX project involves several steps. Understand goals, know the project goals, and user needs. Sketch ideas roughly sketch layouts on paper or digitally create low fidelity wireframes. Use a tool to make simple grayscale wireframes showing basic structure and placement.

Get feedback, share wireframes. Gather feedback and make adjustments. Refine and iterate. Make improvements based on feedback. Focusing on functionality. Create high fidelity wireframes and colors. Fonts and images for a more detailed look. Test and validate. Conduct usability testing and refine further. Finally, ease and hand off complete high fidelity wireframes and handoff to the design and development teams. Wireframing helps to plan and visualize a user friendly design before diving into the details.

I'm working at the TAPP Transit System; this is a made-up transit system app. And it says, 'Oh, we need a notification for when someone's payment method has expired.' So, first I do the strategic work and I say, 'What's the *point* here?' What's the point for our user, and what's the point for the business or the organization? And what are our *voice concepts* that we want to make sure that we're landing so that it's in our brand?' So, I take it and then I start including *purpose*.

And it gets longer and longer. And I just *iterate and iterate*,  and I keep all these iterations. Thank heavens for tools like Sketch and Figma where I just make artboard after artboard after artboard or frame after frame and keep them all. I choose the best of those, and I work on making it *more concise* – more concise and more concise, and you see it's getting shorter and shorter. It gets so short here at the end, it's not particularly usable. So, I'm going to go with the second to the end and go forward.

I'm going to make it more *conversational*: is this something a person would actually say? And I make more iterations. And I have my favorite among those. And then I look at all of them together, and I say, 'Here's my best ones,' and that's what I'm going to tell my team about. I'm going to say the original message doesn't follow the  voice and really doesn't meet the purpose. I'm going to say which one I recommend and why and give them another couple of options.

The secret here is: *I'm happy with all three of these*; I don't care which ones they choose; and, frankly, I'd prefer to A/B test them against  each other and learn more about the language.

I've been talking to a lot of people in agencies, startups, even from the GAFAs, to Google, to Apple, et cetera. And I realized that we share the same frustrations – from people who don't get design. They may sound familiar. We'll see. The first one is, 'Can you make it *pretty*?'; 'Can you do the 'UX' (whatever it is)?'; and, 'Can you add this *wow* effect?'

And if you're like me – so, this is me – when you hear that, you would cringe. And I've heard them a lot. Because what we really want to hear is... 'Can you make it *usable*?'; 'Can *we* do the UX *together*?'; And the last one: 'Can you *tell me what's broken*?'

Accessibility ensures that digital products, websites, applications, services and other interactive interfaces are designed and developed to be easy to use and understand by people with disabilities. 1.85 billion folks around the world who live with a disability or might live with more than one and are navigating the world through assistive technology or other augmentations to kind of assist with that with your interactions with the world around you. Meaning folks who live with disability, but also their caretakers,

their loved ones, their friends. All of this relates to the purchasing power of this community. Disability isn't a stagnant thing. We all have our life cycle. As you age, things change, your eyesight adjusts. All of these relate to disability. Designing accessibility is also designing for your future self. People with disabilities want beautiful designs as well. They want a slick interface. They want it to be smooth and an enjoyable experience. And so if you feel like

your design has gotten worse after you've included accessibility, it's time to start actually iterating and think, How do I actually make this an enjoyable interface to interact with while also making sure it's sets expectations and it actually gives people the amount of information they need. And in a way that they can digest it just as everyone else wants to digest that information for screen reader users a lot of it boils down to making sure you're always labeling

your interactive elements, whether it be buttons, links, slider components. Just making sure that you're giving enough information that people know how to interact with your website, with your design, with whatever that interaction looks like. Also, dark mode is something that came out of this community. So if you're someone who leverages that quite frequently. Font is a huge kind of aspect to think about in your design. A thin font that meets color contrast

can still be a really poor readability experience because of that pixelation aspect or because of how your eye actually perceives the text. What are some tangible things you can start doing to help this user group? Create inclusive and user-friendly experiences for all individuals.

Cross-functional teams, unlike silos, have all the people necessary to build a specific thing together. Let's look at an example. Imagine you're on a team that is supposed to build the onboarding flow for a new app that helps connect job applicants with jobs. You can't build the whole thing with just designers. Or with just engineers, for that matter. I mean, you probably could do it with just engineers, but it's a terrible idea.

A cross-functional team for this onboarding work might include a few engineers, perhaps some for the front end and some for the back end. Might include a designer, a researcher, a product owner or manager, maybe a content writer or a marketing person. In an ideal world, all of these folks would only work on this particular team. In the real world, where we actually live, sometimes folks are on a couple of different teams and some specialists may be brought in to consult. For example, if the team needed help from the legal department to explain some of the ramifications of a specific decision,

a cross-functional team would have a dedicated legal expert they could go to. But that legal expert might also work with lots of other teams. In agile environments, the cross-functional team generally sits together or if remote, has some sort of shared workspace. They all go to the required team meetings. They understand the goal of the team and the users. They're experts, or they soon become experts, on that onboarding flow. Contrast this to how it might be done in a siloed environment. In that case, you might have different people assigned to the team depending on need, which can seem really flexible.

Until you realize that you end up with five different designers working on the project all at different times and they all have to be brought up to speed and they don't really understand why the other designers made the decisions that they did. Same with the engineers. And do not get me started on legal. Silo teams tend to rely more on documentation that gets handed between groups. And this can lead to a waterfall project where project managers or product managers work on something for a while to create requirements, which they then hand off to designers who work on designs for a while

and then they pass the deliverables on to engineering, who immediately insists that none of this will work and demands to know why they weren't brought in earlier for consultation. You get it. By working in cross-functional teams instead, the people embedded on the project get comfortable with each other. They know how the team works and can make improvements to it. They come to deeply understand their particular users and their metrics. They actually bring engineering and even design and research into the decision making process early to avoid the scenario I described above.

Do you know this feeling? You have a plane to catch. You arrive at the airport. Well in advance. But you still get stressed. Why is that? Designed with empathy. Bad design versus good design. Let's look into an example of bad design. We can learn from one small screen.

Yes, it's easy to get an overview of one screen, but look close. The screen only shows one out of three schools. That means that the passengers have to wait for up to 4 minutes to find out where to check in. The airport has many small screenings, but they all show the same small bits of information. This is all because of a lack of empathy. Now, let's empathize with all users airport passengers,

their overall need to reach their destination. Their goal? Catch their plane in time. Do they have lots of time when they have a plane to catch? Can they get a quick overview of their flights? Do they feel calm and relaxed while waiting for the information which is relevant to them? And by the way, do they all speak Italian? You guessed it, No. Okay. This may sound hilarious to you, but some designers

actually designed it. Galileo Galilei, because it is the main airport in Tuscany, Italy. They designed an airport where it's difficult to achieve the goal to catch your planes. And it's a stressful experience, isn't it? By default. Stressful to board a plane? No. As a designer, you can empathize with your users needs and the context they're in.

Empathize to understand which goals they want to achieve. Help them achieve them in the best way by using the insights you've gained through empathy. That means that you can help your users airport passengers fulfill their need to travel to their desired destination, obtain their goal to catch their plane on time. They have a lot of steps to go through in order to catch that plane. Design the experience so each step is as quick and smooth as possible

so the passengers stay all become calm and relaxed. The well, the designers did their job in Dubai International Airport, despite being the world's busiest airport. The passenger experience here is miles better than in Galileo Galilei. One big screen gives the passengers instant access to the information they need. Passengers can continue to check in right away. This process is fast and creates a calm experience,

well-organized queues help passengers stay calm and once. Let's see how poorly they designed queues. It's. Dubai airport is efficient and stress free. But can you, as a designer, make it fun and relaxing as well? Yes.

In cheerful airport in Amsterdam, the designers turned parts of the airport into a relaxing living room with sofas and big piano chairs. The designers help passengers attain a calm and happy feeling by adding elements from nature. They give kids the opportunity to play. Adults can get some revitalizing massage. You can go outside to enjoy a bit of real nature.

You can help create green energy while you walk out the door. Charge your mobile, buy your own human power while getting some exercise. Use empathy in your design process to see the world through other people's eyes. To see what they see, feel what they feel and experience things as they do. This is not only about airport design. You can use these insights when you design

apps, websites, services, household machines, or whatever you're designing. Interaction Design Foundation.