Basics of Mobile UX: Design and Prototyping | Mustafa Kurtuldu | Skillshare

Basics of Mobile UX: Design and Prototyping

Mustafa Kurtuldu, Senior UX Designer @ Google

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (51m)
    • 1. Introduction

      1:06
    • 2. Mobile First Design

      4:50
    • 3. Designing for Affordance

      3:15
    • 4. Designing for Feedback

      2:39
    • 5. The Design Brief

      4:57
    • 6. Defining Metrics

      2:30
    • 7. User Journey

      6:20
    • 8. Creating a Storyboard

      8:19
    • 9. Designing the UI

      2:56
    • 10. Setting Up Sketch

      4:22
    • 11. Invision Craft

      3:29
    • 12. User Testing

      5:05
    • 13. Conclusion

      0:50
21 students are watching this class

About This Class

Want to know where to start with mobile UX design? In this class, we will be looking at breaking down a design brief, defining the underlying challenge, defining a metric to test against, creating a prototype and iterating on the process. From there we will prepare you for usability testing with real users. Throughout the class, you will learn techniques from Design Sprints methodology.

This class is geared to those who want to get a start in UX and have a basic framework to follow. 

Design files will be provided for you to follow along. I will be using Sketch and Invision, but I will do a review of prototyping tools.

You'll also learn:

  • How to redefine your design briefs creating a UX flow and user journey.
  • The basics of design thinking.
  • Rough and ready prototyping and usability testing.

Transcripts

