Designing for the Future: UI/UX Prototyping | Patricia Reiners | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Designing for the Future: UI/UX Prototyping

teacher avatar Patricia Reiners, UX/UI Designer // Innovation //

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Trailer

      1:54

    • 2.

      Class & Project Overview

      2:16

    • 3.

      The Design Process

      3:58

    • 4.

      Task: Ideation in your Kitchen

      1:40

    • 5.

      Watch Me Work: Ideation

      4:30

    • 6.

      What is Prototyping?

      2:23

    • 7.

      Examples of Prototyping

      0:55

    • 8.

      Analog Prototyping methods

      7:06

    • 9.

      Task: Paper Prototyping

      2:40

    • 10.

      Work With Me: Paper Prototyping

      4:47

    • 11.

      Adobe Xd: Digital Wireframing

      8:10

    • 12.

      Adobe Xd: Analog Wireframing

      3:43

    • 13.

      Preparing User Testing

      5:08

    • 14.

      Final Thoughts: Takeaways & Tips

      2:02

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

6,895

Students

12

Projects

About This Class

Prototyping is a core skill in user experience design that is a powerful approach for all designers and creatives. 

In this class, you'll learn the fundamentals of prototyping to redesigning how something works for more fluid usability. We'll cover everything you need to know about how to prototype your ideas and guide you to create your first UX (user experience) project right in the center of your own home, which if of course, your kitchen!

In a nutshell, prototyping is all about designing a great user experience by testing out your ideas. As we cover the key concepts and best practices, you'll complete activities to create a paper prototype to improve the functionality of an appliance in your kitchen. We'll also cover the basics of digital prototyping in Adobe Xd. From there, you'll be able to apply the prototyping approach in many circumstances, from digital interfaces to physical tools and products.

This is a class for designers, artists, marketers, and anyone else who is interested in applying user experience design techniques or looking to jumpstart their UX design career.

  • Do you want to learn how to test your big ideas? 
  • Are you interested in UX and seeking to better understand the process?
  • Are you a creative or designer that is eager to start on your first UX project?

This class is filled with tips, tricks and insights for all levels!

What is a prototype?

A prototype is an easy, cheap, and efficient way to test ideas quickly. The best thing is, you don't need a lot of time to create an effective prototype, but it will be instrumental in improving how you design things for greater positive impact. We'll cover how to build a thoughtful prototype and test it with real users.

At the end of this class you will have a tested paper prototype that can be applied to improve how your kitchen works. You will also have the opportunity to turn your paper prototype into a functioning digital wireframe in Adobe Xd.

What you will learn during this class:

  • The basics of prototyping
  • Various methods for analog prototyping
  • How to create a digital prototype
  • How to do user testing

Worksheet:

  • Here is a downloadable worksheet that coincides with the activities for your class project

Software (optional)

Meet Your Teacher

Teacher Profile Image

Patricia Reiners

UX/UI Designer // Innovation //

Teacher



Hello, I'm Patricia Reiners! I am a freelance UX/UI Designer based in Berlin, and I am running my own business. I have been in the design industry for over 9 years, having worked with many different brands and clients, including startups, but also some bigger corporates like Adobe or Google. Furthermore, I focus on interactive products like services, apps, and smart devices and I absolutely love to share knowledge through courses, talks, and workshops.

Free Guide for you

I have a little present for you! My free AI mini Training learn how to integrate AI in your design workflows.

Grab your free AI training here:

