UX 101: Apply Design Thinking to Create Engaging Designs

1. Introduction: Hello from DC and welcome to UX 101, Apply Design Thinking to create Engaging Designs. A quick intro, my name is Grace Torres and I went to school Foward Drection. For since 2012, I've been working way of solving problems by crafting and aspiring UX and UI for digital products. Like dog fitness apps, publishing platforms, and flight personnel scheduling software. I've picked you up, your access time has gone on and I'm constantly learning new things. Hopefully, you were inspired to continue learning and know that one day you too can become a UX Designer. In this class, you'll first be introduced to what User Experience actually is and the design process surrounding it. Then we'll divert in and begin by looking with the eyes of designer, examining websites, apps, and other experiences. Figuring out what the problems are and how best to solve them. Next, we'll gather competitive research to familiarize yourself with the current design trends. You will then create user flows outlining a user's actions and decision points and we'll translate those flows into low fidelity wireframes to determine how the content and information should be best presented on the screen. You'll have your main project in mind, so you can start applying your new knowledge right away. Don't worry about not knowing what things like user flows or wireframes are, because this class is made for beginners, you. You just need to be familiar with the web, ready to solve problems, and eager to learn new things. In the end, you should have some research in your main project consisting of user flows and engaging wireframes for your Budding UX Portfolio. Hope you're ready to start and I'll see you soon. 2. Class Project: Glad to see you made it. Before digging in to what UX is, let me go into detail about the class project. To make the project as real life as possible, will be basing it around a task. This task is to aid the user's journey from beginning to end, solving their problems, to make their journey effortless and delightful. A user is anyone visiting or using your product by the way. There will be small challenges in the beginning as we go along learning the design process. This research gathered from these challenges will inform you how to design the best user flows and low fidelity wireframes, which is the main class project. The supplies needed are simply office supplies, a graph accretion program, such as Photoshop or Illustrator, and an eagerness to learn. Essentials of UX designers worldwide are post-it notes, markers, pens, highlighters, and loads of scrap paper to work out designs. You will see them everywhere in design offices and they are great for quickly getting ideas down on paper and collaborating in a real-time environment without fussing about visuals. You don't have to be great at drawing to be a UX designer. Then to create the main class project, you'll need the ability to create clean shapes and clear text for the user flows and wireframes. This is where a graphic creation program is helpful. Programs like Sketch, Illustrator, Photoshop, GIMP, and even pain. Or if you've superb hand craftsmanship to draw perfect shapes and can keep everything tidy. You may do it analog. Time to pick your project task. You're an advocate for the user's needs. Knowing what the problem to solve is the first step for UX designer in the design process. Ultimately, a site app or other digital product will have numerous tasks on a single screen. But for simplicity sake, we're going to focus on one. Here's a list of some user intentions when visiting or using a product. You can use these ones or pick your on. A small note though, you need to be familiar with the task you choose and have basic understanding of what's involved. With many real life tasks. You may not know what the task entails, so you'll have to do some research. But again, for this class, you should be familiar with it already. Now, to context to your task, pick a company, person, or entity that has created a website, app or other digital product, real or fake. Here are some suggestions that you may use. But if you have a personal idea, like if your favorite band has a website or you shop at a store immobile, you may use those, in completing this class project. Not only will you have your first UX user flow and wireframes, but you will have gained the skills of figuring out the main problem on a digital product. Clearly defining your goals and requirements, determining the scope of your project, defining your target audience and users, learning about the design trends and what competitors are doing. Defining a clear start to finish path of users tasks, and figuring out what content is on what screen with low fidelity wireframes. These will become clear as we learn about the design process. Okay, task picked, check. Client picked, check. Great start. Be sure to share your chosen task and client in the comments. If you have any questions, feel free to reach out. See you in the next video. 3. What is UX?: On to the main event. What is UX? The basic definition of user experiences anytime a user interacts with something. So the experience of a user, that's a vague definition because it is applicable to all sorts of things such like a kitchens laid out, the coziness of melting into a cushy chair, or of course, the frustration when a website is confusing. When I'm discussing user experience from now on, I am referring to User Experience Design, which is a common reference to experiences relating to digital products or computers only. People mainly think of this one saying UX, but wanted to clarify that the term applies to a lot more. User Experience Design, also referenced as interaction design, and usability design, sometimes information architecture design, and design thinking is all about how improving the user feels about an experience with a product. Users have needs, and when these needs are not getting met, they have a negative and frustrating experience. Normally, users needs are related to a certain goal, motivation, or task that they want to complete like for our class project. UX interprets the behaviors and feelings of these users into specific needs that they normally can't express or don't fully understand. Most people can't tell you that the button to save a draft is too far away and hidden. All they know is that it's annoying to save, and then they save less often, risking losing their work, which leads to an even greater frustration. User experience reveals such problems. But if a UX designer hasn't proven experience making the task easier to complete, the user is left feeling confident and positive about using the product. User experience also keeps the product relevant. Questions like, is this product solving our users problem? What's the point of this product? Who's it for? Are we missing feature opportunities that users need? Are we wasting time on features that users don't want? This design approach is called human first design. If a product tries to serve everyone, it serves no one. Keep it focused on the people using it. Here's a quick history of UX. When computers came to be in the mid-century, they were complex, tricky, and only those who learned the code could use it. But then a revolution occurred when computers became accessible for people at home, known as personal computers or PCs in the 1970s and '80s. With average people interacting more and more with computers, studying and improving these interactions was paramount. This study was known as human-computer interaction or HCI. You could get a degree in this, but it mainly attracted those who are cognitive psychologists or those with computer science backgrounds focusing on usability. Designers got in on this burgeoning field when in the 1980s, computers were not only accessed by code, but by visuals like folders, desktops, and a little arrow that danced across the screen controlled by a mouse. The 1990s, Don Norman, an expert in the field of design, usability, engineering, and cognitive science, turned this new field of study into user experience. Now, here we are two decades later, and we've progressed into a crazy time of technology where there are countless screens and devices. But for UX designers, no matter the screen or device, there are always problems to solve. To become a UX designer, you already have head start. Are you a human? Sorry, dogs, we don't have a course yet on dog experience. Have you interacted with stuff specifically something on a screen? Have you felt frustration, happiness, or delight when using that product? Then, boom, you are already a user and understand what a user is going through. Your empathy level of UX designer have a good foundation. It does take some practice to really fine tune and start to see patterns of user behavior. But it's a fun journey to learn about what people's problems are and how to solve them. The role of a UX designer is a very specific one in the overall scheme of a product. You are designer figuring out how to best layout content. But more than that, you are the users advocate and voice for their needs. There will always be multiple motivations when creating a product. Business will be focused on revenue, developers will be focused on the code, and the main stakeholders will always have a strong voice. You are the ambassadors into the table to make sure that the product is still serving the people using it above all. That's why it's so important to learn as much as possible about your main users to the point where you bring out your empathy and acting skills to step into their shoes. This doesn't mean a UX designer always says no to the others at the table, you have to strike a balance of keeping the user's needs prevalent, while addressing with the stakeholders and developers want to. Tricky but fun. That might be overwhelming at first. But the great thing about user experience design, is that it's almost like a science. We use this methodology called the design process to go through a logical step-by-step workflow to learn and build upon our knowledge until a complete and well thought out beautiful design is created. I'll be talking about the design process next. Now, that you are budding UX designer, it's time to start looking at the world like one. Your challenge for this video is to look around the web or apps and find examples of frustrating user experience or examples of when you think that they nailed the UX and you felt nothing but joy using it. Be sensitive to the feelings you have during these moments, as they're the most telling about the UX. Share in the class gallery and comments and type a sentence or two about what makes a great or terrible. You'll never look at the web the same way again. 4. The Design Process: Now that we know what generally users experience design is, and what a UX designer looks like, let's [inaudible] right into how UX works. With any process or methodology, it's a step-by-step way to break down problems and solutions into manageable pieces. The design process allows for almost scientific approach into subjective area to create objective goals, requirements, and results. It is also highly iterative and flexible, subtracting and adding steps as you need. So each problem has its own unique curation of the design process that fits it best. I should also mention that the design process is cyclical. Even when you have gone through it ones, from beginning to end with a particular problem, there is always room for improvement and another iteration. Sometimes a phase or smaller step, repeats several times during a project. Over the years, I have informally written down what the process is to me. So you may see other interpretations and that's okay. I've organized a design process into three main phases. The reflect in research phase, the design and develop phase, the launch and learn phase, and the unofficial fourth, rinse and repeat. These phases, breakup the process into main focus areas for the designer. Within each phase, there are many tools and actions to use. These tools and actions are what I mentioned that you can add and subtract, as the problem requires. Also the phases I shared, not only include user experience design, but user interface design, working with other departments such as stake holders and business and designing with developers. We'll only focus on the user experience design here. But as you can tell, UX design is just one very important piece of a big process. Let's finally take a look at the design process. I'll be going into more detail about what's under each phase in later videos, but here it is in its full glory. We'll cover in this class the items with little stars next to them. So you can see that you are already using the design process for your class project. Also notice that there are so many other tools available to you. First, the reflect and research phase is all about getting introduced to the problem at hand and gathering as much information as possible before creating a single design. In order for the user experience to be successful, a huge amount of research supporting the final designs is gathered. This prevents designing in the dark or designing things that will be useful. It also keeps the product human first, while championing your design ideas through critique. Like a house built on a solid foundation to stand firmly against the winds, this is a very busy phase for a UX designer and there are even specialties of UX research roles for it. When we have fully reflected in research, we move on to the next step, design and develop. This phase is all about iteratively refining designs, ideas, and visual designs, to move towards launch, like a rough diamond being smoothed and cut into a stunningly faceted gem. The colorful collection of post-it notes, markers, highlighters, and paper come into play now. Tacking onto a wall, the design idea allows for a quick assessment of the ideas worse, through discussion. Then you can move on to creating very low fidelity wire frames, skeletal outlines of content and layout and prototypes with the ideas, eventually making high-fidelity stuff. After many iterations, the UI design comes into the scene to give life to the look and feel of the product. When the designs are realized and finalized and looking sharp, it's time to work with developers to fix problems and finesse interactions. The last phase of launch and learn is focused on preparing the build-out of the new design for lease and preventing disaster before that. At this point, it's the moment to make sure that we've answered all questions and goals from the first phase. The built designs are tested for quality and malfunctions. This allows for some quick fixes and overlooked issues to be addressed. There are several ways to test the build designs before releasing it, because we want to make sure that the bill doesn't crash or burn your product, once it's free. Once it's ready to go, it's launch time. After the go button is pushed, it is important to document the problems, missed opportunities, new insights and thoughts, for when you go back to phase one later. That's the design process to improve a product. I'll be going over each phase in more detail and with practical tips in the next video. But for now, familiarize yourself and don't forget to gather your good and bad UX examples. Sharing them in the gallery and comments with a sentence or two about the UX. 5. Reflect & Research: Hello, before getting into the details of Phase 1 of the design process, I wanted to take a moment and applaud at how far you've made it and how much information was just thrown at you. It's a lot, but will become more second nature with more exposure. If you've any questions, please reach out. I went over in the last video what the gist of this phases and what a UX design does. But now we're going to get into how to do it. Here's the full phase once again. You can see that our class project only goes through some of them. With your chosen task in mind, let's address the first step. What is the main problem? You might have to imagine that for some reason, the user has not been able to complete your task because there are previous issues or the feature hasn't existed before. My example task will be, as a new user, I want to know what this company is. You've probably experienced this type of task before in your personal life. You land on a brand new website and have no idea what the logo means in the top corner or even who they are. The main problem here is access to clarity and information. For the sake of our project, this is a new feature, so we don't need to take into consideration any previous solutions. Now once a goals and requirements, the main goal should always be to fulfill the user, meet their needs and to complete their task successfully. Now, other goals you could throw in there is to reduce some steps to do it, have it done by x time or whatever business and stakeholders might have to. For my example, I'll throw in a goal that the user must know on the first leaning screen or homepage. But general description of the company and have easy access to a full screen about page including loads more information there. With requirement gathering, interviews with stakeholders, business and developers are needed just to make sure that everyone has the same expectation and have fully share their ideas A requirement for my project will be that a description is seen on the first landing screen and that there is a global access point to get to the about page. Global here just means that it's ubiquitous on every screen. One more requirement is that there is a way in the homepage description for the user to get to the about page besides the global axis point for a second. The scope just means that the project can only use a certain amount of resource, like time or number of developers. This keeps things in check and minimal, so too much time and effort isn't wasted. As UX designer, there were plenty of times that the planning process that you will be the one to figure out scope by working with developers and managers to make sure that there is a most viable product with designs. Some ideas might have to wait until next round, this is very common. Auditing and design sounds just like it is, you are assessing the current situation. Sometimes auditing is actually the first step if you don't know what the main problem is. This is helpful if you're just totally clueless about what's going wrong and need a second opinion. Sometimes a third party design agency will come in and really dig into your product with fresh, non-biased eyes. It helps to get a realistic view on what to fix. After auditing and getting a good sense of where you need to go, looking at your competition or competitive analysis is next. It isn't so you can copy what they are doing. But to familiarize yourself with design trends, how other people are solving similar problems and to see what you can do better. You have to remember though that most products might seem the same and be serving the same people. But each products are very different users and has different goals. I even recommend looking at products that might not be a direct competitor, but have some overlap. Take note of what you like, dislike or think you can do better. You keep telling us grace that we are the users advocates for their deeds and motivations but we haven't even talked about them yet. Well, here we are, audience definition is a shiny keep success when it comes to user experience. Again, it makes sense when you actually know who's using your product and how to improve their experience, then everything else falls into place. Some super helpful ways to define your audience are by doing user interviews. That's when you've gathered together a group of people you may think are the main users and then by asking questions, you can blow your mind with insights. Even to this day, I am so stunned when they either don't use a product the right way or have hatched the product to fit their needs. Seeing them use the product while thinking out loud can transform your product. User interviews are also used in the design and develop phase continuously to make sure that the users needs are being met with designs. Analytics and data collects who uses your product but it can be very vague. I recommend using the demographics gathered from that to find real people for a user interview. Be sure to keep track of your users goals, motivations, dreams, dislikes, etc not just their race or age as you learn about them. Another tool to keep a human first design approach is to create user personas. These are fictional people to represent key types of users with your product. For my class project, I have chosen to use a company that sells and organizes, CSAs or community supported agriculture. They have a website that announces when the next pickup is, what produce or in the boxes, how many farms are participating about those farms? Then how to join and pay for the boxes. Now, I'll have to find out who uses their website. Since they are a fake company, I resorted to making it up but I highly recommend Googling and learning about your client's industry to get a more realistic feel, at least. People who buy CSAs are generally health-conscious, support farming, embrace natural products, like to shop local, generally wealthier, and are creative with cooking than people who use websites or anyone from ages like six to late 60s. Now I have some traits, I'm going to create some user personas. I have two types of people, a young Yogi girl right out of college with a dog and a middle aged white color dad with kiddos. You can take a look at them further by pausing and reading. But I won't go into too much detail since they are an example. There are tons of templates online if you want to fill some out for yourself, I'll share a link for some. These user personas help guide decisions as decisions are being made. If at every point you ask would Carroll, the user persona uses new feature and the answer is no, then check it. Again. If you make a product for everyone then it'll serve for no one. Being as specific as possible to your users will result in a more profound product. That was a lot. Hopefully you feel empowered to work on your class projects reflect and research phase now. For your next challenge, create a little dossier or brief of one to two pages with your users task, company, main problem to be addressed, defined goals and requirements, scope, competitive analysis, and some audience definition. For scope, I'll give that to you. Pretend I'm a stakeholder. Your scope will be applied to at least one screen homepage unless it doesn't make sense for your project. One interaction and a clear end screen. You can definitely add one or two more screens and interactions if that allows your user to finish their task. But try to keep it simple. For the competitive analysis, screenshots of entire sites or specific parts work just fine and for the audience definition, I'll leave that to you. You can interview, create user personas or do some serious Googling. But I'd suggest trying to make it as specific as possible. Share your research in the gallery when you were done. 6. Design & Develop: Thanks for sticking through that last video. It was a lot. Now we're on to phase 2. I'll begin with post-it notes. The beginning of this phase is highly collaborative and some of my favorite meetings are just hanging out in a space with a whiteboard and post-its to talk through design ideas. On these post-it notes, you can write the requirements, the goals, the user's needs, some screens, user flows, or anything else that quickly helps iterate and improve design ideas. Then, once they're on the wall and mad flurry of moving post-its is in rapid ideas, shut it out work through user experience problems without fussing about visuals. This is also a good time to bring in people outside of the design department to get some unexpected design ideas since everyone's a user. During these brainstorming sessions, you can figure out information architecture or the general framework of the content, user flows, low fidelity wireframes and low-fidelity prototypes. You can also do all these things by yourselves, but it's less fun in collaboration with many viewpoints leads to better design ideas. As a quick side note, I want to point out that the next two videos are about making user flows and low fidelity wireframes. I won't discuss them here. Let's move through those for now. We're at a point in the design process where it's time to start designing out some screens and testing them. In the very beginning, it is a rough layout of what should be there so it's not very pretty. Imagine it as the skeleton of the product slowly evolving into muscle definition. These really rough wireframes, known as low fidelity wireframes can be turned into prototypes. What is a prototype? According to dictionary.com, it is a first, typical or preliminary model of something, especially a machine from which other forums are developed for copy. I couldn't have explained it better myself. Prototypes are not about how it looks and knowing all the final details, it's about how the idea is working and to build upon it. You can make these low-file ones out of paper with some crudely drawn boxes. You can make them in Photoshop with gray shapes and labels, or even crayons on paper. As long as it's legible enough to complete a user's task. Until the user experience is figured out, they're repeating low fidelity wireframes and prototypes main. This is also a great point to check back with the requirements and make sure everything is accounted for. Before spending a lot of talent, energy on the fine details of the design, it is important to get the wireframes in a really good spot. They can be your guide. They can even move into medium fidelity where you start to bring in some UI or ideas for design, but it's a work in progress. This shouldn't be a focus though until later. But this process is very liquid and moves effortlessly from low-fidelity to high-fidelity. What does high fidelity look like? Basically, it looks like a final design. The topography is chosen, the spacing is good, layout is on a grid, colors are correct, buttons are there and final copy is in place. This work is typically done by a user interface or UI designer who has a slightly different design process than what I've shown you for UX. UI designers are in charge of establishing and reconciling the look and feel of a product that matches the client's voice and brand. They will sometimes work on error states of inputs and detailed interactions, such as, will there be an animation when you click on an arrow? Many designers are becoming both UX and UI, such as myself, to keep the process in one flow. There is enough in each role though for standalone UX or UI designer to not be both. From low fidelity to high fidelity prototypes should be user tested. Why is it important to do all this testing? After all, we already did audience definitions in the first phase. As Steve Krug, author of UX Bible, don't make me think says, "Testing with one user early in the project is better than testing with 50 near the end." When the product is tested early on, before lots of time and resources have been used, it can reveal problems that are easy to fix now. It also makes sure that the product is still a human first design, always keeping the user's needs up front along with business and stakeholder needs. As a UX designer, user testing gives you insight on how successful your designs are too. That's always a great learning experience. Solving problems early on before they become a big deal, keeping the product focused on the users and improving your own user experience design, sounds like some pretty good reasons to user test. To finish up on the design and develop phase, let's talk about when designs are being built. Some designers are also developers, but many are not. I like to say that designs are about 90 percent done by the time I exit my program and share them with developers. That last 10 percent can only be finished in code and live on a screen. A lot can change from your computer to the real product. That's why it's important to learn how to work with developers or engineers. In the beginning of the design process, going over the user experience with the prototypes is super helpful to keep everyone on the same vision. Over the years, I have learned basic HTML, CSS, and other programming language basics in order to communicate with them better. If I know how an enaction will be, I'll find some code for them. If I know a specific color needed, I'll find the CSS color code for them. This is also a very iterative process with time spent reviewing these built out designs. Knowing how to code isn't a requirement, but it's very helpful. You've made it through phase 1 and 2 of the design process. I hope you can see how UX touches almost every aspect of it. Don't forget to work on your class projects dossier and to share it with us in the class gallery. 7. Make User Flows: When you have an idea of how the general UX is going to be, you need a way to keep track of the user's journey through a task, easy and understandable. There are a few approaches to this depending on levels of fidelity, but we're going to do a mix of traditional flowchart and task journey map, or as I plainly call them, user flows. These are a great precursor to designing wireframes. They match out each action, decision point, and destination, a user can make from start to finish. You've probably seen these before in a yes or no flowchart. User flows don't normally have visuals attached to them, allowing you to focus on the paths and choice made by the users instead. There are high-fidelity user flows that combine what I just described to you with higher wireframes or higher fidelity designs. It's like a flat one sheet prototype. There are many variations on user flows and depending on your projects needs, you can choose which one. But the main purpose of all of them is to clearly map out the functional parts of the user so that designers, stakeholders, and especially developers, can understand fully the user experience. If each choice is clearly shown, then interactions and parts of the task won't be forgotten or improvised later, tainting the new experience you just worked so hard on. It's also a great way to generally document how things function in your product. Now, it might increase the mapping out every single path a user can make from start to finish, considering that each screen might have numerous choices. This is why it's important to assign an area of focus to the user flow or to assign a specific task. Sounds like our class project, doesn't it? Let's start making one. The first step that helps me get my mind into a user flow mode is to write down what elements and components are involved in my task. As you recall, my task is as a new user, I want to know what this company is. What I see being involved here is a paragraph, button, image, longer copy, more buttons, and maybe some cool ways to break up text. Vague and not helpful on paper, but I bet you thought through what was going to be part of your task. From there, I'm going to make a simple task journey and expand that into a complete user flow. For my first test square, it's going to be lands on the homepage because that's a requirement and part of the scope, for you all, wink, wink. Thinking back to my tasks, the next square will be sees logo and company doesn't recognize it. Here, the user has found their first task to learn more and solve this conundrum. Since users tend to scan before clicking around, my next square will be, user looks around initial landing screen, then user sees short paragraph in company blurb and reads. Remember how that was a goal in requirement for me to have something on the homepage? Now, the user could have moved on and gone to their next task, completely done, but for simplicity sake and for the sake of the project, the user will continue their efforts to learn more about the company. Next, user sees a "Call-to-action," to learn more about the company. A "Call-to-action" is a button or a strongly worded link, like see more, click here, "Enter", etc. Next for the user, the user decides to click on "CTA" and lands on about screen. then user reads content and learns about company. Task completed. That was fancy. I could add an element of contact us with any questions to fully satiate the users need here to learn more, and that is a task journey map. Not hard, right? To really start making this into a proper user flow, we need to take a look at our new task journey and pick out what is a destination, screen place, a decision point, place where user could go several paths, and an action, normally clicks for tabs. I see that homepage and about screen are the destinations. The decision point to click or not click on t he "Learn more about the company CTA," and the action is a click on the button. This will make more sense once we start making some shapes. Time to welcome your graphic design and creation program into the class. I'll be using Bohemian sketch, since that's the tool I use mostly for work. You'll assign each destination, decision point, and action, a special shape only to be used by a type. I'm going to use rectangles for destinations, circles for decision points, and little dots for clicks. To help with narrative aspects, I'm going to just type it out, but you can assign a shape. For an extra level, I'm going to color code them. Black filled for the rectangle destinations, white for the circle decisions, and then green for the clicks, don't forget to add some lines for the paths. Putting it in the correct flow is the fun part. First, add homepage here, then we add a little narrative text. From there, we have a decision point with a little indicator of an action. The user is then shown the about screen, a new destination, more narrative text, then the basic user flow is done. But because I like little challenges, I'm going to add a back option. If the user clicks on this, they will arrive back at the homepage. Generally, it is a good UX rule to always have a quick way for the user to return to their previous screen. I'll add another decision point here with a click, then cycle is complete, as a user has arrived back to where they started. This might seem overly explicit, but being this detailed can help out when there is a really complex task at hand with multiple decisions to be made at each part. The design of the user flow is completely up to you as long as it's clear and understandable. Now, your homework is to first make a task journey then translate it into a very well thought out user flow based on your chosen task, with all the amount of detail and colors you please. Share them in the gallery when you are done. 8. Make Wireframes: It's time to design your first wireframe, but what is a wireframe? Imagine that your design idea is simply a rough outline to allow content to be seen on a page without any visual design. There normally just outlines of squares, rectangles, circles and other shapes with labels and annotations. With low fidelity wireframes, there is no great sense of proportion or detail, just the main chunks of content. But as if fidelity improves, you could have wireframes on a design grid with correct hierarchy and even color and images. As I mentioned a few times in lesson 6, more iterations occur faster in the beginning because of less fidelity with wireframes, the user experience and design idea can be thoroughly represented without all the time spent on the visual design aspect. Having rough wireframes allows for everyone to see where the design is going and to make sure that the requirements are met. The technical side is fine and all the contents there. If a non UX designer though, looks at rough wireframes, there's normally a lot more explanation needed to have the design idea understood. Wireframes can also begin meaningful and much needed discussion between stakeholders, business and developers. It's hard to think through features if you don't have the training. Seeing it sparks thoughts. Before creating your own wireframe, I went to clarify the difference between a wireframe in a visual designer mockup. A wireframes purpose is to show the skeletal structure of the screen and what will live on it. Even nicer wireframes can have some UI, but not all time. A visual designer mockup is when the design is no longer a wireframe, but an actual representation of what the final product will look like. It's also called high-fidelity design with typography, spacing, color, etc. Normally, a UI designer is in charge of creating these, and at this point, the only discussions around them are purely designed like sizing and color, not larger aspects like components and content. To help create a wireframe, figure out the types of users your clients serve. For my class project, the users of the CSA website or older, more natural, maybe not as tech friendly. This means that my content should be laid out in a very straightforward and expected manner. Some other aspects I learned but aren't related to the project, that they are confused on how to join and pay. I should make that really obvious from the homepage. Another idea is to bring the next CSA announcement up front and center then add what the next box contains from what farms. A super seller addition would be to add recipes that could work with that box for the month, but I'm getting carried away now with ideas. I also know that CSA users are generally friendly and wealthier so maybe they want a more upskill farmers market field rather than the typical farm button. None of that really matters right now for my project, but it's good to have these details in mind for further iterations. Referencing my task journey and user flow, I'll first sketch some rough wireframes on paper to play around with how I want to lay it out. After finding a nicely laid out wireframe, I'll copy it into my graphic creation program sketch. Again, you can use Photoshop Illustrator or even GIMP. Here you can see big giant boxes and text labels. Then looking back to my requirements, user flows, testimony and user personas, I'll start adding more details to the big boxes. On my homepage, I'm going to add two main boxes to show the page generically. At the top, I'll add a box to represent the logo and add some fake texts to represent the short company blurb. Under the blurb, I'll add a button that links to the about page, it looks good in matches little user flow. Time for the About page, I'll add the logo again at the top and then lots of boxes for main content with more details now here comes smaller boxes and fake texts represent the company's story with images. I also mentioned the Back button so that goes in now too. Looking back at our user flow, we have a pretty perfect match. This is the point where we bring out wireframes to the requirements and goals dossier. Looks like I missed one requirement, the Global Access to the about page. What is the most straightforward and expected place to put that? The footer you say, why? Yes, I need to update my user flow now as it is a new choice on the page, here's an updated user flow. Here I go, adding a medium-size box that spans the page on both wireframes to represent the footer. Within, I'll add some text that represents that link. Glad I avoided making any more progress on my wireframe before checking out if I had all the requirements. Sorry to be achievable, but that's exactly why we do wireframes. The final part of your project is to make a low fidelity wireframe of your tasks. By now you have completed research, requirements, user personas, competitive analysis, a task journey, and a user flow to help and form and how to best lay your content in a wireframe. Good luck and please reach out if you have any questions. When you are done sharing the gallery so we can celebrate your first user experience wireframe. 9. Launch & Learn: Hope you are enjoying working on your user flows and wireframes, even though your class project doesn't touch the last phase of the design process, launch and learn, I'll talk about it anyways because I can't leave you hanging. You and the developer both agree it's looking complete and fully built. This is the phase to prepare and prevent disaster for your launch and release. I sound like a broken record, but this is the final check-in with stake holders, the requirements, goals, and anything to judge if the design succeeds at solving the initial problem. Sometimes this can be casual, or it can be a presentation showing our final designs in the built. This allows time to iterate and go back into previous phases if something is missing. Since we're big fans of UserTesting, this is also a good time to test. You shouldn't test only at this point as a last attempt to make sure that your designs are meeting the user's needs, focus testing during this time can also help you determine how will the launch will fare with the users. When everyone is on board for launch, a critical part of preventing disaster once it's out in the wild is a quality assurance check or QA check. Sometimes companies will have separate people for this task, but at all of my smaller companies, everyone involved in the project, designers, developers, managers become QA people. Quality assurance is a dedicated time to click on every button, look at every screen, examine every interaction, and make sure that all the wires have been properly hooked up. It can be really tedious, but puts the builds to the ringer. As a designer, you not only have to make sure that the build looks correct like in the designs, but you will have to conclude that the user experience is still the best for the users and everything functions properly. Doing a thorough QA scrutiny can reveal a lot of issues that would have ruined user's UX and soured their view with a product. I'll add another type of testing: A/B testing, this is different from the traditional UserTesting we've talked about so far as this is a live test on the product with actual users; the A variant shows a control which is the original design to a segment of people, then the B variant shows a new design to a segment of people. These people are randomly segmented and the test runs for a short time, but it's a real way to see one-to-one how users are interacting. You can also test more variants during the same time like an ABC test, so there are four possible design, so users could be seen during the designated time period. In my experience, these tests before launch have caught problems that would discourage users on the product before the product ever went public. Ready, set, launch, your designs are live, users are interacting with your design UX, what happens now? With all these preventative measures to find and root out issues before launch, there are always a few surprises that users reveal. Be prepared that right after launch, something might have to be fixed. From the moment of launch as users interact more and more with your new designs, it's best to keep documenting new information, revealed problems, reactions, ideas, complaints, etc, for the next generation. Remember how in the beginning of phase 1, it's helpful to learn about the previous solutions, this document will be key for that, it also helps keep track of what parts of the UX was successful, and what needs to be thought more. Congratulations for making it through the entire design process. It's a lot of information and you are a champ for getting this far. 10. Go Forth & Solve Problems!: Thanks for joining with me through user experience design and the design process. Hopefully this practical approach has equipped you go forth and start solving problems. I expect the web to be transformed into beautiful products next time I opened my browser. So one more time before you go. What is UX? User experience is the study of the experience of a user with a product. For our purposes, this means the digital products arena, but it can be applied to anything in the world humans interact with. User experience design is advocating for the users needs and motivations throughout the entire design process. If you build for everyone then you serve no one. So keep your specific users as the focus of your main product. A scientific approach to user experience design is the design process. It's a flexible methodology to help break down problems into manageable pieces focused around user experience design. There are many interpretations tailored to the designer and the person using it. But it's always building upon the knowledge you learn along the way, leading to a refined product. The knowledge I give to you comes from almost a decade's worth of learning and experiences as a UX, UI designer, I didn't go to school for user experience and you don't have to, if you want to become a UX designer. To get there, I would just recommend being as curious and inquisitive as possible. Go to seminars, take more classes like these, and just work on some UX projects. The more UX problems you work through, the more user experience skills you acquire. One of my favorite parts about being a UX designer is at the UX industry is very collaborative, so ask people for help. Ask people to work through designs with you. It's a fast changing industry and there's always something new to capture your interest. It's been so much fun learning with you and I encourage you to read the resources I've linked. I've read them, I re-read them, and most designers have read them. Please feel free to reach out if you ever have any questions and don't forget to post your final class project of user flows and wire frames. They're beautiful. Bye and until next time.