 What's up, guys? Today we're gonna take a look at the differences between UX design, UI design, what it all means. And I'm gonna show you some practical examples on websites. Let's find out which one's best for you. Let's go. What's up, guys? Jumping straight in, I wanted to show you the differences between UX and UI design on a website that I've actually designed and built. There's lots of videos online where people talk about, okay, so UX design is this, UI design is that, and it's very hard for you to understand, you can understand the theory, but it's very hard for you to understand what they actually do day to day. So at a really quick base level, a UX stands for user experience design. I don't know why it's not UI, but it's been around for a while, and when you design a digital product, you essentially have, it's called the user-centered design process, and there's four stages to it. So this can be applied to whatever you design. So there's research at the beginning, where you research into the problem that you're trying to solve. So every business at its core solves a problem, and that's what any website is trying to prove. So here's an example of Barclays, they're trying to solve the problem of me needing a loan or me needing some money to buy a house. That's what they're trying to solve. So you first, as a designer, you understand what you're trying to solve, the very specific problem. Then you go into a design phase where you will then do concepts and mock-ups, and there's lots of design tools on the market. So a UX designer just quickly might use a tool like Adobe XD. So first off, they all start by sketching the problem. Lot, to be honest, different people have their own ways of doing things. I always find it easier to sometimes work on a computer, and then in theory, it's best to start off sketching the design. Doesn't always happen, but in a perfect world, you'll start sketching the design, and then you'll then work with stakeholders in the business who are essentially managers and people who look after that part of the business. It's a lot easier when you showed them a sketch for them to change things rather than you showing them a more complex layout. But when you get to the end of that design cycle, you'll then have something which you can then take into the next phase of the UX design process, which is testing, and that's where you test with actual people. So let me just show you this Barclays website that we did. So when we went into the testing phase of this website, Barclays had people come in. Those people were users, and they had different types of users, so they had business users, and they had more personal users. There was different types of the business, and what you'd do is you'd sit in a room, it was kind of like an old police station where there was like a double-glass window. You'd sit behind, you'd watch on a screen. There'd be professionals who'd come in and interviewed them, and they'd ask them to do certain tasks on the website. Like they'd say, they'd give them a scenario like you're thinking about getting a loan, where would you click on this website and how would you progress with that journey? And then as long as that task applied to what you'd designed, so say the problem with Solvent was providing a loan, the task would be take a look at the loan, they'd go through this website, so they'd go to something, they'd be like, okay, borrow, that makes sense. Let's have like all loan products here. And then they'd be like, okay, this is interesting. And then what you'd do is you'd find little kinks in what you'd designed, because I think as designers sometimes we think what we design is perfect, and we get really offended if someone changes it. But when you're watching people using it and you're watching people, we kind of forget the levels of interactivity people would have. I mean, people are pretty sophisticated nowadays, but depending on the product, you're designing for, whether it's for an older generation who are pretty tax savvy nowadays, or kids, there might be different levels of interaction needed. But that's kind of that phase, you test it out, and then it then goes on to a development stage where you work with a developer and you hand over all your designs, that's a complex stage. I'm gonna be talking about the user-centered design process a lot more in a future video, so check that out. But this is just a quick overview of what it is. You'll work with a developer, you'll pass them the design for your website. So in this website, what the UX designer will do is they'll work in a program called Sketch. Actually, I'm missing out a step which is where they work with UI design, but I'm doing that deliberately because I'm gonna talk a bit more about UI design in a second. But the UX designer, UI designer will work together, then they'll pass it over to development and then they'll develop the website, release the websites on a live, and then there's an analytics phase where you then look at the analytics for a website, see how it's performing, and then update accordingly. Because sometimes if you change the color of a button on a website, it can make a one or 2% difference in click-through rate, which is people going from one page to another, but actually that's a huge difference in potential revenue for a company. If you've got a billion people logging in, like Google or this Barclays website example, it can make a huge difference. So that's just a quick overview of the research, design, development, and testing part of the user-centered design process. So as a UX designer, what you're more focused on is understanding the problem and the research and initial design phase. So the UI designer is more focused on the visual elements. So this page that we're looking at, for example now, the UX designer will focus on interactive elements, so here this top portion of a website is called a header, and see the way that the information is laid out? So we have a top layer here, which is like the top level of the website. These are essentially different websites. If I click on business, you see it takes me to a different, it looks the same, but it's actually a different website. Then underneath we then have our information architecture. So that's the way a website is kind of laid out. So you have your homepage at the top, and then you'll have section pages, and underneath the section pages you'll have different types of pages, and that's all the information architecture is all something a UX designer will do. There are different techniques they can use. For example, there's a technique called card sorting where they'll go in, they'll write every page on the website down, and they'll go with a user, and they'll sit down with them and say, okay, how would you organize this website? And the user will organize them into sections, and then what the UX designer will do will then take that away, name the sections, and then do this with loads of different people and see if there's any similarities at the end, and then they'll take those similarities and lay things out differently. So as a UX designer, your job is more, it's more of a facilitator. So you have to talk to people, you can't go alone and do this by yourself. You have to put different people's needs in, so there might be managers in the business who you need to take, there might be advertisers you need to take, there'll be users, but overall you need to take all of this information in and then you present the best, most simple way of solving the problem back, so you put a simple way of doing an architecture, then the hierarchy on the website, so this is called a hero at the top, so there's a title, a subhead, some text and some buttons. This will all be done by UX designer and back in the day we used to do it and it was called a wireframe, so wireframe is basically just a box and then there'll be some text on it and you take all the, it's the simplest, I'll show you, I'll try and show you an example now. Let's just Google wireframe. Here we go, here's an example. So really it doesn't matter what it looks like, what you're trying to do is you're trying to do the, you kind of present the information in a way that makes sense, it's called a low fidelity prototype, you could do this in Adobe XD, it's a lot easier for UI designers and UX designers to work in the same program for handing over files, but this is traditionally what UX designer did, so they took all the information, solved the problem, presented it in a low fidelity format, took all of font, all colors, all images out and they made it make sense. They then, I'll show you this example, which I was just taking a look at, so this is on Behance, this is a UX UI design project and I'll show you where the UI design comes in a second, but I thought this was a good example of showing you. So this is the research phase at the bottom, there was some surveys and then from those surveys, the actual things that the guy wanted to solve were broken down and this, you probably won't need to know about this now, these are features, but this is how an actual design team works in real life, so all these features will be given to a UX designer, they will do a simple design for them and then they'll be broken down and given to developers, so all of the website might not be designed at the same time, you might do something called an MVP, which is a minimal viable product and that might be 10% of the website, but it has to work and you kind of add on from there, but here I talked about wireframes, so this is an even simpler version of a wireframe and this is called a user flow, so maybe even before you have the detailed wireframes, you think about how the app or the website journey is gonna work and you can put it together in a simple design like this, there's lots of tools on the market where you can help do this, but with something like Adobe XD, there's plugins available and you can go online, search plugins for user flow and you'll have all little diagrams like this and arrows that you can use, but you'll put together the journey of the website, you'll include, see here, there's like a diamond with like a question mark in it, because sometimes say you're doing a login for a website, you would have login correct and then you would go on something called a happy path, which is the journey that the user would take without any errors and then sometimes you would have, the user fails the login, so you need to include in this what happens when the user doesn't put the password in wrong three times and when you do something like this, it kind of forces you to think about all the little details because I know sometimes we are carried away and we wanna design the website, but actually when you're designing something like a form, there might not be any elements but there might be loads of different scenarios that you could take whether you've authenticated properly, whether you've logged in, whether you come from a different country, do you need to be presented different information because we all know like with cookie policies now, there's a Californian policy, European policy, this is all things that a UX designer really needs to think about and that's why design, as I say graphic design isn't as important to them because they've got all of these different things to think about, but once you have this flow, you can then prototype it, you can put it together in like, you can prototype in Adobe XD, link things together, make a work and app, you could do it low fidelity or you could do it a little bit more visual, but then this is where the UX designer's job is complete for now, they'll pass it on or in companies nowadays, there's job roles called product designers and UX and UI, depending on your background and your skillsets, so my background is graphic design, so I came from a very visual focus and earlier in my career I did magazines, so UI design was kind of actually where I started, I started doing magazines which was UI design for print and then I kind of moved into UX design, so, but a lot of UX designers come from research backgrounds so that's totally fine, they'll be happy doing the research part, so this could either be a different person or the same person, they will then go into making that solid prototype look great and in large companies nowadays, what you'll find is there are things called design languages, so let me just show you Google material design. So a design language is something built by a large company, so Barclays have their own, so I worked on that and what it is is it's basically an internal website for any designers, any UI designers who come to that and it has everything they need, so it has an overview of how to use the language and what the language consists of is things like colors, so it'll have a brand palette, so here you can see Google uses purples and greens and these are the exact colors that you need to use and they'll have hex codes which is essentially a digital code that will tell the computer program to put out the correct color, there'll be things like typography, which they will have all the different sizes you need, the actual typeface, letter spacing and I encourage you to go over and check out material.io that's probably the best example of a design language on the market, it's Google's one, a lot of companies like Barclays, their languages are just for internal people but there's a lot you can learn by looking at a design language and a design language is good in many ways because there'll be things like navigation, so the header has to switch back to the Barclays website, so on this page what was controlled by the design language were all the fonts, all the colors, the buttons, the header, these elements here on a page are called promos, so that's where you have an image, some text, some more detailed image and a button and that's the whole point is to get you to another page, so most of this page is actually designed by a design language and that's maybe where UI designers will focus more, they might be working on the design language rather than individual page designs but that's where UI comes in, they come in by choosing the right imagery that meets the character of the website, it's really important what images you choose, I remember reading a study about Barack Obama's campaign a couple of years ago where he tested maybe 50 different versions of his website and the most important difference in users getting what he wanted to do, which was probably signed up for a newsletter, was using a color image over a black and white image, which one looked the best, it actually had a massive difference rather than text sometimes, because you know what you say, I bet you can say a thousand words, but yeah, so photography is super important for UI design, colors are super important, just changing a button color could dramatically affect click-through rate, like blue is Barclays brand color, so they went with blue, but if they were safe as they're using red, sometimes red can mean danger or it can mean luck in different cultures, you really need to think about what colors you apply because that can give the, like if I was designing Barclays, I wouldn't want to put green buttons everywhere because that's not Barclays brand, green might be more associated with a Lloyds, which is a different bank, you really need to think about that and what's really important, another part of UI design is fonts and if you can, if you're designing a website for yourself or you're a UI designer, designing for a smaller company, you won't need to think about design languages, which are called design systems, but you'll need to think about all these different elements like fonts, do you go with a sans serif font or a serif font, they're the two different types of fonts, one is more modern like this, which is sans serif, which means without serif, which is kind of like the more times new Roman, old-fashioned type lettering, you need to think about that, you need to think about what color your font is, so if you look here, this looks black, but it's actually not black, it's a dark, dark gray and we did lots of testing on this, so when I was in Wired Magazine and we were designing for the iPad as a UI designer there, I tested maybe 10 different types of body copy, so this is called body copy, this is the main text, I tested 10 different types of color on that and I had to look which one looked best to the eye, because sometimes when you're in a design tool and you look at it on a device, it looks different and we actually found that a really, really dark gray looked, was better to read than a black, because black kind of popped a little bit dark gray, we were talking chunks of text and it worked a lot better, but that's what a UI designer will do, so let's go back to this, I forgot this project back open, so this is where he's designed the styling, like it looks like he might have used a little bit of Google design language here, so a really important thing to remember is if you're designing an app for iPhone or an app for Android, you need to check out the respective design languages because Apple aren't gonna let you do whatever you want, so they're gonna want you to use specific things that they've designed and tested and that work for iPhone and so Android, so I see a lot of people coming to me asking to review the designs and they all design an Android app, but you see here, this is called a tab, so this is a component that will live in a design language which will do a certain thing and Dave just created their own ones, it looks nothing like this, when the time shouldn't be spent doing that, you should use the Android version and the time should be spent actually thinking about the flow and thinking about does this website make sense and other important things, I mean, if you're a designer, maybe think about the colors that you use or the patterns or the typography, don't worry about reinventing the wheel because a lot of this has been tested and done over time and then the UI designer might go in and as I said, the UX designer will do a basic wireframe prototype, depending on their skill set, they might do this job as well, but they'll then put interactions in and you can do this in Adobe XD or Figma. A lot of people use Sketch, I haven't used it in a while, I'm using Niva 2, but they do interactions and you can do all of this in those programs. I'm gonna be doing some future videos showing you some more of these skills, but yeah, that's just another part of their job and then what they'll do is, that's your end product and that will then go to the developer who will then make it, launch it and then kind of back to the UX designer again, what their job then is to look at the analytics for a website. So let's just go back to, let's just go back to Barclays and I'll just go to, I don't know, it's the random page. So every website is set up with a thing called analytics, which is, there'll be different companies who'll provide the analytics. My own personal website, I've set up with Google Analytics and what it tells you is how many people are looking at the website at certain times in the day, what pages perform well. There are things in analytics called bounce rate, which means someone went to a page, didn't click on anything and left the page instantaneously. That tells you that the page didn't meet their need for the problem they were trying to solve. So if I didn't go on this page and click on something, then the page wasn't performing well. So all of these things will be analyzed and you can only really do this once you've launched your site because you need mass, you need a lot of people doing it. So they'll take a look at that. They'll take a look at what's performing well and then they will tweak the design. So in Barclays, it's probably the best place of work for this. They had a team called Test and Target and what they did is they took the analytics. So they were UX designers, modern UI designers. They took the analytics, had a look at what they thought and then kind of presented like a hypothesis which was like a scientific paper really. You write up, you say, okay, because in the analytics, this page is not performing well. I think it could perform better by changing the button color, making the button bigger, changing the font. You will have three or four different tests you can do for a solution. And then what you'll do is, you'll then perform that and then you'll see what performs best. So I'm gonna show you a website called Crazy Egg and Crazy Egg is called, it's an A-B testing software and let's just layer more about this website. And this is something that UX designers will use. So you can see here, this is, I just talked about testing different things and what Obama did and that's called an A-B test. So that's where you can throw in as many different variants as you want really. So they've got four here. So the control would be the website as it is. And then the hypothesis is here and you can actually see which one improved and you can apply this to YouTube as well. So with my thumbnails, I might test three. I will see which one has the biggest improvement and then go with that. And you incrementally work towards a better website. And it's all based on proof. It's not based on someone's idea. And this is how Amazon got so good. So Amazon took A-B testing to the max and they might test hundreds of variants a day moving things about and they will constantly improve for the better because websites like Barclays, the BBC, Google, Amazon have so many people come into the website. They can just constantly perform these little different tweaks and see what performs better.