See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Trailer : Hi. My name is Patricia Reiners, I'm UX/UI designer based in Berlin. My focus is on creating interactive experiences for the future for online but also for mobile apps. I've been able to work with many companies like Google or Adobe but also startups, agencies and corporate businesses around the world. My work is in constant search for new ways to explore, design, and solve problems for the future. I'll have to share knowledge through talks, workshops but also I share my knowledge through podcasts, other source, and interviews. The podcast is called Future of UX. When I'm designing and solving problems for my clients, I'll have to build quick and easy prototypes that have to test ideas quickly. In this course, you will learn how to come up with your own ideas for interfaces of the future in your kitchen, how to build really quick prototypes, and how to test it with real users. We will go through all the steps of the process so it will be easy for you to follow along. We will talk through the basics of prototyping and we'll learn different methods. As a final project, you will build your own prototype for an object in your kitchen. Anyone can build a great prototype. You don't have to know any special skills and it won't involve any coding. This course is ideal for designers who just started with user experience design or anyone who's working in digital products. Let's get started. 2. Class & Project Overview: Hello and welcome to the course prototyping for future interfaces. I'm [inaudible] and I'm your instructor for this course. I'm in the design industry for almost seven years now and worked for many different clients for a lot of startups, but also for some bigger brands like Google and IKEA. During my time as a creative president at Adobe, I explored digital interfaces and prototyped a lot of products for the future. This course will provide all the outlines you need for a clear and productive UX prototype. You will get an understanding about how to prototype and test your ideas fast, which helps you to make good design decisions, so having the skill to build good prototypes is super valuable for every designer. This will help you to get jobs and save time and money of your clients. We are going to break the process down in single steps to gather the right insights, the right feedback at the right time. You will work on your project during this course, you will find a problem you want to solve, sketch the user experience, and test if your idea really solves the problem. You can either work on your own project or just follow the lessons on your own. I also prepared a worksheet for you, so feel free to print that out and use that throughout the whole course. I actually integrated three exercises throughout the whole course and it's super easy to follow them along with the worksheet. This class is ideal for designers, marketers, product managers, developers, and everyone involved in crafting a great user experience and who wants to be able to test their ideas early in the process. You will gain a richer understanding of testing your prototype which will empower you to design, evaluate, and iterate on the user experience. You will definitely learn a lot during this course, but you will also have a lot of fun. I can promise you that, so let's go. 3. The Design Process: Before we start with the prototyping, I want to share with you why prototyping is so important in the user experience process. What is user experience and why is prototyping so important? User experience, short UX, is a person's emotion and attitude about using a particular product, system, or service. When we are designing products, it is super important to make sure that these products are actually solving a problem for the user and they are useful for the user. Otherwise, the user is not going to use it, so really simple. With a prototype, you can check that in the very beginning to make sure you are following the right path. If we look back, many design teams used the waterfall method. This is a one-way street with not much feedback and prototyping included. Design teams realized during the last decade that they need to be another better way to test ideas first and realize early in the process if things work out in the end because with the waterfall method, once an application is in the testing stage, it is very difficult to go back and change what has already been in the conception phase. No working software is produced until late during the life cycle so high amount of risk and uncertainty. The human-centered design approach is very different because the human being is in the center of the whole process for the whole project and it helps to deal with feedback as early as possible because the user is involved in each step of the process. The interesting thing here is that this approach is all about improving the whole experience throughout the whole process, going back and forth and back and forth again. You include user research in several steps throughout your project, then it's very important to really listen to the user and understand their needs and wishes, and really understand what helps them to proceed a specific task or generally understand their daily lives. That helps you in the end to design something that the user really needs. It's a nonlinear method, so you can go back to prototyping again and again and again. I am doing a lot of testing and prototyping for different projects. Here can you see a prototype I designed for an augmented reality interface? The user could slide through different events, either agree on attending or remove them and it worked really great with the first paper prototype because I got some early feedback and testing with the users. Many of the prototypes I'm building are very futuristic and difficult to build so prototyping and testing them first is essential. This can be interfaces for products, for augmented reality, for virtual reality and debian, so even voice in that interfaces and I'm going to share about these immersive technology in another course, but in this course, we are going to focus on prototyping whether it is the same method for whatever medium you use. 4. Task: Ideation in your Kitchen: We already talked about the topic of this course, which is all about prototyping for future interface in your kitchen. About solving a problem in your kitchen for one object. So the task during this course will be to redesign an interface in your kitchen. Imagine me being your client and giving you the brief, please help the user to use more fresh ingredients and produce less food waste. I became actually super aware of the topic and, yeah, by working with [inaudible] keeps focusing on that area. We already talked about the topic of this course, which is all about prototyping for the future, about solving a problem in your future kitchen. The task during this course will be to redesign an interface in your kitchen. Here's the task. Go into your kitchen, take seven minutes to really look around, look for other objects you use on a daily base, choose one, you think, yeah, which is the most interesting and where you think the biggest room for improvement could happen and then come back and we will go on with the next section. 5. Watch Me Work: Ideation: I hope you found an object that's interesting for you. Here are a few you can find in usually every kitchen. Feel free to choose one of those, but you are completely free. You can choose one with an interface or even without an interface and come up with a completely new idea. After you chose an object, we are going to look for problems. I chose the refrigerator. The task now is to take post-its and write down as many problems as you can think of. What might help is thinking about the last time you used these objects and think about what went wrong. Take as much time as you want, but I can recommend you around 10 minutes. Let's get some post-its and write down all the problems we can find. First is, sometimes you can't find things in the fridge, that's really difficult. Sometimes you eat something which you have planned for another meal, or what could be another problem? You don't know what you already opened, so you open something twice. Things go bad because you don't know what to cook with it, with the leftovers, for example. Sometimes it's just really chaotic or you forget what you bought and buy it again, or that it stays in the fridge and you've completely forgot about it, or that you accidentally eat food of your roommates or something like that, which isn't really yours. Let's put all the post-its on the wall so we have a better overview of all the problems we came up with. That's usually super helpful. Let's have a look at all the problems we came up with. Here are a few problems I came up with. We are going to choose one of those problems now. Feel free to choose one of the problems you wrote down, but you can also use one of my problems I'm completely fine with that. Did you choose one problem? How can we solve that now? I chose the problem that it's really difficult for people to see what's inside the fridge and then come up with interesting recipes, but they can do with the things they have in the fridge, which is actually a really big problem. A lot of things go back without really realizing that. You can also work on the same problem, but feel free to use your own problem or your own object. Choosing an object which you use every day makes it easier to tackle one of the problems. We're going to build a prototype and test if the idea we're coming up in the next half an hour or so works. Don't worry about feasibility, use your imagination. This is only about innovation and the future. Now we're going to look for ideas, how to solve this problem with a digital interface. Let's take the post-its again and brainstorm ideas. Maybe we already have an idea in mind. If not, just brainstorm and think about as many ideas as you can. Let's get the post-its and think about ideas. For example, we could make pictures of our ingredients and get recommendations like what to do with that. We can show the ingredients outside of the fridge, for example. We could organize the fridge, so that it's easier. Actually, we have so many things we could do. We could personalize the recipes regarding on the ingredients. Think about as many ideas as you can. Let's put them on the wall. My ideas are actually pretty, pretty basic, but you can also come with some really cool futuristic ideas as well. Here are a few of the ideas I came up with. I am going to go with the idea actually to show the ingredients outside of the fridge and then help the user to come up with interesting recipes, so some kind of a smart recipe generator. My idea is actually to integrate a feature in the fridge with which the user can see on the outside what is in the fridge, and then selects the recipes they actually want for the whole cooking process, and can select the different ingredients they want to integrate there. 6. What is Prototyping?: Before we are going to start building our prototype, with our idea we have in mind, let's talk briefly about the basics of prototyping. Prototypes will help you to demonstrate and communicate your ideas with others. This might be your colleagues, stakeholders, or users for user testing and helps you to save time and money because you don't need to build the whole product but start with a simple and cheap prototype. You can test it and learn a lot before you really build the final product. Don't worry, if you're not a designer, anyone can build a great rapid prototype so you don't need any special skills for that. What is rapid prototyping? Rapid prototyping is an iterative process. This means that it's repetitive. The process is used to visualize what a website or an application will look like in order to get feedback and validation from users, stakeholders, developers and designers. When it gets used well, rapid prototyping will improve the quality of your designs by enhancing communication between the various parties reducing the risk of building something that no one wants to say it like that really simple. What do you need for prototyping? A prototype is not designed to be a fully functional version of a system, but is only meant to help visualize the user experience of the final product. As Google Venture Design partner, Daniel Burka says, "the ideal prototype should be Goldilocks quality." If the quality is too low, people won't really believe the prototype is a real product. If the quality is too high, you'll be working all night and you will never finish probably. The quality should be not too high, not too low, but just right. You can prototype not just screens, apps or websites, but almost everything. Prototyping is an excellent method to test designs. Whatever designs you are designing. You can already start to think about what kind of screens or interfaces you need to integrate in your prototype and to really test your idea. 7. Examples of Prototyping: Let's have a quick look at some examples. Here for example, you see some prototypes McDonald's actually did. Their kitchen employees along an empty tennis court. They use chalk to map all possible arrangement for the restaurants, various cooking applications, and prep stations. This was actually super essential user testing. They tested that way, which was most efficient and the best layout for accommodating all the people. Another really great example is the invention of the Dyson vacuum cleaner because the inventor actually did around 500 prototypes before the final result which they sold. 8. Analog Prototyping methods: We have a problem, we have an idea to solve that, so let's talk about prototyping methods. There are actually a lot of different methods out there since there is quite literally an endless number of ways you can build those some prototypes, and I will guide you through different analogue methods. Now, we will start with really easy once, so it will be really good for you to get into the topic. Using these methods will help you to begin your process of building on those prototypes in order to emphasize with your users, to decide on that and refine your ideas and to test your solutions, all the things that we have already learned in their past chapters. But the most important thing about your prototype is that you build one the user can really interact with and give you the insights you need. We are going to work on an interface now, and especially for digital product like mobile apps, websites and web services, as well as other screen-based product or experiences, it often requires to create a range of prototyping methods to test the final design and development. Let's start with paper prototypes. Paper interfaces are handy at the early stages of prototyping for digital products, and you can create paper prototypes by sketching them out or by drawing and cutting out usable parts of an interface such as the text field, or a drop down menu, etc. It's really easy and the perfect way to get started. Jakob Nielsen, the co-founder of the Nielsen Norman Group, explains that paper prototypes are extremely easy and cheap to produce, why? They can provide you with many insights that can help you save money in the end. When designing digital products, you may be tempted to create super detailed prototypes directly on your computer and start trading those problems right away. But what's really helpful is really paper interfaces. However, you can uncover many areas of improvement, such as usability issues, for example, or even improving the whole ideas or rethinking the whole structure. It's awesome for the early stages, and it really avoids to lose any time or that produce too many costs. The second thing is the storyboard. It's another great and easy technique by drawing a storyboard. Telling stories is an excellent way of guiding people through a user experience, and storyboarding is the technique derived from the film industry. It's something you can use for early prototyping to allow yourself to visualize the user's journey, or how users would experience a problem or a product, for example. When you draw a storyboard, try to imagine the complete user experience, and then capture it in a series of images or sketches. I can recommend you around six sketches are really helpful. Storyboarding as a prototyping methods ensures that we know our users well enough. It won't be hard to sketch a storyboard otherwise. It allows us to keep in mind the context of the solutions we are designing. It is very useful for development and better understanding of users and for generating high level ideation and discussions. But storyboards however, are not very useful for fine tuning the details of products, because drawing tends to be more like microscopic, so a bit bigger. Here you can see a storyboard I came up with. Like you can see, I have drawn six single steps, just like on post-it, super-simple and super-quick. From the user buying products at the supermarket, putting everything in the fridge, and then making notes out of the fridge and the interface, what he actually put inside the fridge, and then the problem occurs where the user things like, "What should I eat?" Then here you can already find the solutions where he gets recipes outside of the fridge, which he can cook. Then in the end, happy user so he cooks something he really likes with ingredients you have in the fridge. That's one way you can do that. Let's get to point number three, which is Lego. We all know that stood from our childhood, I guess. Integrating some physical problems might be super-helpful to visualize an idea, and Lego is really awesome way to do that. The best part of using Lego is to build your prototypes, is that they become easy to understand and twick. Simple detach a part of your Lego prototypes rapid here, create an alternative design and play with it to see how it works. Point number four is role-play. If your solution for the problem is a service and not much focus on a screen or an interface, and you could state a role play and set the screen for the customer in a way that they can experience specific parts, it's the best way to do that. Role-play is super helpful. Point number five, are physical models. If your ideas of physical product, for example, a new product or physical prototype super-helpful. The purpose of a physical model is to bring an intangible idea or two-dimensional sketch into a physical three-dimensional plates plane. This allows for better testing, refuses edit Ginsburg discussions about the form factor of the solution. Here you can see a prototype I designed for a backpack a few years ago. Point number six is Wizard of Oz. The Wizard of Oz is a great way to test your prototype. Maybe you already know the story of the Wizard of Oz. The easiest way to conduct Wizard of Oz testing is to build a simple and easy to use prototype that allows the wizard to quickly react to the user's gestures are actually designed response of a single click for example. Wizard of Oz prototypes are prototypes with faked functions. For instance, interactivity that comes from a human rather than an algorithm or software code with users believing the latter is the case. You can use that to test with your users. For example, if you're prototyping a voice design or specific interaction, and Wizard of Oz is actually working like that a user clicks on a specific buttons, but there's actually no functionality behind that, but someone in the background really provides the information. That's really helpful and really easy to test your ideas. 9. Task: Paper Prototyping: You can build a prototype for it. I did development for example, but also for communication to align the idea vision of your design team, for example, because sometimes you are all talking about the same thing, but figure out that you're actually talking about completely different ideas. So you can also communicate your idea to; could be a colleague or someone would work for a client much easier with a prototype than with a written description of an idea. So learning and testing. If you build a prototype for learning, make sure you build it that way that the test area would really help you to understand and get the insights you need. We started with looking for user needs and then thinking about possible solutions. What's really important is to always make sure to ask yourself of the prototype really checks out the user need. For example, if your assumption at the beginning was that user waste a lot of food because they don't know what to cook with the left overs, and the assumption is that a tool where you can get adjusted recipes for the food you have in the fridge, good hope, you can check those assumptions actually by building a paper prototype where you can show those ingredients and everything which is inside the fridge, outside with specific recipes and then invite people to test your prototype and watch them and listen, ask the right question. So here comes the task for you. Think about the screens and the information you need to prototype your idea. You can draw different screens and build your own paper prototype by designing a single screen. Always think about interactions and what kind of information you actually need to show your idea. I am going to put it up my ideas, so feel free to watch and take all the information you need. My idea is actually using a smart fridge, which shows you other ingredients which are in the insides and on the outside. So that helps people really to not forget about their food and also provide recipes for the ingredients which are inside the fridge. So that shows you what ingredients needed to be eaten first and come up with really good recipes that the user enjoys. So we will see how that goes. Let's get started. 10. Work With Me: Paper Prototyping: Let's get started with the paper prototype. I usually start, actually, by thinking about what kind of screens do I need. I definitely need some screen with for home-screen or for all the basic information which the user sees first. Then I need a screen with the recipe selection because the main feature of this will actually be that the user gets personalized recipes with the things in the fridge. Then also, something where the user can see the recipe, through the selects from recipe, how that look like. I will start with those three screens and now think about the elements which I need on each of those screens, or paper sheet at the moment. The first feature will actually be that, you see what kind of ingredients you have outside and also see when it expires. When does it need to be eaten? You could do that with some color-coding. Will also reflect different roles and I'm going to do that referrals here, for example. If ingredients can be eaten in more than a week or in a week or in one or two days. It's urgent to eat that and then they are placed in the different rows. I'm using post-it. It's nice to move them around and everything. It's also really, helpful for the testing later on. You can see, I'm just drawing a few ingredients and your cheese, for example, and placing them into different rows here. The other feature is the recipe generator. It's a really important born, where the user can choose other recipes and then gets post-its recipes. The idea is that they can put the post-its in those areas in the end. Digital input look, of course, a little bit different. Then you have settings. You can do some settings on the recipe selection as well. Buttons of course, create your recipe. My settings would be difficulty, and time and also the possibility to add other ingredients which are probably not in the fridge, for example. Then also add more ingredients if it's more than three. If you want to integrate four, or five, or six ingredients, or even more. Here, ingredients which are not included in the fridge at the moment. The next is thinking about how a list would look like. If the user started the recipe creation and gets some list and now, I'm thinking about how that should look like. I definitely need an image of the recipe and then the name could be Ratatoiue, for example, difficulty, time as well, the ingredients and little image, how that looks like and, of course, something where you can fill out other recipes. I could kludge actions, a button where I could start to cook that recipe right away. Then another recipe that could be, for example, pasta with vegetables and then the same kind of information here, the same button and submit this. It would be some list with also the option of more info if you want to see the first steps before you decide that you want to cook that. You can see they are basic functions. I didn't indicate everything here, but only the basics, which is how to create a whole recipe personalization really looks like in the end. Then I'm also thinking about how screen would look like if you select one recipe. What kind of information do you need? I'm going to go and think about Ratatoiue, for example, and think about what kind of info's do I need. I start with really, basic ones. Of course, I'm integrating the one I already did something with other cards. You can see with difficulty and time and the ingredients that also affect the different cooking steps you do to prepare that with also some images. Yes. Also, some navigation elements, very important. Don't forget that. Then let's go. 11. Adobe Xd: Digital Wireframing: Digital prototyping, this lesson is only optional. You don't need to design a digital prototype to test your idea, but if you want to, we can do that together now. You decided which level you are now. Today we are going to use Adobe XD. If you decide you want to digitilize your prototype, if you want to use another design tool, feel free to do that. Whatever you feel familiar with, but I recommend the Adobe XD because it's free and you can just download really easily. I will guide you through those three steps. First we are going to design all the elements, then we're going to place them on the iPad and design the signal screens, then we're going to prototype it. Why are the different elements together? That it's really interactive. After you downloaded the free Adobe XD version at adobe.com, we are going to add some features which will be the wireframe UI kit. You can find that here just downloaded for free, I already downloaded, I'm not going to do that again. It's free and really awesome helps you very much on the way I would say. Then open your first document, iPad pet size, whatever size you are going to use for the testing, I'm going to use my iPad. Then I'm going to open the wireframe UI kit and save it in the cloud, that's very important because we are going to connect that with our design now. I set that in the cloud and then I'm going to back to my document, and I just opened and I inserted, integrated the wireframe UI kit here on the side, I have all the elements now on my original document which is really awesome. Let's get started, I'm starting with the home screen and designing all the basic elements. First, I'm starting with the food which is in the fridge where I want to integrate different rows where you can see when it actually expires. If it's more than a week, if it's within a week or if it's just in the two to three days, so it's urgent and then all the items are placed there automatically, it's really cool for the user to see what actually needs to be eaten first. Then I want to integrate some buttons things with all the different foods and vegetables and like a tiny icon. Below, I want to integrate the recipe generator where people they use a place they are different food there, three different items or maybe even more and then I create, gets a good recipe, an interesting recipe what really fits to that. I will sort of three and then add a plus sign so they can integrate maybe more of whatever ingredients they have, and also a button. What you can do now is to use the library or create them on your own so that it's really your decision, and then I will also want to integrate some icons here, I download them at flaticon or at the non projects. Just make sure if you sell that or if you really give that total development, you need to pay for those icons, but you can download some free version to just test that and check if it really looks nice, but in the antenatal, pay for that. I'm going to do that with the whole interface now. Almost finished, I went to the prototype mode and connected everything together so it's clickable and I can really slide through all the slides and click all the buttons, which is clickable. I need to test that now on my iPad. This is already working quite well, I need to design all the different screens, look good. Now we talk really briefly how we can make that interactive. That's super easy, after we designed all the elements on the artboard, we can switch to prototype, this is in the bottom left corner. Then we select one element which we actually want to make clickable, we get this little wire and move that to the artboard, which will be our destination, in that artboard an ingredient is placed in the data folder. We can do some adjustments on the side and what trigger we have. We want to tap trigger and then how we actually want the interaction to be? We would use all animates so it moves automatically from the other to the other state, it will look like that in the end, works quite well. Now for the testing, I can recommend you to download the free Adobe XD app, you can definitely do that super easily on your device, whatever kind of device you are using, you can see that everything's interactive. Let's sum this app really briefly, here are the main tips and tricks how to use the digital prototyping tool like Adobe XD. First you actually start with designing all the elements, so all the single elements you need, this could be a button or a tab bar, or an input field or whatever kind of elements you use. Both things which you have already drawn on your paper prototype, on your sketches. Then you already placed them on an artboard, you make sure that their place at the right position so that the whole artboard actually looks quite right, you design all the different scenarios as well. Then last step is to make that interactive, to really go into the prototype mode and to wire all the different elements together, make them interactive. This is super easy by just selecting one of the elements which will be the thing, but you can click on and then move the wire to the output, actually is the destination. Then you can select the interaction type, for example, drag and drop or voice interaction or a tap or something like that, you can also change or personalize the way of interaction. This could be automated at most, automatically from the other through the first to the second position, or a different other interaction points. That's super easy and you have a really good result, with not too much work. 12. Adobe Xd: Analog Wireframing: You can also integrate your paper prototype by making a picture and placing it on the art board. Just start by taking pictures of your paper prototype slides and of all the different stages. Then just put them in Adobe XD and place them on the single art boards. This is what I did here. You can see all the pages. Then I placed them on the art board, and adjusted the size a little bit. They just reflect all the different stages. Let's switch to prototype mode. What you can do now is to just draw a rectangle over the area you actually want to animate and remove the color, and background, and everything, go to prototype, and then use this little wire thing and connect that to another output. Do that with all your single screens. Everything you want to have interactive, the same as the tomatoes here. We will move the colors again, but the rectangles stays there. Then go to prototype and move that to the other art board. You're doing that with everything. Almost ready. Let's test that really quick. I can click on those things. It almost works like a digital prototype with only [inaudible] screen, so that's a simple, perfectly. Great, so that works. Let's sum this up really briefly. The first thing is actually that you make a picture of your paper prototype. The interactive elements are the things which you can actually move. You need to take different pictures of all the different possibilities, with the different ingredients, for example, at the places. After that, you insert those images in Adobe XD and you place them on an art board. At the end you have all those art boards without digital elements but [inaudible] images of the paper prototype. Point number 3 is actually that you draw transparent rectangles on the places which are interactive, and then you wire them together. This means that you go to prototype, select that transparent rectangle, and then select the destination art board, which is extra clickable. Then when you test that, go into the preview mode, click on that little play button. You can see that when you click on that transparent rectangle, you go automatically to the other art board. It's interactive, although it's still a prototype. Super nice to prototype something, really easy without too much time and effort. 13. Preparing User Testing: In this chapter we are going to talk about how to conduct user testing and collect feedback. When you test your prototype, it's all about asking the right questions. Let me share some tips and tricks before we get started with our own user testing. There are actually a few simple tips and tricks which helps people to feel comfortable and talk about what they need, what they want, what they're thinking. But before we get into that, let's talk about how to plan and prepare for your user testing with your prototype. We're going to talk about who to test with, where to meet them, and also how to make them comfortable to gain valuable feedback. First things first, who. Decide with who you want to test the prototype. In the beginning, it's really easy to test with friends, family or colleagues. Well, I would recommend you for this project. Look around, if you have a friend or family member you can test with, just make sure that they are related to the topic. In the real world you would probably recruit real users. But here it also works with your inner circle and friends and family. Where, where are you going to find your users? Also think about the surrounding you want to test in. It could be in a lab, it could be on the street, maybe in the office, but for this project it makes sense to do the testing where everything is happening, the kitchen. Let's talk about the preparation real quick. It is really helpful to have some questions prepared. I prepared a start sheet for you so feel free to use this one for the preparation, and prepare the questions on that worksheet. We will go through each of the steps real quick. Feel free to print out the worksheet I prepared for you and use page 3 and 4 for the user testing. That will be super helpful for you to write down the question. There's also some areas for taking notes. This will be super helpful, but we are going to go through each of the four steps together now. First thing first, what is provide context. Participants need to look at the prototype from the right perspective. Before I'm actually showing them the prototype, I will usually ask them a few questions, simple to set up the next one to make sure they're approaching from the right mindset by asking these questions, even ones I know the answer to, I've prime the participants for the next series of tasks. Imagine you want to do this and that. Imagine you're hungry and you want to cook something, what would be most important for you to know, for example. Second, get first impressions. Ask the user about first impressions. What is the first thing that grabs your attention on that prototype on that interface? What do you think you can do with that interface? Point number 3 is observe. Give them a task. For example, create a recipe on that interface because they're hungry and then observe them and really answer the questions what distracts them from completion? What confuses them and also, how quickly are they going to be accomplishing the task? It's really important, especially the observation is a super valuable thing. Four, close up with some final questions. Before you conclude the interview, ask some final questions to make sure you got all the information you need. This could be, would this interface be useful for you and why? What else would be useful for you? Are you missing something? What would you normally do to do something like that to complete that task? Also, what surprised you? Generally, it's really important to ask a lot of why to really understand what they're thinking and feeling. Here comes the task for you. Now is the time to test your prototype. You can test that with your paper prototype, but also with your digital prototype. Feel free to use the worksheet I prepared for you, feel free to download it and prepare for the interview before you start. Write down the questions you want to ask, decide who you want to meet, and then set everything up for the testing and don't forget to make notes. Whatever you are realizing doing the testing write down and we will talk after your testing sessions and think about next steps. Let's get started. 14. Final Thoughts: Takeaways & Tips: Now is a great time to adjust your prototype. What have you learned in the user testing? Any feedback? What didn't work out? When they use it some areas didn't really understand, that's not a problem at all. You can just improve the prototype and repeat the testing after that. Then, you can move to the next level via framing or UI design, but this is another course. Keep in mind, the best designers don't get the perfect prototype at the first time. It's more about quick, but not perfect. Perfectionism is not the right approach. Feedback is the most important thing, early and often, so make sure that you're working towards the same problems. What have we learned in this course? We learned, actually, a lot. We learned about the basics of prototyping. We have learned about the different prototyping methods, analog and digital ones, and we built our own prototype and tested it. Wow, that's actually a lot. You can be absolutely proud of yourself that you completed this course. A few times, for example, if you are collaborating with people in other teams, I can recommend you a few tools. For example, Miro. That's a really cool tool for doing posted sessions remotely, that's awesome. Or I can recommend you Zoom for remote user testing, that's also really awesome. Guys, those are the last words. I can't wait to see your prototypes. I can't wait [inaudible] what ideas you're coming up with. I'm super excited to see that. Thank you so much for taking this course. It was super fun and really awesome. You can be absolutely proud of yourself that you completed this course, and see you soon guys. Thank you so much for taking the course.