1. Introduction : welcome to the basics of mobile UX design approach typing. My name is Mr For Designer Forget Google. And in this course, what we're going to do is look at all the steps that you can take to create application. Obviously you x field is vast, so we're not gonna be up to cover everything but I want to do is give you a very simple framework and steps that you can take to creating great experiences. So what we're going to cover is my first. You are Fordice's feedback with you. MCAT create flow in the text of the principles of people designs brains, design thinking methodologies all the way through the tools that you can use to create a prototype. Now, this course is ideally and beginner, maybe a graphic design and almost again, to you X or visual design. And I'm sure about float or process. Maybe you've designed an application, but you're still I'm sure about what to do to create a prototype. So this course is really ended. You so by the end of this course, you will feel confident about creating a prototype that you contest with real people. So I'm really looking forward to doing this course I hope your to. So let's follow. This framework creates a great user experiences 2. Mobile First Design: So before we begin, I just would like to say that you don't need anything for this and some of the other sessions that father this so you can sit back, relax if you want, you can take notes. There will be summaries at the end of each one of these videos, but for now, you can just sit back and just take in some of the things which we're going to discuss. So, firstly, let's look at Mobile first design Now. What is mobile First design now? The idea of Mobile first was first coined by Luke Wroblewski, who is a design director of Google. The idea is that way back when designers often designed for the largest green possible. Then, when they went down to say, like a laptop screen, they would condense the U Y without really adjusting or thinking about how it would fit in that screen. If you get Teoh tablets again, you'd see you. I just being squished rather than redesigned because it was an afterthought. And finally, for mobile, it was a mess. So with mobile first, what you do is you designed the mobile first expert, the experience first, so you start considering what's the most important things on screen was the most important quarter actions. What's the most important? U. Y So we have bottom navigation, which is quite common or navigation at the bottom of the screen, partly because for economics say, because people hold devices journey speaking their farmers at the bomb. So therefore they can actually navigate this like much more easier. Second reactions are quite commonly hidden away in a hamburger menu or like a navigational drop. So you have the mobile design. Then once you scale up, you could start adapting the you I. So in this instance, you could see the image now has been shift to the right. We still have bomb navigation because again, it's much more economic for these devices, which are handheld. Once we get to say the laptop screen, we adapt the you again. This time we're showing all the navigation. We have much more space for the content, but as previously, the original design had the navigation on the right and site again. Because of the limitations of space, we may allow more breathing space with a navigation to appear but completely across the bomb and finally, in this case, the largest widescreen design again, much more space for the text. Navigation is now aligned with the logo. And again you can see that the U. Y and the designs start to work because we're adapting the U Y for each screen size. And this is like a concept of mobile, first and responsive Web design as well. So marble first, what that does is it forces us to focus on the key features. Think about the main court or action and designed for economics. Because mobile experiences most users will wash experience APS and websites on Mobile First is quite important. There is a large market for this, so let's look at some comparisons. This is like Virgin Atlantic. What you can see is that when you're designing for a mobile first experience, the key features are always highlighted, as I mentioned before, So the most important things you can see is like someone making a booking, looking at their existing bookings, chicken and blogging it, and then some information about maybe the rewards programs that we have. That's the key things that they want the users to do when you translate to the desktop version of the site or in this case, the laptop brother. You could see that there are other than navigation. Why items? But still the key things are still highlighted. You can doom or as invisibly Seymour in an instance, but the main, most key things. That primary actions are still there and they still highlight. As a matter of fact, I usually find that the mobile versions off these sites are actually much more easier to use because the key things, the main features of Thea are really prominent. So that's basically what Mobile first really promotes. We take a complete, different type of psych. This is BBC sport again. Primary story. Really prominent secondary stories are much more smaller, naturally, but the interesting thing is the navigation. You still highlight maybe some of the most important or perhaps most commonly seen or used sections off the site or app. You demonstrate that there are other sections on the mobile experience, and search is much more condensed. But then, when you go to the laptop experience, there's much more space, much more navigation items visible, but you can see when you compare the laptop and mobile experience, what sections are highlighted and what are prominent. That's what you really want to focus on, really highlight in elevating the most prime reactions first and then having the second reactions. 2nd 1 last thing about mobile design in general is that there are different platforms that this is YouTube on Android and YouTube on the Web. It's always important to lean on the platform as much as possible. Where there are guidance such as the Material Design Guidelines, or IOS has, like its U Y guidance. Really look at those things Teoh use the existing U Y patterns that they have. You can see that there are there always be differences across different platforms that's fine and acceptable, So try and lean on the platform as much as possible. So just as a summary, always start with the mobile designs first. That will allow you to focus on the main key features and then finally, always think about the platform that you're designing for 3. Designing for Affordance: So if you looked at marble first designed. Now let's look at the informants and ask ourselves the very hard question. What makes a butternut butter, or what makes any item that were supposed to engage with making it inviting so that you can engage with their so it could be the handle of a kettle or maybe even a cup? It could be a lever for any kind of navigational device that is telling us. Look, this needs to go in this direction or this needs to be pressed. So ask yourselves what makes a button a button if you look at, say, common navigation cues in the world around us. So, like on elevators panel, the buttons will always be inviting. There will always be raised. There will be encouraging the use that this is what this is there to be interacted and engaged with and also be labeled correctly. So all of the floor numbers will be labeled next to it again, these accused to actually tell us what each button actually does when designing navigation items. You should always make sure that everything is uniforms, but then, with subtle differences so you could use iconography, you could use color to actually indicate that these are part of a family. But these some of these buttons do specific things. Maybe they will start recording. Maybe they will start switching a TV off, etcetera, etcetera. Furthermore, the functions should be clear is well, so maybe they're all the uniformed and round in this case of typewriter. But some of the red keys maybe removing certain elements. Maybe the different fun is being used by the different colors that bean incorporate. So you want to make sure that the functionality is actually clear. So in material design we have, which is Google's design, language and design guidelines. We have different you, I patterns. So from bottom navigation, which I mentioned earlier, you have tabs. You have what we call the fab, and there you can actually explore. The Material Girl applies to find out more about these different navigational patterns. There are many, and there's ration out for different ones, so you can explore that later on. But I just want to give an overview of how you can make a Ford insists a lot more straightforward, an easier when it comes to your so one thing to consider is high rocky mass. Using space, maybe height and size, often element to show that this is different from the rest of the page or at, and this is there to be engaged with. So you have an icon. You have that the font size is a much more boulder. It's much more larger than the rest of the copy. It's designed of enough space to indicate that this is something that's very different. So using hierarchy is a good way to actually show that you element is there to be engaged with. Likewise using color and shape toe indicate that this is something that should be tapped or clicked on is another way of doing things on like ways. In this example, you can see there are buttons on the page that can also possibly be engaged with as well. You can find out more about this from the material design guidelines material die out. So when designing for a Fordice's, you need to make sure the buttons are inviting. Maybe a drop shadow is maybe making them really big. Make the main main courter action as prominent the pages possible. You could do that by using slice and space to show hierarchy. But you can also use color and shape iconography to do this as well. So you really want toe? Encourage the user and inform them as quickly as possible that this is the main quarter action to make anything that they need to tap or click on. And that's what designing for four this is all about. 4. Designing for Feedback: so we've spoken about afford Ince's. Now let's talk about the feedback. So in the real world, we have luxuries of a button. When it's pressed, there'll be a click. There might be a taps on your keyboard or perhaps on the elevator. Something lights up. Or like when you're boiling water in a cattle, you hear the clicks and the sounds. And we have all these feedback mechanisms, which tell us that the action that we've triggered has taken place on digital screens. We don't really have those current of afford Ince's that remind us that some exactly happened. There isn't that feedback. So you see a button. It's quite big. It's really prominent. You press it and then you wait for an actual action to take place. But then frustration sets in because you're not sure what's happening if anything's happened, or if the button has received your your action, so you start getting really frustrated. Then you might engage with the button again. But what happens is in some cases, especially on the Web, if you submit the button again, the form resets from the beginning, so then you're just re triggering. We're restarting the whole action from the start, so you're waiting even longer. And this is because there hasn't been any kind of mechanism to feedback to the user that the action that have triggered has been received. So there are different you y elements that you can use to actually indicate feedback. So hover states or active states, so have a stage. When you roll over an element that changes color, perhaps size, and the active state might be there, it permanently changes like a radio button has a tick that shows that this is now active or working. We also have ripple effects so you can have its animation that appears where the user touches on the screen or clicks. Just to show that, yes, we've received your action and its in flight. And then you may have other you elements, which refers to the use of something that's actually going on responsive motion. When they use the taps and element, the whole thing animates and shows that the area that they've tapped on is now the focus in the U. Y. This also can help show like a loading state to have reform, reaffirm to the user that something is going on and it's about to actually load. So when thinking about feedback, you want to make sure that your reassuring the user that something has happened you wanna use ripple, hover and active effects toe again reaffirm that something is going on. And finally, you want to think about touching. Click, because they are different. There are many devices which working with keyboards, especially like tablets. So you have to think about how things work on from a touch perspective and a quick, even mobile devices, which can connect a keyboard as well. So you need to take all these things into consideration, even if you're just designing for mobile devices. Or in this case, we're just designing a mobile app. So that's designing for feedback. Think about that. Think about designing for A, for instance, that how these both work together 5. The Design Brief: so, up until now, I've just been speaking about the principles or some principles of marble. You excellent. Think about my bar first, afford instant feedback. Now we're gonna get into the design brief. So for this, you can use no pad pen or stickies because we're going to be going through, like breaking down the design brief into a by size challenge. So what commonly happens is you get a design brief and they could be really overwhelming. Where do you start? Would you focus on how do you stop features creeping in? But it's quite common for, like maybe a Klein or product manager, or maybe other people in the organization that you working will suddenly say Right. We need to do this feature in that feature, and it can be really hard to design in real time. So taking the design brief and breaking it down into like actionable challenges makes it easier for you to focus on key elements in key areas and then, like Iran. If you need to focus on other features, then you can create prototypes for them and actually test them separately. So we have a thing. Owners design thinking, and that's basically taking the principles of design and applying them into a manageable process. So we have this thing known as a double diamond. It was invented by the British Design Council. And the idea is, whenever you're creating something, you go for a discovery face to begin with. Then you define the problem into maybe a mathematical brief. Then you develop the idea, and then you actually deliver it. So you have this convergent, divergent thinking they expand upon, then contract expanding and contract for the purpose of this course, we only really could be focusing on the second part of this because we're not gonna be really going to use a research and studying the product that we want to design. But it's still worth understanding these different steps when you're actually redefining a brief. So the up we're going to design is like coffee on the go. And the idea is that imagine you're out on the street. You really fancy a cappuccino. You open the app, you press tap and then a coffee is delivered to you. It's a bit like the right sharing APS that you get, or perhaps the delivery food services. But when you're out and about, and this is quite a big briefing. When it comes to creating a prototype, we could go for so many different. For those we could think about boarding, we could think about signing up. We could think about the actual process of buying the coffee, about how people go through payments. There's so many different aspects and features of this, and that could be really overwhelming. And generally speaking, when you're designing a prototype, you only really want to focus on a specific flow. To do that, we need to actually break that brief down into, like a manageable challenge to help us break down the brief. We shouldn't create a challenge. Statement now Challenge Statement Helps us Focus on the problem on helps us have a clear goal off the problem that we're trying to solve because you could do many different features inside of an application. But we wanna have focus. So an example of that was say, you want to design the on boarding process of your app. That could be your challenge. So that's what you focus on. You don't think about the payments and all these other things you just think about the on boarding process. So the prototype that you create, it's simply about on boarding again. You never One could be redesigning the order menu of your that every food up. Or perhaps you could be looking at different ways of discovering products and e commerce up . Whatever it is you. What you're trying to do is focus on the keen pain point that you're trying to solve for your users. So in this case, we're gonna have a rough challenge, and then we're gonna literate on it. So we want to design a coffee system that seems quite brought. But let's just go with that for now. The next What sources? Deliverable. It's like, OK, prototype that lets us order a coffee. So if we look on from that well, really, what you want to do is make the challenge statement to be quite aspirational. So it's like this design at the life for coffee ordering system that lets users order on the go. So what we're doing is we're focusing on the ordering aspect of it. We're not thinking about sign ups were not thinking about the on boarding or settings, pages or anything like that that we're thinking about specifically the ordering system, I watched the deliverable, a prototype that lets users order a coffee and choose a delivery location. Now those two things could possibly even broken down into two separate challenges. But for the sake of this, we want to create a prototype that will allow users toe, select a coffee and then choose where they want it to be delivered. And I think there will be a nice person like that. We can then go and test with real people. Breaking down the brief is about taking a problem and looking at in a bite sized fashion. It's about creating an inspiring challenge and having a world to find deliverable. So in our case, a prototype that allows us toe test people buying coffee on the go. I can't stress how important it is to have focused when creating a prototype. You don't want to have too many challenges in too many features being designed in something that you're testing because it becomes very tedious to fix afterwards. Another thing for for reading is worth checking out. Google design sprints Google design Sprint is the design thinking framework that we use for creating products there many different techniques and many different methodologies and things you can do when designing your products. I do really recommend checking that out. For now. We have our design challenge. Next, we want to move on toe the next phase of this by defining a metric that we can use the test whether we fulfilled our design challenge. No. 6. Defining Metrics: So now let's look at defining the metrics. Now what other metrics basically is about the finance success you could have? Great, you y and a great inspiring challenge. But how do you know you've actually bean successful in your project? So we want to get freaky things. The 1st 1 is the goal. When you create your prototype, what is it that you want to use is to do? In this example, we're saying users to start using express check out. So imagine an e commerce site that has a buying out button. We want users to actually go and fulfill that float. Next is that What's the signal? How do we know that users have reached this girl? Well, you say uses tap or click by now. So then that will actually show that the users are doing or fulfilling the goal that we've created. And the way we check to see that it's actually happened is we see the proportion of clicks for by now, go up on that and more importantly, resulting checkouts because people could pick by now but not fulfill that. So you want to make sure that the metrics that you're creating actually fulfill of specific purpose. Otherwise, the prototype has no meaning. So you really want to create great metric to see the success of your project. So the coffee on the go, the app we're actually creating what the metrics were that? Well, the first thing is we want to do you want to get users to order coffee on the go when they're out and about the second thing is, what's the signal? Well, the user selects a coffee and then orders it, so that's quite a clear signal that they've actually completed the task. And how do we know that it's being improved upon? Well, the number of completed orders so users could select a coffee but not completely order. So then that would be a failure in the prototype. So having these metrics at least has a gold for us toe painful when creating a prototype. So then we come to testing. We have, like, a clear vision of what it is that we're actually testing. Remember, when designing acts is very easy to fall into the trap off, having all these amazing looking your way without and completely forgetting the flow on the purpose of why the app actually exists in the first place. So again, we want to make sure that we have a nice goal. What would they use want to do? We want to make sure we have a good signal. How do we know that the user was successful in Argo? And finally, how do we measure that? So we want to make sure that all three of these things are present when we're actually creating approach type. So, as a matter of fact, what I like to do is write these down on a sticky note piece of paper and have that president all times and also the same with the challenge that we always make sure that these things are there and visible in front of us. So every time we're designing, we can refer back to this to make sure. Are we fulfilling our gold signal on metric? It's really important that you have focused on The whole purpose of this course is really about having focus 7. User Journey: In this next session, we're going to be looking at user journeys and mapping out the use of flow. So for this you'll need a pen paper. If you have stickies, that's great, but it's not necessary. But having that tactile sticking out paperwork and move things around is really, really good. So just to recap, what we want to write down is our challenge and our deliverable. So if you're following along exactly as I'm doing, then you can write these down. Or maybe it's array on the challenge and deliverable. If you're actually designing something completely different, that's fine, so long as we're falling for the same process. So if you want to write down, the challenge is we want to design a delightful coffee ordering system there lets users order on the go on. Deliverable is a prototype that allows users to what a coffee and choose a delivery location. So we have an inspiring challenge, and we have a very specific deliverable of what is that we want to create. Next. We want to talk about the metrics. So remember the goal, the girl lister allowing users to order coffee. That's the key thing here. Next How do we know that we fulfilled that goal? Is the signal A user selects coffee and orders it. And finally, the metric when we're testing with users with our prototype, how do we know were successful while the number of completed orders, If all of the users that we test with completely orders then we know that the prototype works on that the flow is successful. So we want to map out the user journey. We've looked at our challenge are deliverable on our metrics. Now we need to see what the flow is. So I'm thinking, as this is a coffee ordering system, what kind of things can we take inspiration from in the real world? So we have coffee machines. So this will be like if we were to be inspired by a coffee machine style flow. Then how would we do that? Well, the user opens up their phone and they open up. The app was the first thing you do in a coffee machine. Well, you make a payment because remember, you put a coin in, or maybe credit card or debit card. That's the first thing you do before the machine will accept anything right. Next user chooses the coffee that they want. So maybe it's a cappuccino. Maybe a lot. The next thing they do is they customize the coffee. So perhaps they will add milk, sugar, extra cream or whatever. In the actual flow, the next step would be they choose their location. You've customizing coffee you're choosing. Where do you want it to be delivered? Do you want it to be delivered where you are? You want to be delivered somewhere else? Perhaps. And then you order the actual coffee. The way to think about this is every time you write something down and sticking a piece of paper is like a step in the flow. So the first part would be one part of the interface. So you may be like make a payment. Could be a really big prominent burn. Someone taps it. They had their credit card details, and then then they can go on to order things. So when you're actually designing the U. Y, you can look at this as like a high level overview off the steps and flowers that you can take. Now this is a coffee machine style. It doesn't actually feel particularly right, but still having this idea on the boards just for a starting point and can help us. Galbrain going. And I just think about all the different ways that we could tackle the same problem. So now we want to look at a simple order flow. So how would you buy something on e commerce site and use that as inspiration? We've looked at a coffee machine. Let's, like, see other ways of doing this. So user opens a coffee menu, use the customizes, the coffee that they've chosen. They might have something. The car in the same way you would only e commerce site. You choose your location and then you make a payment. Now, this is very similar on very standard. When you actually buying something online, it still doesn't feel right. There's still things I think we could possibly flip or maybe make something a bit more interesting on inspiration that I'm taking from, I suppose, is like ride sharing APS like my taxi uber left etcetera. So let's flip the actual experience with way I'd like to design. This is the first thing the user does it select their location. Why? Well, imagine if you walk into the bus stop. You may want the coffee to be the livid at the bus stop because you know it's gonna take you 10 minutes to walk there. If I do my select my location of where I wanted to be delivered than that's like a starting point, because I might not I might be on the go. I don't want to be sitting around waiting for the coffee to find me. I'd rather it go to a specific place the next. I might choose coffee from the actual menu. So what is it that I want? Cough, Lotta cappuccino, Whatever. Next I want to customize it. So doing more milk, less milk or hot when you be cold toe on ice in, etcetera, etcetera. Then I want to choose the payment methods. So I'm actually selecting how I want to pay for this. I might have multiple cards. I might have one I might want to pay soon Is that the delivery person comes along. Then I order the actual coffee, and then I get a confirmation. So this is much more of a complete user journey. Remember, the confirmation is quite important because this is like the feedback to the user now up into an hour, spoken about feedback from a you white perspective, but there many different ways off actually responding to the user and reassuring them that what they've done has actually gone through. So thank you know, confirmation is really important in this case. So if you want to write that same flow down, then by all means do so you can pause the video at this point. Or, if you want, actually reiterate on this again. Maybe you think there'll be a better flow then please, by all means do that. This course is really about you thinking through the process and using them as tools at every single step of the way. So to recap, you want to review our metrics and our challenges and everything that we've been doing up until now to make sure that we're actually fulfilling the things that we said we're going to fulfill. We want to think about the steps that user takes and try at many different ones. Don't just go with the first thing that comes to mind, because that may not be the correcting for your product or for your users. Map out the flow monitory. So this is why sticky notes are really great. Because you can move things around. There may be different steps that you think actually are really important. So the check out the order, the confirmation, but the way they use it gets there, you may want to change around on. That's perfectly fine. You want to reiterate the flows much of possible now because the moment you start drawing an interest that actually creating you, I you start committing Teoh actual the designs. And it's really hard to take a step back once you get to that point, because you've committed doing work, and it's hard to throw it away afterwards. Although we should always iterating whenever we're designing, so reveal your stuff. It's right on the flow, by all means. If you would like to reiterate more on the flow that I've presented, that's perfectly fine again. It's all about the process and all the steps that you can take to create a great user experience for users 8. Creating a Storyboard: Now we want to create the storyboard and the rough and ready prototype. So in this, we're gonna be drawing out all the you I looking at the most important parts of the flow and basically create something that we could actually test with real people on. We're gonna come toe the testing part towards the end of this session. Now let's go and make an actual rough and ready prototype. So now we're looking at creating a rough and ready prototype on looking at this story Ward and flow. For this, we're gonna need some our equipment if you've got stickies or like paper pens, anything that you can use to actually grow really simple. You I So also, some felt tips and sharpies will be really good as well. Eso you can actually call the buttons and make them quite distinct. So what we're going to do is create the basic u. Y and a rough and ready approach type. So if you've never seen a rep from early prototype, basically what that is is a prototype made from paper that you actually going to use in a real test. So the first thing we're gonna look at a step zero. So if you remember the flow that we actually working on so a user opens the app, I've also created a template of an actual phone that we're going to use is the basis. So this is the device. So when you're running up setting up a test, you're just saying that the user that you're testing with say, Look, this is the device. This is the first step. We're going to run for a float and then slowly but surely you start presenting different you why? And as they tap different parts of it, you can change the screens as we continue. So the next step will be obviously steps one. So user selects their location if you remember this in the flow. So what I've designed here is a basic map. You can see it says coffee on the go This I've just done like a little characters where you are. You could just roughly see the map here, have a little coffee pods. I imagine it's like coffee people on the go, so you can actually look at the closest coffee delivery people around you. What we've done is because we were making a referee Ready? Prototype. We won't punt someone to actually follow the fruits. And I'm presenting this to a person. That's okay. Do something. And then I just follow him. So I've made the destination input here, like, quite interactive looking. So a person will press there And then I had the next bit of you. Why? So this is like current location and home office. The current location is much more active, so and its colorful. So it's indicating that Perfect. Just tap this next. So we kept So we tap current location. So now he uses tapped current location. What's the next step? Wealthy Usual after choose their coffee. So I'm just gonna put this if I just move this year, it's great. And now we have the coffee menu. So you can just about see here I've made it really like on purpose. This is continue because we want someone to actually add a coffee. I am first we caught cappuccino and last day on the back menu here. So if someone wants to go back to and change where the location is that they can just tap here, these two look very interactive. So let's say I press cappuccino. I can't continue because nothing is selected. So if I press that, then I'll update the why like that secrecy. One items being at it to my cart and then I'll flip over and you can see the continue button like that. So as someone's actually following through your changing the U. Y. And you're actually trying to see if the foot performances that we spoke about earlier work so again we're actually really highlighting the elements that were on the person to actually follow through. Then we go on to the next step, step free, who want the use of the customized. So I'm just gonna move this. You? Why? So someone's press continued, and now they can actually customize their coffee. So we have sugar, vanilla and a few other items. I just wantedto see what other things that we get out also have added like a delete button here because you may want to actually remove an item. But for the sake of this prototype, we're not going to do that. But I just want to see you why they're so I can think about the afford Ince's so I don't want to add sugar I don't have anything there. I just want to press by now. Now thinking retrospectively. The fact that barring now I'm not really sure that really works here, because the next step is our payments or choosing our payment method. So maybe we should really update that Teoh payment methods like Iran. But once I get to sketch in the actual graphics back application, that's when I actually do that. They're so now step for will be choose the payment method. And then we actually have New York updating. So a person's chose their coffee cappuccino. They haven't added anything custom to it, but what we do have now is like a list of payment methods. Do I want to use MasterCard Visa? I might want to pay in cash. That's like a possibility. I was just thinking aloud the features. You might want to add new cards, but for the sake of this paper prototype, I didn't want to highlight these elements at all. I want to just highlight the choice of the credit cards because if I'm testing this with someone, I don't want them to go off on this prototype. Remember like the goal that we said in the beginning is we want someone to go through a payment that really quickly. So we might actually set up another challenge and another design prototype just looking at payment methods, because that's like a flow within itself. But for now, we're just thinking about a specific one, and in this case, MasterCard. As you can see, the continue button is no highlight here because we haven't selected paint method. So we can't allow the user to continue until they've actually chosen something. So we choose that radio button is now active, and now, as a result, our continue button works. So when you actually getting the user to follow this fruit and actually go for this, you're actually making the thing interactive. You're making the prototype. Azriel is possible on your phone and see if they're actually doing things. And again, you're focusing on the main You Why the main key features so that person can continue on in the next steps. We have two more steps Step five, which is basically our order review. So here you see cappuccino, no sugar and edit button. If you want to change it. The MasterCard payment method again, and I edit button. The total $3 the order review title with the back button we have that we've had that for out on by now. So we pressed by now and then, we have the final step, which is Step six and the confirmation again, going back to what we're talking about feedback. We want to make sure that we re firm to the user and reassure them that something's actually happened again. We couldn't possibly do some more here. Maybe we could see track the order every in order again as a band. But it's not that pretty prominent, because remember, the goal was to get someone through the payment method or ordering something. So this is a paper prototype. You can actually use this a test with real people so you could show them the device. You ask them to follow through the actual flow, and then as they press buttons, you can change the screens and then also get them to speak aloud what they're thinking. So if they see a button to get them, say, right now, I see a buy now button. I'm going to press the buy now. Button, etcetera, etcetera is a bit weird to begin with, but it allows you to hear what they're thinking. So this is great for just like your insanity when designing something, seeing the flow. And it's also great for actually creating the prototype that you can use a test with real people. It's a December rice when creating a story board we want to do is you want to draw some really simple sketches for every step of the flow that we've round stickies, and you want to make a rough and ready prototype to test your flow, preferably with real people. But it's always good to just do it for your insanity so you can actually see if a flow actually makes logical sense. And you haven't committed to using a design application. So it's easy to just move things around. And finally, if you're testing with a real person getting, speak aloud what they see. So if you're seeing the map in space, which I showed you say, would you see? Would you think you need to do next? And then, as they pressing the buttons and you're moving and changing the screens, you can actually hear what they're thinking aloud. So I really recommend rough and ready approach sites, even just for yourself, but preferably when you test with real people as well. 9. Designing the UI: Now we're gonna start designing you. Why? But I like to introduce you all the tools we're going to use in this session. We're gonna specifically focus on sketch. But I'd like to introduce you to sketch app envision and a plug in court craft. So let's go and look at those tools right now. So I'd like to talk about the tools that we're going to use for creating our high fidelity to prototype. So the 1st 1 is sketch sketch is going to be the you white design tool that we use and you can download free from here if you go to sketch out dot com and this will be like where we do all of our u I the next tour we're going to use. Envision. So this is my project I haven't created. Think yet. So you conceptual envision account for free. So if you go to envision at dot com and you can set up an account there again, it's completely free on finally craft craft is a plugging for sketch that connects, envision and sketch together. So sketch will be like the single screens that you design envisions going to be the thing that allows you to interact with all of them. Craft is going to allow you to connect each page together. It might not make sense in a minute, but once we start getting into designing the app, you'll understand a bit more. Okay, so this is sketch. If you've never seen it before, it can be a bit odd looking, especially if you're used to like the adobe sweet applications. So on the left hand side, we have like, where are layers are sitting and also symbols, pages, etcetera On the right. Insiders are properties menu. So if you want to add something, say, I just want to shape I had a square and then say, If I want a circle, then you start seeing the shakes mumbo up if you want. If you're really into illustrator, the cool thing about sketches you can just grab two elements on then say join them together and it's really simple to manipulate. Still, while the vector hasn't been flattened, you can still edit the different elements, but they want you select it, you can flatten the item and then you have this very odd looking shape. So but what we want to do is look at creating outboard, so the or board is basically our canvas. For I just select mobile. Then we have a very standard mobile template that we can use and start basing off designs off. Obviously, the shape is still here. We can even go one step further and we're there. I'll accept templates in sketch. So if we select save them from the material design template. I mean, Rus android icon design, etcetera from material design is a really rich template. Has all of, or quite a lot of the u. Y from the mature design guidelines that you can drag and drop so you can create a high fidelity prototype that looks really real with you y which is consistent with android and the materials on guidelines. Obviously, when I'm gonna be designing all these screens, so I just want to grab the mobile templates. So if I was just select that, copy it by Apple C and then go back into my sketch for our apple V. So now I have a device template that you can actually use to start designing off. Obviously, this isn't a sketch course, so I'm not gonna go for every element of sketch. But I just want to start showing you the set up off our files. I'm gonna create the designs and in the next session, arm actually going to start piecing all of the screens from our paper prototype and make it look like a riel ready to use prototype. That's quite high fidelity. 10. Setting Up Sketch: So we're back in sketch again. What I've done is I've broken down each one off paper prototype states or steps into their own art board and sketch. So that's that one step to away to step eight. You probably thinking we didn't have a steps. Well, every time a user has an interaction, we want to break that down to two separate states. So if you remember when they were selecting the payment method on the DE selected, so you can't continue to someone has actually tap something. Once you've tapped it, you move on to the actual fully continue herbal state. So each step needs its own state in the actual prototype. So when we're actually creating this in the envision, you need to protect that into consideration as well the actual final design that I've got. You could see there some red lines that that's just simply the guidelines to make sure that everything is consistent. So we have the logo. We have coffee delivery people waiting to take our order. We've got actual user on an input field that someone taps. Someone taps that they get the current location that could select that they can choose from the many of the different types of coffee again, we can't continue until they have. Now that they have, they can continue their moving on. They can customise in this prototype, we're not going to customize, so use it can continue. Then they choose the pain method again. They can't continue until they actually select something. So we select Master MasterCard on, then we can review the order and then finally, someone can actually buy. So I've also added edit buttons as we did before in this flow. They're not gonna do anything, but you could possibly make them do something in another prototype again, we want to make sure that the flow that we're focusing on is very clear. So that's all about focus. Otherwise, what could happen is you could end up making the prototype of a lot more complicated and confusing later on, so that could be a floor than itself. So a user taps by now and then finally there on the confirmation page. Now, one thing I've added that was slightly separate from our confirmation originally was the map because I wanted the user to see the coffee being delivered to them again. This is all about feedback, reassuring the user like just having text on his own. A user wants to see what the status is on. Be updated every step of the way. So, yeah, that's the actual design that we have. Now let's create the prototype. But before we do, I just want to quickly jump in and talk about icons. So these are the icons that have been creating, Generally speaking, when I'm creating icons or any kind of creative elements in Sketch Wilder's, I'll create separate fall iterating exploring there and then go back into the final your wife older. This at least gives me a sandbox to play without adding too many elements to the final layer. So again, what you can see here, I've made the different coffee shapes once more thing I wanted to bring up with masking sketch. If you're more familiar toe adobe type software, which a lot of graphic designers will be masking and sketches a bit weird in that typically Photoshopped illustrate etcetera. The masks starts from the top, and then everything inside of a folder or containing element will be masked in sketches, the reversed. So if you want to make him ask you right click and then you select mask and then everything above it will be masked. The everything is you want to make sure when you are creating your mosque that you contain them into a folder. Otherwise, anything that's above this mask more be Marceau. The whole page could end up. You must buy this simple thing. But building up shaped is really simple. If, say, I want to recreate the lot a shape, I'll just make two rectangles copy paste that to make that smaller. If I double click, bring points in to bring that point in again the same thing. Bring that point in putting that point in. And then maybe I might make that it shorter and select both items to create a union. And then that's the shape I want to get rid of the border. And one thing to point out when you combine shapes together in sketch, they actually still you're still able to a minute collecting evidence. That's really cool. Feature. Once you're happy, so safe, I want to actually move this up a bit or just with the arrow keys moving up and then once I'm happy. So I'm happy with that shape. I just create flat or tap on, flattered, and then it becomes its own vector. So I just want to bring that up in sketch this off course things and features that you can explore. What? Iran. But yeah, one thing. Always make sure of masks that always trips me up. So let's go back into the U I sketch fall and stop building the prototype. 11. Invision Craft : so back to our designs and that unless make the click through prototype, so you should have installed the craft plug in. So it should be here, says Total craft. That's the actual Croft properties, which will see here if you haven't simply go to envision app dot com slash craft down out the plug in get it installed you can see in my InVision project nothing's been created yet . So if you go back into sketch, if I select an element that I want to tap, so when the users open the prototype, they can actually taps a destination. So if I press see, then you can see this highlight arrow. And if I click the prototype that we want to go do so is linked to screen click gesture, Yes, ad link. So now when the user taps destination, they'll go jump straight to the screen. Next. I want to say change location. I'm just gonna select this entire element again. I'm gonna press, see, and I'm going to move on to the next item. So again, link the screen gesture, click, ad link. Once that's actually done, I'm just going to quickly save what I'm gonna do is also I'm going to zoom out and I'm going to select all of my art boards. Now, this is where things could get a bit messy and sketch if you have too many art boards which are not really connected. Some people like to break these down into separate pages. So this is a one page. So now that we don't need the roofs anymore, we could do that. But just for the sake of making this birthday is gonna even here. So with all of my art boards selected, I'm gonna click the upload button to upload to envision. Now, we haven't got an existing prototype created, so let's actually create one. So I'm just gonna call this coffee or coffee on the go create new prototype. I want this to be an android phone, and I'm going to talk to publish now that's going to upload. So if I now you'll see the ucr commodification here. But I could just tap on to there and then we should jump straight into a prototype. So these all of the steps steps one all the way. Teoh nine just wait for its load. I just get a few screen you'll see the prototype has loaded, so it's in and android phone. So if I just tap anywhere, what you notice is envision will actually highlight where the user should actually tap or click on. So if we tap there, then you see that this is the current location. So it's OK and I tap on current location and then you can actually see the coffee menu is that I can't go back. Can't go forward because we haven't linked up the other elements off the actual prototype. If I jumped back into sketch and say I want to allow the used to go back, I'm just gonna double click, Select the arrow press, see at the link and let's update the prototypes of his update in this our board. And then if we go back, my press refresh, then you can see I can go back again. So now you can actually start seeing the prototype being built up from the ground up. If I go back into the actual invasion project, let me just refresh this page. You could see my prototypes in here and all of the screens, so from that from their own, and you can actually start building up your prototype and then eventually, once you actually have something that you want to use, you can say going to the actual screen and then share. Anybody want to share the approach type, maybe make public link etcetera, and from that point on, you can actually start creating something that could be tested with real people, and it's that simple. 12. User Testing: Now it's time to actually test a prototype. A usability test is all about coming off the questions that you want to ask on making sure that you're fulfilling the metrics that you set out with making sure that the challenges right, making sure that the deliverable is correct. And this is where it all comes together. So any usability test, typically the way we do it Google with, like our design Sprint methodology is, well, test with five participants. We have a script that we follow, and then we get the users to speak aloud as they actually do it. So if you remember going back to the radium rough, rough and ready prototype that I spoke about earlier, we're following the same kind of principles here as well. So you always make sure the script is the same because of the ways that the test variants are different than you'll get mixed results and will be incorrect. So you always make sure you have a script that you actually get the users to follow the script you ever set up, so the first thing you do is you explain to the use of where they are so in our case will say to the user, You've installed this app. You've had it on your phone for ages. It's about ordering coffee on. What you're going to do is you're going to try and order coffee and get it delivered to yourself. So that's the set up. So then you get then you pass over that device and then you say, Okay, I'd like you to order a coffee, so that's the task. So if this is a different type of act, you're basically trying to list out what is the task. And for this you'll revert back to your metrics. Remember what your goal Waas. That's what the tasks will be made up off next. You actually observe how they do, and then you take notes. Typically in a usability test, you have two people, one person who's building the report with the user and asking the questions and the other person just taking notes. The reason for this is, is when you're building up a report you want toe. Really? Make sure you have eye contact with the person you want to make sure that you're building up a good relationship. If you're taking notes, there's a high chance that you actually miss really important things and so that you have the note taker. For that reason, if you've got other teammates who were involved in your design, you don't want to overwhelm the people you're testings. Or maybe you might have a video conference call, so they're observing from another room again. This is very common in design sprints when you have a whole team of people building a prototype together. And finally, once the person is actually done with the test, you might follow up with feedback question. So you might ask what worked for you? What didn't a common open question. What worked for you because you want to get really into their head. But what were the things that were successful for them? Didn't make sense on get as much for you back as possible, Remembering that users thinking analog on they may not think in the digital way. So there's a common core quote by Henry Ford, where attribute in before. It's not proven that Liz him, but it will say he will say, if I will ask people what they wanted, they would have said faster horses, and this is often used as a term to say, Don't ever ask the users. But if you actually look at the questions, if I ask people what they wanted, they would have said faster horses. What the people actually trying to tell you is they want to go faster. So sometimes when a user is articulating something, they won't be as clear. If I want X feature a wife feature, they'll be talking about the experience that they actually want. And that's what you're trying to pull apart from when you have open questions and everything is like, Would you use this product? Is this useful for them? And then why is that or why isn't that the case? You really want to understand what was good about this and what isn't, and it gives the person some time to actually talk. This fruit again is all a listening exercise. You want to try and keep this as open as possible. And finally, you might say, if you had a magic wand could wish for anything. What would it be? See, you're allowing the user to go wild and think what was the perfect scenario again? They will be speaking in Anna Look So you're trying to pull apart what they actually really mean. You may question it. You may want to refer back to it later again. These are open questions just to really understand where the user is that again, there isn't any golden rules of questions. You basically have to design the script and the questions you ask based on your approach. Type in your design. But basically think about the task that you want the user to fulfill, and other things that you could basically tease out on. Really ask yourself. What is it that you're trying to learn? I never quite a common question. Is this five people really enough that Google? We hear ways use five people. Five People give you enough variation any more than this, and you'll see repeat results. You can do, say, 10 20 if you really like, but you won't learn anything more. Really, you might have a small things here and there, but generally speaking, five is enough to have different variations. But of course, this is down to you and your team. If you'll feel more comfortable interview more people by all means do on just to summarize fine five users that you contest with. Generally speaking, people use the products. It's OK to ask friends and family, but when you're actually moving onto riel products in the real world, you want to try informing the type of users that you actually are aiming for. So if you have a specific user group, try and find people in that category because that you will get true answers in that respect , write a script for them to follow. So remember your metric in your goal. What is it that you're trying to actually get them to do and follow through the tasks? And then I asked them what worked and what didn't and document that in the notes haven't open conversation with them, allow them to express their opinion. And with that, you should be in a great place to actually test your prototype effectively and get some great results. 13. Conclusion: So congratulations. We've reached the end of this course. I hope you've enjoyed taking part. As I've enjoyed teaching, we've covered so much and there's so much more to learn. But if you think about like a summary recap, we've looked at marble first with you Are you Fordice's? We've looked at the flow rough really prototyping sketch envisioned craft and usability testing. We've done so much, and you should be really proud of yourself to get fruit. This much information in such a short amount of time, there's still water land. I'm sure you'll have really nice, prosperous careers. Discovering UX design on the field In general, please do share the work you created and please do comment is really great to have this conversation. So we get a loan from each other. That's what the community is all about. I really poured the senior designed your reiterations and I hope you enjoy this. So thank you so much for participating