Transcripts
1. Introduction: Hey, welcome to this Skillshare class on user experience design and wire framing basics. Thanks for tuning in. In this class, we'll build a set of wire-frames for a mobile app step-by-step, together. A little bit about me. My name's Sarah Bannister and I'm a freelance user experience designer and user interface designer. I've worked on brands such as Ford and Streamlette. I'm passionate about designing websites and mobile apps that solve problems, look great, and are user friendly. I remember the day I realized design was going to be my dream career. I was so excited to learn that there was a career that could fulfill my need for a creative outlet all while helping people's daily lives become easier through design and technology. If you're anything like me and share these same values, design will be a wonderful outlet for you to explore and possibly start a career in. This class will be useful to you if you have little to no experience in user interface design or user experience design basics, but have an interest in exploring them. Cool. Let's get started.
2. What's a Wireframe?: Wireframes are an essential piece of the product design process. A wireframe is a skeletal mockup of a web or app concept. A wireframe can come in a wide range of visuals, from low to high fidelity, meaning a wireframe can be made with something as simple as pencil and paper or pen and whiteboard, all the way up to creating graphical wireframes in a design software like Sketch, Adobe XD, Balsamiq, or Axure. Low-fidelity wireframes are generally recommended at the beginning of any new design process. That's because they allow you to take multiple concepts and test them quickly without having to invest a ton of time or cost into them. You can then take the different ideas and place them in front of user testing participants or clients to get feedback. You can get feedback faster and then make the needed revisions to narrow down on the best design strategy for your product. Wireframes are an early part of the product design or what's known as the design thinking process coined by a design company IDEO, but they don't start at the beginning. Wireframes are part of the physical design process, which comes after you've done plenty of research and discovery on the product you'll be designing. This discovery phase is enough information for a whole other class. Let's assume that we've already gone through our research and discovery sprints, and we already know that we'll be designing wireframes for a travel mobile app.
3. What's a Prototype?: For this class, we'll also be building out a clickable prototype with our wire-frames towards the final lessons in the class. A prototype correlates with the wire-frames, but there are two different design deliverables. Prototypes are interactive demonstrations of how your product will work and look. Prototypes can also be low to high fidelity, you can build prototypes out of your paper and pencil sketches, or out of your fully designed high fidelity app designs. A prototype will generally take a user through a certain or multiple task flows and may or may not include interactions and animations. Prototypes are important to the product design process because they allow you to communicate your intended designs to users and user testing developers or other teams in the hand-off process, or to clients and stakeholders you must present your designs to, they take your static design and make it more lifelike. Being able to see how users interact with your product is part of the process and seeing what works and what doesn't work in your design, this will allow you to make the best revisions for your product.
4. The Design Process: Knowing about the design process is an important skill that you can add to your tool kit as you enter the design world. I'm going to briefly go over the process that has come to be known as design thinking, made popular by design company IDEO. The first step in the design thinking process is to empathize. Empathy is crucial when you're designing products that will be used by people. This sprint allows you to learn more about the court pin points that you are trying to solve for the target audience that might be using your app. Your design deliverables for the empathy stage of design thinking might include user research and statistics and an understanding of the target audience who you're designing for. The second step of the design thinking process is the defined stage. In the defining phase of the design thinking process, you'll take all of the information you gathered on your users during the empathy sprint and synthesize it into key takeaways that will help you define your approach to the problems that you've determined your product will solve. Your deliverables for the defining stage might include key takeaways from user research and interviews, strategy definitions such as a problem statement, business goals, user needs and goals, and success indicators such as metrics and KPIs. The third step in the design thinking process is the ideate stage. After you have a solid understanding of your strategy and user needs, you can start ideating around different ideas that could be potential solutions to the problem or multiple problems that your product aims to solve. This is the part where creative thinking is encouraged. Think outside the box for ways that you could fix these problems. Deliverables for the ideate stage might include sketches from different brainstorming techniques and a narrowed down list of features that could be incorporated into your different design concepts. The fourth step in the design thinking process is prototyping. Depending on the time constraint of your project's scope, you can determine what level of fidelity is needed for your wireframes and prototype. This prototyping phase is when you'll take the concepts that you've come up with in the ideation phase and turn them into wireframes, into an interactive prototype that lays out the primary task clause a user would complete when using your product. You use these prototypes to get real test participants of your target audience using your product quickly, which is important for the final testing phase where you'll get feedback so you can make your final design revisions. Deliverables from your prototyping phase might include wireframes of your user flows and low to high fidelity prototypes. The fifth step in the design thinking process is testing. In this final phase of the design thinking process, you'll test how ever many concepts received to determine that time allows. This testing phase can reveal red flags or problems with your design you may have not otherwise noticed before testing with real people. This allows you to make the revisions needed for your low fidelity designs as you increase fidelity so you don't discover design mistakes later down the road after you've spent more time or money on them, say in the development phase. Deliverables for the testing phase might include user feedback based around your preliminary design, included features and user flows. Design is an extremely iterative and somewhat unlinear process. You will complete some form of the design thinking process with every revision you make for a product with a human-centered focus. In this important reflective stage, you'll review the feedback and results from your testing, which will inform you of where to make revisions so you can start the design process again on new concepts that are improved versions of your previously tested design.
5. What's a User Task Flow?: Since an app you might be working on as a UX or UI designer might consist of many different screens, sometimes hundreds of screens and screens states and different features. For the sake of this class, we'll work on completing a single task flow for a travel mobile app. A user task flow is a task that users would use your app or product to complete. The flow should guide your user to the entry point of the task, taking them through each step all the way to the final step and achievable outcome, such as adding an event to their personal digital calendar or purchasing a product online. Successful conversions depend on creating a user-friendly flow. If users can't figure out how to complete the primary task your app offers, then people simply won't use your product. We can determine a solid outline for our user flow by understanding our business goals and user needs, which we determined in the defining stage of the design thinking process. Focusing on the business goals and user needs will satisfy the requirements for the clients and stakeholders who are invested in the project and looking to meet certain success metrics while also helping the user meet their goals and feel satisfied with your product. For the wireframing portion of our app, we are going to design a task flow that takes the user through the process of making a reservation at a hotel for a travel app. Other task flows that you might design for an a travel app may include booking a flight, researching different things to do in your destination, and booking your party for different attractions, or scheduling an appointment with a travel agent. As you can see, you can have many different task flows for a single app. I don't want this class to take up too much of your time, so we'll just stick with the one task flow. Let's get started with our wireframes.
6. Wireframing Tools: These are the tools that you'll need to follow along and create a pencil and paper wire frame. First thing is grid paper. I've included a resource you can download and print off different dimensions of grid paper, including mobile dimensions framed by a phone graphic you can wire frame inside of. The second thing is a pencil and eraser. While you can draw in pen, it's nice to be able to erase your mistakes or make revisions. The last thing you'll need is a ruler to ensure you're keeping shapes and lines nice and tight, and so everything looks consistent. Optionally, you can order a wire framing or UI stencil off of Amazon. You don't need this, but it allows you to quickly and precisely draw out things like where your social icons might be or other common UI elements. Let's get started.
7. Wireframing: The goal of a wireframe is to outline the skeletal structure of the design of each screening. Wireframes are made up of shapes, lines, boxes, text and buttons. So things like images, color, art direction, topography, those things aren't important in the wire framing process and they're actually discouraged against because you don't want your user getting wrapped up in the fine details and what the final design might be we're not working towards the final design. I mentioned previously, color is not advised and this is generally the case. There are instances where you may want to use color. For instance, I use it for CTAs, so helpful for me so I can recall what I meant to be interactive as well as the others that I'm handing my design off to. While a wireframe is basically a rough draft, we want to keep everything consistent as far as sizing and spacing goes. The better you can make your paper sketched wireframes look, the more legible and usable they'll be and you'll get more consistent feedback from your users upon testing. All you want is your design to be legible and clean. It's important not to get too caught up in the details. For instance, we probably don't even know what copy we'd like to use yet. You can use placeholders for images and copy, such as small rectangular boxes or squares. This is called block framing and going to outline the user flow will need for this wire frame. The first part is navigation and the ability to browse hotels. The second step will be allowing the user to set arrival and departure dates and set the amount of guests that will be staying. The third step is the ability to browse different listings. Fourth, the ability to view a detail page about an available listing. Fifth step is to finally book a room. The sixth step will prompt users for their information and payment details and the final step will be the booking confirmation.
8. Scanning and Uploading Your Wireframes: A scanner app will automatically take the designs of your documents and enhance them like a real scanner would copy and transfer documents. They will be much more legible because the contrast will be automatically adjusted for you. Once you grab shots of all of your designs, you'll just transfer them to your computer so then we can upload them to a prototyping software next.
9. Prototyping in InVision (Invisionapp.com): Next, we'll go to invisionapp.com and create a free account on invision. Once you're in your account, click the large pink button in the top right corner to start a new project. Name the project, and select prototype from the list of project options. Next, you can just drag and drop your files into this dashboard section. Anytime you make a revision to your design, if you input a file with the same name, it will overwrite your original file. So it's easy if you're trying to just update your designs after you've determined revisions. You can also rename the general titles of the screens without changing the filenames here. Now click on one of the screens. Next, we're going to go into build mode here at the bottom. Now we'll just click and drag over an element with our mouse and this will create what's called a hotspot. A hotspot is where the user will click to trigger an interaction with your prototype. We'll go through and create hotspots for each screen until we have a fully functioning prototype that will allow a user to go through your task flow. You now have a functioning prototype of your design that you can show to your perspective test participants or showcase your thought process to stakeholders. Or you can just show off to your friends and family that you know how to design killer mobile apps.
10. Conclusion: You made it, awesome work. We just built out wireframes and a fully functioning prototype. I would love to see everyone's work. Please upload images of your wireframes into the project gallery and talk a little bit about your experience. What was your favorite aspect of wireframing? What was the hardest part? Did you choose to design a different task flow for a travel mobile app or different app than we did in the class? What other app ideas might you try designing for in the future? Even better, you could include a link to your live envision prototype in your project description as well. You can do so with this button. I can't wait to see your designs. Thanks so much for taking this class.
Sarah Bannister, UX/UI Designer | Dog Enthusiast
