What are UX and UI design?

- [Instructor] I'd like to start out by giving an overview of UX and UI Design. Starting with User Experience Design. It's known simply as UX, that's what I'm gonna be referring to it as. What does it really mean, User Experience Design? Well, it's all about the customer. That customer satisfaction at whatever touchpoint that's gonna be at. But it's all about improving that usability, the ease of use, and the overall pleasure you're providing to the end user. So, that's what User Experience Design is all about. We could break it down a little further by talking about a couple things. The strategy and content and wireframing and prototyping. Focusing on the strategy and content, a lot of this is just research, doing that competitor analysis. Finding out what the customers are doing, sort of personifying them, if you will. And then coming up with a product structure slash strategy. A lot of times that comes internally from the company itself. And then developing that content. Again, all based on competitor analysis, that the customer, what the business is trying to do, kinda gives you this content that you would have at this point. You take that content and you dive into the wireframing and prototyping assumptions. Whatever you assume about the end user as well as what you're trying to achieve as a business. You will test that out with these wireframes. And then you'll start iterating based on your results from these wireframes and prototypes. And then you'll go into the next step, which is the development planning. So, developing this even further as it gets more designed and gets handed off to developers as well. A lot of times it might look something like this, okay? So, it could be done literally on a big piece of paper. However you wanna do it, it could get more complex. But typically it doesn't mean a lot of colors. So, this is advanced as it gets when it comes to doing the User Experience Design. Mapping out assumptions and then getting all of that feedback is really important before you go into the next phase. The next phase really comes down to User Interface Design. Taking all that data and rolling it into the UI, as it's known as, simply as UI. We can break that down a little further concerning the definitions. It's all about taking that brand's strengths and those visual assets, which we know how to do as graphic designers, and we take that and roll that into a product's interface to best enhance the user's experience, okay? So, it's still all about the user, but it's taking a lot of these traditional principles of design that we know well, and also part of the brand as well. For User Interface Design, it's all about the look and feel. Again, that's pretty easy, but also that responsiveness and interactivity, okay? So, that second bullet point gets lost a little bit. But if we take a look at the look and feel, it's still keeping in mind our customer, alright? And also design research that might dive into trends a little bit and what you end up with is sort of the branding guidelines. Those graphic development whatever that is, whether it's the colors or the fonts you're using, to the imagery, that establishes the look and feel. And from there we start to define the user guides and the storyline in context how we use these elements of the look and feel. The fonts, the colors, and the various graphics. From there we dive into the responsiveness and interactivity. So, we start to prototype this out. This is kind of the fun part, right? So, essentially meaning we've maybe created some screens. And we wanna know how a user might navigate to those different screens. So, we need to understand that interactivity. Where are those buttons? Are there transitions going one to the next? And do those transitions make sense? And not just for one screen in some testing lab, we need to make sure it adapts to all devices and all screen sizes as well. Sort of as close as you can get to the real world experience of prototyping and having somebody actually use the actual product. After we've done this, so we've iterated and we've refined this based on our user research and our testing, we would then implement or give all of these graphics to the developer in a way that they can consume them and use them appropriately. And a lot of times, it might look something like this, right? So, in this case, just a basically a shopping site and how the user would kind of flow through each of these pages all well designed. This is the end result from the User Interface Design. So, it really is a left and right brain activity. You might have at a company one person that's doing the User Experience Design side of things. So, establishing the end user, the customer, figuring out the information architecture using all that research, building out those scenarios. And then you might have somebody else who's also doing the User Interface Design, so taking a lot of that data and all of those findings and rolling that into the visual design and putting it in context of how it should be laid out according to the User Experience designer. Now, here's an example. Quite simply, you can take, for instance, the ketchup bottle, right? So, in the past honestly it's been really hard to get ketchup out of these bottles, to be honest with you. You flip it over, you try to bang on it, all sorts of things. So, User Experience Design would say, hey, you know what? This product or service, how can we enhance the user experience, right? You also have the graphic designer that typically in the past would just slap a label on whatever they get. Whatever product that is, okay? But what we can do is we can take a step back and say, hey, you know what? What would be a better user experience for this? And that would be this type of ketchup bottle, right? So, it's gonna be a squeezable ketchup bottle. It's turned upside down by default, so it's ready to go based on all of this user research understanding the end user at the end of the day and not just solely focusing on how we think users should use it, right? So, this is the User Experience Design. And we take that and come up with the UI Design. So, within the context of this product or service, here is how we've implemented the branding with this product or service. And the goal is to always keep that user in mind. So, it's all about taking the client's needs and marrying those with the user's needs. I think in the past we've forgotten about the user's needs or we have not fully tested out things. A lot of times it's a website that we've created and handed off to the client. And really it needs to be a continuous relationship with the client and as well as with the users to make the client successful at the end of the day.