Transcripts
1. Introduction: Hello, friends. My name is Jacqueline, and I work as a freelance designer, even in the industry. About 10 years I got started with graphic design creating low those and websites for small businesses. And now I primarily work with early stage start ups, helping them to create responsive websites and mobile applications. In this class, you will learn how to create your first mobile app prototype. This class is for anyone who is curious about working in the field of user experience or user interface design visual artists who are looking to expand their marketable skill set or entrepreneurs who wish to create an app of their own. This is going to be a practical hands on class. We're gonna be doing some sketching. We're gonna do a little bit of design and a web tool, and they were gonna be putting it all together into a top herbal prototype that we contest with our friends or potential customers. You do not need to have any prior design experience to follow along, and we'll be using a free tool of for both the designing and prototyping, which means you're not gonna need to invest in any special equipment or paid design software for this class and I really hope to equip you with a repeatable process and the tool you need to further develop your mobile APP concept.
2. Why Prototype: as a professional app designer, I consider prototyping to be a necessary part of my process. Prototyping allows me and my teammates to try out ideas and test them with real customers before spending any time coding. This is important because it saves a great deal of time and money. The worst thing that can happen when creating an APP is spending months building it on Lee to find out that it doesn't solve your customers need. After you've launched as a business owner, you can use clickable or topple prototypes to test ideas with your customers. You can even show a prototype to an investor as you're attempting to raise a round of funding. Prototypes can also be used as a recruiting tool to sell the vision of your product before you leave. Even built a team clickable out prototypes. Help me refine my designs. Help me test concepts to ensure that I'm solving a real problem. And eventually, once we're ready to start building, I use prototypes as a tool to help me communicate with the software engineers that will be building the application. So that's why I believe that learning how to prototype is an essential skill for anyone who wants to work in APP design.
3. Identify the Problems to Solve: First, we need to understand who we are designing for and what their needs are. When I'm working on a project with a client, I'm often tag teaming with a product manager. We'll run user interviews and ask open ended questions to better understand the issues that they're facing. This gives us a clear idea of the pain points that we need to solve with our application for a class project. I'll keep it simple. We're gonna be focusing on the needs of a coffee lover. Can you really specifically will be designing this app for a popular coffee shop Business Problem is, they often have a line out the door, which is driving away customers and limiting sales. Of course, the coffee lovers goal is to get in, get their coffee and get out as fast as possible. So they hope to build an app that allows their busy coffee lovers to order their drink ahead of time and pay so they can skip the line and head right to the pickup count. So take a few minutes to reflect on the problems that will need to be solved with your application. Write them down on a post it and keep it visible throughout every step of this process. This will help us stay focused on solving the users problems which will help us reach our business gold.
4. Pattern Research: So now it's time to gather inspiration for our mobile app screens. Some of my favorite resource is for doing this are patterns dot com patterns with no way, um, this site is the curated collection of screenshots from lots of different types of APS. What I love about patterns is I can search for a specific category of either an interaction pattern or a type of feature and see what other APS air doing, See what the similarities are between them and gather ideas for how we might accomplish similar things and are, uh, the second resource that I turned Teoh as I'm gathering inspiration for a new mobile APP. Design is the IOS interface guidelines. So Apple has put together a whole library of resource is for people who are designing and developing APS. They specifically designed these guidelines for the apse that will show up in the APP store as well as the APS that Apple creates on their own. So if you're designing for IOS, if you know you're designing for IOS, I highly recommend familiarizing yourself with these human interface guidelines and really using them as a reference as you go off. So some examples of this would be, you know, they have a lot of great principles for how to work with color. There are recommendations for the resolution of the images that you use in your application . There are suggestions for how to design your APP icon, So I certainly don't recommend reading through every single one of these guidelines all in one sitting. There's a lot to digest, but just know that this is an awesome resource for you as you are designing your prototypes . So the third resource I recommend four new up designers is Google's material design guidelines. This is essentially the same as Apple's human interface guidelines, except it's for Android. Personally, When I'm designing for Android, I am constantly referencing thes guidelines. There are a lot of specific recommendations for, say, sizing of icons, for spacing of elements in layout, even working with color. Uh, very a rich resource for a designer who's kind of figuring out the best practices for designing for the specific platform. The fourth resource I recommend for new interface designers is you x dot stock exchange dot com. This is like a forum four User experience Designers Teoh ask questions and get feedback from other designers in the industry. So the way that I use this is when I'm working on a specific type of interaction or feature , and I'm not exactly sure the best way of going about designing it. One example is designing for air screens, like recently with one of my clients who were designing air screen when the Internet goes out like What does that look like? When does it show up? We had all these questions, so the first place I went was here you ex stock exchange on just typed in, you know, air screened. That's practices. There's a lot of resources in here related to air screen. Some of them get really granular and detailed for our purposes. We were just really looking for what are some of the best practices here, like you can see the original question, you know, where does the air show up in the context of a form? And there are a bunch of people who kind of chimed in about what they have seen work well in the applications that they've designed. Sometimes you'll see people who are professional user experience. Researchers share results from a research study on that specific topic. So if you're someone who's brand new to interaction design, I highly recommend book marking this ux dot stock exchange dot com and using it as a reference before you kind of dive into any specific design.
5. Sketching: So now that we've done a bit of research, you might have some ideas for how to structure your app. But before diving into the design tool, we're going to do a round of sketching to just get those ideas out on paper. Sometimes we imagine are up to be quite simple. You know, in our imagination, we think, Oh, I just need a few screens to help my user achieve their goal. But once we get into the sketching phase, we start to realize that there may be certain areas or elements that are crucial on. But we need Teoh address. So I want you to think through the users scenario. Where is this person who's using your app? Are they in their car or they at work? Are they at the park? Are they on a mobile phone? Are they on an iPad? Try to put yourself into the shoes of the person who's using your application, and it's a really good idea. Teoh note what questions they might have as they're interacting with each screen of your app. This can help you stay focused on solving for the user goal, rather than focusing on the specifics of how on element or a button is going to look. So in this phase, we're just trying to get on paper the necessary elements for your initial prototype. Don't worry about this being perfect. This is not a drawing competition, and the solution will inevitably end up different in a couple of generations down the road . So grab a piece of paper and a pen, put on some music that you like and spent about 5 to 10 minutes just sketching through the screens that you think are necessary for the first version of your prototype.
6. Set Up Your Project in Marvel: So now we'll introduce Marvel App, which is an all in one design tool that will allow you to design screens and prototype all without having to pay for any software. I recommend this tool to anyone who's brand new to APP design because there's literally no investment apart from signing up for an account. So the way I got here is I went to my Web browser and I typed in marvel app dot com. Now that we're in the Marvel dashboard, I see that I can create room for US project. So I'll do that now. And I'm going to select iPhone eight because I know it's a really common device. Depending on your user base, the device that you want to design for might change. No, we can see that I have two options I can design from scratch or upload from my computer. Marvel is commonly used as a prototyping tool only, at least in the professional up design community. That's because there are other design tools that are built specifically for making designing screens really fast and inefficient. Sketch is a really popular tool. It's one of my favorites, one that I use in my day to day work, but it does cost money, and it takes some time toe learn. So for this class, we're just going to use the Big 10 design tools in Marvel. So we're gonna create that you designed from scratch so you can see my canvas. Here is the screen real estate we have to work with for our iPhone eight. And they will mention that personally, I don't believe it's necessary to have separate designs for every single screen resolution or every single device. I try to pick a screen resolution that's kind of in the middle, like it's not the biggest phone. It's not the smallest phone, but it's kind of the middle of the road. And that will help us design on layout that can be like squished a little bit if needed, and also stretched a little bit if needed. We've started implementing it in code. That's when we can start to tweak text sizes or the layout for each individual device just them aside. But something Teoh no
7. Design Screens with Marvel: So now I'm going to give you an introduction to the design tools that are available to us in Marvel up. So on the left side, I see this green rectangle. I can resize it. Change the shape you can change the color, give a plug in a custom hex color code. Say if you're working within existing brand that has a brand guideline with colors in it, you can just grab the hex code from their pop. It in here is that your prototype matches with your brand from the get go can also change the border radius of this rectangle. So if I want to create a rounded button, it's really easy for me to modify that with the bar here to make it into a pill shape. If I go all the way largest radius possible, I can rotate it. I can change the size manually if I know the exact pixels that I want this object. But at this phase, we're really just trying to get the basic layout on the screen so that we can test it. So I'm not too worried about things being pixel perfect or being the exact proportions, because those were all things that are inevitably gonna evolve as we learn more in our testing. The next tool that is available to us is the Ellipse. Her circle circle could be used as a placeholder for an avatar say in your app. You have users who are writing reviews for your latte. You could use a circle as a little avatar Placeholder there. Circle could also be used in place of a Nikon if you I don't have the time to plug in realistic icons. But I dio recommend that you at least put in a placeholder icon because in our round of testing, we're trying to test the concept. And if it's full of placeholder content, that doesn't really mean anything to the user. You're not going to get very good quality data from the test. The more real you can make it, the better your results will be. It's gonna make a little menu item for my coffee app. Using the rectangle tool I'm using shades of gray really common in initial out prototypes is to you shades of gray just so that you're not going to get feedback on the colors at this phase. It's really not the most important thing right now. What's most important is the visual hierarchy and the layout of the elements on the screen . So I'm going to keep. The color is quite subdued and simple. One shortcut to know is the option, drag or all to drag. If you're on PC option, click and drag to copy the items that you've selected, which is a handy shortcut. If you're say, creating a grid like I am now could even grab four of these and option click and drag to complete the grid on my home page that I beat all these guys right now just six of them. So if this is going to be a button will need some text. Will need a call to action. I'm just using the text tool, and I can take whatever I want add to order to my order. Close enough for now. As you can see, I can change the color of the text. I can change the fought. There are a bunch of fonts that are in here for you to switch between. You can even add a custom thought if you are working with an existing brand that uses the same font everywhere. You can upload that here. You can also go to Google fonts, Fahnestock, google dot com to pick out something that's extra special. If you don't like the ones that are already here, I'm okay with Lata, which is the defaults. So I'm just going to stick with that. I can change the style or thickness or wait. Uh, this is known as fought weight when you're designing for the Web and when you're looking at it in the CSS code, there are generally multiple waits in a single fought regular is the base default font in 99% of cases, and most funds also have a bold style, so that if you want to emphasize a bit of textual use bold and some fonts have a lot of different weights to choose from. Here we can see I have thin, light, regular, bold and black. Germany is bold for my call to action because I really wanted to stand out. Falah. There is a button. So what's next? What else can I draw in this tool? Well, this pink line is exactly what it sounds like. It's a line I can drop dried any which way, but you'll probably want to drop out in the street vertical or horizontal direction. So one handy tool tip to know is holding down the shift key. If you hold on the shift key while you're dragging this line, it will draw in a perfectly horizontal or vertical direction. We'll just keep our lines nice in need. As we're creating this prototype, I'm gonna use the text tool again to add labels for each of my products in the menu. And then I'm going to use option click and drag to copy the label for the product name. And if I shift and click to these items, I can add them all to my selection. So now all of four items, both of my text bits and my lines are selected, and I can click option click drag to copy them. And these shortcuts work in all the major design tools, including the Adobe Tools and Sketch. So learning shift an option will help you out whenever you're designing screens in the future. Of course, not all my items are named a lot, so I'm just gonna go ahead, double click and change other tools that are available to us in marble app. There is a handy tool for inserting stock photos through unspool ash and another tool for inserting icons. Both of these tools are great for popping in placeholder content and really speeding up the prototyping process for this early stage. You can also upload images from your computer if you have product images or if you find something that you like elsewhere. One slash is one of my favorite resource is for imagery for my application designs. What's special about unspool ash is all the images are totally free to use for both personal and commercial projects, so you could build your APP design using Onley images from unspool ash, and you wouldn't have to pay a cent for a stock photography. I recommend that if you are creating an app that will end up on the APP store, it's worth it to invest the time and money in either custom photography for your application or really nice stock photos that I'll kind of work together cohesively, but once flashes of is a really sweet resource. I love browsing the images through here. They're beautifully curated, beautifully edited, and they don't really look like stock photography, and you can search for pretty much anything and find a lovely photo to use in your prototype. Another resource I love is the noun project dot com. You can search for pretty much anything and find an icon. What's cool about the noun project is all of these icons are free to use with attribution, which means if you add a little line saying this photo is from John Smith, then you can use that Icahn for free in your application. But it is a little awkward if you're launching it up in the APP store to have all of these little attribution marks throughout your app. So you can just go ahead and buy the icon just a dollar 99 for each one. So what I tend to do is I'll find an icon that I love on a non project. I'll use it in my prototype, but I won't buy it until I know for sure that we're going to be using it in the live up. So this make a little note for myself that once we go live, I'll come in here. I spend the $2 so that I have the license to use it Marvel Up also provides some handy templates. Four common elements that you might use in Europe prototype. Here you can see they have a button pre made for you. The rounded corners got the text in the middle. You can modify the color and the type. I rarely used these elements, although some could be handy. Like this keyboard fear, marking up what it's like to interact with the form. You would have this at the bottom to simulate the keyboard is working. It was literally a dialogue message on IOS. This dialogue often pops up to ask for permissions or to confirm that you want to delete an item, things like that. So browse through these template ID items that might save you some time designing in this tool, especially in this early phase, where the exact look of the thing is not that important. So now that you know the basics of the design tool, go ahead and mock up the course screens of your app. Once we have the basic screens done, then we'll come back and link them together to create your first problem. Don't worry about these screens looking perfect or looking polished. The goal here is to get the layout and the main interactions mocked up so that we can do our first round of testing.
8. Building Your Prototype: So now we are going to link our screens together to create a taxable prototype. This is my favorite part of the process, because once we have done this will be able to interact with our design on a phone and start to get a sense for whether or designers working or not. So here I am and marvel and I can see all of the screens that I've designed. So far, I have focused on the core screens that are necessary to help the coffee lover order and pay for their coffee. I wasn't concerned with designing the account screen or error screens for any screen that is not in the Pappy path of the experience. Well, I click into my first design, which is my menu, and I'm going to create a hot spot. This hot spot, when it's tapped will trigger the screen to switch to the next screen in the flow. So I just click and drag to draw the hot spot, and I'm going to link it to my item detail page. I have an option to add a transition animation. I think you want to try adding the pop animation for this interaction because We want to create the illusion of this lot card kind of expanding and taking over the screen, zooming in to see more detail about this lot for the action. I want this to be triggered on top. So now I can play the prototype and tested up so top on matey and I see the screen with more information about the Lotto. I like the animation. I think it looks good. It feels right. So I'm gonna proceed to the next screen. We'll work on the hot spot for my product detail. So again I'll click and drag to create a hot spot on this button here at the border, and I'll get to the car page for the screen transition. I'm gonna try, Push Left said. It feels like I'm kind of going going to the next step of the check out proceeding more and more to the right until finally all check out. We'll try it, see how it feels. I am going to hit this arrow key and go right to the next screen, and I'll just continue on adding my hot spot from my call. The action button here in the cart to the first payment screen here for pay with apple pay . I could mock up what it looks like when you pay with apple pay. So the little thing, you bots from the bottom. I'm just going to mock up this paid with credit card option because I already have that spring is end again here. Uh, when I have time, I can add a hot spot here to the credit card form and have a screen which simulates the keyboard popping up. At this phase, I'm really just trying to get the core flow down and the content down. So I'm not really worried about that level of detail right now, so I'll go ahead and just mock up the last CT a place order. I went to my confirmation, and then my confirmation is an exciting time. You're all set. A lot will be ready for pick up soon. Uh, because I have no other core navigation. I just added this back to menu button so that I can get back to where I started. In the next iteration of my design. I will want to address the navigation, but for this first phase, I'm just looking to get that core purchase flow in so that I can get feedback on the content before I move on. So now that I have set up all of my hot spots, I'm going to give it a try. Great works as expected. So now I'm going to send this prototype to my phone. Now it's your turn to link your screens together using hot spots. Once you've done that, will move into the testing phase.
9. Testing Your Prototype: So now that we've got our prototype created, we'll send it to our phone. He's got to share, and I have several options here for sharing email or a direct link, but I prefer sharing a text to my own phone. So now I have a text message with a link to this prototype, and I can click into it and preview it, and it's really starting to feel more and more like a real mobile application. Now I'm really excited to test with my first user. I'm gonna grab my roommate, who uses outside all the time, and he loves ordering coffee from Starbucks. So if you like, he'll be the right person to give me feedback on this first version. My preferred way to test a mobile prototype is to sit down with a friend and asked them to complete the task. So in this case, I'm going to ask my friend to use this application to order and pay for a coffee. It's crucial that as you're observing them that you don't give them any clues for what to do. You just want to observe, see where their eyes are going to see what questions they have see where they tax and observe any pain points for any issues that pop up while they're trying to complete the task. You'll want to test with 3 to 5 friends Perversion of the app. But since this is the very first version, and I already have ideas for how to improve it, I'll just take the feedback from my one friend and do another iteration on the design before testing with another. In the course of an APP design project, I'm testing dozens of times, if not hundreds of times with a wide variety of people who match my customer profile. My goal is to notice trends, similarities between users experiences. For example, if someone has an issue with paying for an issue with the credit card reform, if I see more and more people having an issue with that, that helps me prioritize design work on that specific piece of the application. And how do we know when a design is done? Well, if your customers can successfully complete all of the task that you asked them to and there are no major issues, then maybe you can talk to product owner about beginning development on the application Even when you've developed your first working version of the APP, you still need to test it, and testing is never done. It is a habit and a practice that you need to carry with you throughout your time, designing and building out. So now what's your term? Find a friend or roommate and asked them to complete a task with the up prototype that you've designed.
10. Finale: in this class, we learned that up design is an iterative process. We also learned the importance of testing a prototype to learn how to improve the concept before we ever start building it. So for your final project, follow this iterative process to create your first mobile out prototype. Well defined The problem. You'll research design patterns with some sketching. You'll design those screens in Marvel, and then you'll link them all together into a top herbal prototype, which will then test with friends. I really hope that I've sparked your curiosity and learning Maura about APP design because the field in the industry is vast and there's a ton to learn about each of these steps in the process. I hope you had as much fun as I did, and I hope to see you in the next class.