UX Prototyping Mastery: From Concept to Interactive Design

1. Introduction: Welcome to the fundamentals of UX prototyping. Hi, I'm Manthan Patel, a Graphic and User Experience(UX) Designer. In this course, we will cover prototyping as a part of your design process and how prototyping can create better user experience. We will also cover different prototyping fidelities, and we will wrap up this course by creating an interactive prototype with Figma. This course is an overview of prototyping, and we will get to learn some of the basic tools that can help you support in this prototyping process. So if you are ready, let us deep dive into fundamentals of UX prototyping. This course is applicable for all of the user experience designers(UX), graphic designers, UI designers, and even who want to learn more about prototyping and Figma. Alright, I will see you in the first lecture. 2. The Fundamentals of Prototyping in UX Design: O prototype has several meanings and several definitions. So I want to define the term prototype for the scope of the course before we get started. A prototype is an early working model of a design used to gain feedbacks to rapidly experiment with new ideas. Several factors influence what type of prototype you will create, project timeline, where you are in your design process, and how robust the prototype needs to be. A prototype can be created with sketches, wire frames, or mock ups. A sketch is a drawing of user interface where design starts to take shape. Then wireframes are representation of layouts and contents and where everything will reside on the user interface. Wireframes can be gray scale or black and white. A mockup is usually a fully rendered user interface with color details, typography, and general layout defined. A mockup looks like a final product or a final design. Let me give you a quick note on wireframes and mockups. Sometimes the term wireframes and mockups are used interchangeably because people refers to their design works as wireframes, even if they aren't gris care. When working with a robot design system, it's sometimes easier to design components so your wireframes will appear fully rendered, even if your work is still in progress. Sketches, wireframes, and mockups are static representation of your design. But they do not represent the interaction designed by themselves. You need to add interactivity or a notation to these static screens to understand how the design will interact when someone take an action on your UI. I'm defining interactivity as any behavior that changes the state of the design or the flow base on the user interaction. Simple examples of interactivity like an icon that might change the view of the page, or by clicking on that, icon will open a contextual menu. How the user interacts with your interface is the key aspect of your overall design. So, prototyping enable us to test our different flows, validate design concepts, iterate through different ideas and deliver cohesive experience. One of the key concepts of prototyping is to validate your designs early and even often and without a lot of overhead. There are a lot of different ways to approach a design problem. Prototyping ideas and concepts will help you get through the bad ideas quickly and bring out new ideas to the full front. Your prototype doesn't has to be code. You can prototype with anything from sketches to even using a fully rendered mockups. And this is exactly what we are going to do in this course, and it will take your user experience expertise to the whole another level. All right, I'll see you in the next lecture. 3. The Importance of Prototyping in UX Design: One of the key things to remember about prototyping is, it is not about your tools. It is about your design. Yes, the tools will support and help with your design, but your design is your main focus. Prototyping at all fidelity, help us to elimate the risk of investing in a product that does not resonate with the user, isn't easy to use or does not solve the right business problems. Let me give you more examples on why we create prototypes. The first is to validate new product idea. For example, the business wants to tie out a new idea or new product. So by creating an early prototype and testing out the idea in low cost way, we'll give enough direction to determine that if it is a product or a future worth investing in it, rather than spending too much resources a front. The second is to validate the design concepts or flows. There are multiple ways to solve a design problem. And as part of your design process, oftentimes multiple ideas and multiple layouts might be prototype to determine which design direction is best for the business and for the users. Third is to determine if the product experiences is usable or not. Prototype from usability testing are typically more detailed and of higher fidelity. Because at this point, the design direction has already been sorted out, and now the feedback is more focused on whether the product is usable or not. In this phase, the kind of feedback you might want to look for is would include feedback on whether the button labels are clear and if interactions are understood by the user or not. A elements of design, including content, are fair game for feedback in this high fidelity prototype. The fourth is communicating an idea or vision. Prototypes are great from communicating to others on how your design will work. If you present your work to others on a regular basis, it will be a good habit to have a prototype handy just in case to answer the question, how it will work. These are some of the few examples why we need prototype. So next time you create your own prototype, keep these reasons in your mind. All right, I will see you in the next lecture. 4. Mitigating Risks Through Prototyping: Developing products without first getting earlier feedback from your target market is very risky. It's expensive to build a product without first determining if your market is adaptable to your idea or to your product. Building the wrong product experience, cost development time. If you have a product idea and you create a fully functional experience, you might find out that product isn't what user wanted. This is where prototyping can help you a lot. You will find out through the prototyping process where your design ideas fails or where they shine. Prototypes are useful for any stage of your design process. You can prototype just to figure out how your experience should work in a discovery stage. In the later stages, you can create a more robust prototypes with the goal of gathering user feedbacks. When creating prototypes from feedback, determine what kind of feedback you are looking for as that might influence a type of prototype you will create further on. For example, if you are looking from more granular feedback, you want a higher fidelity prototype that user can interact with. With the help of good moderator, you can elicit a lot of feedback on the design with low fidelity prototypes. If it's a moderator session, there's more flexibility in not having a fully functional prototype, because the moderator can work user through the areas of the prototype that aren't working, unmoderated sessions are self faced through a testing platform. So you want to make sure that your prototype can stand up to the task and clicks it is going to encounter in unmoderated environment. Most prototyping tools will cover both low fidelity to high fidelity. But for more realistic interactions, you might need more advanced logic and conditions. For example, if you need to store a user's data or if you need a native video player to open on your user's device, these are advanced prototyping needs, and you will want to make sure that you have the right tool for the job. But before you do that, you should ask yourself these questions. Does the prototype need to be that advanced? Because sometimes we want to keep things realistic and as simple as possible. Next question you can ask yourself is, Is it important to get the feedback you need? And lastly, is simulating the experience good enough to get a signal on where the design should go? Determining on what type of feedback you will need will help you to decide on how to approach your prototype. All right, I will see you in the next lecture. 5. Prototyping and Design: Key Design Process Models: You might be wondering how to apply your design thinking into your products, designs or really anything. Well, to answer that, there are a few distinct models in the design process. Basically, design process is a problem solving method. And even though there are a few distinct models of design process, the key idea or key concept is largely the same. Al, that is gestate. Prototyping is a key phase in the design process, and as the product becomes more defined, the prototyping techniques can also change accordingly, moving from lower fidelity to higher fidelity. Before we get into fidelity, let us take a look at the design process. The first model is a design council's double diamond. The double diamond focuses on the key stages of the design process. Discover, define, develop, and deliver. The next model is standard D schools approach with the key stages of emphasize, define, ideate, prototype, and test. These models has now differences, but all models of design process addresses the same key attributes. They are user centered with a focus on empathizing with the user to understand their challenges while discovering opportunities and insights. Defining the problem space base on those insights and ideating through various design concepts and ideas, we come up with potential solutions, prototyping and iterating on those design ideas and concepts, and then final delivering on those key ideas. The user center design process is messy and iterative and not as linear as it may appear. The process is intended to be a framework in which you can create design solutions. Ideally, you want to follow these key steps into your design to make sure that you are focused on designing the right things and that you are delivering the right product. For instance, you might be retesting through various different ideas and concepts. So you might start with paper prototyping. And as your project moves into the final delivery, you may want a more robust functional prototype for usability feedback and for communicating with your design to your team. You can prototype at any stage of your design process. And as the fidelity of the design increases, the fidelity of prototype also increases. In other words, high fidelity. We have talked about different design process models and prototype. In the next lecture, we will leave dive into prototype fidelity. Or light, I will see you there. 6. The Three Levels of Prototype Fidelity in UX Design: Let's take a moment and talk about fidelity. Fidelity refers to the completeness of the user interface, interaction, and flow. Fidelity can also refer to the visual appearance, but also protype functionality. There are basically three type of fidelity, low, medium, and lastly high. We will talk about each of these in detail. Applying low fidelity is a good way to focus on dating the interactions in the flow correct without being overly concerned about the visual interface. An example of when you want to use low fidelity approach is when you are in the early phase of interviewing your users, and you have some ideas of the problems you want to solve. But you want to get feedback before going too far into that idea. In this case, sketching out some high level ideas and putting them in front of your user is a great way to get feedback and track their reactions. Sketches can introduce new level of ideas that user may not have thought about until without seeing your sketch. They can elicit a lot of great insights and start a lot of new conversations. One of the benefits of sketching is that you can rapidly iterate or rapidly repeat through concepts and incorporate them in the user feedback very quickly. Low fidelity prototypes doesn't only apply to sketches. Remember that you can have a low fidelity prototype that has very unpolished interface, like a gray scale wire fame. Some prototyping tools are also designed to stimulate a sketchy interface using basic shapes to convey this low level of fidelity. Medium fidelity prototypes can have a mix of basic functionalities and some define interface elements. But some flows may not be complete in it. Because you want more input and more feedback from the user to guide your design. For instance, in a project that I work on, I put a medium fidelity prototype in front of my users. Only a few links work because I wanted feedback on the links that didn't work, and I wanted the user to tell me where they think they should go and why. In this example, the design was partly defined, but I needed more understanding from the user to define the rest of my design. Typically, medium fidelity prototypes are used in the face of design where you have some key elements in the place, but still needs to validate some concepts to get a better understanding of your user's need. High fidelity prototypes are best used for scenarios where you have a solid idea of how the design interface should look and work, and you want more specific feedback from it. As a note, highly defined visual interfaces gives the impression that the product is final and finish. Feedback might be at the interface level with focus more on colors, funds, and tax labels. But if you're not looking at that kind of feedback, you can stay at lower fidelity to focus more on the basics of interactions and flows. High fidelity design are also useful for the final delivery because it allows everyone on the development team to engage with the design and see how it works. Prototyping is useful at any part of your design process, and Fidelity shows you what kind of feedback you want and where you are in your design process. All right, I'll see you in the next lecture. 7. Understanding Low Fidelity Prototypes in UX Design: Low fidelity prototypes are a rough presentation of your idea or your design, and they aren't actually very defined. They can be easily made in sketches on papers, but there are some digital tools that can stimulate that unfinished look and feel. And we will look at those later in this course. Low fidelity is sometimes defined as only paper base, like a sketch on paper. There's some nonces to this debate, but I'm defining low fidelity to include clickable wireframes, which can be created in a prototyping software that mimics low fidelity interface. There's a lot of advantages and pros to using low fidelity prototypes, especially earlier in the UX design process. Few key advantages are that users are more likely to be open with their feedback. A low fdalty nature of the prototype gives the impression that the design is an earlier concept phase. And if you ask for the feedback, users will more likely to give their honest opinion because they still know that the design is under construction. Moving on, they are very easy to create with little time or effort. And if you are using paper, you can quickly sketch out an idea and few key screens to get across the basic concept. They are easy to iterate quickly on the feedback. And if the first low fidelity concept return work, then you can try something new. With low fidelity prototypes, you can easily come up with a new idea or concept based on the user's feedback or other things that weren't included after the first prototype, and iterate and incorporate that feedback very quickly. There's more focus on the integrations and flows when you are creating designs that are low fidelity. It gives you the opportunity to really focus on the interaction and flow without being overly concerned about the visual layer. Sometimes getting the basic design in your mind is all you need. Well, some disadvantages of low fidelity prototypes are that they are limited in flow and interaction behavior. The design of low fidelity prototypes limits the realistic interaction and behavior. So you won't be able to receive rich feedback on how interface element works. They are faciltd drivens. Sometimes, low fidelity prototypes does not have enough clarity in the interface to stand out on its own for users to understand. So a facilitator is required to walk the user through the design so that they know what they are looking at and can help them navigate through the flow and interaction. Third, is that the usability is undetermined. Another key thing to keep in mind is that these are great from uncovering high level usability issues, but are not from detailed usability feedback on the interaction behavior. To low fidelity can relate too much imagination. Yes, there is such a thing called too low fidelity. If your low fidelity version is just box to stimulate a layout, and you are asking the user to fill that box. Sometimes user don't have the imagination or visual vocab to describe what causes in that box. Still need to be some direction in the low fidety design that user can interpret. But there's still a lot of value in staying low fidelity during the earlier phase of your design process. Low fidelity prototypes are useful and will work almost from every project, but they are very useful in the earlier stage of your design process. So next time when you have a tough project, and it's requires to focus on the basics and fundamental, try using low fidelity prototypes and you will help you greatly. All right, I will see you in the next lecture. 8. Understanding Medium and High Fidelity Prototypes: Medium fidelity prototypes can share the same attributes of high fidelity prototypes like the Luke and fel, but may not have all the functionalities. Medium fidelity prototypes work well when you might have some of the design accounted for, but might not have a complete picture of your design just yet. They might have a mix of elements that can design and undesigned or undefined. They are best from scenarios. Then you feel pretty good about some elements of the designs and interaction, but you still have some open questions and you don't know which direction to go. You can have a mix of elements that are established, but keep elements as a placeholders. You can ask them more questions to help clarify what type of content and where to take the design. By comparison, high fideelty prototypes are typically close to the final design and we have all the colors and branding representative. Usually, clickthrough interactions are also in the place in high fidelity designs. Some advantages to medium fideity prototypes is that they are flexible. They work really well, and you have some ideas, but haven't actually figure out everything. There's a bit more flexibility in how you approach the design. Now, some disadvantages. You will need a facilitator, especially if you're looking for new ideas. You might have to get the user's imagination working when looking at the page with place ser type content. In addition to that, medium fidelity prototypes aren't reliable for catching usability issues since it will be too likely of high level. High fidelity designs, on the other hand, have unique advantages over medium fidelity designs. First, they are more representative of the look and the feel of the design because the design feels more real, realistic, and users will go through the prototype as if they would have normal experience. Secondly, the design probably doesn't need a facilator. If the design is almost then, generally speaking, a facilator isn't required to walk the user go through the design. You maybe even use a remote testing program that the user can complete on their own. The third is that usability issues will likely to be caught. Any usability problems that are remaining or weren't caught through early prototypes will likely to be caught in high fidelity designs. Here are some disadvantages of both medium to high fidelity designs. First is that they require tons of time to create. H ih feeder prototypes can be very robust, and it will take more time to create a fully functional polish prototype. Second, users aren't as willing to give feedback as in the earlier level of prototype. The final appears of the design can limit the kind of feedback users are willing to say because the design looks so final and fantastic. For example, if the flow is confusing, they may refrain from saying that because they might feel like the design is already finished and they might self add it. And the third is that they are harder to operate. High fidelity prototypes can be time consuming to create if they require a lot of interactions and use cases. As a result, they can be difficult to update, especially if there is some issues with the core functionality that are highlighted through this testing. Prototyping is a fundamental aspect of US design process. And by knowing some of the disadvantages and advantages, you can know which fidelity is right from you and where you are in your design process. 9. Optimizing User Feedback: Prototyping Techniques: When creating your design prototypes, you want to be aware of what kind of feedbacks you are looking for. You want to make sure that you get the right type of feedback that will be useful to incorporate in your designs. When testing your prototype with a facilator, you will need a user researcher or someone with a neutral mindset, and also who is very familiar with the prototype and the design goals. It's really important that the facilator is neutral because you don't want anyone to ask leading questions or judge the user in any way. If you are testing low and medium fidelity prototypes, the designer and the facilator will collaborate to come up from the kind of questions you will ask around the design. The questions from low fidelity prototypes will be open ended. And from medium fidelity designs, the question might range from open ended to specific. And lastly, from high fidelity prototypes, the question will be more specific. You will need to establish a clear goal of what you want out of your testing. So it's important that the facilitators are skilled in asking the right questions without leading the user to the answer. Open ended research can be tricky because people will have questions and a good facilator will able to let the chatting flow, but bring back the focus to design if needed. Typically, when a facilator is interviewing the user either remotely or in person, the project team and the designer will observe the session. It's critical that the designer should be present at the user research session to hear the feedback directly from the user. No matter how solid you think your design is, it's always humble to listen from a user, Designers will sometimes facilitate their own design sessions with user, which isn't a problem if the designer is open to all of the feedback, maintains a curious mindset during the interview and can ask questions without leading the user. Sometimes, when designers are testing their own work, confirmation bias can sweep in. Confirmation bias occurs when you expect from your users to experience the design the way you want to experience there. And when the feedback is in opposite or is in 180 degree, they minimize or they ignore that feedback. The goal of testing your prototype is to find out if your design resonates with your user or not. Sometimes it will, sometimes it doesn't. This is all useful information for us because we can incorporate the feedback and ideas into the next iteration. Now that we have learned different type of fidealties, and testing prototyping, let us learn how to create prototypes at different levels of fdalties. All right, I will see you in the next lecture. 10. Paper Prototyping: Creating a paper prototype is a very simple process and is more focus on understanding high level attributes of your design, like flows, interactions, and layouts. Paper design needs someone to facilate the conversation because it takes a little bit of imagination from the user. A facilator will be able to offer contexts by providing scenarios for them to think about and help guide the user if they got stuck or to get the user to speak more about their thoughts on the design. Paper prototyping is pretty easy to do. You don't have to worry whether you can draw or not, and the fidelity just needs to be clear enough to get your point across squares, rectangles, lines, and words. All you really need is a black marker, paper, and some sticky notes. For testing mobile paper prototypes, it's nice to have a cutout of a mobile frame to stimulate the limited view of items in the viewport. The rest of prototype can be draw on paper. When you are using the same prototype for multiple people. Sometimes the paper will get torn or worn out. So it's much recommended to use a heavier paper weight that will help prevent that. Let's say we wanted to create an e commerce to mobile application. When approaching any type of prototype, you will want to start by sketching out your ideas of the screens and the layouts, as well as the flows for your design. For example, I have few iterations where I just came up with some different approaches from my design. Let's say homepage and the kind of content I want to showcase. I also have an idea for how the tape bar should be organized. You can see this is pretty rough. And my sketches are really all about getting multiple ideas on the paper. You don't need perfection here. The next thing I did was create a high level flow of key screens and interaction from the design. In my example, here I have the homepage, some capabilities and the ability to add an item to the card. You can simulate the scrolling behavior by using strips of lightweight cartoon stock and moving it up and down through the viewport of your template or from side to side to stimulate scrolling of left to right. Ideally, you can draw your designs in portrait to stimulate scrolling up and down or in landscape for horizontal score interaction. That's all about paper prototyping, and in the next lecture, we will move ahead to Figma. All right, I will see you there. 11. Prototyping Fundamentals in Figma: Hello, and welcome back, everyone. From this lecture on, we are going to start prototyping in Figma. So download the Figma and sign in or sign up for Figma account. All right, I will see you in the Figma screen. I have created these screens for a fictional E commerce head company using these elements. All of these files are in the resource section, so make sure to check it out, and all of these assets are included in that. So you can follow along in Figma with me. Let us walk through the overall flow and the interactions. This is a fictional company that sells hat, and customers can customize a hat if they select this option. From the home page, you can tape into this particular head, and it will bring you to the product detail page. You can scroll this page and see supporting content, like details and reviews. When I tape on the link to view the ethical practices, I see a bottom sheet with more information. I can drag the bottom sheet up and scroll to view more images. Let's start organizing all of the screens and elements, as well as start our prototyping by connecting them in Figma. I'm going to use the frame size of the iPhone, which is 390 by 844, which is the default size of iPhone. Select F on the keyboard to create a new frame. To select the size and type of frame. In the right hand side panel, there will be different screen types and sizes. Make two more by copying and pasting. Let's name the first frame home, and the second one, product retails. And the last one, bottom sheet. I have the elements we are going to use on the left, and we will compose the screens using these elements. Here, I have three frames. One from the homepage header, one from the content, and the last one from the tab bar. I'm going to select the homepage header from the layer and copy and paste it to the frame. I name home using command plus C on MC or Control plus on windows to copy. I'm going to select the home frame and paste it into the frame. I will do the same thing from the home content. I will copy and paste it into the frame and reposition it. And lastly, I will copy and paste the tab bar element into the frame and reposition that. For the product detail page, we will use the same process. Copy and taste all the elements in the same way we did it in the first page. I will do that now. The add two car button will appear at the bottom of the screen. So I will reposition it so that it is sitting at the bottom. For the last screen, we will take the two elements from the layer from the bottom sheet elements and copy and paste it into the frame from bottom sheet. For the bottom sheet screen, I'm going to change the radius of the top left and right to ten to match the rounded corners of the bottom sheet style for the header. Once we reposition those elements, Next, let us copy and paste the bottom sheet to make a second bottom sheet. Now let's change the height of the second bottom sheet to 268 and name it as bottom sheet two. These are the two heights of the bottom sheets. When we create the prototype connecting this, we want to simulate the drag interaction. So we need two different heights, the minimum height and the maximum height. We have laid out our screens to get ready for the prototype. In the next lecture, we will connect our prototype and get this working. All, don't go anywhere, and I will see you in the next one. 12. Mastering Interactive Prototypes in Figma: In the previous video, we have set up our screens to start to connect to our prototype and bring our vision to ideas. For this prototype, the flow start from the hat image on the home page. First, let's expand the home frame to show the image within the frame. Our content is not visible outside of the frame, but we want that because it allows the area to be scroll label within this viewport when we set this to scroll. This hat with the blue band labeled countryside is the item I want to connect to our next screen. From the right hand side panel, there's a tab label prototype. With the home screen selected, let's tap on prototype. When you tap on the frame elements in the prototyping mode. You will see shape outlines that will have circles, and when you hover over to them, they will turn into plus signs. These are the connection points where you can drag arrows to the other screens to create interaction. Let's add this connection from the head on the homepage to our product detail page. When you make that connection, you will see this contextual window that allows you to select the type of trigger where it's navigate and what type of interaction you want. Tapping on that interaction area, we will get different options. The action I'm looking for is push. When push is selected, there's four different arrows indicating the direction of the push. I will select the first arrow. On the product detail page back arrow, we will add this push integration or push interaction connecting to our home page. We will select the second arrow to give us the opposinge push behavior. Let's look amazing and perfect to me. Next, I will update the home frame so that it is back to 844 height by adjusting the height in the right hand side design panel. Now, let's add the scroll able area. Select the home frame and tape on prototype on the right hand side. We will select vertical scrolling from the scroll behavior area. This will set the frame to be scrollable. We want the header and the tape bar to stay in place. So we will select the header, go to prototyping panel again and select fix position from the scroll behavior area. Next, we will select the tape bar and in the prototyping panel, select fix from the scroll behavior area. Let's set the flow to no scrolling. For the product detail page, we also want to make sure that the content is by setting the frame to vertical. The header on this page should also be fixed as well as the add to card button. We will do the same thing as we did in the home screen by selecting the header and changing the setting in the prototyping panel to fix position with overflow set to no scrolling. We will do that from both the header and the add two card button. It's time to preview our design, and let's see how it is working. It should be scrolling perfect. And if you tape on the head, you should see the product t page pushing. Your design isn't scrolling, check your layers. You should see an area that says scrolls, and you will want to make sure that the right layers are under that scroll area. If you're not able to see the option for fix in the right hand side panel, try dragging the element to the area under fix in the layers panel on the left. In the next video, we will set up our bottom sheet interaction by using overlays and rag interaction. 13. Advanced Prototyping in Figma: In the previous video, we have set up a scrollable homepage and a typeable or type interaction for our product detail page. Let's get into the bottom sheet overlays and simple drug interactions. We have already placed all the elements on the bottom sheet, so now we will connect them. From this link on the product retail, I want to tape on it to show the bottom sheet. This bottom sheet sores additional information about how the materials are being produced and sourced. I have designed this as a bottom sheet because someone can tape on this only if they are interested in learning more. The bottom sheet has both horizontal and vertical scoring to show more information in small space. Let's start hooking up this prototype. I will add a retangle over the plutex by typing the letter R on the keyboard. Next, let us remove the fill by selecting the retangle shape, and then on the right hand side panel, turning the fill to zero or removing it with minus size. With the retangle selected, go to prototype penner, and connect the retangle to the small bottom sheet with the connector. In the contextual menu, we want to select the property and select move in. Select the last icon of the arrow pointing up. In the overlay setting area, select the bottom center choice, which also maps to the last icon. You will want to select the two option for close when clicking outside and adding background. This setting shows you where the bottom sheet will appear, and the behavior from clearing the bottom sheet if the user tapes outside of it. The background refers to the demeaning effect that will cover the screen when the button sheet has been triggered. Let's see how it looks. You can see that it comes up from the bottom. And when I tape into the background, the bottom sheet goes back down, and that's exactly what we wanted. Next, let us get the first set of images in the bottom sheet to scroll horizontally. We did a vertica scroll in the last lecture, so we are familiar with that concept. But now we can set the set of images labeled scroll to horizontal scroll by selecting the image group and setting the overflow to horizontal. Let's apply that same horizontal effect to the other bottom sheet as well. Let us pre with it, and this looks like it is working as expected. Next, let us add that drag interaction from the top handle of the bottom sheet. Will select the top handle and from the prototype section, connect the top handle to the taller bottom sheet. We will change the interaction to, and we will select swamp overlay and smart animate. We will apply the same settings to the taller bottom sheet connecting back to the smaller bottom sheet. On the taller bottom sheet frame, we will select the content to scroll vertically, and let's test our design. 14. Class Project: Hello, and welcome back, everyone. In this lecture, we are going to discuss about your class homework or your class project. The class project for you will be, you have to do a paper prototyping for any of your idea, your product, or your design. Let me show you what I'm talking about. As you can see in the screen, these are some of the examples of paper prototyping. And don't forget and don't forget that we have already covered this in some of the previous lectures. Feel free to do paper prototyping for any of your ideas. Don't worry whether you can draw or not. Paper prototyping is very easy, and everyone can do it.'s say you can simply do a paper prototyping in just a rough sketch, as well as you can customize your paper prototyping, as per your liking, and as per your preference. The ultimate goal of this class project is to get you started on your UX design journey. All right. After completing your paper prototyping, click the picture of it or attach the screenshot of it in the project section to earn your certificate. That's all for this lecture and all the best from your project or from your homework. And feel free to ask me any question if you have. All right, I will see you in another one. 15. You Made It! Closing Moment: Thank you so much from watching this course. I hope that you will feel now confident in understanding that how prototyping fits into your overall design process and how you can achieve your best user interface and bring your design to life. To find out more about me, please visit on my Link in and follow me. You can check out my another course on graphic designing in Canva. I would love to hear more about your projects that you are working on, and would be happy to answer any questions that you might have. Thanks again and happy designing.