UX Design: Create a Prototype

1. Introduction: Hey there, thanks for joining UX design, create a prototype. In this class, we'll be learning how to create an interactive clickable prototype to present to your clients. We will start by getting into some UX research, exploring your ideas and wire framing them, creating your prototype and then presenting your ideas to your clients. But first, let me introduce myself. My name is Ginny and I am a UX designer and a creative director. I started off as a graphic design major from the School of Visual Arts in New York City. I worked as an art director in advertising for three years before I transitioned into web design because I really loved HTML and CSS. I thought I wanted to be a front-end developer for a while but that was when I started working really closely with a product designer or a UX designer and I just really fell in love with it. It satisfied the geeky side of me that love to research and evidence and data and I found that UX research and UX design just really went well with my personality. In this class, you'll be working on a fictitious app called Tutz musical collaboration mobile app that needs some usability improvements. All the sample files will be provided to you so that the major focus of this class we'll be teaching you how to move through a typical UX process instead of designing everything yourself from scratch. You'll learn how to approach a project as both a UX researcher and designer. This class is open to all levels, but it may be easiest for those who have access to graphic programs, such as sketch or Illustrator even or Photoshop, anything that can handle graphics. By the end of this class, you'll have a well-rounded UX project to showcasing in your portfolio and also to showcase in Skillshare's gallery of work. I encourage you to share your project with others and especially as you are progressing through their project for feedback. There's an amazing channel right here in our backyard with Skillshare's project gallery where you can share your work. Either way, I think you'll be proud of what you come up with that by the end of this class. Let's get started. 2. Project Requirements: Hi, welcome back. I'm excited to go through this journey with you as you create your prototype. There may be a bit of a little learning curve, especially if this is the first time that you're working in Sketch or another graphic design program. But with a little bit of practice, you'll be navigating through those tools in no time. Just be patient with yourself. Beat back any discouraging thoughts because we all got to start somewhere. But I'm excited to go through this with you. Here are our requirements. Equipment. You'll want a laptop or desktop computer, a graphic applications such as Sketch, Adobe XD, Photoshop, Illustrator, or something similar. The strengths and weaknesses of each of those programs depends on what they are designed for. I prefer Sketch because it truly is for prototyping. Adobe XD, while I don't have any experience with that, I heard wonderful things about it. Illustrator is okay because you can create some good wireframes in that, although it is not really a web application program. Photoshop, while it renders web components better than Illustrator, it's not really a wireframing or web application program either. Project outline. We will be learning to analyze UX research, wireframe ideas, validate those ideas by conducting our own lightweight UX research, create a prototype, and present that prototype. Class resources. We'll have some sample UX research that I will provide for the sake of this class. We'll also have a sample TUTZ design available to you as a Sketch file or a PNG for you to import into whatever graphic program you choose to use, and we'll also have a sample design requirements and documentation that contain stakeholder and business needs. Once all of those items are downloaded, we'll be ready to start the class. 3. Analyzing UX Research: Hi, welcome back. If you're viewing this video, it probably means you saw the last video with the project requirements and you feel ready to start the class project. Great. As a refresher, we're going to be working on a fictitious mobile app called Tutz, which is a musical collaboration app. It allows users to upload audio files that will ultimately contribute to an original song. In this class, you're going to be entering the mind of a UX designer who's been hired by your client Matt, who wants you to improve the usability of the Tutz app and he has some documentation to prove it. Matt gives you some documentation from previous work and tells you that there's some feedback from users and from his colleagues that the Upload page, the page that users use to upload their audio files, has been frustrating and confusing to use. It's been causing Tutz to lose business due to the bad usability, and Matt needs your help to look into it and provide solutions asap. So it's asap, isn't it? You thank Matt and find a quiet place to look over the project documentation. Now, let's take a look at Matt's document. It's important to note that all companies handle their UX processes differently and the scale of the projects you will be working on will vary. For the sake of this course, we'll stay simple so that you can understand the basics. Upon reading the documents, it's apparent that Matt's goal is to obviously improve the usability of the Upload page, but specifically making the upload and collaboration process more intuitive. This means, users are not finding this particular page's purpose and functionality very clear. We know now that Matt's document has some evidence pointing to a lot of confusion experienced by users but it's our job as the UX designer to figure out why. If we look back at Matt's document, some important call-outs are, he wants us to stick to the color style guide and lowercase typeface. This is important because a lot of companies have their own branding and you'll want to adhere to those. He also wants to make sure that the graphics are highly recognizable. We also need to make sure that the Upload button is more noticeable, and we may need to change the CTA or the Call To Action to be more intuitive to the end-user. Lastly, he wants to maintain a fresh and vibrant feel for the app to attract its main audience which are young users, maybe middle school to late 30s or 40s. While analyzing Matt's notes, you'll want to write down your questions or your concerns about the product for further testing, which we will cover in this class. Some questions you want to ask yourself is, what was the user's goal? What was the product manager's goal? Did they align? Why or why not? Did they reach their goals? Why or why not? Another question could be, what is going on in the end-users life that could be affecting their perception of the product? Is the solution to remove or to add more to the product? It's important to understand the product's goals really well so that you can understand what's blocking it from reaching its goals so that you can provide the best solution possible. In the next lesson, we're going to learn how to take your UX research and turn them into wire-frames. So let's move along. 4. Wireframing: Hey, welcome back. In this lesson, you'll be taking analysis from the last video and coming up with ways to address hypotheses and potential solutions through wireframing. At this point, you may want to start using a graphic application, such as Sketch or Balsamiq or other wireframing tools to start sketching out some ideas. But it's still okay to use paper and pen for this part too. Let's dive in. On this screen, we're looking at the Tutz screens. The first screen is the launch screen with a prominent call to action is saying start now. The second is the upload page, which is the problematic page according to your client, and the third and fourth screens show us the workflows associated with the upload feature. Now for this lesson, we're going to pretend that Matt, our client, gave us access to the original native design files created by a previous designer. Since these are full color mockups and we want to be in wireframing phase right now, we will want to make this look more like conceptual art rather than final art as much as possible. The reason is, most clients have a hard time looking at colored wireframes and not thinking that it's the final product. In order to get around this common issue, we'll want to convert these colored mockups to black and white. What I've done is created a separate page in Sketch with the original color designs and converted the colored art boards to black and white ones in order to convey the message, that we're looking at concepts and information architecture, rather than glossy user interface components. Before we begin wireframing, just a word of advice. Don't be afraid to show ideas early on in the wireframing phase. Because the more buy-in you get from your clients or your products manager early on, the less time you'll spend digitizing and re-digitizing ideas that were not approved of. As you can see, we're looking at the newly converted black and white screens, and we're trying to wrap our head around what UX improvements we should be making. At this point, we'll want to refer back to Matt's document of requirements, and at the very bottom of the page, I've added some hypotheses based on the research and my own intuition of standard user behavior for online apps. The hypotheses state that, users didn't know where the upload button was because the text button was getting lost and would be more discoverable if it was a graphic text button that was more prominently displayed on the screen. Latest contributions also takes up too much space. Lastly, the purple arrow button is confusing for users because of its prominent location and gets confused for an upload action. This makes sense. Since this is an upload page and users should naturally expect the prominent actionable button to be an upload action, it would make sense to change this UI and information architecture to be intuitive like that. After digesting these hypotheses, we can naturally come to some conclusions and recommend that, we change the upload text link to a graphic button. We'll move the graphic upload button to a prominent location, or just replace the play button with it. We can make the play button more visually connected to the latest contributions section since they are related in information and an action. We can also make the latest contributions section less prominent too. Now let's move on to the actual wireframing. What I'm going to do now is copy and paste this art board by pressing "Option Shift" on my MacBook and drag a version of the art board down. Now that we have a copy of the upload page, I'm going to create a new button to replace this play button that will prompt users to upload their audio file rather than play the collaboration piece that's been uploaded by users. I'm going to group the play button and the audio graphic and drag it over to use later. Next thing I want to do is add the upload button, and since I know there is an existing button being used in the UI on the launch screen, I'm just going to copy and paste it into my new art board. Since it's a white background, I'll change the fill color to a dark gray and change the text to white. Remember this is just a wireframe so the colors are not final. I'll also want to change the text to something more intuitive such as, "Upload your file" or "Upload your audio file." I'll also expand the button so that the text fits, and center the button on the screen. Upon looking at it, I want to remove the exclamation mark on the button since it looks much cleaner that way. Now that we have the upload button front-and-center, we can get rid of the old texts link for uploading. Let's move the upload button up a bit, just for now while I play with the space. Now I want to bring the play button back into the mix and combine it visually with the latest contribution section. Since the play button and the latest contributions are related. When I refer back to Matt's notes, he mentions that the latest contribution section is taking up way too much space and competes for attention with the upload button. While that might be true. I'm just going to leave that comment alone for this lesson just to see if Matt would be okay with making the latest contribution section the same size or even a little bit bigger, since we have an upload your file button that is very large and prominently displayed on the screen. For now, I'm going to move the title for latest contributions up so that I can fit the play button in that area. I'm going to move the graphic back and tweak the sizing a little, and then I'm going to bring the play button back and make it smaller so that it doesn't visually compete with the main CTA, which is for uploading. Now the other pages we want to focus on are the upload pages that contain the uploading workflow. This workflow begins when a user clicks on the upload your file button, which triggers a file manager that pops up from the bottom of the screen. The user clicks on the file they want or browses for it, and then once it's uploaded, the file name appears on the next screen as the most recent contribution. I'm going to zoom out and do the same as before, which is to copy and paste the original art board by clicking on "Option Shift" and dragging a copy of it down. I'm going to zoom on it, and now I'm going to tackle why the user is getting confused by this process. Tutz's current workflow has a user land on this file manager after clicking, upload your file but I gather that the user is getting confused during this step because there's no obvious call to action on this file manager. There's an inconsistency in the user experience because of this, because Tutz uses prominent buttons everywhere else but here. This inconsistency is bound to confuse the end-user because they would expect the same global actions all across the app. What I want to do is solve this problem by adding up buttons similar to the upload your file button I just completed earlier, and copy and paste it onto this art board. I'll place it in the right location by bringing it to the bottom of the screen, and adjust the font size and the button size to give the user the impression that this is a prominent but secondary action on the page. Now that that's done, I'm going to zoom out, and as you can see, the original is across the top and my revised version is on the bottom. This is probably where I would stop and show my ideas to my client or product manager for early feedback. It's important to be prepared to answer their questions and defend your design decisions. Now that you've got your first wireframe under your belt, we're going to learn how to validate your ideas by running a simple user test. Feedback is very important during this stage before prototyping, and it can be highly iterative. But in the end, you'll be much happier with the final product. See you in the next lesson. 5. Validating Wireframes: Hi, welcome back. In the last lesson, we learned about wireframing and some best practices for wireframing. In this lesson, we're going to learn about validating the ideas in your wireframes by running a usability test. A usability test is a method for gathering feedback on how usable something is. That's it. While there are many different ways of doing UX research and usability testing through card sorts or surveys or A/B testing, the method that we're going to cover in today's lesson is an in-person moderated test. This is when a moderator such as yourself, leads a user through a series of questions and actions to observe their feedback to a product. Most problems will have many different solutions possible, but the great thing about usability testing is that you'll be able to narrow down the best possible solutions for your app, for your audience. Now for usability testing, you'll want to keep some things in mind. Number one, setting the tone for the user. You'll want to keep the environment clean, free of distractions and comfortable for the user. The user should also feel comfortable and you can do this by warming them up with some questions in the beginning. You can ask them questions like, what's their name, their occupation, what do they do with their spare time, how often do they use their computer, their mobile device, how technically savvy are they? This is going to get them used to talking aloud and talking in general, to segue them into giving you their feedback naturally as you're going to the usability test. The questions that you should be asking the user should be very neutral without bias wording. They should be phrased in such a way that it helps you assess later why the user reacted that way. For example, you'll want to phrase your question in an open-ended way, so instead of asking them, ''Did you find this button confusing?'' You can ask them, "What were you feeling as you looked at this button?" They answer you and you can ask them, " Why?" To help you along, I provided a link to a very famous usability test script found at this link. Number two, recruiting users. For the sake of this class, we're going to have you recruit just one user when it's ideal to normally have five, seven,12, 50 to a 100 users sometimes. But for the sake of timing and just to teach you the basics, we'll just stick to one user. The criteria we're looking for are noted in Matt's document. They are, number one, between the ages of 14-40. Number two, they should own a smartphone. Number three, frequently uses social media because this is a social app, and number four, they should love music. Some ways that you can recruit participants are through maybe an online ad or an ad in the newspaper, online channels like remote testing.com or even sidewalk testing, where you can go to a public space and just find people who are willing to talk to you. The trick is, how can we incentivize people to participate in the study? In my personal experience, users who are incentivized by being offered a gift card or some sort of reward, gave much better answers and also showed up for the user study. Now, here's a list of some ways I've found were effective in recruiting people and incentivizing them. Number one, offer a gift card, anything from $25-100 depending on the length of your study. Number two, offer straight-up cash, like 50 bucks for an hour of their time. Number three, offer a chance to win a gift or a gift card of a bigger amount, like $200 for example, or something like an iPad even. This works well if you have to recruit a lot of people and you just don't have the budget to pay for all of them individually. Once the user is settled into their testing environment, it's time to do the test. Everyone's methods are going to be a little bit different because of their personality types and their preferred method of testing. But I'm going to show you the method that I prefer that has been most helpful for me and most effective for me. Most important, I remind the user to think out loud. Number one, show the product in its current state. Meaning show the version of the product or design that's out right now. Number two, have the user give feedback on that product by observing it without clicking first, and giving feedback after interacting with the product. Number three, show the user the proposed design. Have to go through the same process of giving feedback through observation, and then have them give feedback after interacting with it. Number four, give them a task to perform, this is a task analysis. While it's not ideal to have a non-interactive paper wireframe to perform a task analysis, you can still gather a lot of helpful feedback for simple tasks related to navigation and discoverability of information. Now what I'd like to do is while I'm testing, I like to record the session if the user is comfortable with it. During testing, you should be jotting down notes as best as you can, but that's also why the recording is so important because you won't be able to catch everything while you're jotting down notes, and you don't want to keep asking them to repeat what they're doing because it won't be a true behavior by that point, so recording plus the note-taking is really important for analysis later. In the next lesson, we're going to get into the fun stuff, the prototyping, so stay tuned. 6. Prototyping: Hey guys, welcome back. It's time for the fun part, the prototyping. In this lesson, we're going to be taking the wireframes from the previous lesson and using them as a structure to build our designs upon. Just a heads up, we're going to be skipping through some UX processes, such as iteration in order to get to the prototyping, which I'm sure everyone is excited about. Let's dive in. As you can see, we're looking at the black and white wireframes from the previous lesson, but now we're going to go over what happened after they were validated by user testing. These are the originals on the top row here. These notes in red are my user testing notes, so that I always have them on hand to refer back to, as I wireframe out ideas. In the second row, we have the new wireframes that we user tested for feedback, as you can see here. But because we user tested to validate our wireframes and gathered new feedback, it led me to rethink my initial approach to the Tutte's upload redesign, which happens a lot to UX designers when we're testing. Due to the new feedback, I decided to come up with a new set of wireframes to address the feedback from our user testing session. Those new wireframes created after validation are here in this third row, down here, marked with the title version 3. The upload page has changed and I have moved the play button back up to the top area, and I have moved my upload button down. I also changed the text too, as you've noticed. The latest contributions was changed in size and prominence following the feedback I got. I also added additional workflow screens, which I will go into more detail a little bit later. The new flow involves, the user landing on the upload page, the user clicking on the upload audio file button, the file manager being triggered after the upload audio file button is clicked, the user being able to select the file or browse for a file while the upload now CTA is grayed out and disabled until a file is chosen. The user selects a file which is displayed by a bright highlighted border around the filename, and the upload now button becomes active, which is indicated by an active color. Once it's uploaded and the upload is successful, a success screen appears, which then disappears after a few seconds. Finally, the user lands on the final screen that shows that the user just uploaded an audio file in the latest contributions section. Now that we have all the workflows approved and your client is happy and your users are generally happy, we will want to mock this up. Since this class doesn't cover how to use sketch in depth, I've already created the colored mock-ups for you, which will be the mock-ups we use to create the interactive prototype. We can see how the brand colors and the UI were added to give this app the look and feel it was missing during wire framing. All these UI components were taken from match notes and the current products' existing design paradigms. Let's put this prototype together. As you can see, I'm using sketch for prototyping. For those of you using other graphic applications like Photoshop or Illustrator, don't worry. I will provide tips at the end of this lesson to explain how to make a basic prototype with Photoshop and using Adobe Acrobat. What I love about sketch is that, you can create hotspots or hotlinks that connect screens so that it looks like a user is moving through a workflow. The first thing I want to do is, select a starting point for my prototype, by going up to the menu and clicking on prototyping, and select use Artboard as start point in the drop-down menu. This ensures that our prototype always starts on the correct screen whenever you present to clients. As you can see, this Artboard now has a little flag indicating that this is the starting point. Now, let's select the starting point Artboard, and click the 'H' key, which is a shortcut to the hotlink action. This is indicated by the mouse, which has now converted to a squiggly arrow. This means we are now ready to start linking some elements and getting interactive. If you'll remember, the user is supposed to click on the upload my audio file button in order to upload their music. What I'm going to do is, drag a hotlink area around this button, starting from the top-left and dragging to the bottom-right. The area you just dragged out is highlighted in orange. Now you can see a tail appear, which we're going to use to link to the next screen in the workflow. If I hover over the next Artboard, it'll automatically select that for me as indicated by the orange highlight. When someone clicks on the upload my audio file button, they will get transferred to the next screen, which displays the file manager. Now I'm going to choose the Artboard with the File Manager. Since the user is supposed to select the file here, specifically the top-left file, I'm going to create a hotlink by clicking H again over that file image, and drag the tail over to the next screen displaying the highlighted file with the active upload now CTA button. From here, I want the user to know they have selected a file, which we did on the previous screen. I want them to click on the upload now CTA button to officially upload the file to the app. I'm going to click H again, drag over the button, and then I'm going to choose the next screen. Since the next screen has a behavior that doesn't require any interactions such as clicking on it, since it disappears on its own after few seconds, this is a good time to talk the client through the behavior. I'm going to select the entire Artboard as a hotlink. As I explained to the client, that the success screen fades after a few seconds and eventually displays the final workflow screen of the latest contributions with the newly added audio file. With the last screen, I don't need to create any hotlink since this is where the workflow ends, and we've done our job of improving the upload feature crossing our fingers. We just want the client to see the workflow through the simple but clear prototype we've just created. Now, let's see what the presentation view of the prototype looks like, since this is what you'll be presenting to your client and this is what the client will actually see. In sketch, we have a really easy way of doing that. Up in the top right, there's a little orange button that says preview, which we're going to click. As you can see, it goes straight to the starting point Artboard that was marked with the flag. This is the window we'll be using to present to our client, which we'll be learning about more in the next lesson. Let's test it out. What the user is going to do is, land on this page and upload their audio file. You can see the mouse changes when I hover over the main upload button, and once I click that, it takes us to the file manager. The file we want to upload is called Cowbell, so we select that, and see that it's highlighted and the CT is active. We'll click on that and see that it's been successful, and we'll remember to explain to the client that the success screen fades on its own after a few seconds. I'll click anywhere on the screen after I'm done explaining and finally land on the last screen, which is of the latest contributions where you have just uploaded Cowbell5 Mp3 to the collaboration piece just now. Good job you. For people who are using other applications to build your prototypes such as Photoshop or Illustrator, my advice is to have every screen similar to what you just saw in sketch as its own page, which can then be exported as separate PDFs. Using Adobe Acrobat, import all your PDFs into one file with all the pages in the correct order, so that you can click the arrow buttons to move through each screen easily, and then just talk to your client through the workflow, since it won't be interactive. In the next lesson, we'll be talking about presenting to clients without making some novice mistakes. Stay tuned. 7. Presenting to Clients: Hey, welcome back. You are in the home stretch. In today's lesson, we're going to talk about presenting to clients and avoiding some novice mistakes. In my experience, I've learned that clients care about a few different things more than others, and I'm going to share them with you. Number one, the creative. This is the prototype that you're going to be presenting to your client with the improved features that should be exciting to them. Number two, the report. This should contain high level insights and data from your findings, and number three, the next steps. This is where you propose the project should go. When presenting the prototype. Here are some things you may want to keep in mind for your presentation. Some of the Do's. Do explain the overall theme of the report and what goals you were trying to accomplish. Number two, explain how you got data. Number three, explain the breakdown of the data in big chunks, not too granular. This can be displayed through charts, percentages, and other infographics. Number four, call out significant observations or data, such as quotes and a short list of interesting observations you gathered. Number five, wrap it up with something positive and encouraging for clients to get excited about for the next steps. Now for some of the Don'ts. Don't use a lot of industry jargon. I would avoid using a lot of acronyms as well. While it may be familiar to us, it might be best to find other ways to describe this list, such as above the fold, mouse event, FBO, which means for placement only, heuristic analysis, hexadecimal, 508 compliance, responsive, API, SVG, vector, PNG, and much more. You'll also want to explain your design decisions as you walk a client through the prototype. You may want to say something like, I decided to use this color button because it was consistent with the UI or you may want to say, I decided to make this button smaller because this was a secondary action and I didn't want to distract from the primary CTA. Now, in my personal experience when presenting to clients, I did find that clients like certain things a little bit more than others. While they do like data, a lot of times people don't like digesting the data themselves, so they want other people to do it for them, so what I like to do is give them the data, but I also like to give them something else, the feedback. I find that clients love quotes because it's something that they can relate to. So for example, you can give them a quote from a customer that really stood out to you because most likely it will stand out to them to. That's it, you did great. In the next lesson, which is the final lesson, we'll go over some conclusions and some takeaways. 8. Conclusion and Key Takeaways: (BACKGROUND)Hi, you made it. Congratulations, on completing this course. You accomplished, some amazing things in this class, such as analyzing UX research, conducting your own research, wire framing, prototyping, and presenting to clients. I hope you can walk away from this class, with a feeling of accomplishment, and confidence, that you can tackle, your next UX project, from a well-rounded perspective. Here are some key takeaways, you'll want to remember for your next amazing UX project. Before starting any UX project, be sure to understand the requirements, goals, and even limitations, of the project. Try to initiate a fresh user study to acquire fresh insight on the project, especially if the previous research is older than six months. Wire framing doesn't need to be fancy. It's more important, to come up with basic wire-frames, or sketches, and reiterate on those ideas, as opposed to spending lots of time, on a fancy time-consuming wire-frame, present high level information, to clients, and non jargon language, with a prototype, that is as close, to finished as possible. Lastly, have fun with UX. Remember to post your project, in skill shares Project Gallery, and remember to follow, me to stay informed of more UX classes. Good luck on your journey to UX Mastery.