UX Design Intro : Principles of User Experience | James Eccleston | Skillshare

UX Design Intro : Principles of User Experience

James Eccleston, Founder of Bridge Studio

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (46m)
    • 1. UX Principles Intro

      1:00
    • 2. 01a Design for your user

      5:45
    • 3. Feedback

      2:41
    • 4. Digestibility

      5:58
    • 5. Clarity

      3:06
    • 6. Familiarity

      6:11
    • 7. Delight

      1:48
    • 8. Summary: Principles of UX

      2:35
    • 9. Project: Principles of UX

      0:46
    • 10. Case Study

      15:45
21 students are watching this class

About This Class

Learn the core foundation of UX design. UX design is constantly evolving as new ideas and ways of working are created but at its core there are principles that every new designer should master. The class is aimed at designers starting their career and It’s also useful for more experienced designers to review these principles and check if they are applying them to their work. The class is for designers of all abilities.

These 6 principles will help you connect with your user and make your work more intuitive. We will look at each principle and talk about best practice examples and how to apply them to your work.

Course Summary

Summary PDF

Bonus Material 

Principles of UX eBook

Transcripts

1. UX Principles Intro: our guys today. I'm gonna teach about the six principles off user experiences I'm. These six principles will make your work a lot more intuitive and interesting. After you've learned these principles, You, babe, toe critic, your work. But he also be able to look at other people's work and think, OK, I can see how they've used these principles and now I can apply it to my own design in his class will be going through each of the principles on. I'll show You Best practice examples on how you can apply that particular principle to your own work. It's a really good guiding light for your work, So when you feel a little bit lost, you can refer back to these principles on check your work and see if you're missing any of these. I'm Jim Jack Weston. I have 17 years of experience working for major brands in London, such as Virgin and some of the quickest scoring startups in Latin America and now based in Madrid. Why founded Bridge Studio on? We also have an educational platform called the Designers Union 2. 01a Design for your user: number one is designed for users and not yourself. Now this is a bit of a mind shift for some designers. I know. When I was studying at university, I really wantedto create things myself. And I was thought I really love this new style. I want to try this new aesthetic, and I really look this kind of, uh, Styler design. So I would just produce work for myself, and it took me a long time. What's going to the industry to get my head around this and can detach myself from my own likes on start producing work that's tailored towards the needs of the user and not yourself? You need to put the user at the center of your design on designed for their needs. Now what we have to do, you have to get to know I user to get to know what they're trying to achieve, what the problems are, where the friction areas are. So one of the best ways to do this is to do some interviews with them. Some of the questions we might ask car uses our ability, background who they are that age. A bit of the day to day life on. Then we can go a little bit deeper and say OK, water your frustrations using this particular type of product. What are you trying to achieve? Why using this? We can ask them why a few times, maybe 25 times. And then what this does? This goes deeper and uncovers bigger truce around. Why they're trying to do something. One thing not to ask is, what do you want? It's your job to resolve their problems. So you really gotta understand what the problem is, and then it's your job to solve it. So this goes back to the Henry Ford quote off. If I ask them what they wanted, they would have told me a faster horse. When we start asking why a few times a bit like a naive child, it uncover summer. Quite strange, bigger truths behind the problem. So here's with examples here. This'll year we were designing a money transfer up for Africa. We decided to ask some of my users Why five times So the first question Waas, what are you trying to do on? They replied, Transfer money. So then we asked, Why do you want to transfer money? Um So when they said show my family in Ghana can have money, then we asked, Why do you want to send your family and Ghana money on? Then they replied, so they could be independent. And then we asked wide to They want to be an independent or why they want to spend money independently. And then they reply to buy a laptop for my little brother on. Then we asked, Why would you like to buy a laptop for him on? Then? They replied, so he can learn. But college economic have influence from outside on. Then we ask, Why again? And then they said, Well, this is toe improve his life so we can see how you got quite be quite quickly there. Now we've got quite deep down. We uncovered some big problems that we probably can't resolve the money transfer at. But we did find out some really interesting things, so we found that they wanted to buy a laptop on. Maybe money transfer isn't the best way to do that. So we thought we get out of functionality work, have a virtual carton. They can use that virtual card to buy goods. Another thing we could also do is we could put a charity that helps with education Africa. So we're not directly helping their end goal the user. But we're supporting it in our way. Now we've got to, you know, I user, we can do a little bit of other research as well to support us. We can ask them what kind of TV shows, what websites they like, and then we can what's thes and then gaining, understanding a bit more about their culture. So once we got all the information, we can create what's known as a use of asana. This is a fictional character that we used to help his empathize with the user. Now this is based on somebody would typically use off product on. We talk about things like a bit of other background. Well, the story is the age location job on. Then we go into things about the frustrations and problems maybe some challenges in their life and then problems around using the service we want to provide with them. Then we also speak about the objective. So this is why they want to do this. Why they want to use our proverbs. What the child to achieve and then to give us an over idea off the style, we can put some of the kind of brands they last. Well, we're gonna give this person a name. Let's call him Joe on the type of user they are. So where this is going to be creative professional users? This is a really clean, well, nice designed user profile, but you'll just have to be as nice as this. You can do it quite quick on 30 and stood up the same results. This is designed like this because sometimes we like to show the client, so we need to sell in the process when we're producing our designs. If we have a user persona, let's say, is called Joe. We can ask ourselves questions like, Do you think Joel understand the logging process? Or is this useful for Joel on? It just helps us empathize with our user 3. Feedback: How's feedback shown? One way is very simple is like a haptik, but and that's a real bottom, so you can feel it when you press it on. But that means, you know, you press a button and it's warm. Problem Touchscreens House. When you touch a touch screen, you don't always know whether that's working. You have to visually see whether you're touching a button on. The good thing about the classic button is you don't have toe see the interface to know you touched that you can feel that one area where haptic feedback for touch feedback is really useful is when you're driving. So I imagine you're driving along. Obviously want to concentrate on the road, but touch of a button. Maybe it's sound control, or it could be from Bab. You really don't want to be touching touch screen. You'll have no feedback whether you've actually touched the bottle, not you have to physically look at the interface and see whether it's reacting. You know, where's if it's a real But you can kind of feel around world concentrating now when you're talking about and you should really change the color or even a website when you roll over it, you should have a hover mode there on that lets the user know that when the mouse is hovering over that, if you press sitting, that will do it when you press it, you should also have another color as well. Toe. Let them use know that they're actually pressed it, and I haven't click. Just off it out of the way to send feedback is to give the user message. So some micro copy up to sending a message, just something like your message has been sent. Or you can add a little bit of personality to that as well. If your brand is aligned that way, once you click on the page and it's loading, you can't little the informational that content, right, that kind of at the same time. So you might have to display some kind of freeloaders, or what content my look like on this will just give their user feedback to let me know that content will be loaded here. But where it's coming soon, No way to get feedback is sound. So on the Mac when you delete your your been your papers country nice, and that lets the user know that that file has been deleted. Pick back in UX design is really important. It lets the user know what's going on on. Stops him from getting frustrated. Just imagine the shore tapping a budding like this. And it's like, I don't know that the bottle hasn't changed color. I haven't got a sent message. What is going on on? You could have just sent that message 20 times to your boss. 4. Digestibility: theme is Digestibility. Now your brain should have to expend a load of energy, kind of figure out out what it's looking at because most people can only remember right about seven things in our working memory, plus or minus to so minds, probably to like never about everything that I'm looking at. Don't make them sit there all day trying to figure out what's on the page. There's nothing worse than going toe. A webpage on up has a wall of text. You're just not going to read it. So if you do need to have a lot of text on the page, you can break this up with So Petters or icons, you really do need a good hierarchy in the design here. If you have a really long form, what you might want to do is to break it up into a number of steps. So when the user comes to it, it broken into little chunk sizes that seizures of digest. So just imagine seeing a massive barbecue. Things are gonna get all that. Okay, that's great, but it's a lot easier to eat that it's broken down into little parts. Good design should be scannable he should be up to see what the pages about, what you have to do just from glancing in it on. If you ever watch the users go through websites that work spend a very long one there. Sometimes they can spend a little is a couple of seconds on that speed their schools Incredibles. Just look down. Look of information they want to read on. That's it. If you use, it does come for pated looks information on. The likelihood is they'll bounce straight off. Let's have a look. An example again. So this is a website for a box that you can rent that? Could you, uh, WiFi while you're traveling in different countries here, So the process is actually quite long to rent so on. You can see when you come to the form. There's a lot to look at here on. There's a danger they usually get here and think, Well, that's Ah, it's a lot to fill out. I got time now. Maybe I'll come back to it on never come back to all that. So one thing we can do is break this down. It's different steps is one example of how we could do it. So we start off by putting numbers on here so we know it's steps on. We can break it down into the different sections already. This feels more digestible. Well, don't weaken. Just show the use of what they need to know what specific time on break it down to these steps and then scroll the screen when they're ready to see the next part. Therefore, we break it down into bite sized chunks. So let's start date automatically opens. Makes it quicker, but the next step, Okay, until his where you'd like to pickle pick up, jump off the device. Same pick up and drop off point. And I want to go to the shop. Okay? The image it next step. And then we school down here and we feel in our details on that's it. So it doesn't feel like such a big form now. Some other things that could improve the design. We could put a progress bar at the top and show the user hamli steps There are on each point. So when filling the form out there now, how much more they got to fill out another example of breaking information down to small sciences is the envision website. So they're start off with a clear hierarchy for main title. They hate one here really large, then a bit of introductory text, but full traction. So the partners working with on the air of a illustration type full here and you noticed this more more than, like, three or four lines entire page here and then the pace changed a little bit. So we've got a dark background, these brilliant big, attention grabbing headlines. Some facts and numbers here scroll down way, have some more information here, and then the background image changes, so it constantly keeps us interested. And there's never too much information to digest at any one time. Yeah, so you can flip down the page. You can scan for it, get information that you need will be tones when you want to use longer texts like in a medium article. This is one we wrote last year about how walking canon cruise your creativity. So obviously you don't want to break with text too much because it in article. But you do want a hierarchy, so we'll have our main headline video that helps explain the article and then we'll have. The subtitles will break it down into short paragraphs. And then we can con trait the design with these poor quotes list other subtitles. Slacking smaller subtitles. Different size images, more videos, poor quotes on then this helps says that stay interested while we're reading large Scott and it doesn't get too monotonous. Or if you're not sure if you want to read them tired, you could just read the headline and scan down smother Subtitle. So read that your brains look OK. That sounds interesting. So I'm going to read this and then maybe I want Teoh skip down. I can see all these tips for creating parable because it's interesting, and then maybe we re how walking helps creativity. So OK, they were not interesting. That and then we can skip down to another headline here and decide what to read. 5. Clarity: next up is clarity. Now, when you come to a webpage, it should be clear exactly what you're supposed to do on what happens when a particular action is taken. So, for example, one thing it really frustrates me is when I signed up for a free trial. But I still have to get my credit card details, so this feels a little bit dishonest and it feels like they're gonna trick me. We'll stop taking money from my credit card without letting me know on. It's pretty obvious. That idea is to get you to sign up. But if they're not completely open about this, a lot of users just won't sign up. So one tip would be to say, we'll never take money from your credit card without letting you know or were send you an email 10 days before we will charge you, and you cannot start at any time. So this just makes the user feel a lot more comfortable, and there's no tricks involved here. Also make sure your site to use is clear language. So one example. Waas. A few years ago, Facebook hards a pop up that said council upload, and then you had two buttons, one said, confirming once it council. So it was like my counseling, but cancel on my confirming the council that got a little bit confusing to make it clear what you want use it to on what will happen after they've carried out a particular action. Landing page is a really good example of clarity. They normally have one purpose, and that purpose is usually something like sign up or by this picture product. And they don't really do anything else apart from that one action. So in this example here, this looks really, really clear. We have ah main title get are able to learn how to be a good leader, and then you have a picture of the book on the left. We have our email on download your free guide. So it's pretty clear what we need to do here. Underneath that we have what you learnt. If you need more information, so you might not trust them right at the beginning. But you might need toe delve deeper to be reassured. The only thing I think could be improved on this website. Here is the text underneath the court elections in the bottom here, it says, by clicking You consent to receive culture on engagement communications from our That's fine. Now, when you're feeling the email and you click it, you might not see this tax on. It's also the low before direction. So the normal way Phyllis Out is your email. Click the button. Oh, I've just signed up for something I didn't really want on. There's no popped out. So here we see an example of how sometimes the business can conflict a little bit with interests off the user. 6. Familiarity: on expensive is familiarity. Now, when we're designing things designers love to create new things on, be innovative. But when you see something new for the first time, it takes a little world to understand what it is you're looking at here. So something like a button on a website, you don't really need to reinvent it all the time. You'll see things on dribble with his crazy animations, and they look beautiful, but they don't really get the job done any better. And normal button is Andi also. So when we're going through a website or an app on into face, it'll just tire is out. If we just have to keep on deciding, what is this new thing here? What is that? Is that a form? Or is this kind of some new crazy animation? There's things like material design that's Bean designed for a reason. So this is to standardize all of our Google's interfaces so you don't take any more kind of brain power up when you're going through their interfaces. He's like conventions, so just has when you're driving, a green light means go on. Our website at Hamburger on the strict three stripes will mean, this is a menu on. People have learned knees, so there's no need to reinvent the wheel here. This also makes it easer as a design as well. So when you're building an app or website, you have a kit, and you can just apply that kit to your design and you can concentrate on the really important things, which is the functionality. So it's better to be good than original somebody on the Internet, and I hope up sounds great, doesn't it? So let's take a look at this Australian magazine now where we come here. This all looks pretty easy to understand. Clear. I know that this is a menu here. Even though hamburger menus they've caused a controversy in UX design, some say that you don't need to hide all that information away on some say it cleans up very nicely to better understand what it is. But I think people have had time to understand that this is a menu now, so you can see how changing something into certainly a simple hamburger menu because contributions. So I click on here and we'll see the menu. Okay, great. Yeah, and you know, it happened and then X topsy means to close magnifying glass. That subsidy search something. Search here. And then the next hour here, I'm guessing that's from a scroll image along. Yeah, so everything's really clear and easy to understand here, Andi, we're sticking to conventions, even know this is a really beautiful website. Quite creative. It's still sticking to conventions. We know when that rolls over, okay, lets us know that's clickable. Scroll down to the bottom. Here, there's a form. So here's the form looks a little bit different from, ah, normal form. So maybe that just take me color milliseconds more to understand that this is a form when I've got here. That might not sound like much, but when you're being browsing the Web all day, or if you really want it to happen quickly, these are little kind of differences and forms gonna make a difference. So on. Then their text is aligned in the center, which is a bit different. So that's an extra load on my brain again. Milliseconds here. So let's fill in my name. That's nice. There's an auto fill, their a mom scanning around the bottom so the subscribe button hasn't got fine outline like swarms of top, so that gets kind of it. Lost their again. Nothing too bad there. But you can see when you stop breaking conventions, it just takes the user a little bit longer to figure out what's going on. So we have a little look at some animations on designs on Dribble, and I don't wanna decides to designers. I think the design it's fantastic, really slick on a lot of time. Or if it's going to these, but perhaps from a user ability quantities, perhaps they're not quite the right thing to do. So looking this one here when you press the button Teoh screen does take like, a fraction of a second too long, and you're bombarded with a lot going on. So imagine going to this app and using this app for a long time, and every time you click a button you have always animations going on. That's going to get really frustrating and tiring to use. This is an example of a really slick animation here on. I love the way all comes together. This really course was a lot going to this, but again, So just imagine that every time you click on a button. It just takes a second to load. And second doesn't sound like a long time, but when you're using an app, it really is on. It's gonna get very frustrating to the users clicking about it just takes a couple of seconds for these animations to look on. They don't really add much to the usability of our apart from making it just really cool. So there's always a balance to be made between having that little bit of extra personality to a design on going totally blown and annoying the user. Andi, this tiny but our nation is a nice example of similar dysfunctional tells the use of that, the systems thinking it's waiting on. Then it also gives you feedback and let you know when the job has been done on its activated. So it's not overbearing. It's not kind of trying to hard, and it's very functional, quite beautiful. 7. Delight: last principle is to light Group really is in the heart. Okay, so there's a reason why I'm a designer and not a comedian on you believe even get that reference. So when we're talking about the light, we're talking about icing on the cake on. You really don't want your pick to be all icing unless your meat when you're five years old . So let's talk about the icing on our interfaces now. These could be things that just make us think. Wow, they've gone the extra mile Look at the detail they put into this interface or well, that's just a tiny bit different, and it just sticks in your head on. It makes the whole experience really, really pleasurable to use now, making something pleasure to to use come just be essentially simple and straightforward and really intuitive. Or we can add some or quirky personality on. We can bring this in in a few different ways so we can bring this in in a small bit of animation that just does certainly time with different or another way will be introducing a bit of micro copy. That just is a little bit humorous. Andi makes us smile Another way could be using some really nice illustration. That certainly is a little bit different. What's going on a moment and just makes us think well, this site is really, really different. So when adding delight to your design, it should never get in the way of your design. On one thing I heard WAAS. It's a bit like a adding lipstick, so you will never add lipstick all over your face. You just had a tiny bit. That's what I would do anyway if I wore lipstick. 8. Summary: Principles of UX: so we're just about done now let's recap some of the things we just learned. So the first thing on full of the most important is that you should be designing for your users on about yourself. It's a little bit of, ah, mind change mind shift for younger designers because designs we want to do themselves what was cool. But you really have toe. Investigate your users needs and legs before you start designing. Now the 2nd 1 is a feedback. So what does this mean? So feed that means is your interface is going to react if you feedback when one of you indirectly it. So if you press the button, the color or maybe it could be older freed by. Or maybe it's just a bit of a couple now preferred one is I digestibility. So think of this as if you come to an interface. There's not too much just overwhelmed with choices, so there's a clear Iraqi and you know what you should be doing. That kind of leaves on clarity, So clarity is knowing exactly what you have to do with interface. What's the promise? Golden, Then the fifth is familiar reality. So again so the buttons should look like buttons form Cilla Black forms on manual about menus on There's no point trying to reinvent the wheel here on. We've got standards for a reason. You can still be creative without foot. Please keep in mind that don't we used to be thinking. What is that is at the bottom is are they just get border? Thanks. Now the last part is our delight. So this is just adding a little extra touch, a little magic that makes the use of smile and go the extra mile. So this could be a tiny bit of humor. Or it could be just something a simplest, their interface, app or website just work seamlessly. It's so perfect. So somebody use and therefore it's a joy to use all the time. Or it could be a little bit of humor when you send a message. I know mail chimp to a very good job This on. It can just be really nice illustration, So thes air six foundations off you eggs will help guide you through your work. Whether you're your news industry or your season of pro, it's always going to come back. Just reassess your work a little bit. So I really hope these will help your look in your work and help you to develop and have you. 9. Project: Principles of UX: so that's the boss and always left to do is to upload your product on your product. Will be It's really simple. Just upload some of your work on, then talk about how you reply with one arm or off principles of UX design. You might want to talk a little bit about how this helps there and user on the overall goal off your work. And also, please let me know if you want feedback, try and get back to you as quickly as possible. It's also a Pdf summary included, as well as an e book that covers the course and goes into a bit more debt. 10. Case Study: Okay, So we're gonna look a case of the here on. We'll look for our principles or used experience. I'm to see how they've applied. So you look at the mail, Tim website and maybe branded not to longer and changed them. Let's go back, Teoh Principal. So we go through the site one by one on Let's start with a design for you and yourself. So here, let's not right, you know, background. The main headline is all of your marketing tools in one place. So I guess the talk on democracy people grow your order's Fred campaigns Build your brand with Mel Change only one marketing platform. So they've done research into who they're talking to on. I guess they're speaking to marketing. I know they speak to a lot of before, but this is well, I can see straight off way. Gonna have what you can do it male chin. So double our features here. But your audience first, bring your friends for life. Okay. Rounding here created integrated campaigns dating. Okay. And then let's go down a marketing platform for your business. OK, so we're talking Teoh again marketers on and maybe business owners as well they say your business, that sounds, that could be a small business. And then we have e commerce. Mobile weather ups start Maybe some of the audiences start ups. Then whose fault? Down on we have have a quote from one of the users here. So photo on. Then, she says, with male chimps help. We've scaled our business mashing with one million members and counting on that's the owner off. So they've gone in and done research to find out who the user is, and they've taken coach them more auctions, new features against, like Low, the company said. These other companies that use them again, another really good example if they know exactly where users are right at the bottom. Cool direction. So that looks like it's really aimed at small companies. Start up perhaps the co founder here. So they're working directly with um so it looks like from Michaela gets smaller companies here your company's, but I do know of a big from this Web page. That's the impression I get. So that's cool. Next feat. Let's see. With this, you just speak back, so that's quite nice. If I roll over their head, the navigation it turns whites on these buttons as well. They change colors that lets me know is clickable. Lion appears here, and this is quite knows his well, for this expands for changes. Color on it also goes into old. It's look what happens in my search. So, you know, click. It's doing second results. Okay? And it's also highlighted the word email. So it's going to show me what I'm looking for. A highlight in the header and also the body takes was really useful. That's a good example off feedback there. And they've also left my surgery tops of money to search again. It's going really, really easy. Let's go back to the home page. That's nice. See? Okay. What comes out in the last topic on down. Okay, so there's a roll over there. There is. Well, okay, so what? This? That's interesting. So when I roll over a logo here, the rest fade out. So lets me know that I have chosen usually what they do that kind of highlight the one you rolling over. So this kind of feedback, it can't personally, it distracts me a little bit when I roll over, my eyes are on wear one click and I can see on film my field of vision. That's something else happening, which is a little bit strange. So, personally, I would prefer the highlights when I'm rolling over rather than fade back when I'm not distracted. At least I know that something's happening. Down gets clickable. Okay, there's not too much more to feedback on the X, really. Just a nice roll over estates on the search here. I think these rollers proved okay really quickly. Now let's look digestibility. So we get here on. Do we have a headline above explanation? A call to action Second Recall direction, which is not about it, just looks like a text link. So it's waken See the clear hierarchy they want you to click on Plan on, then a nice administration here. So this looks like it's really easy to understand this. There's not much that if you do want to learn more, it's his Normal is no explained. Alert one. So again, very short headline here your business is growing now want and then explanation down. We've got these nice chunks. Yeah, we got this animated GIF they helps explain again. It goes off into other segments to explain with details is nice for the feedback here. This animation direction, then this is really nice to see. This is there's nothing more than one paragraph on the page. Videos is changing the face. Something different case that this soul seems really nicely broken up. And then they change rhythm right and bottom. So it was wiped and then right at the bottom, they changed the yellow. Just to say that this is difficulty page on again, they could come back to the main messages on Sign Up. Let's see if there's any other parts of you that have love liteks. So I imagine our story company that texts that explain right that simple Our story had a blue that changed sections was different. Yeah, and so here we have a couple of paragraphs with this nice editorial tucked with job captain and a headline to power Grabs Image four paragraphs, title image. So even though this is ah longer than that article, it's really nice to, because everything program tonight. Short paragraphs tonight fight site size chunks here, so this feels really there's nothing that feels indigestible. Most digital feels like it's a nice size I want to read it the next. Let's see. Okay, Digestibility and then clarity. Okay, so we get here on is it clear what we have to do or what the sites all about? So the names, But male chimps. So obviously that has to do with email. And then we have a nice headline here. So it's pretty clear all of your marquees in one place grow your audience, create campaigns, build your brand Melchers only one marketing platform. So I guess it's a vibrating. I've always known Male chimp just sitting up e mails, Teoh lists of people. Um, how all this is that if you never heard of, So OK, so this is then they make it clear it's the start up of the kind of global benefits what they want to have this image of people. So I guess the people friendly company, and then they go direct into what you could do all the benefits here. These kind of broken down items way explain a bit more for what kind of business you're on . Okay, so this feels kind of pretty clear. Other top we've got. Why? Mel Chin, marketing platform overview. It feels, feels pretty straightforward. So if I have never, ever heard of a melting before, I think I guess what this is about pretty pretty easily. And then I know I can either sign up here. Logan Informant produces certainly picked a plan, but bigger plan is clearly what they want. Todo and it's nice how have highlighted this is their most recommended price, so you can see creamy in standard essential free that starts off the most expensive. So think where they've done that is, um, this'll makes the recommended the standard one look really, really cheap. Next the premium one. So if you really, really expensive one first, everything off that's gonna feel really cheap and honestly freeze the last one you get to. So they obviously want to push the paid once. Is it clear what you get? So introduction. We have our features, its table. It's quite a lot of this table have broken up down chunks. It makes it a little bit. And then this is a nice When you get back it after scroll all the way to the top of God, that feels good. It feels pretty clear, and then to make even clearly from 50 yards questions. So that was really good. OK, next. So familiar reality say, Let's go back home. Yes. So this is a bottle. This looks like a button. This looks like a link. This is a drop down. Has a narrow on If search. Obviously it's kind of a loop. Magnifying glass. Um, everything. It's pretty standard stuff. It's, um it's a really nice website, and it's brought to life with illustrations, but everything it's like, really familiar. So if you've ever used the Internet before, I think you have to use this website. Says Look. What? Sign up. Way go in you Manager Sin user Name Password. Um Yep. I needed people things. Password. It started. Okay, that's that's really standard form. Really easy on. There's not too much there won t notice here. They've taken out the logo or any other navigation to keep you focused on there. They don't want you going back. So which I will get back. OK, now that so Last one delight. So this is just the icing on a cake. What special things have they done? So I rolled over logo on. That's a lovely little indirection that that simple so monkey. Just start not. And then weeks. That's so that's gonna be a little smile to face, and it's not getting the way of anything. It's not distracted. Um, other ways. This brings the line simple. Doesn't look like too much administration. Still really nice, Really hand drawn. Really? Ganic Really human. So this doesn't look like a stock restriction. This looks think they definitely have this commission just for them again. These these illustrations are beautiful, but working very people orientated fun feels very different. That was very human. Vote Nice rounded. Sarah's lots of bracketing was really natural ministrations for breaks they've got next a mile. There's all the details in that, like tiny things like when you scroll down the logo stage. But the navigation goes. But then when you scroll back up, it comes on again for down for those interactions Really nice. It's a fade so it doesn't just cut out with roll over, and that fades in and out as well. That's not just a cup. That's not just going straight dark green. That's a fade. That said, these illustrations change. Yeah, so this has a nice amount delight in there. So does it feels like it's not just a template. There's a bit of love and care going to that. So hopefully this will be a really good example for you guys to see. And then maybe you could use some of these techniques in your works or whether that be having some customer illustration there writing some really concise copy there. There's another nice little thing. They do the Rollo. So when you highlight Texaco's and think just a genetically really straightforward that broken down to nice and chunks on, nothing's too different or crazy. No, that's about and you know that's down, but they still managed. So next job is how can you bring these things into your okay? Great. Thanks a lot.