Transcripts
1. Trailer: Hi everyone. I'm Kara Hodecker and I'm the lead product designer for iOS at Ever note. I'm really excited to share what I've learned about iOS design. Whether you're just starting out with mobile design or if you simply want a refresher. This next series of classes is designed to help you get the full picture of the design process. We'll cover much more than just visual design. In this first class, I'll walk you through the basics of user experience design and a variety of UX techniques, including user journeys, sketching, and wireframing. I'll explain why each step of the UX process is important and how you can apply these techniques to your own project. Your class project will be to create your own travel app or rethinking existing one. You'll share progress for each step throughout the class with a set of wireframes as your final deliverable. In the following classes of the series, we'll pick those projects backup, and move on to visual design, interaction design, prototyping and user testing. By the end of this series of classes, you'll have designed a beautiful and delightful iOS app.
2. Class Project Assignment: Hi. Welcome back to iOS Design 1, Getting Started with UX. In this first video, we'll start off with your project assignment. Your project will be to design an iPhone app using the theme of travel. You can come up with your own unique idea for the app, or you can base your project on an existing travel app. This project will span over the three classes in this series, so you'll complete different stages of the project in each. In this first class, you'll be setting the groundwork for your app by choosing what the app will be, what the goals of the user are, and how your interface will support these goals. Why a travel app? Features of travel apps are really well aligned with user needs. These needs are quite easy to identify, so it will help take some of the guessing work out of the early stages of planning your app. It will also help us as a class together, since we'll be able to address similar patterns and problems. Let's start off by looking at some user needs that are addressed by different travel apps. Some of these things are; I want to book a roundtrip flight. I want to research tips, tours, and points of interests for a specific location. I want to compare hotels by price, location, and amenities. I want to book a hotel or other accommodations. I want a complete travel guide for my vacation. Take a minute to think about what a user would need to do for each example. These steps should be reflected in the flow of your app and should be presented to the user in the most clear and logical way. Consider what's most important to the user at each step and overall. If a user wants to book a flight, they would likely care most about prices, flight times, layovers, and which airline carrier they would like to fly on. Before you begin, take a look at several travel apps to familiarize yourself with their flows and the way the information is presented to the user. Decide what type of travel app you'd like to create or which app you want to reimagine. Here are a couple travel app examples; Tripadvisor, Kayak, Airbnb, Hotel Tonight, Expedia, Priceline, Hit monk, and City Guides by National Geographic. All of these apps do slightly different things, but they're all centered around travel. These show you the breadth of travel app that you could try to create. Here's an example of the Kayak app. This is a great example of multi-purpose travel app that's still really easy to use. The home screen presents the user with all of the options they have. From searching for a hotel or flight, to tracking and setting price alerts. Once a choice is made, in this case to book a flight, the next step would be to narrow down what you're looking for. The options are simple and what the user would expect. Where are you flying? When? How many travelers? When the search results are returned, you'll see the flights are grouped by airline and price. Here we go. You can then drill down to specific times, connections, and the number of stops within a price point. It can look a little overwhelming, but I think Kayak does a decent job by allowing you to compare many flights on one screen. Once you've chosen a particular flight, you'll see another screen that details out all of the flight information and the option to book. The screen is a bit cleaner. This is the last screen on the screen right now. It's a bit cleaner and organizes the information in a way that's much easier to parse. How will you get started? You're first going to do some initial research on travel apps and decide what you'd like to do for your own project. Again, you can create your very own travel up whatever you'd like to do, or if you're feeling, I don't want to go that crazy, just take an app that already exist and go from there, redesign it however you want. Next you're going to jot down some features that you'd like to include in your app. What are the user needs that you'll address? Is search going to be a large component of the app? Will there be a lot of content to organize on each screen? If you're recreating an existing app, you should still think about the use cases and user needs, and how your redesign could bring improvements to the overall user experience. In the next video, I'll walk you through an overview of user experience design to get more ideas flowing and to prep you for the coming lessons.
3. Overview of UX: Welcome to Unit 1, an overview of UX. I wanted to start today by sharing a quote by Steve Jobs, which I think captures [inaudible] design quite well. ''Design is not just what it looks like and feels like, design is how it works." So to begin, it's really important to understand what user experience design and user-centered design mean. To define user experience design, it focuses on creating a product that's intuitive, easy to use, and delightful for the user. With user-centered design, the needs, goals, wants of the user are carefully considered throughout the entire design process. We're going to be covering both of these as we go throughout this class. As you're thinking about your app and the features that you would like to include, be sure to keep the following considerations in mind when you're designing specifically for mobile. So some of these things are context and relevance are key. These days, many apps user location into surface content and it's relevant to where you are or to make searching easier. Here's an example of the app swarm, which it makes it easy for you to check in when it has your location. Mobile is quick, on-the- go and you have constant access to it. This is something that's new within the past couple years, but it's really important to remember. So Twitter and other news apps are great examples of what people want to use when they're on the go. You can quickly take out your phone, scroll through some content, and then be onto your next task. You put your phone back in your pocket, you're on your way. Frequent usage or check-ins and smaller device sizes are another thing that you need to consider with mobile. So simple apps like Yahoo weather show you the content that you want to see front and center without you having to navigate very far. Apps like this are meant for a quick check-in a couple of times a day. Finally, you have to remember that distractions are present during use. With mobile, it's especially important to remember that users aren't going to give you their undivided attention. Short attention spans have been leading people to get frustrated if they can't find what they want when they want it. So as the designer, it's important to keep these considerations of the user in mind at all times. Use them to guide you in each part of the design process. Remember, your app should remain focused and present the user with the most crucial and relevant information with the least amount of effort. This is why the home screen or the main screen of the app is likely the most important. This view should provide the user with the following. The information the user is most interested in. If it's a more complex app, jumping off points to other sections within the app. So some apps focus on one or two main functions, which allow for that information to be presented to the user right away. These include, browsing and consuming content that's often updated or changing, referencing information and logging information. The simpler apps often feature feeds or timelines. This is an incredibly effective way to display content for users who want to consume content quickly. Here are a couple of examples. I have Facebook, Twitter and Pinterest. A couple other are Fitbit, Calendar, Weather apps, and even your email. All of these apps are super simple. You open them up, you're on the feed that is likely the information that you want to see and anything else that you need to get to. You can get there easily if you need to search on Pinterest. If you want to see your notifications in Facebook, you can jump over to that. But likely, anything that you need is right on that main screen. Other apps have a more complex feature set and allow the user to perform multiple types of tasks. So some examples of apps with a more navigational approach include Evernote, where you can read notes, search, create notes. Airbnb, which is this example I'm showing here, where you're searching and browsing, something like Foursquare you're checking in, your searching, browsing, reading reviews, as well as maps. You're getting directions, looking at the traffic. That is a little bit more complex. So even though an app may be more complex than others, that doesn't necessarily mean it will be a poor user experience. Airbnb is a really good example of this. Here you can see they use photos and large topography in conjunction with a great flow to break up the information for visually appealing screens. So even though there's a lot of information presented to the user, it doesn't feel so overwhelming or confusing. So in this example I'm showing here, a user is searching for a place in South Lake, Tahoe. They have all these beautiful images that they can scroll through. Then when they find something that they like, they can click through to go read that. Pretty simple. So by having an understanding of what you want your users to do with your app, you're well on your way to start putting together user personas, a user journey map, sketches and wire frames, all of which we'll be covering in the following videos.
4. Project Example: Choosing an App: At this point, you've been introduced to the class project and you've had an overview of user experience design. Next, I'm going to take you through an example project to hopefully give you a better understanding of each step and what you can expect the deliverables to look like. For my example project, I wanted to focus on the booking a flight aspect of travel. For these purposes, I'm going to use the Southwest Airlines app as my example, and I'm going to show you how I envision redesigning it from start to finish. Let's take a look at the existing Southwest app. I have here a bunch of screens from the app that I took on my phone just to give you an idea of what it looks like now. I'm sure as you can tell, the visual design looks pretty outdated and clunky. It's also not super friendly at first glance. I gave the impression that it's going to be a slow experience, frankly, because of how outdated it looks. I don't know. It just doesn't give me a good impression. I don't feel really great about, oh, this is going to be awesome. In terms of the flow itself, I feel like it's a bit jarring to have to be presented with this option to login or continue as guest right away. Especially if Southwest isn't an app I use a lot and I don't have a username and password, this is annoying. When I click "Continue as guest", the very first thing I see at the top is to enroll or to log in and enroll, so they're already selling me on something when I just want to get in and start booking a flight. Then I also see different options here below, so I can check in, check a flight status, book travel, manage travel, and special offers, etc. Now, when I click "Book Travel", I come here, and nothing is filled in. One thing that really drives me crazy is that they were not looking for the location that I'm in right now. They don't know that I'm in California. They're not going to repopulate San Francisco as my home airport. That's something that a lot of apps are taking advantage of. They also didn't even pop up something, just say, "Southwest Airlines would like to use your location." I would have gladly given them permission to use my location if they would save me from having to add in that. It's just one of those little nice to haves, which makes it feel like I'm doing less work. Even when I actually go through and click on where I can choose a city, all I see here, not even any suggestions. Again, they're just not using my location at all. If they were, then they maybe would have said Oakland, San Francisco, and San Jose, for example, all the airports that are nearby. But instead, I see the list of just cities alphabetically. I would go ahead and type in each city that I want. Each time I go back to the screen, so back and forth, back and forth, fill in the date. Here, choose how many passengers. I don't have any promotion codes or anything, so then I'm going to click "Search". It takes a little while to fill the sky out. But then after I hit "Search", I'm presented with my selecting departures screen. Well, it's pretty clear that yes, this is where I'm going to choose my departing flight, it's super overwhelming. There's just so much happening on the screen right now. There's giant purple buttons. They're also telling me about how the bags fly free. Personally, I know that Southwest's thing. I already know it. I don't need to see it right here. Even if I didn't know it, is here the right place to present me with that information? I'm not really sure. Also, this $ and points things just feels really, really very prominent. If I scroll down, another thing that I'm going to notice is the purple buttons only get worse. They have this awesome gradient texture on them. It's just a lot going on. They have this for each one of the flights. So yeah, I guess, they're grouped together, but it just feels really overwhelming. Another thing that I find really weird is that when I actually click on one of these, so if I hit, want to get away, anytime, or business select, instead of just choosing that flight and preceding me forward, it's going to expand, like you can see here. What does it expand to show me? That I get two free check bags. Wait, I already knew that because he told me a little while ago. It's going to tell me how many rapid reward points that I could get. Maybe that's helpful information, but do I really need that right here? Again, not really sure that's worth it. Because now, I have to again say yes, select this flight, that's the one that I want. After I go through and I choose my departure flight, I choose my return flight, I'm going to see the summary screen here. Again, forward, they have these headers that say, "Here's the different flights." But then this text gets really small and squished together. It does have everything broken down, but I just feel like there could be a better way that I can show this information that's a little bit easier to read. My total price is down here, great. Hey, first and checked bags fly free. This is actually a little bit more helpful down here because I can see it right next to the price that I'm paying and I know that I don't have to pay any extra for bags. I do actually like that. Then I hit "Next" from there, and then I'm going to go on my way to proceed with adding my credit card and whatnot. I'm going to skip that part of the flow for my purposes because I think we have a lot to work with in the beginning here. Before creating my persona's, what I want to do is actually think about some user tasks and use cases that my user would be using the Southwest app for. To brainstorm, I grabbed some Post-it, grabbed a Sharpie, and just started jotting down what would people be doing when they came to use the Southwest app. What I wrote down is search for a round trip flight by price and schedule, book around trip flight. Actually, whether they're just browsing to get an idea of prices is sometimes different than actually when you're ready to book. A lot of times I do that myself. I will go on and I'll look just to see how much things are, but I'm not actually planning to book. Additionally, I can view an existing reservation, so see what all the flight details are. Then in addition to that, I can change or upgrade my seat. If I have a flight upcoming, tomorrow, for example, I can check into that flight, and I can view the flight status to see if I'm delayed, important information like that. When you're coming up with your own list of use cases, try to think about what's going to be really important for each task, and do some research. Ask your friends or family about their own mobile travel experiences. What apps do they use? What apps do they like? Do they even use apps at all, or will they only use the computer because they haven't found something that works for them, or they're just kind of afraid to? The tasks that I've listed here are pretty common for mobile users. Once I have my persona created, I'm going to use one of these tasks to guide the rest of the project. Once I have my use cases already, and by ready, drawn up on Post-it Notes, next, I'm going to think about the types of people who would use Southwest's app. This is another brainstorming exercise. Again, got my sketchbook out and got my Post-it Notes out. I listed out some potential users. What I'm doing is trying to avoid stereotypes or average users. With personas, you want to create a model that feels like a real person. What I've come up with here, they're a little bit generalized, but we're going to make them into something much more concrete as we go. The six that I came up with, and six is a totally arbitrary number. It fit really nicely on the sketchbook. What I started with was college student, a working mom of three, a business executive, let's say a guy in his 40s who's really budget-conscious, a young professional, and a newly married woman. Just a broad spectrum of different types of users. For example, starting with college student, it's really a bit of a generalization. But if you choose the archetype, you're going to breathe life into that college student by showing their personality, showing their characteristics, and what goals that they have. Because you can't simply group all college students into one bucket. Of course, they are going to be completely different. Everyone has different personalities. But once you have more details, that's going to help you figure out the type of user that they are. You do end up choosing a college student, for example, you're going to pinpoint on a specific college student, what that person's personality is, what their traits are, that sort of thing. You'll really be able to focus on that particular person. It just happens to be a college student, so it gives you a little bit of a starting point. Now, in the next video, I'm going to walk you through the persona that I chose. I'm going to actually choose young professional to use that as guiding the rest of this project. But we'll go through that in more detail in the next video.
5. Defining User Personas: Welcome back. In the last video, I gave you an overview of user experience design and how it pertains to mobile apps. In this next video, we'll cover the first step of our UX process, defining user personas for our app. There are many different UX tools and techniques that designers use everyday to begin projects. Some designers focus on a few select techniques while others are much more extensive. Some of the UX techniques that we won't be covering here include conducting stakeholder interviews, gathering requirements, competitor analysis, surveys and analytics. This isn't because these techniques aren't important at all but because they simply aren't relevant to us at this point. Because there are so many different techniques that you can use, a lot of these things are used in more of a professional sense and so it just doesn't make sense for us to cover these to begin. But the UX technique that we will start with is creating user personas. A persona is a character who is representative of the needs, thoughts and goals of the target user. Personas are built to design the best possible experience for your users. Think of a persona as your typical or ideal user, and who do you see using your app? Personas can help you remember that your users may not be just like you. They also keep you from generalizing all users into one main bucket, thinking that everyone has the same needs and goals. Of course, many users will likely have the same or similar goals for using your app but each person comes from a different background. For example, two users both want to book a flight, but one user maybe a high-level executive who wants to use miles for first-class trip while another maybe a mom who just wants to find the cheapest way to get her three kids to visit their grandparents. These users have completely different needs and will therefore have different ways of navigating a travel app. There are likely several different types of people who would use your app to try to come up with 2-3 personas to represent your users. Each should have a slightly different story and use case as to why they want to use your app and what steps they will take to achieve their needs. We'll start off by writing down a description for each of your personas. Consider different types of people to best represent a variety of users. Think back to the executive versus the mom who are clearly very different users. When you're writing each description, you should include the following: gender, age, marital status, occupation, economic status, how familiar they are with technology, devices they use, general hobbies, etc. All of these things will help capture who this person really is that you're trying to represent. Next, after you've captured the description of the persona, craft a scenario that you could imagine a user would want to use your app for. Think about what that users motivations, goals and needs would be. The personas that you create should cover a few scenarios and types of users that you'd like to design for. You won't be able to count for every user but you can at least consider a few. Start off by writing down your descriptions and scenarios. You don't need to spend a lot of time designing or making these look really great. It's also up to you if you'd like to include a representative photo for each user, it can be helpful to print your personas out and have them close by reference when you're thinking about your app and more detail. But there's really no need at this point to make them really fancy. Again, your first deliverable will be to create 2-3 personas to best represent your target users. You can upload these to your project in any format you choose. I'm also going to include some references on the web that you can look through if you'd like more information on personas, there's a lot of really great stuff out there. In our next video, we'll cover how you can use these personas to help you create a user journey map.
6. Project Example: Persona: We just covered our first UX step of defining user personas. Now, I'm going to walk you through my project example for defining personas. The persona archetype that I'm going to choose for my example, is the young professional. I started by deciding that this was going to be a female user and I named her Kelly. What I did here was actually took out my sketchbook again, and just started jotting down a bunch of stuff that I wanted to cover about Kelly. I tried to picture what type of person Kelly would be, and what type of user that she'd represent. On the sketch, I jotted down personal stats, characteristics, her view of technology, and what I imagined her goals and needs to be. In most of what I wrote down has something to do with travel in one way or another. I started here as you can see, so decided Kelly, she's about 27, for our purposes, she's a UX designer, and I started writing some personal things about her, and saying that she's not married, but she's in a committed relationship. She makes a decent salary, she lives in San Francisco, has couple of roommates but no pets. Then characteristics to explain what type of person that she is. So if you were describing her to a friend for example, what would you say? I chose to say she's a pretty active person, she does gym classes and yoga, she really loves traveling, easy going, and this is important. She's not super frugal, but also not an outrageous spender. She's organized, but she likes to plan. So not overly OCD, but she does like things to go her way. All of these things are really important distinctions as we hone in her on our personas. Next, technology, this is again important because we're doing a mobile app here. Because she is a UX designer, that's going to contribute to her use of technology, so she really embraces it. Again she's on top of it because of her job. This causes her to get frustrated with slower, poor experiences, she's got the latest iPhone, always up-to-date on that sort of thing. She's really comfortable purchasing online, and she's a pretty active Internet user. So that describes how she feels with technology, and how I'm going to think about her as I'm designing the version of the Southwest app. Last but not least, her goals and needs. These are things that I thought through, what is Kelly going to have in mind when she's using this app? She's going to want to be aware of good flight deals, that's something that's important to her. She wants the ability to compare travel dates and times for the best price, she wants to be able to use miles or points towards travel bookings, and she prefers staying with one airline because that's how she's going to accumulate those miles or points to help her out. Again, as I said here, she's not frugal, but he's also not an outrageous spender, so she's pretty young, so she wants to take advantage of any way that she can save a little bit of money. Now that I've done this, let's dive in a little bit deeper to some of the things that we noted here. I said she was in a committed relationship and loves traveling, so let's imagine she'd be traveling a lot with her significant other. Defining that she makes a decent salary, and again, that she isn't frugal and not outrageous spender, all of those things put her in a certain category. One could assume she's not going to choose the absolute cheapest flight, and sacrifice everything else about the trip just to get that good deal, but that she'd likely instead do a lot of research to find a flight that she feels good about. Now, since you're not going to bee presenting your personas to a client or some other stakeholder, a sketch like I've done here is perfectly acceptable for this class. Totally fine. But what I'm going to do next, is walk you through of what this could look like in a digital form. Again, ideally, you're going to want to create 2-3 personas for your project. I'm just going to cover one, but this is just to give you an idea. Next up is the demonstration. Now we're going to start with the actual demonstration part. What I'm going to do is open up the program sketch, and I'm going two create a new file, oops, it went over there. I don't know if you guys are familiar with sketch or not. But this is a really great tool for super quick things. A lot of people actually use it for actual UI, I prefer Photoshop myself. But, I love this tool for putting things down quickly, doing any wireframing. This is what I'm going to use for my personas and my user journeys, so it's just a really great tool to do something quick and easy. It's pretty similar to other programs like Keno and you either have tools over on the side here, we have tools up at the top and all kinds of things so, lots of stuff that we'll cover as we move forward. The first thing that I want to do, right now this is just like a big blank Canvas as you can seen. What I actually want to do is, I want to insert an artboard. This is going to give me just like a bounding box of where I'm going to place everything. You don't have to do this, but it helps a little bit I think. It also helps with exporting because that way you have, like what exactly you'll be exporting. From here I can actually just, hold and drag right here to create any artboard, or I can also start with all of these things. So this is going to be really handy for you if you're using this program for your wireframes later, because you can pick iPhone screens for any size, iPad too, lots of things in here. But for this purpose, I'm going to actually start with letter size, and then you can see here I get these little borders, so I can actually scale this thing to however big I want. Since I'm actually not printing this, I don't really care how big it is, and if I did want to print it, I get always, it would just scale down. I know that my persona is actually going to be a bit bigger, and I just want to make it a little wider and a little taller. So I'm just going to arbitrarily make this guy a little bigger, and this is something I can always change. So if I click away, then I don't have those little bounding boxes anymore, but if I click back up here, they come back right away. Super easy to change at any point. This is also the name of what this thing is so, I can either go over here and decide to rename it, and I'm going to just say, Persona, and I'll update here. Again, not a big deal, but it'll help if you had more than one of these artboard's next to each other, so you can actually do all of your personas in one file. It'll just help you keep tracks, so this could be persona a. If I wanted to, I could go insert our board, or I can actually, I can right-click on this sign and say Duplicate, and then it'll put a second one here. So I could do all three at once, and I can show you how to export that at the end. But for right now, I'm just going to go ahead and delete that guy because they don't need it. Next thing I want to do is actually save this file just in case, I am going to call this persona and a sketch, you can just go ahead and Save to the desktop. Great. Ready to go. Now I have this persona to work with, so I've got Kelly. One thing that a lot of people do with personas is actually use a photo to represent that person, and it just gives a little bit more life to your persona, so you can look at that person and say like, yeah, this is Kelly for my example. I have scoured the Internet a bit and done some stock photo grabbing, but for our purposes here, I will just paste this in. So this is my representation of 27-year-old Kelly. Paste that in there. Great. The next thing that I want to do is actually, I want to insert some text. I want to keep in mind what persona that Kelly is representing, and that for me that was the young professional. I'm going to insert a text box, and I'm going to say, Young Professional, cool. That is my persona, I just going to decide to put it there. Then I want to also put Kelly's name on here. Kelly, and then I have all my tools over here for my text which makes it really easy to make things [inaudible] something to go. Cool, that looks like a good size. See if I wanted to do like a blue green type of thing, this is totally arbitrary, I'm just deciding this as we go. But here is Kelly, and they actually have these nice little smart guides that line everything up so it's helpful. Great. Next, what I want to do is just to bring a little more life to this actual document and make it look pretty, put together, and just make it look nice. One thing that I want to do is, I'm just going to use a color box and put it write about here. I just have it's sized right now to the width of her picture. In this block, I am going to put a couple of things about Kelly's background. I also forgot to mention, when you're creating your personas, what I did is actually just looked online for inspiration for how these things are laid out. It's pretty helpful to just get a sense of different ways that you can lay them out or it might spark an idea of like, I want to include this in my persona that I haven't covered myself. For this one for example, I just found a nice looking persona and I was like, "This looks great, found it on [inaudible]. Thought I would just use that structure for the same thing for mine." I've typed up some of this already just to save us a little bit of time, but I have what I call Kelly's background here and just pacing that in. So what I've got here is the little stats about Kelly, so it's her age, location, marital status, kids, occupation, salary and education. Some of this stuff I didn't have written down in my sketch earlier, but it was just something that I wanted to add at this point, and that's totally fine. This whole process is really flexible. So here we are just listing out all of those things, as you can see. Then what I also want to do is, actually I can show you back again. I had written just a couple of things about Kelly here, so I have bulleted lists and everything. But what I also did was I took some time to type up a little paragraph about Kelly. So again, if I was describing her to a friend or doing a written up on Kelly that I wanted to cover a story, a baseline. I have this guy also written already, just going to paste in here, there we go. I'm going to decide to put this here. This is a great point. Now you can see my text is a little bit closer to the edge and I don't really want this guide to be to much taller. I'm just going to stretch my box just a bit, perfect. There we go. So about Kelly, this is basically just a paragraph to explain a little bit about Kelly. It's summarizing what I covered in my notes. Basically, Kelly is an active person who enjoys traveling to new destinations whenever she can. She tries to plan one trip abroad each year as well as shorter getaways to nearby locations. She has three weeks of vacation that she will ideally spend away from home. She mainly travels with her boyfriend, but occasionally with a small group of friends. Kelly makes a decent salary, so she isn't entirely budget conscious, but she's not an extravagant spender either. She often weighs options to seen whether quality or price is more appealing. So it just sums up everything that we've wrote going on so far. The next thing I want to add are these characteristics. We've covered this again with our bullet points. I'm actually going to add in some bullet points just for a little more clarity here. Cool. Great. Super simple. Actually not finally, I've got a hole up here. But I have what's also really important, her goals and needs. So I am going to try to align this guy with both. Sometimes this is why I can't be super pixel perfect with sketch, because it drives me a little crazy. So again, with her goals I want to add sum bullets and these are all the things that we had covered earlier and I might just try to see if I can, no. So this is not so great for aligning things, but we can fix that later. All right, so the last thing that I wanted to add onto this persona was actually, a lot of times people use little charts or graphs or icons to represent different things just to make this a little more visually interesting. So what I've done is made a little bar graph of three different aspects about Kelly. So I'm going to try to align that. Looks pretty good. So tech knowledge, spending habits and booking preferences. These three things I wanted to highlight because they're pretty important to me as I will be continuing this project. So with tech knowledge, does she have little knowledge to expert level? So I said, "Pretty close to the expert." Of course, she's not the top expert, but she's got a good sense. Spending habits, frugal to lavish. She's in the middle, a little more towards frugal, but definitely not way over here. Her booking preferences versus the lowest fare in the most ideal flight also in the middle, maybe a little more towards the most ideal flight. This will give me a really good sense of, I can glance at this, I can compare for you guys it would be something really great because you're going to have two to three of these personas. You'll be able to look at them together and say, "Kelly is the user that is like this. Let's say, Sam, is the user who's like this." Maybe Sam is the more frugal either, his the budget conscious guy. Then there might be somebody else who maybe they have really little knowledge of technology and that's something that you're going to want to focus on throughout your project. So I'm done here. Now the next thing I'm going to show you is just how to export this guy. Because I already have my art board like I said, it's just going to export really easily. I go up here, export, select, so it calls it a slice. What I want two do now, I don't want a PNG. You could if you wanted to or you could do JPG or TIFF, but I'm just going to do a PDF because it's a little bit simpler and it also keeps the text really nice. So export and that's going to say, "persona.pdf." Sounds great. Hit export, decide where to save it. Perfect. Done. I'll save that and now if we open this guy, cool, I've got my persona hear. So this is again, something that I can print out if I want. But this would also be a great way to deliver as your final deliverable for this project or for this part of the class project. I'm going to include a link to actually a sample persona template that you can download, it's something that I found online. It's a little bit more digital and non digital style, so it's something that you can print out and then drawn. That could be a good way to start if you wanted to start with sketching. Then I'll also upload my sketch file here in case there's anything that you guys want to grab out of that. All right. Well, you should be ready to get your personas going and I can't waited to see them.
7. Mapping the User Journey: Welcome to Unit 3, Mapping the User Journey. Our next UX technique is called a user journey map and can also be known as a user experience map. User journeys map out the series of steps of the activities in interactions the user will have with your app. User journeys are beneficial to the design process since they allow you to think about the app from a high level. They'll help you figure out how your users will interact with your app, what expectations may be, and even cause you to think of new functionality you may have not even considered yet. In practice, user experience maps can be quite complex and contain details such as business requirements and goals, multiple touch points that a user has with the product or service, and qualitative insights. However, for our purpose, will be focusing on a simplified version which represents the story of a user's relationship with your app from the user's perspective. User journey maps can be designed as more of a text-based flow, or you can take a more visual approach. This is really your preference, and I'll show you some examples of both. Here's one right here. It might be helpful if you zoom into it a little bit more. I've also included the links online if you want to take a closer look as well. Here's another one. You can see these user journeys are mainly black and white, similar to wire frames, with pops of color to represent the path the user will take or options that they can choose. Here's another one still also looks a little bit wire frame me. Again, I encourage you to take a look at these online as well. Some are much simpler, this is an example of a very text-based one, but it still gets the same point across, is just not quite as pretty. Now that you've created two to three personas in the last step, we're going to use these as a basis to create a user journey map for each. We'll start by writing and visualizing each user or persona or the journey that each person will be taking through your app. You'll think about what are the goals and needs of your users? What tasks do your users need to perform? Consider which goals and tasks are crucial and which are secondary. This really helps to keep the number of steps to complete a task to a minimum. We don't want users to go through your app and feel like they're really overwhelmed or it's too complicated. Next, we'll map out each step of the user's process. Think about what screens the user will move through, what they'll see on each screen, and keep in mind this whole time how the user should be feeling throughout. Again, we don't want to stress anybody out. They should feel good when they're using your app. A user journey maps should contain a reference to the persona it's based on, and the end goal of the user. Some examples of tasks that your users may want to perform, especially within a travel app, would be, let's say to search for three or higher star hotels in San Francisco, or to purchase a round trip, airline ticket, maybe book a vacation rental, and then even research and find things to do in a certain vacation spot. These are a couple of things that, that your users may want to do and that you want to think about. These are, are good examples of how you can, what you would do to take the user through how they would accomplish each of each of these tasks. Finally, evaluate the maps that once you've completed a draft and ask yourself the following, is the level of complexity appropriate for each task? Where can I simplify things? Does the overall flow makes sense? You'll want to make tweaks as necessary. This is not something you're likely to get right on the first try. Your deliverable will be to create a user journey for each of your personas to represent the goals of your users. Once you've completed your user journeys, share them with the class. Next up, we'll dive into sketching where you can finally take these personas and user journeys and turn them into something a bit more concrete. We'll get a little more into the design part in the following videos.
8. Project Example: User Journey Map: So in the last project step, I completed my persona. Now, what I need to do is decide which is the key user journey that I'm going to outline. So let's start by reviewing the user tasks that I came up with again. Back to my Post-it Notes. These were search for roundtrip flight by price and schedule, book a round trip flight, view and existing reservation, change or upgrade my seat, check into a flight, or view my flight status. For my example, I'm going to use the first task here. Search for a round-trip flight by price and schedule. This task is still fairly generic, so I want to craft a little story using my persona of Kelly. I've come up with a scenario that I imagine that Kelly would be going through. Let's say that Kelly wanted to conduct a search for roundtrip flight from San Francisco to Portland, Oregon to visit her friends for a long weekend. She'll be traveling with her boyfriend. She has three different weekends in mind and she wants to compare the price and schedule of each weekend to determine which one is going to be most ideal. So with this scenario, Kelly will also be using the Southwest app to browse for her flight options. Based on her persona details in the scenario, I've also come up with the list of what her goals potentially are. The first is that she wants to search for roundtrip flight from San Francisco to Portland. In addition, she would like the ability to easily and quickly search multiple weekend dates to be able to compare prices. Doesn't sound so hard, right? Well, the first goal is the simple one. The second goal, on the other hand, will require a bit more thought on my end. I want to pay particularly close attention to this one. I'm thinking about how I could restructure the flow of the app. So now I'm going to give my user journey map a shot. What I've done here is outlined the steps in the screens that Kelly would have to go through to achieve her goal. So these would be she starts at the home, booking travel, which requires to choose a departure city, returns city and her departure and return dates. Once she's done that, she's going to hit search and she's going to get the results for a departure flight, which she will choose one and then she'll get results for the return flight where she would choose one. Then her next step would be to view the flight summary and get the total price, and then go ahead and book and pay. Again, for our example here, we're not actually going to go through the booking and paying, we're going to stop right at that flight summary step. Once I have these outlined, I went back to my sketchbook and I drew this out as more of a flow. I did this instead of hopping right into sketch because it really helped me visualize what I wanted to outline faster. Then I did end up drawing a couple different times in a couple different ways before the presentation felt right. So that way I have more of a basis. I can work from my sketch to go into sketch. So next, I'm going to walk you through how I created my user journey map using Sketch. I'll hide this and I'm going to go back to Sketch. Create a new document, and make this full screen. All right. Again, what I want to do write away is save this document. We're going to call this user journey. Save to the desktop, great. Again, as we did in the previous step, I want to have an art board here. This I'm just going to come and draw one pretty arbitrarily. I know that I'm going to need a lot of space. I'm going to try to fill a lot of the space here. Then I want to name the art board, user journey. Great. Again, I can change the size of this header anytime, so it's really no big deal. What I'm going to start with is actually creating a little header for this. I've done this over here, so I'm just going to bring this in. Here's my user journey. I also have the task outlined. So just a simple text thing, search for round trip, flight by price and schedule. I'm just going to do that. Great. Save. Now, I have my basis to start. Like I said, we're going to be starting on the home screen. If you remember the Southwest app on the very first screen was that do you want to sign in or do you want to continue as a guest? I'm just going to bypass that screen and go to what I call the actual home screen to start. First thing I want to do, I have here which is going to represent my first screen. This is going to end up looking like a wireframe, but it is definitely not a wireframe. That wireframes would be much more detailed. What I want to do here is just reiterate what the simple things are that would be on each screen to be able to walk through this a little bit easier. I'm going to start with that, and I'll label this. This is going to be my home screen. What I'm going to put on the home screen, actually, I'm not going to worry about that right now. What I'm actually going to do is put on here the buttons that I have as options. I've just made some of these already just so it goes a little bit quicker for us. On my home screen here, there were a couple options, oops, I'm trying to copy this guy. I'm just going to copy these and paste them. I have five there. The're about five options or so from thinking back to what the Southwest app was. What I'm going to do now is just label these guys. If this ever happens, you can actually seen that when I hover over, these are the layers that are on top, and then this text layer is below that. So I can either drag this guy up, so it's on top of everything. There we're. Or I can also go to the top and go to arrange and move to front as always an option two. Make these left aligned and so my options before were check in, flight status, I'm going to fix the spacing in a second, book travel, manage travel, and there was something other so we'll just put other for now because it's not super important. Over here, I can actually change the line spacing. I can just pump these a little bit more, and I probably have to go a little more than that so they all fit. That's good enough. Perfect. So here are my options for the home screen. Actually, I was just going to do this, make that stand out a little bit more, and all of this stuff it really doesn't matter a ton. I'm just going to make that recede back a little bit more. The next step that I'm going to do is actually I want to click on book travel. Let's say I want to select the sky and just change the background color to be something that I'm going to actually click on. I have a color over here that I want to use. I'm just going to throw that in there so I can grab that color. Nice thing about Sketch is very easy to say oh, I want to use that color. Cool. Get rid of that guy. So next, I'm going to draw an arrow. So I'm going to go to Insert, Shape, Arrow, and I want to draw from this guy to our next screen. I'm also going to make this sky blue just for consistency here. I might make it a little bit thicker so I can see it better. Cool. Next up, I've done this screen already, that saved us a little time. I can copy this. Here we go. My next screen is actually the book travel screen. I'm going two label this guy book travel. Great. On this screen I can seen what I've done here already is I'm going to choose the flight, where I'm flying from, where I'm flying to, and then the date from into and then I have a search button at the bottom. The first thing that I actually want to do is do the from. Because these are all within this screen, I'm just going to move down instead of moving over. I'm going to move over to go to the next screen once I hit the search button. What I'm going to do here, again, I have this on the screen already. Get that aligned. If I clicked on "From," here's my departure city, I'm going to label this as from. I'm just using the arrow keys to move this down. You can do it with your mouse as well, from and I'll just move this guy down a bit. Here, I would be able to actually search. I'm just going to copy one of these. Oops, I didn't copy everything. written this down here. Again, that went behind someone got to arrange to move to front. Great. This is going to serve as my search box actually and in addition, I'm going to add just a line to represent the list of things that I have here. A bit of a perfectionist, I'm always trying to align these guys back up. Now, I'm just going to copy. If I can do this quickly and make a bunch of lines to look like, these are my search results. Then I'm just going to copy this. There we go, a little bit faster. I just group those together just so I could copy them a bit faster. That's my little template for my departure. Here would be my list of cities. This is one of my documents, it's going to start getting bigger. I'm going to select over here, and I want this guy to actually be taller because I want to do another row below it. I'm going to copy this whole thing. Ensure I got everything and just duplicate this for the return trip. From, to and this is going to be return city. I actually do want to draw a little arrow from here to here. I'll copy that guy and what I can do is just going to drag this over. If I hit 'Shift," it'll stay on the right axis. Here like that, I'm going to move this guy down a bit. Cool. This is showing I'm choosing my flight from and to. I'm going to change this to say destination city because return sounds a little bit weird right at this point. Great. I'm going to save this, I am a compulsive saver, I don't like to lose things. The next thing I want to do is I'm going to change this arrow. Let's see here. If I get my arrow options. I don't see them. If that happens, just said escape. We're going to leave that alone for now. The next thing I want to do is do my date to and from. I'm going to copy this, this and that, and shift it over hear. This is going to become departure date and this is going to end up being calendar. I'm not going to bother drawing out a ton, but I will make a little bigger type thing here. Let's say this is our calendar. Another thing you can do if you want to leave yourself a little long I'll just say calendar to see what you're thinking. Again, this is not like any type of wire-frame. This is just laying out the very basics of what I'm doing on each screen. I'm going to copy this and place it down here. Looks pretty close. This is going to be two and now this is going to make more sense as our return date.Again, I'm going to grab these arrows to show that I'm going from here to here. Undo. This guy is not cooperating right now. Sometimes sketch gets a little crazy. Drag this over. There we go. This is showing again, I'm choosing all of these things and then I'm going two go back to the screen. These are going to populate with whatever I choose in these steps. Also I'm going to draw some of these arrows down below. Here we go. It's a little tight. There we go. Test to cover everything. Cool. Save that. The next step is I'm going to get my search results. Actually, this is feeling really tight to me and this is bothering me. So I'm going to grab these guys and move this whole thing down a bit, and then I'll just make this guy taller. As you can see, it's super flexible. You can always change any of this stuff. The next thing I'm going to do is hit this search button, that got behind and then the front. Cool. Next. Here we go. This screen is going to be my flight results for departure. I'm just going to read results for now, and then the screen is going to get broken down into all the different flight options that I have. I'm just going to designate that by making these guys a bit bigger. Since obviously, all these results are going to scroll, I'm just going to return at this guy. Scrolls off the bottom and is aligning. We'll do that after, so copying. Let's say this is flight option A. I'll do flight option B and I'm here flight option C, and so on. Pretend that's hovering in the middle. Here I'm just going to do this departure flight. I'm going to duplicate this whole thing again because I'm going to have results for my return flight as well. I'm going to throw this over here, and let's say that flight B was a great option. I'll choose flight B. I'm going to change this to return flight. Let's say I wanted to choose. I'm actually going to color this guy here. Should I chose that? Here, let's say flight A was the best one. I'm going to choose flight A, that's the wrong. The border, we're going to go fill. Cool. Again, draw my arrow. Make it go on top. One thing that I didn't mention was for each of these, I might have some flight details. This thing could either expand in line or it might show me another screen. We're not entirely sure what that is going to be. I'm not going to leave it as a different screen right now. I'll just keep that in mind later. I'm going to copy this, and this is going to be our last screens, so our flight summary. Here we go. Summary. This is going to start with our departure flight, and that's going to have just some information. I'm going to copy one of these dudes, grab that thing to the front. Say that has some information about our departure flight, and then I'm going to do the same thing for our return flight. Then we want to do our total. Lets say this is where we have our total amount, and then at the bottom, we're going to have a big button to purchase. We don't known what that's going to say yet. Totally fine. This is a really quick overview of the steps that we're going to take. Again, these were based on the existing Southwest app. This is the steps that we see the user taking. Again, we're starting with, we're going to choose book travel. We're going to choose where they're flying from, where they're flying to, and the dates. Search. Again, choosing these guys. Once they searched, they're going to seen their departure flight. They're going to see their return flight and then a summary of everything. What this isn't covering right now, this is one way we could do it. This is exactly what Southwest has right now. The one thing that we wanted to optimize for Kelly was she wants the ability to look at different flights or different weekends. Let's say she chose a weekend here. She gets to the summary and says, ''Oh, this one is $600, yeah, that's pretty expensive. I want to checked a different weekend.'' At this point, was she would have to do is go back, back, back to the search to be able to change her dates. What I want to look at next is what are some different options that I can try to like Kelly actually more easily changed the dates while she's in the process a little bit further down, because she probably doesn't want to change these from and to. She just wants to change the dates. It's a lot of back and fourth. We're going to look at that in our sketches. We are not going to look at that at the user journey, since this does lead the path for what she's going to be doing. We're going to focus on more again on that in our sketches and again in our wireframes. We'll cover that next.
9. Start Sketching: Welcome to Unit 4, Sketching. Now that you're armed with personas and user journeys, it's time to put these into action. In this UX phase, you'll sketch out your user journeys in order to work through the implications of your design decisions. Doing so will help you see how many decisions the users will have to make and how many screens they'll go through to achieve their goal. This step is truly invaluable and should definitely not be skipped. So why is sketching so important? Honestly, it's much too difficult to jump right into wireframes, even if you already have ideas floating around your head. Wireframes are also created on the computer, so they already take more time to create than sketching. You also might get tripped up too early in the process with the design details, like "Where does the button go? How big should this text be? Etc" Sketching helps you gather your ideas really quickly. You can erase, throw things out. You can change your mind as often as you need to. There's no ramifications for doing that. You just grab a new piece of paper and go. You want to keep your sketches loose and don't focus on every single detail. You'll save that part for the wireframes. So to begin, sketch out several ideas and options for a few key screens of your flows. As you sketch, remember to think about the following. What information should go on each screen? What's the hierarchy of information? What are some different layout options that I can try? Other things to keep in mind while you're sketching are; keep your sketches loose. This is really going to help you move quickly and try many different options. Again, don't worry about being perfect. We're not here to judge you on your sketches at all. Don't focus on every detail. You just want to get down the gist of each screen and you'll be able to refine everything later. Did you think of a new ideas you were sketching? Great. Don't be afraid to brainstorm once you've got the pen in your hand and let yourself go wild, nothing is too crazy at this stage. It'll help you work through many different options. Are you feeling stuck? Step away from your sketches and take a break. You may need a little time to clear your mind, or you might just want to feel inspired by other apps. So open up your phone, go to your computer, play around with some things and get inspired. Also, don't forget about your personas. If you have them printed out next to you, read through them again and put yourself in the user's shoes. Are you still on track? So here are some examples of sketches to give you an idea of what we're looking to achieve at the step. The first example is actually my own sketch, and you can see that it's pretty simple. I don't use too many words or buttons, and I don't actually draw out a full screen. Instead I focus on the task at hand on each screen. There isn't really a need to be super complete here. The next couple examples I found on Dribbble, they are both a bit more refined than mine. You can see they have really straight lines and the outlines of the screen. Since these were posted on Dribbble, the designers probably took a bit more time to clean these up, but feel free to go either way. You can really be as messy or as perfect as you like, as long as you're able to decipher them in the end. So at this point, you probably have tons of paper sketches. What you'll do now is decide what options are more ideal and which ones you can just throw out. Once you've nailed your sketches of the user journeys, post them to share. Be sure to include some notes alongside your sketches to help communicate what the flow is for yourself and for others. Coming up in the next video will be our last step in the UX process, wireframing.
10. Project Example: Sketches: Hey guys, welcome back. I hope you've had a lot of success so far working on your personas and your user journey maps. Next up, we're going to tackle sketches. I've got some sketches here to show you, to walk through what I've done for the Southwest apps so far. To start, I guess I'll start by letting you know the method that I took to do these sketches and I wanted these to be really loose. Again, I grabbed my trusty sketchbook, grabbed a couple of Sharpies and just started messing around. You can see there's a lot going on here. I have a bunch of different screens, I have some notes all over the place, but I wanted to let myself be really loose and just see what was happening. Another thing I wanted to mention was, I wanted to get some inspiration for while I was starting on this, so I scoured the web, looked on Dribbble, Behance and just try to get a general sense of like, what do other apps look like? I did a lot of research on other apps that are out there now, but it's always nice to look at stuff like on Dribbble for example, because people are being a little bit more innovative and it's a lot of fun to get some inspiration that way. What I wanted to start by doing was tackle the different screens that I need to make for this app. So the first one up here is the home or like where we're actually booking the travel. This is where all the information is being input. There's a lot of different ways that the screen could look, and actually to show you, I'll throw this over, to remember this guy right here is the first screen and then the book travel one over here is another screen the one I'm actually inputting everything. I think I actually show this guy after on a different page, but I guess I'm starting here with this book travel section because this has a lot going on and there is a lot of different ways that we could do it. So I move that all the way. One of the main things is figuring out is this a round trip or a one way. I just tried to demonstrate here through my sketches some of the different ways that we could do this. So we could have more of a toggle button, there's this method where you have the one that's selected is underlined or even a pill here where this could be just a subtle background behind the one that's selected. All of the information on these screens are the same. It's just a matter of how should we lay them out. So picking airports, departure and return dates, how many passengers, promo codes, and then of course, our Search button. On the original version, everything was its own line. So from to depart day, return day, passengers, everything was just like stacked up, so the screen actually is long in their existing app. I looked at a couple of different ways, like could we stack these things to save some space? Here by stacking these means, you lose a little bit of room for text, but we could actually use the airport codes instead to make that a little bit shorter. So SFO instead of San Francisco, for example. Just a couple of options here that I messed around with to get started, and there's another one down here. Then I moved on to the search results. Again, looking like how could this guy look? Is there a way to sort this by $ or points? Looking at a way to actually change the date, which is something that I thought would be really important. One thing that Southwest does a little bit differently than some of the other Airline Apps, is that they put a huge emphasis on the different fare classes. They have the want to getaway, which is the cheap one. They have the anytime, which I believe you're able to change things and there's not penalties or something like that. Then of course, they have the business class. Other apps, something like United or Delta, they let you choose between the main cabin economy or business class. But Southwest really wants to focus on the three different classes. So because they put such a big emphasis on this, I figured it's pretty important and we need to take a look at a couple different ways that this information could be presented. Again, I'll show you guys here. These are those big purple buttons that just looked pretty insane, especially when you have to scroll through all of these. You lose the times and then the flight information if it's non-stop or whatnot, because these buttons are so prominent. Of course, we want them to look like buttons, but these just go over the top. One thing I explored it with my sketches is, is there a little bit better way to do that? If we do have to have them in lines on top of each other, could we make the dates a little bit bigger? Or could we actually do something where we expand and show the fare starts at $100. I can tap on this, I think I drew down here. When I expand this guy, I can see the different fares are 100, 248, and 270. Another option I looked at here, was having these guys next to each other. So more of a pill or a toggle format where I could choose which fare, and maybe this guy would get selected and then there's a way that I move on from here. A little more exploring to do, but just for the general sense, I was playing around with these. Here's where I have my home screen. Again, this is the screen right here. So this guy is the same as this guy. It's pretty generic, it's pretty boring. It's got a lot going on at the top, which is all about up-selling rather than letting me get to the information that I want to right here. Let me just go back in here. One thing I thought that would be really nice is to give this Southwest brand, a little bit more prominence and maybe just have some nice imagery back here. Just to make it look a little more refined and sophisticated. Another thing is looking at how I can stack these items up. I have all the same items on the screen, but can I rearrange them in a little bit nicer way? Maybe even introduce an icon here that's a little more sophisticated. Again, a couple different options. This one, I'm really focusing on the Book of Flight section, because to me that's most of the reason why I go to an app. I go to an app more to look for a flight rather than checking in because I'm not flying all the time. This option also has this bottom nav example, which down here I took a look at, what are a couple of different ways that I could show the navigation. How could the user get between the different sections? For something like a Travel App or for this particular Travel App like booking a flight, this may not be super important where I could go home booking flights. I think this one's checking in, this is reservations, and as well as my profile. There's a couple of different things that would be useful, but is this the right approach for this app? I'm not entirely sure. The method that they use right now is just the Back button, so that might just be perfectly fine. Another way to do this would be to have a drawer where this could have different information in it as well. Again, a couple of different ways that we could do this navigation, it's just a matter of preference in, really what do I think is going to work for the app? Some of this I might not know quite yet. I might not know till I actually get to the wireframe stage, because here I'm just trying to play around with a lot of different things. Once I'm in wireframes and let's say I decide, I really love this layout, but hey, this bottom nav is not working and actually this version of the navigation is going to work best. Then hey, I've already thought it through. I have all of these things at my disposal as I go. Another thing I wanted to know on my sketches here, I've added a few side notes for myself. With navigation, you not just saying like, hey, I want to remember not too many taps, this thing should be accessible anywhere, and it's easy to always get back to this home screen. For the home screen, like I said, maybe some more branding for Southwest, some larger more interesting buttons. Then making the layout just feel a little bit more modern rather than just everything stuck in a vertical plane layout where it's just pretty boring. Finally, my third page of sketches, I'm really focusing on the search results and I have a little bit for the trip summary. Again, this is not a totally extensive sketching exercise, but it's just to give you a sense of how I would approach this and how I would approach the sketches in general. With the search results, again, like we looked at on the very first page of sketches, there's a lot of different ways that this information could be displayed. Here I wanted to focus on this part, so showing the different flights. I liked this little top section up here where I have my departure flight. It's showing where I'm flying from, where I'm flying to, and then being able to toggle the date. I think that could be really, really interesting, where I can go backwards and forwards by one day. Or maybe there's even a little calendar icon in here that lets me totally changed the date, so I don't want have to go one by one. You may want to start over for that option, but it could be nice if we could do it right from here. Again, this first option is that expand mode, where I can see it's from $100. If I tap on this guy, this one would expand. I could see all the different options, and that would just push the other flights down out of the way. We would also have to do something with the visual design to make sure that this stands out and feels like one cohesive thing. But again, we can tackle that later with design. Second option here, shows the more of like a card format. Again, it's that format where each of these prices are laid out side-by-side. Then I have a little more emphasis on the flight dates or the flight times, as well as if this is non-stop or/and what the flight number is. The third version, this is more similar to what they have now, but maybe we could make the type a little bit bigger. Maybe these don't have to be so giant and but any, they can still feel like buttons, just tone them down a bit. Again, a couple different options here. Then as far as the trip summary, the important part here is to see where you're flying to and from, what your flight times are for your departure, as well as for your return, and the date is especially important here as well. Finally, the price at the bottom and a button to purchase. This may not be everything that needs to go on this summary screen. I think this one, I would definitely want to explore a little bit more. But again for these purposes, this should be enough for you guys to get started. So go forth, sketch, and I can't wait to see what you guys come up with.
11. Taking Sketches to Wireframes: Welcome back. We've made it to our last UX technique. Taking your sketches to wireframes. Wireframes allow you to refine and turn your sketches and user flows into a tangible representation of your app. Now that you have a bunch of great sketches to begin from, you can finally hop onto the computer and transition to wireframing. From the sketching phase, you should've already explored many possibilities and paired down ideas to what you think will work best. This refinement should help you as you begin to wireframe, since you have a better idea of what your app will do and how your interface should look to support that. With wireframes, you should be descriptive, but not pixel perfect. Try to use real copy for buttons, and other UI elements so that you can get a sense of how things will fit together. Don't worry about filling in content areas with real copy, just use Loremipsum there. Be sure to continually refine and make adjustments as you go. If you haven't done so already, you'll need to decide on a navigational pattern. How are users going to move between sections of the app? More importantly, what's going to work best for your app? Some common patterns are Bottom tabs, which Foursquare, Facebook, Twitter, and Pinterest use, a Drawer or sliding panel like LinkedIn and Google Maps do, or a Home or a "hub", which everyone now uses. The examples here illustrates some other ways that users can navigate. LinkedIn has a sliding drawer, but they also have icons at the top for new messages, notifications, and requests. Expedia uses another approach where you can tap on any recommended destination in a scrolling list, or simply choose hotels or flights. Finally, the third screen shows Flickr, where they use a bottom navigation as the main nav, but inside each section, there are tabs across the top to switch between those sections. The next step is you're going to want to hash out the details. Remember, a key component of mobile apps is to present the content first and foremost. Don't make your users dig for what they want. Think about how many calls-to-action you should put on each screen. You should try to focus on a primary and a secondary at most, though know that that's not always possible. Just remember that you don't want to give users too many options, so that they get distracted from the task at hand or they get lost. You'll also want to prioritize the content within each screen layout. Hierarchy is key, use as few words as necessary and makes sure everything that's present needs to actually be there. Consider what UI elements, such as search boxes, buttons, etc, you'll need and where they'll go. Don't bury the search box if it's an integral part of your experience. As you work through creating your wireframes, this is where your level of refinement will come into play. You'll want to make sure that your files are set up to use accurate screen dimensions. I recommend using the iPhone 5S resolution, which is 640 by 960 pixels. Just keep in mind that you'll have a little bit less height for the smaller iPhones, and you'll have more space to play with for the iPhone 6 and 6 Plus. We do still have to worry about this too much right now. Also the scales and sizes that you use for buttons and other UI elements should be close to final, so that you're able to more accurately represent the designs that you'll create later. A little prep work in the early stages will help you a ton later on. Finally, you'll want to thoughtfully assemble your wireframes to create a cohesive presentation. Your wireframes should represent each task or user journey that you've outlined, to show the logical flow of the user's path through your app. It should be clear as to how many steps and screens a user will move through to accomplish a specific task. As you did during the sketching phase, you can assess the pros and cons for different solutions, and eliminate those that aren't working or you just feel are too complex. There's a variety of tools that you can use to create your wireframes. Choose a program that you're most familiar with or that you think you can get the best results from. The tools I've used myself are Illustrator, Sketch, Omnigraffle, and Balsamiq. Lately, I've been using Sketch for my wireframes, since I'm able to move around the interface pretty quickly and it seems a little more lightweight compared to Illustrator. I also believe all of these programs have free trial, so you should be able to do use them whichever one you need. Now let's take a look at some wireframing examples. I've pulled all of these from Dribbble, since they tend to be nicely designed and of higher quality. Note that most of these designers have assembled their wires in flows, and designate how user would move between screens by tapping on various buttons or links. They also include some text to denote the names of the screens and helpful notes. The different wireframes also show a variety of styles that you could use. So the one on the left here, they use one of those red lines and arrows to go between screens, these a little bit of color. The second one just shows the screens next to each other. Here's another example. This designer introduces again a bit of color into the wireframes for emphasis, you can see it on a couple different buttons in here and using the dark gray. Finally, this is another example of wireframes that are a bit of a hybrid. They're using real icons, but they're also using placeholder buttons in boxes at the same time. If you've downloaded the class PDF, which I hope you have, I encourage you to take a closer look at these examples and even do some additional research online for more inspiration. So to cap this off for your final class deliverable, you'll create a set of final annotated wireframes to complete the story of your travel app. Upload your wireframes to your project and share with the class. I'm so excited to see what you guys have come up with.
12. Project Example: Wireframes: Hi everyone. Ready for the last demonstration of the class project. Here, I'll be showing you how I would tackle wireframes for this project. I'm going to start by taking a look back at my user journey map here to recall the flow that I had outlined. This should look familiar, we went over this two videos ago. Ideally you would refer to this map as well as your sketches as you complete your wireframes. You can print them out to have them easily next to you or just open the file so that you can switch back and forth between files. Another thing that would be handy to have are your sketches. Since I took a picture of these, I have them on the computer, but it also might be helpful to have your sketchbook or whatever you used for your sketches next you as well. If we take a look back at this user journey, the flow that we are going to be capturing with our wireframes is starting from the home screen, we're going to tap on book travel, I'm going to enter where I'm flying to and from, the dates, and then I'm going to search for flights and be able to choose a departure and a return flight, and then see a summary to go ahead and continue to purchase from there. So that's the flow that we're going to cover. Now for the wireframes. Open this up. To begin, since the wireframes are much more time consuming, they're way more complex to create on the fly during this demonstration, I went ahead and mock these up for this project. I'm going to walk you through this whole thing. But before I begin, I actually want to share some of the things that I used to create these wireframes that I think are going to be really helpful. The first thing is you'll notice here we have these little outlines. This is actually an iPhone template that I use that I found online that was free to download. I'm going to include this for you guys so that you can use this as well for your projects. It's pretty helpful. I think it just makes the wireframes look a little more polished, and it gives you a sense of like exactly where your content needs to fit within the frame. The other thing I did was actually download another sketch file that is a template for iPhones, and not only just a template, but you can see here I have this little toggle button, I've got some of these arrows. If you're familiar with iOS, these are pretty standard elements. Actually, it'll pull it up here. This is the iOS 8 iPhone 6 template from Teehan-Lax, and this company has created lots and lots of templates, they have all kind of staff for Photoshop and for illustrator and sketch. This sketch file is actually really handy. If you haven't seen this, I'm including this as well in the class resources so you can go ahead and download that. Here you can see they have all kind of elements that you would find on the iPhone, different icons in case you need things for toolbars. They have buttons, they have these what we call segment controls, search boxes, keyboards. There's even the way that you can show table views. All of this stuff is available to you to use in your wireframes. Then from there, you can actually tweak them a little bit. So if I go back to my wireframes, here you can see I just changed the font and changed the color to make it more black and white for my purposes. Great. So those are some tools to get you started, but then to cover how I created these wireframes, I did the same thing that I did when creating the personas and the user journeys. The first thing I did was go up here to insert and create an artboard, and I just drew this big square. Again to refresh, I can click up here, and I can drag the corner boxes here, they're the bounding box here to make this thing bigger or smaller as needed, and just click away to save that. I created the artboard, and then I dragged in from my template file these backgrounds for the phone. One thing to notice, I'm actually going to put this at the bottom of the layer, I've locked these layers. If things are not locked, if I unlock that there, then I can sometimes move things around a little too much, and that gets a little bit annoying. I want to just go ahead and lock that so I know that I'm not accidentally moving that anywhere. Great. Let's start by walking through what I've done here. The very first thing was to create the app home screen. Again, we've covered this screen a couple of different ways, we've looked at it in our sketches. I'll bring up my sketches again to remember, let's see. Here we go home options for our navigation. I had a couple of different variations here and I looked at a few things. For these purposes, I just chose one and ran with it, but you may want to actually mock a couple of these versions up in your wireframes and then see what works. You can always do one master file where you have a whole bunch of different options of screens in there, and then pick and choose as you go. But for these purposes, just kept it pretty simple. Here are my options that I have. We're going to be focusing on booking a flight here, so that would be our next screen. Then here, I just incorporated the couple of things that we had mentioned throughout this project. So again, we're flying to and from, dates, how many people are traveling, if there's a promotion code, and then again round trip or one way, and then search. I didn't cover every single one of these, but if I tap on one of these where I'm traveling to and from, then below here, I've chosen to outline the departure city. This would be the same for both of them, and I've also outlined this down here, showing that, I'm actually going to make this full screen to make this a little bit bigger. Okay, great. To show that I would be going through each of these steps. When you guys are doing your wireframes, it would be great to see all of the different possibilities and all the different screens, but for this, just for demonstration, I just wanted to capture a couple of things. One thing I had mentioned when I was thinking about this flight app, is I really wanted to do a couple optimizations. One of the things that I noticed that Southwest doesn't do is they don't use your location at all. This one I actually am showing that the first thing that's in there is San Francisco because that happens to be the closest airport to me. If I tap on to that and come down here, I can see that San Francisco is checked, and I can also see that Oakland and San Jose are at the top because those are the closest airports to me, and then they start going in alphabetical order. Again I can type in here to search for any city that I want. Once I'm done with that, my next step would be to hit this button search flights, and then here I'm going to browse for a departure flight. I wanted to just make this screen a little bit more visual, bringing in the big airport codes, a little iconography, and also there is a date bar. Here's something that I can use to toggle. Let's say I was like, "Oh, actually I want to see if April 23rd or 22nd, or maybe even the 25th has a better price, then I can easily toggle here." I did not expand upon this guy for this one frame, but if this was my real class project, then I would have definitely wanted to do that to figure out all of those interactions and how that thing would work. Then here I'm demonstrating that here's the flight options, we can see that it's from this price. Then if I actually tap on one of these, we're going to move down here, and that guy is going to expand so that I can see the want to get away price anytime, and the business select price. Then from here, I can choose one of these. That way you don't have to look at all of these different numbers all at the same time. Finally, after I've chosen that guy, I'm going to go back here to select my return flight, and this screen should look very similar to the first one because they're essentially doing the exact same thing. Then from here, I'm going to go ahead, I didn't just copy and paste this guy, but this would be the same as this one to figure out which one I wanted to go ahead and choose. Then from there, once I've gotten both of my flights chosen, I'm actually going to go to my flight summary. One thing that I've done as I'm walking you through this, is I've turned off all of my arrows. I'm going to go back through afterwards and show you those guys, but for the time being, it's a little bit cleaner just to go through for now without them. Again, flight summary, I didn't spend too much time mocking this up obviously, and then from here, once you review everything, if everything looks good and you don't want to start over, I'll hit continue, then I would go through the booking process, and then my confirmation, and then I'm all set. Pretty straightforward, let's back it up here, and you can see I've also trying to note here that I labeled all of my folders and tried to group things together so that it makes sense. So this guy is my header, my labels are throughout, but it's these guys here. The arrows will be my flow that my user is taking, and I'm actually going to just lock this to see if that hides it. Yes, that helps. Then I've also labeled here, I've home screen, book a flight, so trying to just show each piece as they were labeled here. Great. Here you can see that I've added these boxes on top of my wireframes to show the path. This can be really helpful especially when you're outlining a flow and there's a bunch of different things that I could click on, just to make it a little more clear. Also if you're doing more than one flow, so if maybe I'm starting on this app home screen and I'm going to do the book flight flow, and then maybe I also want to do the flight status, so the check-in flow as well. Having these outlines will keep that straight for you. Even if you want to use another document, it's nice to see I'm tapping on this guy and then I moving here. Again, tap on book flight, I can see that I tapped on this guy to go here. Once I'm done with this guy, I'm going to go to the next screen same thing, I tap on here show that this one is open, select that guy, I move on to the next screen. It's just showing you a linear path as you go, and then just to finish it up over here. I'll back out a little bit, there we go. This document's a little bit big just because this iphone happened to be humungous. You can always scale anything down, feel free, but I figured, and just leave them at the size that they are for now. Hopefully this gives you a good idea of what we're looking for with the wireframes for this project. They're a little bit more detailed, there're some things that still have to be ironed out, there're some things that, who knows maybe when I get to the design phase I might change, so something like this, maybe I don't want to use an icon. Maybe I look at this into the visual design and actually is not quite working so well, but having it here in our wireframes really captures all of the different things that we're going to go through. Again, if these were your wireframes, I would love to see all of the different possibilities, so what happens when I tap on that departure date to choose a date? What does that calendar look like? What does this calendar look like when I want to change between dates? Does that thing just let me click through? Can I actually open up the calendar and choose it completely? Let's say I wanted to do May, instead of having to tap through or actually go back to March for example, how do all of those things look? That's all going to be really helpful to take a look at in this wireframing stage. That's a wrap. Once you've completed your wireframes, I would love you to upload the final set to your class project, and don't be too shy to ask for feedback either. If you're going to be continuing this class series, we're going to resume this project. So you can always incorporate any feedback or changes into your project as it gets more refined. I really hope that you've enjoyed this class and you feel empowered with your new UX skills. Thanks so much for watching.
Kara Hodecker, Product Design Leader
