welcome are you ready to start putting pen to paper on a regular basis we'll soon be creating storyboards wireframes and low fidelity prototypes let's review where we're at in the ux design process you learned how to empathize with users and understand their needs you explored how to define user needs and problem statements and you started to come up with ideas for design solutions with activities like crazy eights and how might we in this course we'll continue to ideate and explore solutions in a low effort low-cost way by the end of this course we'll end up in the prototype phase more specifically by the end of this course you'll be able to use research to inform the ideation process build storyboards and explain how storyboards are used to create wireframes draw basic elements like shapes and lines understand information architecture create paper wireframes build digital wireframes on a tool called figma construct low fidelity paper prototypes develop low fidelity digital prototypes on figma and understand how to avoid the effects of deceptive patterns in designs keep in mind that throughout this course you'll continue to build on a project for your portfolio my name is karen and i'm thrilled to lead you in this next part of your ux design journey i'm an interaction designer on the material design team at google at work one of my focus areas is ux accessibility outside of work i help run a ux community called hexagon ux which advocates for underrepresented communities in the ux design industry i'm also one of those designers who didn't start out in this field i used to work in marketing and business development so if you're switching careers i can relate to get started let's discuss how to use research to inform the ideation process see you there so before i became a ux designer i worked in a few areas i worked in event planning i also worked as a business development analyst i also worked in marketing and at one point i was a paralegal in order to do that i had to be really detailed and organized and stay on top of the different tasks that i had to handle in order to move the project forward so i feel like my the skills that i gained from being an event planner of being very detailed and organized really helped me be successful at leading projects here i got into ux design when i was working as a business development analyst and i was taking continuing ed classes at night i discovered interaction design while i was taking an information design class and we were asked to make an infographic that's interactive and i did a search online trying to figure out what that meant and somehow stumbled across interaction design while i was working full-time i started to put together a portfolio to apply to grad schools my favorite part about being a ux designer is being able to work on complex problems and trying to simplify these problems into solutions that work for users i get into like a flow state i'm very focused and my mind is just focused on designing the different connection points going from one screen to another and all the different ways that the app could flow and i really like being able to think about okay i have these findings that i've gained from talking to research participants how do i bring it back into my designs like a fully developed product it feels amazing to see the work that you did in wireframes in real life in people's hands hi i'm karen and i'm an interaction designer hi there in the last course we learned how to empathize with users and define their problems we used empathy maps personas user stories and user journey maps to identify pain points the user might experience our role as ux designers is to understand these pain points and come up with ideas to solve them empathy maps personas user stories and user journey maps are tools ux designers commonly use to expand our understanding of the people we're designing for a lot of planning in detail goes into using these tools so if you need to refresh your memory feel free to revisit earlier content let's think back to empathy maps as a reminder an empathy map is an easily understood chart that explains everything designers have learned about a type of user empathy maps help ux designers understand a user's behavior when interacting with a product to get a little more specific empathy maps focus on four main motivations of users what the user says thinks does and feels in other words empathy maps tap into our users minds and hearts to help us understand their thoughts and feelings in a given situation the insights gathered from empathy maps allow us to come up with ideas for solutions that address the user's problems and appeal to the user on a deeper level next let's recall personas as you might remember personas are fictional users whose goals and characteristics represent the needs of a larger group of users as you're ideating it's a good time to reference the personas you created to help you remember who you're designing for ask yourself are there any specific goals they want to achieve or are there any needs that you should design for in order to support the personas in addition you might want to review your user stories a user story is a fictional one-sentence story told from a persona's point of view to inspire and informed design decisions it introduces the user lays out an obstacle and states their ultimate goal user story expands on the persona and deepens your understanding of a user group a good user story can also inspire empathetic design decisions by making our approach user centered if you have a lot of user needs to consider user stories determine which ones are the most critical to resolve this can help narrow down which user needs to focus on when coming up with ideas for solutions lastly think back to the user journey maps you created remember a user journey is the series of experiences a user has as they interact with your product user journeys build off their personas and user stories you've already created user journeys help you come up with ideas for designs that truly support the user's needs and reduce their problems or what we also like to call pain points together empathy maps personas user stories and user journey maps help us create a problem statement or a clear description of the user's needs that our design should address coming up we'll transition from the problem the user is facing to the solution we can provide as ux designers so get ready to dig in [Music] hi there my name's craig and i'm a research manager at google so in terms of like what the day normally looks like i will be working closely with design thinking about you know the next iteration of a product i'll probably be working with a product manager trying to convince them of a certain direction that we should be taking i'll be thinking about the research gap so what research should we be doing where could we have real benefit and impact to the business there's very particular moments where research and design really come together to align on who we're designing the product for and seeing how that product is then built and then seeing it in the hands of our users and seeing how that's then evaluated by them normally up front before we even you know think about launching a product there's a good amount of what we call formative or strategic research that goes on that our design counterparts are utilizing to effectively build out those like initial concepts that we will start um advocating for around the business once we've got approval or once we're in the process of saying yes this is something we really want to pursue then we're typically researching with users with prototypes we are taking insights that we have got from the research working with our design teams i'm really thinking about the actual design itself like should it look like this should it look like that where should we place this how will the user move from screen to screen and in those moments we're testing frequently and we're testing often one of the biggest mistakes i think every researcher learns at some point in their career is not testing early and frequently enough and we all have stories of where we haven't done that and the effect that it's had on the product eventually we'll have something that we can launch and that's a really exciting moment so we've gone all the way from an idea all the way from ideation through to testing something in the hands of our users all the way to a proper launch where it's out in the public and our job doesn't stop we're then really heavily involved in understanding has that product landed is it doing the things that we wanted to for the user how do the users feel about that how are they responding to it and again we take that feedback and we work quickly with our design product and edge team to put that feedback into the product and iterate from that moment on so over time you get these cyclical loops you get this product development process using research and insights to inform like the next stage of the product i'm fortunate that i manage a really great team of researchers so it's also about giving them responsibility and giving them ownership of things so where can i step back and let them do more and let them shine welcome back let's work on merging the insights from empathy maps personas user stories and user journey maps to come up with a focused scope for your designs to focus the scope of your designs we'll create a goal statement which is one or two sentences that describe a product and its benefits for the user in other words the goal statement provides the ideal solution for the design so at this point in the design process we're transitioning from the problem the user is facing to the solution we can provide as ux designers the problem is defined in the problem statement and the solution is listed in the goal statement goal statements cover who the product will serve what the product will do and why the product solves the user's need to answer the who what and why you should lean on the user research you've already conducted the easiest way to find out the who what and why is to refer back to your problem statement let's think back to the problem statement formula we introduced earlier user name is a user characteristics who needs user need because insight now imagine we're designing an app that helps people find and schedule dog walkers a problem statement we might create would be drew is a pet owner in a small town who needs to find and schedule a dog walker because they work the night shift now let's connect the dots remember we're transitioning the problem that our user drew is facing to the solution we want to focus on to meet their needs the first part of the problem statement drew is a pet owner in a small town describes a user that our design will serve this informs the who of our goal statement the second part of the problem statement find and schedule a dog walker describes that need or problem that our user drew is facing the problem will guide the solution that we need our product to provide or as we're calling the what and the third part of the problem statement because they work the night shift describes an insight about our user that might inform our design in this case our dog walker app helps people find care for their animals when they're at work or otherwise busy so how do we actually turn this information into a goal statement remember the goal statement should be just one or two sentences it needs to describe both the product and its benefits for the user our goal statement might be help users with pets find and schedule dog walkers quickly and easily if you didn't create a problem statement fear not you can also pull the who what and why into your goal statement from various other parts of your research and ideation process for example the who can come from the persona the what could come from the user story and the why can come from the empathy map and user journey maps okay so we've made the transition from the problem the user is facing to the solution we can provide as ux designers our solution is outlined in the goal statement but what will the user experience look like in our solution well up next we'll create a storyboard which helps us explore a user's experience with a product in order to come up with an ideal flow see you there welcome back in this video we'll focus on storyboarding a tool for ideation that helps you outline an ideal flow for your design you'll have an opportunity to sketch a storyboard on a piece of paper soon for now let's start with the definition in ux a storyboard is a series of panels or frames that visually describe and explore a user's experience with a product keep in mind we've made the transition from the problem the user is facing to coming up with ideas for solutions we can provide as ux designers think about storyboarding as a tool to visualize potential solutions to problems the user is facing you might have heard the term storyboarding used in reference to movies or commercials in those cases a storyboard gets divided into a set of panels and each panel tells a piece of the overall story well in ux design it's similar storyboarding is a tool for making a strong visual connection between the insights you uncovered during research and the flow of the experience using storyboards to sketch an idea helps you work through the flow of the experience it can also act as a visual aid to explain your ideas to stakeholders because they can visualize how the product you're designing will be used a real product might have many screens but your storyboard should focus on just the most important parts of a user's experience with a product and as the name suggests there's a story that should be told through the panels of a storyboard the four key elements of a storyboard are the character the scene the plot and the narrative the first element character is the user in your story the next element the scene helps us imagine the user's environment the plot describes the benefit or solution of the design finally the narrative describes the user's need or problem and how the design will solve the problem now let's take a look at the template that's often used to sketch a storyboard the scenario is a short sentence that helps us understand the user and their problem we're solving the visuals guide us through the user's experience with the app or service this is where you'll actually sketch and the captions combine the visuals and scenario by describing how the user interacts with the product basically it's the text that describes each frame of the story here's a tip the captions are useful for interactions that may be difficult to sketch out let's check out an example of how to take a problem statement and turn it into a six panel storyboard using the template we just reviewed let's revisit a problem statement from course two amal is an athlete who needs a way to sign up for workout classes because the class he wants to participate in fills up fast our first step is to turn this problem statement into a goal statement our goal statement could be help users who are athletes sign up for workout classes early and quickly now it's time to storyboard to save time i've already built out a six panel storyboard for this example let's walk through it together in the first panel in the top left of the page amal is at the gym and is frustrated because he can't get a spot in today's workout class in the second panel amal is sitting on his couch and opens an app on his phone next in the panel on the top right of the page i zoom in on the phone and show a model looking at a calendar and selecting the date he wants to schedule a workout class on in the fourth panel on the bottom left of the page a mall selects a workout class the fifth panel shows a mall on a confirmation screen and tapping a button to confirm his class in the final panel i sketched a mall smiling as he attends his workout class so now you know the basics of storyboards next we'll explore two types of storyboards and when to use each type see you there hi again let's continue our discussion about storyboards remember storyboards are often used to outline movies in the film world storyboards are used before a movie is created to show how each scene of the movie will play out for a character in the ux world storyboards are similar they show how each scene of the journey will play out for a user as they interact with the product now things are about to get interesting there are actually two types of storyboards keeping movies in mind these two types of storyboards are called big picture and close-up first let's discuss a big picture storyboard which focuses on the user experience big picture storyboards think about how people will use the product throughout their day and why that product will be useful this helps you understand the entire user experience including the different challenges potential pain points and types of interactions the user will encounter take a moment to think about a movie you watched recently maybe it was an action-packed superhero movie or a thoughtful romantic comedy each panel of the big picture storyboard captures a part of the character's actions that push the story forward again it's similar in ux design each panel of a big picture storyboard captures a part of the user's journey with a product let's revisit our dog walking app remember our problem statement was drew is a pet owner in a small town who needs to find and schedule a dog walker because they work the night shift and our goal statement was help users with pets find and schedule dog walkers easily and quickly let's create a storyboard to describe how drew gets from the problem they're currently facing to the goal when using our product remember we want to include emotion in our big picture storyboard first the user leaves their house in the evening headed to their job as a nurse their dog is left at home overnight for 10 hours so we see the dog with a sad face then as the user is driving to work they think of their dog at home the user remembers that they forgot to take their dog for a walk that day whoops later while the user is on a break at work they grab their phone and open the dog walking app the app shows the faces of local dog walkers who are eager to meet the user's pooch the user feels relieved knowing that someone might be able to bring their dog for a walk in the app there's a clock icon and the user selects a time for the dog walker to come to their house there's also a calendar icon to schedule the dog walker on a regular basis the user clicks the confirm button to finish scheduling their dog will be so happy to have some company and go for a walk finally the user returns back to work and is smiling feeling happy that their dog will be well taken care of and will get more exercise in the future notice that this big picture storyboard is focused on how and why think about questions like how will the user use our dog walking app why will the app be useful and why will the user be delighted by the app like a good movie a big picture storyboard can show the emotional engagement that a user will have with our app or with any product understanding how a user feels while experiencing your product is an essential part of the design process alright so you have a hang of a big picture storyboard let's transition to the second type of storyboards close up in a close-up storyboard the sketches in each panel focus on the product instead of on the user experiencing that product while big picture storyboards focus on the how and the why close-up storyboards focus on the what think about questions like what happens on each screen of the product what does the user do to transition from one screen to another and after you've created the storyboard what are potential problems with the flow keep in mind we only need to pick a few key screens to sketch in order to demonstrate the product experience it's not necessary to do a detailed click-by-click play of every part of your product let's think about our dog walking app again in a close-up storyboard you'll include the same screens that a user will experience first the user taps the icon on their phone's home screen to open the dog walking app next the user enters their email address and password to log into the app the user navigates to the settings page of the app to share the location of their house for the dog walker to visit then the user returns to the home page and taps the clock icon to select a time for the dog walker to come to their house the user also taps the calendar icon to schedule the dog walker on a regular basis finally the user presses the confirm button to finish scheduling the dog walker what did you notice about how this close-up storyboard was different from the big picture storyboard the close-up storyboard is less about emotion since we're not focused on the user instead the close-up storyboard is focused on the practicalities of the design itself so how do you decide which type of storyboard to use to decide it's helpful to think about the stage of the design process you're in if you're early in the design process you might want to present your high level ideas to stakeholders to get them excited and bought in in this case a big picture storyboard makes sense so your team can focus on the user their needs and their experience with your product on the other hand a close-up storyboard is more useful after your initial design directions have been explored since a close-up storyboard focuses on the details within your product like screens of an app this type of storyboard can help you think through practical ideas about improving the product one more thing in many cases you might want to create both a big picture and a close-up storyboard there are also ways to bring both types of storyboards together for example in the storyboard about a mall booking a workout class we change the focus from the user to their specific interactions within the app and that's okay as ux designers it's good to have a flexible and creative approach to explaining your ideas so try experimenting with both styles and that's a wrap you now know about two types of storyboards big picture and close-up keep your storyboards close by because later on we'll use the sketches we created in this close-up storyboard to draw wireframes next up we'll learn the basics of wireframes keep up the great work hello to kick things off i'll introduce some common terms that will help describe what we'll work on for the rest of the course let's start by explaining what a design is in the context of this program a design solves a real problem that users are experiencing and a strong design always puts the user front and center a design can have different levels of fidelity in ux fidelity means how closely a design matches the look and feel of the final product if a design is low fidelity that means it has a lower amount of complexity and is less refined or polished we call low fidelity designs lo-fi for short ux designers use low fidelity designs when we want to get ideas out quickly and leave room for exploration if a design is high fidelity that means it closely matches the look and feel of the final product and is more refined or polished overall we call high fidelity designs hifi for short ux designers use high fidelity designs when we want to test a design that looks like a real product and get more specific feedback from users you can think of fidelity like a dial you can turn up or down for example imagine you want to quickly draw the rooms of an apartment on a piece of paper with a pencil you might use simple rectangles and squares to indicate where their rooms are and where the furniture is positioned in each room that would be a low fidelity design or you can dial it up and make a detailed drawing of the apartment including paint colors and images of pieces of furniture your design is now high fidelity because it looks more like the real apartment in this course we'll focus on low fidelity designs we'll cover high fidelity designs in a future course so let's dive into one kind of low fidelity design wireframes a wireframe is a basic outline of a digital experience like an app or website as the name suggests wireframes look like they were created with wires they're mostly lines and shapes with some text so why do ux designers create wireframes wireframes establish the basic structure of a page before visual considerations like color or images are added wireframes serve as an outline to get the team on the same page early in the project try using this as your guiding question when creating wireframes how do i organize information on the page in a way that makes sense for users second wireframes highlight the intended function of the product when drawing a wireframe you should think about how the elements serve the overall functionality for example the function of a button should be clear and that functionality is expressed through the way that it's drawn we'll go through this in more detail later on finally wireframes help designers save time and resources wireframes allow the team to quickly try out different design options they also serve as a guide for everyone involved in the project which saves time later you can create wireframes by hand or by using digital tools we usually start creating wireframes by drawing on a piece of paper we'll start drawing wireframes in the next video so get ready to try it out alright now that you know what wireframes are it's time to start drawing we'll introduce the elements that make up wireframes and explain how to draw a wireframe step by step later you'll create your own wireframe i bet some of you are really excited to put pen to paper i know i am but if you're feeling a bit nervous that's okay too the good news is you don't need to be an artist to be a successful ux designer i certainly don't consider myself an artist in fact you don't need to have any experience with drawing in order to succeed in this course drawing is a learned skill which means the more you practice the better you'll get for some people doodling shapes lines and stick figures come naturally for others drawing takes more practice the important thing to keep in mind is that in ux design drawing is not about creating art to hang on a wall instead a good wireframe is all about organizing and communicating information clearly to your colleagues who will implement your design you just have to get started and put your ideas on paper you can do this one more thing there are many different ways to draw a wireframe some designers prefer messy hand-drawn wireframes others may use rulers and are super meticulous about the way their wireframes look do what feels best for you okay so let's start with the basics of drawing wireframes your wireframes will be made up of elements elements are building blocks for creating a design most of the time you'll use these elements to draw wireframes lines shapes like squares and circles and text take a look at this example of a wireframe it might look complicated at first but all i used are lines basic shapes and text okay now that you know how to draw each of these elements individually let's put them together think about an app you visited recently or pull an app up on your phone right now you'll notice that even the final product is made up of lines shape and text so imagine i want to draw a wireframe that shows an app within a mobile phone let me show you an example using these three elements first create the frame for the phone this can be a simple rectangle make sure it's large enough to draw inside of next i'll add a bar at the top this bar is where we display information and actions relating to the current screen this rectangular bar spans almost the entire width of the app at the top below the top bar add three dividers dividers are thin lines that group content in lists and layouts now i'll add some details into each of these two areas i'll start in the top bar and draw a navigation menu icon that's the icon on the top left with three horizontal lines the navigation menu icon should be inside the top bar next i'll add the avatar which is a big circle with an icon of a person's head and stick figure body i'll add the avatar in the top right corner inside the top bar then i'll add a circle within each rectangle that was created by the dividers i'll draw the circles on the left side of the rectangles i'm trying to keep all the circles the same size but it's okay if it's a little messy i want these circles to indicate images so i'm going to draw an x in each of these circles next add a circle with a plus sign in it in the bottom right of the frame finally draw horizontal lines to indicate text to the right of each circle in this example the line should only be in the middle of the rectangle not drawn from end to end just like that i have a wireframe and guess what it's a wireframe for the gmail app keep in mind this is just one example of a wireframe so you can start to visualize this process the elements you draw on wireframes will vary across different apps and across different screens in an app to make sure that your wireframes are simple and understandable we have industry standards industry standards are common ways to indicate page elements in the case of wireframes there are a few industry standards you should be aware of you might have noticed these in the wireframe i just drew the first is text which should be represented by horizontal lines second is images photos illustrations and icons which are represented by a circle and an x overlapping circle and third calls to action are often represented by rectangles or circles a good example of a call to action is a submit button on a form or the circle to compose a new email in our example okay you know the basics of drawing wireframes and industry standards and you see me draw a wireframe live it's time for you to get to work grab a piece of paper and pen or pencil and meet me in the next video you're going to draw your first wireframe an easy way to practice drawing wireframes is to recreate an existing app for this example we'll draw a wireframe of google photos together first draw a large rectangle to represent the frame of the phone we'll leave a short pause to allow you to do this yourself if you need more time feel free to pause the video too second draw the top bar which spans the entire width of the app at the top third draw three rectangles in a row below the top bar each rectangle should take up about a third of the frame and have an x inside to indicate their images leave a little bit of space between each rectangle next draw the bottom navigation bar which spans the entire length of the bottom of the frame then above the bottom app bar draw two rows of three squares when you're done there should be six identical squares in this section now it's time to add some circles and squares to represent all the icons in the top bar draw a small rectangle on the far left and a circle on the far right next in the bottom navigation bar add three small squares one on the left one in the middle and one on the right finally add some straight lines to represent where there would be text first add a straight line in the middle of the top navigation bar then add a straight line that goes from the left of the frame to the middle of the frame between the three rectangles and the six rectangles last add a small line below each of the small squares in the bottom navigation bar congratulations you just drew your first wireframe are you feeling like a ux designer you should be i'm so excited for you remember the more you practice drawing the better you'll get so keep up the great work hi again congratulations on drawing your first wireframe i hope you're feeling like a ux designer now that you have the hang of things let's explore wireframes in more detail remember a wireframe is a basic outline of a digital experience like an app or website that's made up of lines and simple shapes there's almost no wrong time to use a wireframe some ux teams might be tempted to skip wireframing because they think it'll save time but it's a key part of the design process so what are some of the benefits to creating wireframes first wireframes inform the elements to include in your design seeing the elements laid out on a page will help everyone decide if the right elements are included second wireframes help you catch problems early wireframes allow you to map out how all the elements will look on each page and how users will navigate from page to page this lets you check if elements are missing out of order or disorganized also wireframes get stakeholders to focus on structure instead of the details like color and text the magic of a wireframe is its simplicity a wireframe is a basic outline made up of lines and simple shapes so there are no details for stakeholders to get hung up on this allows you to make decisions early on the structure of the website or app next wireframes allow you to save time and effort the wireframe serves as a guide for everyone involved in the project engineers and other stakeholders agree to follow the guide early so fewer revisions are needed knowing how the design will be built saves time and effort for everyone lastly wireframes allow you to iterate quickly when you design you always need options overall wireframes let us explore a greater number of design ideas and make it easy to create new designs faster okay so now you know the benefits of wireframing let's keep building your wireframing skills and check out different methods you can use to actually create these wireframes see you soon that wraps up our introduction to wireframes let's recap everything you've learned so far you started by learning how to use research to inform the ideation process then you came up with goal statements next you learn how to create two types of storyboards big picture and close-up and finally you explored what a wireframe is how to draw one and the benefits of wireframes keep in mind that at this point in the design process you should have lots of ideas that address a real user need you want to refine those ideas and wireframing can help you do that coming up we'll explore ways to wireframe on paper and digitally you'll even create your own digital wireframe in figma i can't wait to continue on this journey with you i hope you're excited about drawing because there's more to come see you soon hello again so far you've drawn a wireframe for products that already exist like google photos this is a great way to practice wireframing because you have a real product to reference and try to replicate coming up you'll learn how to build wireframes for a new product or feature to do this we will focus on organizing the information in your wireframe using what we call information architecture draw lots of wireframes on paper for a new product transition from paper wireframes to digital wireframes in figma which i'll demonstrate hear directly from figma about how to best use your tool and learn about a few gestalt principles that you can apply to your wireframes this is an action-packed part of the course so get ready to explore the wide world of wireframes let's get going hi again previously we shared how insights from your research can inform your goal statement and storyboards which ultimately builds toward the wire frames you'll design in this video we'll focus on organizing the information your wireframe using what we call information architecture information architecture or ia organizes content to help users understand where they are in a product and where the information they want is when users find a product easy to use it means they can find what they're looking for quickly and intuitively this isn't by chance it's by design to make sure your product is easy to use your information architecture should be informed by many sources like user research and the ways that existing products in the market are structured knowing the users their goals and their behaviors is key to effective ia ia helps organize a site or an app it's like a map here's an example of how ia might come to life notice how it's a bunch of lines and rectangles the rectangle at the top might represent the home page because it's the page you want users to start on when they enter your website below the home page is a row of rectangles that are each attached to the homepage by a line this row of rectangles represents the different sections of your website for example if you're creating a site map for a shopping website this row of rectangles could include products cart user account and the shop's about page finally each section has a column of rectangles attached to it by lines this column of rectangles represents the subpages of that section for example the cart section of our shopping website might include subpages like order summary shipping and payment creating information architecture is an important part of ux design for many reasons first and foremost ia organizes and defines the overall structure for the app or the site second it provides a high level view of a product as a ux designer you need to understand how the elements of a product fit together and relate to each other in order to create the design of that product third ia helps stakeholders review your designs stakeholders can evaluate whether the content in the site or app is the correct type of content and if it's placed in the appropriate places to help achieve business or product goals strong ia also helps engineers understand how to organize the data so the eventual development of the product matches the visual designs you've created so not only will your users benefit from good ia it'll make your colleagues jobs easier too finally an information architecture that's flexible allows your ideas to grow and iterate with the design the ability to adapt your approach at different stages of a project is one of a ux designer's most necessary skills for example you should group your information architecture in a way that allows you to add additional categories in the future once you've established your information architecture you can use it to inform your wireframes a stronger ia generally means clearer wireframes and a better thought out product overall put it this way if you create a clear information architecture for the dog walking app you'll have a better understanding of how the different screens in the app will fit together and how the user will move or navigate between those screens this will help a lot when you start drawing wireframes now you know the basics of information architecture and how ia can inform your wireframes next we'll explore how information architecture is visually represented through sitemaps meet me there hello again earlier you learned how to draw one frame of a wireframe on paper when you created your first wireframe of the google photos app in this video we're going to take your wireframing skills to the next level wireframing helps you get your ideas down so it's time to draw wireframes for a new product let's go remember a wireframe is a basic outline of a digital experience like an app or website that's made up of lines and simple shapes the goals of creating wireframes are to establish the basic structure of a page and to highlight the intended function of each element we want to focus on the structure and function before visual elements like color or fonts are added to the mix you may be wondering why do we build wireframes on paper remember we already covered the benefits to creating wireframes in general so i'll quickly share a few benefits to paper wireframes in particular first paper wireframes are the fastest way to get your idea out a simple drawing by hand is much faster than building a wireframe in a digital tool think about how quickly you could draw a few lines squares and circles on a napkin now that's speedy second drawing on paper is inexpensive after all you only need a pen and paper no fancy tools or software are required in addition because creating paper wireframes is fast and inexpensive you can explore lots of ideas keep in mind that wireframes are not meant to be perfect instead wireframes help you get all your ideas out on paper without worrying about every single detail later we'll review those ideas and narrow our focus on the best parts of the wireframes we drew okay there's one thing i should clarify the example wireframes we presented earlier in gmail and google photos were for products that already exist this is a great way to practice wireframing because you have a real product to reference and try to replicate but typically we draw wireframes for a new product or new feature to help us explore a lot of ideas we may be creating multiple wireframes for the same screen of an app or website think about this example imagine we need to draw wireframes for the home page of our dog walking app the dog walking app doesn't exist in real life yet so we're coming up with lots of ideas for the structure of the homepage and the intended function of each element on the home page in other words you're drawing wireframes for lots of ways that one screen the homepage could work paper wireframes sound pretty great right so grab your thinking cap and let's get to it step one before we begin drawing it's helpful to write a quick list of the information that needs to go on the page you're drawing wireframes for it's important to list this information up front so you remember to draw all of the elements in each of your wireframes we're drawing wireframes for the home page of our dog walking app so the information that needs to be included on this page might include a navigation icon a search bar images and text descriptions step two start drawing it's a good rule of thumb to try to create at least five different versions of how you want to structure information on a page remember at this stage our goal is to explore lots of ideas with our wireframes for our example i'll draw five wireframes of the home page for a dog walking app as i draw i'll check the list from step one to make sure i don't forget any elements there's no right answer so be creative and try new ideas you might come up with what feels like a ridiculous layout but that's how we come up with innovative ideas wow that was fun let me share my thought process for each of the five wireframes i just drew first for option a i drew a layout for the home page where each dog walker has their own profile card i wanted each profile to look like a card because it reminded me of when dog walkers put up flyers at the grocery store there's also a search bar at the top of the home page for option b i wanted more than just the dog walker's profiles on the home page i thought it might be helpful for users to have some tips or articles about how to train your dog at the top of the page i also tried making the dog walker profiles horizontal rectangles instead of vertical rectangles like cards for option c i added an area to show the user's recent activity within the app i thought this might be helpful for users who want to schedule the same dog walker multiple times i like the horizontal dog walker profiles so i drew them again but this time i used dividers instead of rectangular shapes i also added a header to describe the profiles as dog walkers near you next for option d i drew something totally different that's part of the ideation process i drew three large sections to highlight the most important features in the app schedule a dock walker recent activities and latest training tips i thought this would help users easily navigate the app finally for option e i wanted the home page to be more visually engaging so i added a few placeholder images which are the squares with an x in them i also added an avatar in the top right corner to help users easily navigate to their profile page alright so now it's time for step three we're done coming up with ideas and it's time to refine the wireframe review the versions of the wireframe you came up with and add a star next to the pieces you like most in our example i drew a bar at the top holding the navigation menu in most of my explorations that tells me i probably want to keep that content up there so i'll add a star to that part of the wireframe in addition i really like showing the dog walkers near you in a list because it makes it easy for the users to quickly see as many new dog walker candidates as possible and find someone they like to hire so i'm going to put a star next to that and finally step four with the attention on the best of your ideas you can narrow down the parts of your wireframe that you want to explore further in a digital wireframe it's helpful to pick two or three ideas to build out further using a digital design tool we'll cover wireframing digitally in the next video one more thing it's helpful to refer to your sitemap to determine which pages you've already wireframed and which ones you still need to wireframe you can also use your sitemap to chunk the project into smaller pieces for example if you were building wireframes from the shopping website sitemap you might wireframe the home page then each of the section pages and finally each column of subpages because wireframing is such an important part of the design process you want to save your paper wireframes to include pictures of them in your portfolio each time you create paper wireframes remember to take photos so when you're ready to work on your portfolio piece you have a bunch to choose from to include coming up you'll learn how to use your favorite elements of your paper wireframes to build digital wireframes welcome back we've learned a lot about wireframing and why paper wireframes are a great starting point for your actual ux designs by now you should have created a pretty solid paper wireframe yourself be sure to hang on to your paper wireframes for your portfolio so you can showcase your full design process in this video you'll learn how to know if you're ready to convert your paper wireframes to a digital version and the most important elements to focus on as you get started let's do it after you've explored multiple ideas for wireframes on paper and you understand which wireframe elements will provide the best user experience it's time to bring your paper wireframe to life digitally while drawing wireframes on paper is fast and inexpensive things get a little trickier when we move to digital wireframes so make sure you feel good about your paper wireframes before you move on to the next step there are a few questions you can ask yourself to decide if you're ready to move on to a digital wireframe one is my paper wireframe complete as we know a wireframe isn't anywhere close to a finished product so complete means you have an idea of the structure that you want to use in your wireframe two have i received feedback on my paper wireframe hopefully by this point you've received feedback from peers or your manager on your wireframes and three am i ready to consider basic visual cues remember coloring images don't come into play until much later but at this point in the design process you might vary the kind of text you include in your wireframes we'll discuss this more soon if you can answer yes to these three questions you're probably ready to transition from a paper wireframe to a digital wireframe if not that's okay keep working on your paper wireframes until they meet this criteria as you move forward with your wireframes and make the transition from paper to digital there are a few things you should keep in mind first use actual content for important pieces of text instead of all placeholder text for example for different sections of the screen i might want to call out what that section is called in the dog walking app right above the list of dog walkers i'll write out available dog walkers near you to make that clear another example is in a bottom bar you might list the actual text label below the icons to make it clear what each icon will do but for large chunks of body copy use a placeholder text like lorem ipsum if you're not familiar with it lorem ipsum is meaningless placeholder text written in latin that you can use to show where content will go and how a page will be laid out the use of latin text to simulate words without actual meaning started in the printing industry where it was used to lay out a printed page before the real text had been written the 69 word lorem ipsum text block originally appeared in an ethics book written in 45 bc by the roman scholar cicero and it was first used for fake text in the 1960s while manual printing is pretty much extinct designers still rely on lorem ipsum to simulate text in a layout using lorem ipsum allows designers to present the structure of the wireframe without the distraction of actual words you'll see lorem ipsum used a lot and will use it frequently yourself throughout your ux design career the second thing to keep in mind when transitioning from paper to digital wireframes is that you should hold back on adding expressive content like color or images into your wireframe for now your wireframe should still focus on functionality wait until you start working on prototypes before adding expressive visual details so why do ux designers create wireframes digitally digital wireframes allow you to pay more attention to the details the goal of paper wireframes was to get all of your ids out on paper and it was okay to be messy but now with digital wireframes it's important to get the structure array and that means making your design cleaner digital wireframes are also easier to share than paper wireframes because many digital tools like the ones we'll use allow you to collaborate sharing a link to your digital design is a lot easier than making photocopies and mailing them to each of your stakeholders all right using what you just learned you should be able to get your paper wireframes in a good enough state that you're ready to start translating them into a digital format and coming up we'll do that as we transition from a paper wireframe to a digital wireframe in figma keep up the great work hi there you've learned so much about the ux design process so far you've created some basic wireframes and explored different elements that go into planning your design now's a great time to switch over and learn the ins and outs of a ux design tool this way you get a feel of what it's like to build a project in the next video you'll learn to use an innovative ui and ux design tool called figma there are many applications and tools out there to help you achieve your wireframing and design goals so what makes figma special figma simplifies the design process by allowing teams to collaborate even if they're not in the same location and that's appreciated by designers who work remotely or teams where individuals are located in different parts of the world imagine you're collaborating with the designer on the other side of the globe you're on a tight deadline to have the project completed working together on a cloud-based app speeds up the process making it ideal for collaboration and time management i personally use figma a lot for remote work because figma enables a very collaborative environment my team runs a good amount of workshops with other teams around the company and oftentimes many of the participants are based in different locations figma's collaborative features have made it possible for us to continue doing workshops even though we may not physically be in the same room figma is widely used by the design community so there are many plugins made available by the design community to help speed up the design process figma is considered an all-in-one tool because designers can create wireframes and prototypes which we'll explore later even though we'll be working in figma for this part of the certificate it's important to remember that many of the skills we'll explore are transferable to other ux design tools too remember ux design changes often and so do ux design tools once you know the basics in one tool like figma you'll be able to master a new tool in no time coming up you'll learn how to create a figma account build digital wireframes in figma and understand how to present your new digital wireframes hi there now that you understand the basics of wireframing and have been introduced to figma we're going to put these two things together so far you've drawn wireframes on paper but now let's go digital in this video you'll learn how to transition the wireframes you've drawn on paper into digital wireframes using figma so let's open figma i'll start by adding pictures of my paper wireframes to the figma dashboard i took photos of my sketches already so i'll upload them now from the menu click file then place image let me find where i saved my paper wireframe photos on my computer found them now that i've located them i can upload them to figma another way to upload the photos is to drag them from a folder and drop them into figma let me demonstrate it for you now there now i have something to reference as i build a digital wireframe next i'll build the frame on the toolbar i'll click this icon that looks like a hashtag it's called a frame icon in figma then i'll select the platform i want to use you can create a wireframe for any type of platform since i'm demonstrating how to build a mobile app i'll choose a phone as the frame i'll pick android seeing the long rectangle makes it much easier to visualize the phone screen to make it easier for me to reference i've moved the home screen sketch next to the android frame now i'm ready to create the bar at the top of the screen to do that i'll need to create another rectangle i'll open the shapes menu in the toolbar where there are a variety of shapes to choose from i'll select this rectangle then i'll draw the rectangle in the frame across the top to create the bar next i need to create the navigation icon which is usually three horizontal lines to do this i'll draw a line i need the shapes menu again for this one the navigation icon will be in the top left corner of the app so let's draw the first line oops that doesn't look very straight does it i'm going to delete that by selecting it and using the delete key on my keyboard here's a pro tip to create a perfectly straight line instead of drawing it freehand like i just did you need to hold down the shift key on your keyboard as you draw there that's better instead of drawing two more lines i'll copy this one i'll select the line by clicking on it then use the keyboard shortcut to copy it on a mac hold down the command button then press c on a pc hold down the control button then press c now that i've copied the line it's time to paste it i'll use a shortcut again this time for paste you can press command v or ctrl v it seems like the second line pasted right on top of the original line so you might not be able to see it but i can use my keyboard arrows or my mouse to move the new line i'll put the new line directly below the original line now i'll make another copy and position this third line directly under the previous one do you notice how when i move the line i drew red lines appear in the frame those are guiding lines to help line up the shapes that way when you have a group of lines or shapes none of them are too far to the left or to the right great now let's go back to our hand-drawn wireframe the next feature on the bar is the company logo remember for wireframes we want to keep this simple so i'm going to create another rectangle to act as the placeholder for the logo now let's fill the rectangle in with a new color to show that it's a placeholder for something else and to provide contrast with the bar first i'll select the shape then in the design menu i'll choose the color since this is a wireframe i'll just use a darker gray great so we have the bar at the top of the app and a spot for the logo the last element that'll be in this bar is the profile icon to make the profile icon i'll use the shapes menu again and select a circle remember how i held down the shift key to draw a straight line i'll also hold down the shift key to draw a perfect circle let's make this dark gray too to make the circle seem like a person i'll add a smaller circle for the head of the person i'll make this circle light gray for contrast to make the body a stick figure will do i can use a few lines for this one first a straight line for the body then for the arms let's use diagonal lines the shift key trick won't work for diagonal lines but that's okay i'll just draw these two lines as straight as i can you'll notice that i made those lines gray as well so now i have the bar at the top of the app great the next thing i need to create is the image carousel at the top of the page an image carousel allows me to show rotating features in the app to represent the carousel i'll make a large rectangle just like in my paper wireframe i'll draw an x through the rectangle to show that this will be an image once we get to the hifi stage i'll choose a light gray for the x so it somewhat fades into the background next to show that this is a carousel and the content will change i need to create something that shows there are multiple pages we call this a pagination indicator on our paper wireframe i used an ellipsis so i'll do the same here first i'll draw a very small circle and as a reminder i'm holding down my shift key as i draw there now i'll fill the circle in a black color for contrast next i'll make two copies of the small circle i'll put the three circles in a line and place them in the middle of the rectangle at the bottom now i'll line them up using the built-in guides together these three dots show that the image and content will rotate on the carousel perfect next let's write some copy as a reminder the only copy you should include in a wireframe are words that help people understand the function of a button or section to do that i need to create a text box i'll click the text icon then i'll draw a box where i want the text to appear blinking cursor indicates where i can type i'm going to write latest tips to train your dog this kind of title is important to explain what the rectangle represents although wireframes don't have a lot of text it's a good idea to use some copy here and there because real text helps ground you in the design if i just use placeholder text like lorem ipsum here the purpose of this carousel wouldn't be clear now we need to adjust the size of the text using the design menu i'll make this 24 point font finally let's enter the text in the carousel so it's visually appealing let's use the guides to center the text great now that's done i'll add the schedule button next since schedule is the call to action or the button i most want users to click i'll make the button big and obvious i'll draw a big rectangle and write schedule in the middle i'll do this a bit faster now that you're getting the hang of the process now i have more than half the wireframe completed the last section i want to create is the list of dog walkers that will automatically populate at the bottom of the screen based on the user's location so first i'll add another text box i want another simple title here to explain the function of this section of the wireframe i'll use doc walkers near you and i'll adjust the font size to 24 again so it's consistent with the title above next i need to create the profiles for each dog walker the profiles need to be divided into sections so i'll create some dividers to create dividers i'm going to draw a straight line that fills most of the length of the screen you'll see this line is drawn in black which fits the style that we've been using now i'll make a copy of this line and move it a little ways underneath the first line to allow space for the dog walker's profiles great i'm going to select both of these lines and make two more copies now i'll paste them in equal distance from the original two lines this is a pro tip copying and pasting multiple items at a time makes the wireframing process faster earlier i used figma's guiding lines to line up each element but when i have a bunch of elements like this group of lines here i can use other techniques in the design panel i'll first click on align to the left this makes all of my lines start at the same point on the left next i want to have the same amount of space between each line so i'm going to click on distribute vertical spacing in the design panel ta-da beautiful evenly spaced lines it may seem like a small detail but it can really give your wireframes a cleaner look okay next let's show some profiles i'm going to use a circle to represent a profile photo just like we did for the user account then i'll add lines to show that there's some text here holding down my shift key again i'll draw one line i'll make it a bit wider by going into the design panel and changing the stroke i'll make the stroke five which is a thicker line the stroke was previously one which is a thinner line wide lines typically indicate text in wireframes narrower lines are meant to show divisions another small detail that conveys a lot of information next i'll copy this wide line and paste it underneath the first one i'm going to make this one longer than the first one just a minor thing like different line lengths can convey a lot of information the top line is shorter since this will be the dog walker's name then the line underneath is longer because it'll have additional information about these dog walkers these kinds of details will feel more automatic to you the more wireframes you build now we want to fill in the boxes we created with the dividing lines with more profiles of dog walkers first i'll make a copy of this group of design elements i'll do that by selecting the avatar with the lines then using command c then command v or control c then ctrl v on the keyboard this will make a copy of the group of elements right on top of the existing group then i'll drag the set of elements i just copied and pasted down lower in the frame i can use the arrow keys so that the new elements move i'm going to follow the guiding lines to make sure they line up correctly all right the wireframe for the dog walking apps homepage is done i think it's looking great coming up you're going to be transferring your own paper sketches into digital wireframes you should be really well prepared at this point as you practice using figma or any other digital tool you'll get a lot faster and digital wireframing will be almost as quick as sketching on paper of course any time you get stuck come back to this video or look up the tutorials figma has on their website there are plenty of resources to help you as you get more comfortable with the tool good luck [Music] figma is a vector design tool that runs in the browser use figma to brainstorm ideas iterate on designs create prototypes and get feedback at any stage of the creative process in this beginner's course we're going to take you through the key stages of designing an app in figma from the initial wireframes to an interactive prototype we'll cover the basics and introduce more powerful features like auto layout components and prototyping there's something for everyone whether you're new to design or new to figma we won't cover all these features in depth but we'll provide you with resources to continue your figma education sign up for a free figma account at figma.com with the figma account you can create teams shared workspaces where you can collaborate on files and organize them in projects choose from a free starter team or a paid professional team if you are a student or educator you can get access to all of figma's professional features for free visit figma.com education slash apply to verify your education account [Music] once you've created your team you can invite members to collaborate this will give them access to all the projects and files in your team you can choose what level of access each team member has learn more about creating teams and inviting members by searching teams in the figma help center [Music] we're pretty sure we've got the next million dollar idea a social media app for pets we want some feedback on the general layout before we start exploring specific elements of our design wireframes are simplified designs that are devoid of any style like color type or imagery they allow us to map out user flows and explore different ways we structure our app without having to design any elements or add any content we start our journey in the figma editor the canvas is the backdrop for all of your designs it's where you'll add all the frames shape text and images there are no bounds to your creativity but you should know that the canvas extends approximately 65 000 points in each direction with the great expanse that is the canvas we need something to put our designs in [Music] enter frames frames are the containers we place our shape text and image layers in you can think of each frame in the canvas as a single screen of your design the toolbar contains the tools we need for creating layers select the frame tool in the toolbar frame presets in the sidebar on the right let us create frames with specific dimensions we know that we're making a mobile app so we'll select google pixel 2 xl from the presets two exciting things just happened figma added a frame to our canvas and the sidebar on the left is no longer empty everything that we add to the canvas will also be added to the layers panel let's right-click on this frame and name it to home to explore more of the canvas we can use two fingers on a track pad or the scroll on the mouse wheel to pan around we can also press and hold the spacebar and click and drag to pan let's zoom out so we can see the entire frame if you're using the trackpad you can also use the pinch gestures to zoom in and out you can also use shortcuts like command plus and command minus to zoom in or out for granular control adjust the zoom level in your view settings up here now we're ready to add some layers to our frame as this is a wireframe we're going to keep it basic and use shapes like rectangles and ellipses to represent more complex aspects of our designs we'll select the rectangle tool to create an image for a post on our app's home page just like frames every layer in the canvas has dimensions we can adjust a layer's position and dimensions at the top of the right side bar we want our rectangle to take up most of the horizontal space in our frame so let's make the width of our rectangle 380 and a height of 300 [Music] if we look in the layers panel again we can see that our rectangle is within our home frame some layers like frames can contain other layers if we move our rectangle outside of the frame the layers panel updates too we're going to place our rectangle back inside of our frame figma will help us snap the position of the rectangle to align it to the center of the frame cool now we're going to create a shape that represents a user's profile picture or avatar select the ellipse tool in the menu and click to start drawing the ellipse if you hold down shift as we drag we can create a perfect circle we'll release to create the avatar with dimensions of around 30 by 30. holding shift can strain the proportions of our ellipse if we update one value in the right side bar the other will update too we can click into the width field and use the arrow keys to nudge the ellipse's dimensions to 30. some fields in figma accept equations we can use equations to resize layers by adding subtracting multiplying or dividing the existing value let's add plus 10 to the field to set the dimensions of our circle to 40. basic shapes support both fill and stroke properties we can see these in the right side bar when we select both of our layers by default our layers have a fill of gray but you can choose another color enter a hex code in the field or click the swatch to open the color picker we can select colors from the palette or apply other fills like gradients images and even animated gifs we can also remove the fill entirely by clicking the minus button we want our wireframes to appear like outlines instead of solid shapes we can do this by adding a stroke strokes are outlines or borders around layers we've learned to align layers to their frames but we can also align objects to each other let's use the alignment tools to align the layers to the left as our avatar layer is smaller figma will align it to the larger image layer now we need a username to go with our avatar select the text tool click a spot on the canvas next to our avatar and type in name we'll cover adjusting text properties later in the series we want our text layer to align to the center of our avatar drag over multiple layers to select them all at once and click align vertical center if we want to make small adjustments to a layer's position we can use our arrow keys to nudge objects on the canvas looks good to me users will want to engage with each other by commenting liking and saving posts let's press r to select the rectangle tool and create some icons for these actions we'll use shift again to constrain the proportions and create a perfect square let's aim for dimensions of 32 by 32 instead of drawing three separate squares we can copy the original layer there are a few ways to copy layers hold down alt or option and click and drag on our layers to duplicate it or press command d figma will maintain the same distance between objects if we want to change the uniform spacing between them we can select our layers and update the horizontal spacing in the right side bar we'll need some text below our image let's add that all these layers make up a single post we want to be sure these objects stay together there are two ways we can group layers we can use the keyboard shortcut command g to create a group out of these layers groups allow us to move a collection of layers around without having to select each individual layer we can use groups or frames to organize our layers panel while frames and groups look similarly in the layers panel they are fundamentally different groups are the sum of their parts and have no properties of their own we can use groups to organize our layers or apply properties to layers in bulk frames on the other hand can have their own dimensions and properties some of which can affect the layers within them we'll learn more about frames and their properties later in this series from the right side bar we can convert our group into a frame then we'll copy this frame using the keyboard shortcut to create a second post for our feed we'll move the other post below the other post in the frame the feed is starting to take shape but we're missing some crucial elements to make it look like an app we need a status bar and a navigation menu to move between pages in our app we could make these elements using shapes or we could rely on components and libraries to speed up the process components are the building blocks of our designs they can be basic ui elements like buttons or icons or more elaborate compositions like toolbars and menus libraries are collections of components and styles you can use libraries in figma to create share and use components across your files you might have heard of a design system design systems combine component libraries with standards and guidelines for implementing them in code they're a single source of truth for designers and developers and help to create consistency at scale let's look for a component library in the figma community the figma community is a space where creators can share resources in the form of design files and plugins we're going to use this wireframe ui kit so we'll duplicate the file and add it to our drafts we could copy components from this file and paste them into our wireframes we're going to publish these components to a library instead to make them available to our team we'll open the file in the editor and click the arrow next to the file name and select move to project as components can only be published in a team we'll move this to a project in our team now we can go to the same menu and select publish components and styles we can enter a description of our library and press publish to share it to our team back in our original file we can now access that library in the assets panel of the left side bar click the book icon to open the library's modal toggle the switch to enable the wireframe in our file let's resize the left sidebar hover over the edge until the cursor appears then click and drag to resize okay we need components to represent the status bar at the top of the screen and a floating action button or fab at the bottom this generic status bar is perfect to add this component to our file we can click on the component in the assets panel and drag it onto the canvas we'll position the status bar near the top of the frame and release to place we'll align to the top and left let's repeat this process for the fab and place it in the bottom and the right of the frame now we have copies of these components known as instances instances are connected to the main component they originated from if you make a change to the main component figma will also apply those changes to any instances this saves you from having to manually update every instance when you want to change properties of your component [Music] our eventual application will need to adapt to different screen sizes if we want to resize our frame now our components don't change [Music] we can make sure they respond to different frame sizes using constraints at the moment our constraints are set to the top and left by default we want the status bar to take up the full width of the frame so we'll keep the vertical constraints at top and set our horizontal constraints to left and right we'll set the constraints for the fab at the bottom and right now when we resize our frame the components will respond according to their constraints [Music] our app is starting to come together let's create a frame for our menu select the frame in the toolbar or press the f key we'll add another google pixel 2 xl preset to the canvas let's add some text layers for each page in our app press t to select the text tool and click to create a new text layer we'll type in menu item for now we want all our text layers to be the same width so we'll set the width to 200. we'll also increase the font size to 20. let's duplicate this layer to create four more menu items one for each page in our app hold down alt option then click and drag to duplicate then use the duplicate shortcut let's copy the status bar and fab from our home page to complete our menu page we'll click to select the status bar hold down shift then click to select the fab we'll then use the shortcut command c to copy them to our clipboard select our menu frame and press command v to paste figma paste them in the same position as this frame nice [Music] i think there are some other ways we could lay out this menu page so let's explore some different approaches okay we have a few designs here but i'm not quite sure which approach to take we could set up a design critique and schedule some time on the calendar but i wonder if anyone on the team is around to help me choose we'll click the share button in the toolbar as we've already invited everyone on our team we don't have to invite them to every file we'll click copy link and drop the link in our team channel our team has some existing sticky note components which we love to use for feedback i'll enable that library in this file while i'm waiting for our team to arrive our team members avatars are showing up in the toolbar to jump to their location on the canvas we can click on their avatar to enter observation mode [Music] it sounds like our team loved the simplicity of our first design but thought that a back button would be better than our fab someone suggested the menu could be underneath the rest of our content i like that idea another person pointed out that the center text makes it hard for users to scan quickly that's a great point it looks like fellow design intern daniel is creating a new version of the menu which incorporates some elements of each of our designs this looks awesome and everyone's on the same page i'm glad we got some feedback on our wireframes before we invested in some higher fidelity designs now we know which direction to go in we'll see you in our next video where we explore color typography and imagery [Music] my name is erica and i'm a senior visual designer over the years in my career i've used a number of different tools i started using all adobe products so like illustrator and photoshop and as uh times gone by i've kind of learned to not get super comfortable in one tool or another and over the last few years i've used sketch and i've become super comfortable using sketch until about last year when figma was kind of introduced and became a little bit more mainstream so now me and my team mostly use figma if a job is telling you you need to know figma for example and you've only used sketch then i wouldn't worry about it because they're very similar and these tools kind of change over time and you'll be able to pick it up in no time oftentimes what i'll do when there's a new software i'll just dive in and see what's different what's not different and kind of go from there i talk to people around me who have used the tool before and see how they like it and if they have any tips most of these tools have really really good help centers on their websites so i'll go through some of the tutorials there read through all of their help center articles if there are specific things that i have a hard time with when you're starting to learn a new design software sometimes the best way to do it is just to dive right in what i like to do is just open it up make a circle change the color of the circle add a stroke then use the text tool and you can change type out a sentence you can change the text by updating the font or changing the color and sometimes that's just the best way to learn a new tool as i've been learning more using figma i've definitely run into some hurdles here and there and it's been super frustrating trying to kind of wrap my head around some of those problems and why it's hard for me after i've spent years using sketch and other programs and what i'll typically do is kind of just take a step back maybe kind of put that software away for the day and then the next day kind of just dive right into those help center articles on um either figma or adobe's websites they're super helpful and you can just search for the term that you're looking for and a bunch of articles will show up another thing i'll do is do a general google search and see if people are having the same problem as me which is often the case and there are lots of youtube videos and other articles on the web that you can check out as well it's the best feeling once you've finally mastered a tool and can use it and just weave it into your everyday workflow i found that just using sigma every day has really helped and now i feel like i'm finally mastering it design tools are there to help you they're really just a means to an end and shouldn't get in your way when you're working on your designs and concepts you should definitely get used to using adobe xd or figma but i wouldn't get too attached because there's definitely going to be new tools coming your way have you ever looked at an app and found that your eyes are drawn to a certain spot of the screen that's because design principles are actually happening behind the scenes we know our eyes are being drawn to something but we may not be able to easily articulate how that's being done exactly you know how to create basic wireframes of an app so it's time to learn a few principles to make your designs even more usable and intuitive in this video we'll explore the concept of the gestalt principles there are a few gestalt principles that you can commonly apply to your wireframes like similarity proximity and common region keep in mind there are more gestalt principles beyond these three to get things started let's define gestalt principles gestalt principles describe how humans group similar elements recognize patterns and simplify complex images when we perceive objects you can use the principles to organize content on apps and websites so it's visually pleasing and easier to understand basically humans naturally notice the whole of something before noticing the parts gestalt principles got their name from the word gestalt which is a german word that means shape or form have you ever looked at the clouds and tried to find shapes within them you might have spotted a cloud that loosely resembled an animal or a familiar object that's an example of gestalt principles at work we unconsciously connect different elements in a scene to quickly understand them in short our brains are designed to make meaning at a glance let's examine one of the gestalt principles similarity this principle means that elements that look similar are perceived to have the same function elements might look similar based on their shape size or color one example of this is links within a web page they're almost always the same color blue this leads us to think that their function is similar too let's look at an example of how similarity comes into play in wireframes earlier we worked on a wireframe of google photos if you look closely you'll notice that the bottom half of the app contains six squares that are the same size because they all have the same shape and size you perceive these elements as being similar or peers in a group in this case each square represents a photo and the function of each square is the same if you tap on the square it will enlarge to fill the full screen here's the takeaway when designing a wireframe consider making elements that have a similar function look similar to give your app a more intuitive user experience now let's examine another gestalt principle proximity this principle states that elements that are close together appear to be more related than things that are spaced farther apart how does this play out in our google photos wireframe at the top of the wire frame there are three large rectangles placed close together in a row because the rectangles are close together our brains think they're related it turns out our brain is correct these three rectangles are photo albums while the six squares below which are placed more distantly from those rectangles are just individual photos here's the takeaway when designing your wireframe put elements that are related close together instead of far apart great now you're getting the hang of this let's examine one more principle common region this principle states that elements located within the same area are perceived to be grouped together let's think about this principle in our gmail wireframe the divider line creates a border around each email so the subject line email recipients and email content appear to be grouped together here's the takeaway you can use borders in your wireframes to group elements together great now you know some of the most commonly used gestalt principles similarity proximity and common region keep these principles in mind as you create your wireframes and your products will be easier to use congratulations you've done a great job exploring the wide world of wireframes both on paper and digitally here's a quick recap of all the new things we just covered first we discussed how to organize the information in your wireframe using information architecture next we drew lots of wireframes on paper for the home page of a new product and we walk through the steps to refine your paper wireframe and focus on our favorite ideas then we transitioned from paper wireframes to digital wireframes in figma and finally we learned about a few gestalt principles similarity proximity and common region that you can apply to your designs coming up we'll transition from wireframes to low fidelity prototypes and we'll continue to build our project in figma see you there hi again earlier we explored how to design products that solve users problems and give them meaningful experiences we covered the first three stages of the design process empathize define and ideate now that you've used empathy to identify and define a key user problem and ideated a solution what's next the prototype stage we'll define prototypes in more detail later but for now you can think of a prototype as an interactive representation of your design solution in this module we'll transition from wireframes to low fidelity prototypes first we'll create paper prototypes next we'll learn from figma about how to use their tool to create digital prototypes then i'll demonstrate how to create a low fidelity digital prototype in figma finally we'll explore ways to recognize potential bias in your designs and learn how to avoid deceptive patterns let's get started by now you may have noticed that ux design is a cycle of continuous improvement we come up with an idea conduct some research and then update the idea we're always trying to design the best user experience possible and that takes a lot of feedback and iteration so let's keep improving the designs we've been working on earlier you learned how paper wireframes become digital wireframes now we're going to check out how a digital wireframe becomes a low fidelity prototype let's start with the basics what is a prototype a prototype is an early model of a product that demonstrates its functionality without actually building the entire product a prototype shows stakeholders and your potential users what your design idea can do users can interact with the prototype and provide feedback before your team invests a significant amount of time and money so how does a wireframe become a low fidelity prototype to understand the transition you first need to know what a low fidelity prototype is we compared low fidelity and high fidelity design in an earlier video as a reminder in ux fidelity means how closely a design matches the look and feel of the final product so a low fidelity prototype is a simple interactive model that provides a basic idea of what the product would look like the goal is to make your designs testable so that you can collect and analyze feedback early on as we transition from a wireframe to a low fidelity prototype the biggest difference is the interactivity or the ability to click from one screen to another a low fidelity prototype can be on paper or digital for a paper low fidelity prototype interactivity might be a human acting as a computer and manually changing the design in real time for a digital low fidelity prototype interactivity might be connected wireframes where you can click on a certain part of the wireframe like a submit button and be taken to the next wireframe later we'll make a high fidelity prototype but to get there we need to build a low fidelity prototype first alright now you know the differences between a wireframe and a low fidelity prototype up next we'll see this transition in action and build a paper prototype hi there the time has come to transition from wireframes to prototypes we'll start with building paper prototypes so let's get cooking you might be wondering why would i want to build a paper prototype first paper prototypes are inexpensive all you need is a pen and paper second paper prototypes allow for rapid iteration because you're only using pen and paper you can whip up paper prototypes for lots of different ideas quickly third building paper prototypes slow commitment digital prototypes take a while to make so it can be painful if you need to totally scrap them the paper prototypes can be made quickly so it doesn't burn so badly if they need to be trashed fourth paper prototypes encourage honest feedback paper prototypes are less polished which makes your teammates and users feel more comfortable criticizing them finally building paper prototypes is a collaborative activity there can never be too many cooks in the kitchen for example different members of your team could each quickly sketch their own prototype for a specific page of an app there are of course some drawbacks to paper prototypes it can be hard to interpret a paper prototype it requires a lot of imagination for users who are testing a paper prototype to picture what the real product will actually look like it's like a list of recipes without any images in addition paper prototypes can only be tested in person you need to bring the paper prototype to the testing location and a person has to act as a computer to manually change the design in real time think of it this way you can't taste a cake over a computer lastly paper prototypes are difficult to create with a remote team imagine trying to make a cake when the baker and the decorator are in different countries because paper prototyping is so hands-on collaboration is best for this activity when you're together in person with all this in mind when is building paper prototypes useful well paper prototypes are great to make during brainstorming sessions you can quickly draw multiple ideas and compare those ideas you might also want to build a paper prototype to test your early product idea with users one more thing it's important to point out that designers can take a number of different paths when creating wireframes and prototypes for example once you've completed your paper wireframe you might discover that going straight to a lo-fi digital prototype works best for you or sometimes you might not use paper at all and build everything digitally like if your app or website is already well established it all depends on what type of project you're working on and what works best for you and your team alright it's time to start cooking let's make our first paper prototype for this example we'll build a paper prototype for a dog walking app remember the wireframe for the home page that i made earlier while you were making your own wireframes i also made wireframes for the rest of the dog walking app the user profile page the scheduling page and the checkout let's test one of these wireframes out since we sketch a schedule button on the home page let's find out what happens when we give it a tap absolutely nothing so how do we take this wireframe and turn it into an interactive low fidelity prototype well it's time to get crafty to make our prototype interactive i'll grab a pair of scissors and cut out every screen like this same time i'll borrow a trick from popular cooking shows and voila we have our cutouts but wait there's more we also need the outline of a mobile phone that the screens will fit inside of let me see if i have one in here oh yes here we go now that we have our screens and mobile phone outlined how do we make them interactive first think about the order that a user will experience each of the screens you've drawn that's the order we should lay them out in let's start with the home page since that's where our users will enter the app i'll place the screen with a home page here next i'll place the schedule screen to the right of the home page where users can select a date and time for the dog walker to visit to the right of the schedule screen i'll place a screen with the list of available dock walkers on this date and time to the right of this screen i'll place the dog walker profile page with a book button to the right of the profile page i'll place the booking confirmation page we might also want to consider what happens when a user visits the app to edit their profile they wouldn't go through the flow we just discussed so instead we'll place that screen to the left of the home page to make our prototype interactive let's imagine a user wants to schedule a dog walker on the 11th of the month at 5 pm let's use the mobile phone outline to simulate how the user moves through the app this will require some imagination the user opens the app and starts on the home page they tap the schedule button and are brought to the schedule screen where they can select a date and time for the dog walker to come to their home next the user selects a date and a time and presses the book button they're brought to a screen with a list of available dog walkers on the date and time they selected to select a dog walker the user taps on the dog walker's profile this takes the user to the dog walker profile screen here we click book and we'll go to the checkout screen then the user clicks on the confirm button whoops it looks like i forgot to make a screen for the confirmation page this happens all the time and is the reason why we make an interactive prototype as i'm working with paper it's super easy to create the missing screen let me grab my supplies give me a couple seconds to draw this i'll start with a simple rectangle for the phone outline and then i'll add a square with an x to represent an image of the selected dog walker and add a few lines below the image to indicate the confirmation text now let me quickly cut this out there we go i can now finish the user's journey through the app and there you have it a paper prototype if you want to make your paper prototype a fancier dish you can add a scrolling element to the mix let me see if i have one in my picnic basket that i can show you aha here we go this paper is another version of the available dog walker screen that i made earlier it's a long list of many dog walkers which is what a user would likely experience in the real app to simulate how a user scrolls we place the mobile phone outline at the top of the screen i'll hold down the mobile phone outline and slowly scroll through the long screen using my finger and there you go you've just learned how to turn a paper wire frame into a low-fi paper prototype awesome job before we come to a close it's time for a little pop quiz why do you think we decided to design for mobile as a first step because it's the smallest space our designs might appear in if our design works well on the limited screen of a mobile device there's a good chance they'll fit on a larger interface like a computer monitor too one other thing to keep in mind when deciding whether to design for mobile or desktop is what's best for the product and business either way you can create paper prototypes like we did here coming up we'll check out how the wireframe to prototype transition works on a digital level hi there now that you have a paper prototype it's time to transition it into a digital one to get a feel for how the final product will operate revisiting the ux design application figma we will make our paper prototype come to life this will be similar to when we explored converting a paper wireframe into a digital wireframe using the same application remember figma is considered an all-in-one tool it provides both design and prototype capabilities you'll notice that your prototypes will look different than the ones in the upcoming videos that's okay you are currently working on simple low-fi prototypes and the ones you'll see in the next video are more complex high-fidelity prototypes as we mentioned before we'll explore hi-fi prototypes later on just keep in mind that the tools we'll explore can be used for both low fidelity and high fidelity designs many of the skills will learn to build a digital prototype are transferable to other ux design applications like adobe xd or sketch once we finish exploring figma's prototype tools we'll discover what makes lo-fi prototypes different from hi-fi prototypes and how they are similar i'll see you again soon hello again now that you have some experience with digital wireframing in figma and low-fi paper prototyping you're ready to start experimenting with some lo-fi digital prototyping in this video we'll review the differences between wireframing and prototyping then i'll demonstrate how to create a digital prototype in figma based on wireframes remember wireframes are used to establish an overall structure of the design in both paper and digital wireframes you draw each screen a user might experience on a device like a home page or user profile page with prototypes however the focus is on understanding how users interact with the design in other words the user needs to know what happens when they press the button or tap a menu so let's pull up the wireframes for the dog walking app that i created earlier last time i demonstrated something in figma i created a wireframe for the home page while you were working on your own project i went ahead and created the rest of the digital wireframes for the screens i drew on paper now we have the home page from earlier the schedule page with a date and time the list of available dog walkers the dog walker profile page and the booking confirmation page you probably notice that the dog walker's search results page is a lot longer than the others this is intentional in a wireframe the long length signals that the screen will scroll since we'll be using these wireframes for our prototypes having the longer screen will allow users to scroll down the screen figma has the capability for scrolling long screens built in and we'll get to this in more detail later so to make these wireframes into a low fidelity prototype we need to show how the user navigates the app from one screen to the next in a paper prototype i move the phone outline to show how the user would navigate from screen to screen you might also draw lines to show this movement or cut out the screens and stack them but in a digital low fidelity prototype your designs are interactive and mimic the real life navigation between screens for example on the home page what happens when a user taps the schedule button or clicks the image carousel each scenario needs to be accounted for in a digital low fidelity prototype users should be able to click a button and be taken to the correct screen so let's do that now the first thing we need to do is label these wireframes it'll make it a lot easier for us to refer to each screen by number and name plus it clarifies the page's intentions i've already labeled these wireframes but here's how you would do it so i'll click on the frame and go to the layers panel and change the name number one is the home page and i'll do the same with the rest of the screens number two is schedule page number three is the list of available dog walkers then we have number four dog walker profile page and finally number five booking confirmation page okay great now we're ready to prototype the first thing we need to do is change from the design tab to the prototype tab this changes the options for what we can do with each of our wireframe screens now when i hover over or select the element in the wireframes notice how a little circle with a plus sign appears on the right side of the element this is a connection node and it indicates where a prototype connection can begin so for example what do i want to happen when the schedule button is tapped i want users to go from the home page to the scheduling page right so i'll click on the connection node and drag the arrow and a connection arrow appears we can drag this arrow from the schedule button on the home page to the scheduling wireframe which is our desired destination here when we release the click there's a connection between the two elements now on the scheduling page users can pretend to enter the date and time they need a dog walker when they're done they'll click the submit button so i'll connect submit to the next screen i'll click on the node and drag the connection arrow from the submit button to the next wireframe which is the list of available dog walkers okay let's assume that the user is interested in this first dog walker so they click learn more this button takes them to the dog walker's profile page right so i'll connect those too perfect now the user is right up on the dog walker and is ready to book when they click book they're taken to this final confirmation page i'll add this connection arrow too yay i've created a usable prototype let's see it in action to do this let's go into presentation view by clicking the play button in the upper right corner of the toolbar here's my prototype now i'll follow all the steps i just outlined to make sure the prototype works first i'll click the schedule button on the home page then i'll schedule a date and time and click submit here's a list of available dog walkers notice how it scrolls to show users all the dog walkers pretty cool right okay next in the user journey i'll choose to learn more about a dog walker and i'm taken to the doc walker profile page finally i'll book the service here i am on the confirmation page it seems like i created a usable transaction it may seem like we're done with the prototype but there's still more to test i'll play the prototype again and choose a different dog walker from the list of results what happens when i click learn more under dog walker number three nothing so i need to fix that i'm going to connect all of these learn more buttons to our profile page for jane doe since that's the only profile we'll use for this low fidelity prototype this way no matter which learn more button a user selects they're taken to this example profile page you could make several profiles for your prototype if you'd like but i'm keeping it simpler here to save time okay what are we missing on the profile page i've already connected the book button to the confirmation page these other squares are placeholders for images so i won't worry about those yet look at the bar at the top of the screen see this left facing arrow what should happen with this when users click it they should go back to the previous page right so i'll connect the back button with the previous screen the list of available doc walkers perfect now i'll do the same with the rest of the back buttons they should each be connected to the previous screen one more thing let's revisit the schedule page here on the screen there's another place a user might click the cancel button the cancel button should take the user back to the home page so i'll make that connection now that we're on the home page there are more places the user might click what happens when a user clicks on the profile icon in the bar at the top of the app well nothing yet but it should take users to a user profile page and we're in luck because it just so happens that i've already created that wireframe let's check it out when i want to view a different part of the file i just hold down the space bar and click on the page to pan around great here's the wireframe i've drawn up for this profile page eventually on this page the user can edit their personal details i'll connect the profile icon to the profile page now i'll connect this page to the home page using the back arrow up at the top okay so i'm back on the home page next what should happen when the user clicks this headline in the image carousel it should take them to a list of dog training tips but right now nothing happens because we haven't created this screen or connected it this is an entirely different journey for the user instead of booking a doc walker they're reading content so i need to account for that by providing a screen for the articles let me show you how quickly i can create a new screen in figma [Music] [Music] to there we go i have a totally new page to count for this user journey remember now i need to add a connection arrow to the carousel on the home page great now when the user or usability study participant interacts with the home page they have more than one option for where to go i'll play our prototype one more time and see how i've improved it here i am on the homepage again i've already tested the schedule button so i'll check our new connections i'll click the headline here i'm on the article page nice now go back and i'll check the profile icon it works next i'll go through our main transaction again and schedule a dog walker let's say i need to cancel great that's working one more time okay on this dog walker search results page remember how i tried to click the learn more button on a profile other than the first one and that linkedin work i'll give that another try this time i'll scroll to the bottom and learn more about this person nice it went to our example of a dog walker's profile okay i'll book a dog walker and complete the user journey i did it so there you have it that's how to build a low-fi prototype in figma but there are lots of moving parts to a prototype we haven't added images or text or color into the equation so there's a lot left to do to upgrade this low fidelity prototype to a high fidelity prototype and ultimately create a usable app coming up you'll learn more about the differences between lo-fi and hi-fi prototyping you'll even have the chance to show what you've learned by building your own prototype keep up the great work in the last video of our figma for beginner series we created a single screen of our app to save time we built out the other screens in our application including a menu profile and interface for searching the app let's create an interactive prototype to put it all together prototypes are a great way for us to visualize how our final app will look they let us define pathways explore interactions and test out ideas before we invest in building the real thing we can create multiple prototypes within a file and keep them organized on different pages let's duplicate the page of our existing designs to get started click on the prototype tab in the right side bar to switch to prototype mode here we create connections between frames so users can navigate the prototype like a real application prototype connections are made up of three parts a hot spot where the connection begins the connection itself which stores the interaction details and the destination [Music] we want to create an interaction from the menu icon to the menu page because the menu icon is nested we need to double-click it to select it once the connection note appears click the connection icon to create an arrow and drag it over to the destination frame release to complete the connection let's create an interaction from the menu back to the home page select the home text layer click add connection icon and then drag the arrow back to the home page currently our connection uses the default instant interaction settings we'll cover the specifics of these interactions a little later on let's see how our prototype looks so far click the present icon to open it in presentation view at the bottom of the page we can see we only have two frames in our prototype instead of all four once you add at least one prototype connection figma will only include frames with connections in presentation view if we click on the menu icon figma switches to the menu frame if we click the home option in the menu it switches back to the home page great now that we have the basic mechanics working we can customize the interaction back in the editor we can view other aspects of the connection in the interaction details menu here we can select a trigger for the transition like a tap click or hover as well as the action and destination we want users to be able to access the menu from a few places in the app so this interaction needs to feel accessible with the default instant animation we lose the context of where we were in the app and how we got there animations guide users through flows and communicate relationships between different parts of our application there's a few ways we could tackle this problem in figma we could create an overlay that makes the menu appear above our other screens or we could use smart animate to reveal the menu when you drag the current screen to the right both approaches make our menu feel easily accessible and establishes a hierarchy that positions the menu on a different level than our other screens this also allows us to explore some of figma's super cool prototyping features but they take us well off the beginner's path to explore more search overlays or smart animate in the figma help center for more information move in animates the menu so that it appears over the top of our existing screen we're being shown some more information but we don't feel like we've moved to a new location this feels like a good fit there are some other animation types you can explore so give them a try the menu icon is on the left side of our screen so our menu should move in from the left click the right arrow from the interaction details panel to set the direction we can also set the duration to control the speed of the transition and use easing to make the animation feel less robotic we won't explore these settings now but you can learn more by searching for easing in the figma help center when we return back to the home frame the animation should be the reverse we'll select move out and choose the left pointing arrow to move the menu back out now we have our first set of interactions we can access the menu from both the search and profile screens so let's create those interactions next the interaction details menu shows our last animation settings let's update these to match the interaction we'll repeat this process for the profile screen we don't need to update the animation as figma has applied the most recent one again we'll need to create the interactions going back from the menu to the profile page updating the animation to match we can only access search from the home screen we'll create a connection from the search icon that opens the search page we'll use the push animation to make it feel like we are moving laterally between these two screens tapping cancel should take us back to the home page we'll create a connection with the push animation that moves in that direction now that we have a working prototype we're ready to get some feedback from our other members of the team we can invite them to the prototype itself we can share our prototype with our team by sending them a link click the share button in the toolbar we'll update the link sharing settings from only people invited to the file to anyone with the link and set to can view perfect now we can click copy link and share this with our team our team avatars will show up in the toolbar as they join we can click on someone's avatar to observe their actions as they move through the prototype observation mode is great when you're running a usability test anyone can add feedback suggestions or questions to prototypes using comments click the comment icon to access the comment tool now we can click on a spot in the prototype to share our thoughts it looks like jenny added some questions around the other pages listed in the menu she's also pointed out that there's no way to interact with posts on the feed ryan made a great observation that we're missing a back icon on the menu page which might make it easier for users to dismiss the menu stella loves this photo of yuna if we switch back to the editor and press c to select the comment tool we can see the comments our team made on the prototype on our frames this allows us to collect feedback in one place incorporate advice and resolve any outstanding comments as jenny mentioned we want a way for our users to interact with our posts let's add some icons to allow users to like comment and bookmark posts let's go to the components page here's some components we created earlier we've placed them in a horizontal auto layout frame and made them into a component we can then place an instance of this component inside of our post component when we switch back to our prototype we can see the changes we made to the main component reflected in our instances and because we built our feed using auto layout our posts have adjusted accordingly we'll finish up by incorporating ryan's feedback we'll drag a back icon from the assets panel into our menu frame we'll then switch to the prototype tab and add an interaction to this icon we'll also update the action to back users can access the menu from any page the back action allows us to automatically return users to the previous page without having to create separate connections we did it we built an interactive prototype of our designs explored animations and incorporated feedback from our design team in our next video we'll prepare our file for sharing assets with our writers and developers we'll explore creating thumbnails navigating the file as a viewer copying code from the inspect panel and exporting assets for production hi again as you might remember from our earlier course on ux research every human is influenced by their personal biases if bias creeps into your ux research you might move forward with a product that doesn't address the user's real pain points ux designers can also be affected by implicit bias so we need to be aware of how our own points of view can alter our designs influence users and affect society in this video you'll learn to recognize bias in design and how to consciously avoid letting it affect your designs one of the most common biases affecting designers is implicit bias as a refresher implicit biases are the collection of attitudes and stereotypes we associate to people without our conscious knowledge these associations can be both positive and negative but regardless of whether they're good and bad associations biases can affect how we interact with others for example we might have an implicit bias that everyone who lives in san francisco is environmentally friendly and buys their groceries at farmers markets or we might have an implicit bias that everyone who lives in new york city walks to work it might seem like there's no harm in believing something positive or even neutral about a person or group of people but the reality is biases prevent us from understanding the complexity of a user's habits and needs without this understanding we can't do our best design work imagine you're designing a map application for new york city because your implicit bias is that people walk as a primary form of transportation the directions in your app assume the user's walking this means your app will give map routes following sidewalks and passing through green spaces but your implicit bias is flawed while many new yorkers walk to work millions of new yorkers use the subway take the bus ride in cabs drive and bike you wouldn't want your app to direct someone in a car through a green space because you assumed they'd be walking and more importantly many people are unable to walk so your implicit bias that all new yorkers walk ignores ability as a constraining factor someone relying on public transportation would need directions to the nearest subway or bus stop and someone in a wheelchair may not be able to access a subway station for example only one in four subway stations in manhattan a borough of new york city or wheelchair accessible in this case our bias about new yorkers prevents us from creating a product that truly serves all our users implicit bias is just one reason why creating and following personas and user journey maps is so important to refresh your memory a persona is a fictional user whose goals and characteristics represent the needs of a larger group of users and the user journey is our path to the product meaning what the user's needs are and how the product can solve those needs when creating personas ux designers need to be as inclusive as possible we shouldn't assume that a certain ethnicity gender age ability or socioeconomic group is or isn't part of our audience users can be complex human beings with many unique qualities and distinct needs user research helps us avoid assumptions about who our users are instead research helps us better understand users and give them what they need for example imagine you're designing an app to help parents find child care to personalize your onboarding process you start out by showing the message welcome moms we're here to help you find the right babysitter for your little one you might have thought that by addressing users directly as moms you are humanizing the experience but there's something wrong with this message it immediately excludes every other type of caregiver like grandparents guardians dads and others implicit bias like this leaves out important users which is bad for business addressing users this way also reinforces the stereotype that moms are in charge of figuring out child care and it presumes that every child has a mother being aware of your implicit biases and combating stereotypes is important work by creating inclusive user experiences designers help build a more equitable society okay now you know how implicit bias can affect your role as a ux designer there are more biases we'll cover in the course readings coming up we'll discuss another ethical issue in ux design called deceptive patterns see you there [Music] hey my name is ayan and i am a visual designer at google so what that really means is that i'm responsible for in some ways making sure that products are beautiful but in a lot of other ways making sure that they're cohesive a visual designer is responsible for picking out the typography making sure that the brand is properly articulated in the user experience and for working really closely with the engineers to ensure that the experience is the same as it is in the mocks as it is on the phone when you're actually using it as a person in your everyday life so how bias impacts my job i would say that this is kind of a day-to-day reality for many women of color and tech to be honest there are a very small amount of us here and so what that actually means in my job a big part of a visual designer's job is to take stakeholders along the journey as we're pitching new brand ideas it's really difficult to make something that isn't very tangible like aesthetics and translate it into something that could really help the product succeed right and so as i'm presenting i'm aware of my identity and i make sure that i really can present my ideas uh well i articulate my stories in a way that everyone can kind of understand what i'm saying and really buy into the concepts that we're pitching what i would like to see in tech is just more women of color in these spaces um i'd really like for less women to have the experience that i did which is to be an only to not be surrounded by folks that look like you can be a bit isolating and i think about integration and being able to bring your truest self to work women of color shouldn't have to be exhausted by code switching what i would say is please come and join us more women of color in tech would really not only benefit folks like myself but also in product when we are building products we think of ourselves within them and so if there aren't any women of color building the latest search algorithm we may not be considered within their use cases it's a lot easier to consider someone an edge case when they're not in the room earlier we learned how implicit bias can affect your role as a ux designer because biases are often unconscious they can sometimes lead designers to unintentionally create experiences that exclude belittle or deceive users but deceptive or misleading design isn't always unintentional or the result of bias designers and the teams they work on can also create experiences that intentionally deceive users to encourage them to buy or use a product deceptive patterns are ux methods that trick users into doing something or buying something they wouldn't otherwise have done or bought these can include a range of visual interactive audio or motion elements added to e-commerce sites ads and other marketing content one important note we've chosen to use the phrase deceptive patterns instead of the industry standard term dark patterns we consider the use of the word dark problematic when referring to something that's bad you can find out more about this concept in the course readings deceptive patterns were first identified by ux specialist harry brignel in 2010 the use of deceptive patterns has only increased since it was first called out in this video you'll learn about some of the common types of deceptive patterns used in design and how to identify them but before we get started let's make one thing clear deceptive patterns are ethically wrong and not a good business practice once users notice that they're being purposely deceived they can lose respect and trust for a company's brand they might even publicly complain and take their business elsewhere the list of deceptive patterns we're about to discuss doesn't include every possible deceptive pattern out there but it's a great starting point for you to understand how common deceptive patterns are the first deceptive pattern we'll cover is known as the roach motel this pattern is designed to make it very easy for a user to get into an unwanted situation and very hard for them to get out of it for example have you ever opted into an app's premium subscription to get a few extra features and then found it nearly impossible to cancel that subscription maybe the app required you to call customer service to cancel but didn't provide any contact info or you had to click through multiple screens just to get to the cancel subscription option that's an example of the roach motel pattern because the user experience design makes it easy for you to sign up but hard for you to get out the next deceptive pattern is called force continuity force continuity is the practice of charging a user for a membership without a warning or reminder for example you sign up for a seven day free trial for a streaming service and then notice that your credit card was charged on day seven but you weren't emailed or notified that your free trial was coming to an end that's forced continuity next is a pattern called sneak into basket have you gone to purchase something online but when you got to the checkout page extra things had been added to your cart maybe you were making a hotel reservation and trip insurance was added or you were purchasing a new phone and an extended warranty was added to your cart with the sneak into basket pattern a user has to remove an item from their cart if they don't want to buy it which is an extra step that could be easily missed another deceptive pattern is hitting costs hitting costs is similar to sneak into basket except there are extra charges in your cart instead of extra products for example a website might advertise free shipping but then charge you for handling or you might be booking movie tickets online but when you reach the final checkout page there are suddenly online booking fees these hitting costs can really frustrate users and can even make them choose to no longer purchase a product another deceptive pattern you should be aware of is confirm shaming which is when users are made to feel guilty when they opt out of something for example many websites have pop-ups that ask for your email address to subscribe to their newsletter or get a discount code instead of including straightforward options like yes sign me up and no thanks with confirm shaming the opt out option might be something like no i like paying full price or no i don't care about the environment enough to subscribe to this newsletter confirm shaming makes users feel bad and guilt them into taking an action next let's discuss the deceptive pattern of urgency have you ever opened an email promoting a sale that's only happening for a few hours or visited a website that offers a limited time deal of the day these are examples of the deceptive pattern of urgency they convince you that you need to purchase an item before you run out of time or miss today's amazing price the final deceptive pattern we'll cover is scarcity in this pattern a website makes you very aware of the limited number of items in stock have you ever been browsing items in an online store and noticed a line that reads 26 people have this lamp in their cart or hurry only one more box of cereal like this left if you're made to feel like an item will be gone if you don't purchase it immediately that's the scarcity pattern at work the suggested scarcity of the product is intended to manipulate you and the numbers are often fake okay that's all the deceptive patterns will cover in this video you can learn more about these and other deceptive patterns in the course reading now that you can identify some common deceptive patterns let's consider why they're used you might have guessed the primary reason money using deceptive patterns to trick people into using a product subscribing to a service or sharing personal information is an easy way for companies to earn more cash but these practices are unethical you've learned a lot so far about empathizing with users while empathizing with users is about understanding their product needs and solving their problems deceptive patterns do the opposite of that they create a bad user experience as a ux designer you might feel pressured to use these unethical practices but always remember good ux benefits both the user and the business not one or the other coming up we'll discuss the effects of deceptive patterns we'll also cover how you as a ux designer can avoid using deceptive patterns in your work see you there in this video we'll address the effects of deceptive patterns and how you as a ux designer can avoid using them in your work everyone's affected by deceptive patterns consumers today are more aware than ever of the tricks that businesses and advertisers use to get them to buy products but consumers are still impacted by the psychological effects of deceptive patterns deceptive patterns are harder to ignore than traditional forms of advertising because they're designed to be difficult to identify imagine you're in a brick and mortar clothing store shopping for jeans a salesperson comes up to you and asks if you need help and you politely send them away 10 seconds later the salesperson comes back and asks again telling you that there are only four more pairs of jeans left in your size 10 seconds after that they bring you a stack of t-shirts that they think you might want and 10 seconds after that they ask if you want to sign up for their store credit card all of this together would likely annoy or anger you you probably leave the store without buying anything but imagine the same scenario happening in an online store this might have even happened to you you open a clothing store's website and navigate to the genes department you find a pair you like and notice a message that there are only four left in stock you don't want to miss out so you quickly add a pair to your cart then a bar on the side of the screen suggests a shirt to go along with those jeans you imagine that if other people bought this combination of shirt and jeans it might look good on you too when you click on the shirt a pop-up ad offers a 10 discount if you provide your email address what a deal at the checkout page where you're buying the jeans and t-shirt and using the 10 off coupon you realize something else has appeared in your cart it's laundry detergent that's specially formulated for the jeans you're buying great maybe your jeans won't fade now so what happened in each of these situations in the brick and mortar store you may send the salesperson away and eventually leave without buying anything in the online store you're convinced to buy more than the genes you initially came for and your email address has also been captured for that site's future marketing campaigns deceptive patterns are designed to intentionally trick you and with so many deceptive patterns at play it's easy to miss one okay let's consider one more scenario think about how you react when there's a bright red notification flag on your favorite social media app chances are you feel a sense of urgency the red flag makes the notification feel like something you need to deal with right away when those notifications pop up on your computer or phone throughout the day you get a dose of dopamine which is a natural chemical in the brain that's released when something pleasurable happens that makes us feel good or intrigued for example sometimes a jingle or a short sound accompanies a notification or the red flag might wave or use motion to grab your attention the addition of sound and motion further enhances that dopamine effect but how does it feel on the flip side when you don't get any notifications well this is another physical effect of deceptive patterns when you don't get any notifications you can feel anxious you might even be able to imagine a time when you refreshed your phone or computer waiting for a new notification keep in mind this takeaway there are many techniques to encourage users to sign up for or purchase your product without tricking them as ux designers we need to be aware of methods for attracting users and ensuring that users have a good experience with our product without deceiving them if you detect deceptive patterns being used in the products you're working on you should raise the issue with your colleagues quickly beating deceptive patterns is a team effort the first step to fighting them is recognizing them and you're already gaining the tools you need to do just that congratulations on completing this course wow you've come such a long way and i'm so proud of the progress you've made let's recap all that you've learned in this course you started your journey through this course using research to inform the ideation process and came up with goal statements next you built two types of storyboards and explained how storyboards are used to create wireframes then you learned how to draw basic elements like shapes and lines hopefully this is when you really started feeling like a ux designer you also briefly explored information architecture before getting creative and creating paper wireframes after paper wireframes you left your pen and paper behind to build digital wireframes on a tool called figma then you made the transition from wireframes to prototypes you started by constructing low fidelity paper prototypes before long you developed low fidelity digital prototypes on figma finally you learned about some common deceptive patterns and how to avoid them in your designs wow great work i've really enjoyed guiding you through this course and helping you in your journey to become a ux designer this is where we part ways but i can't wait to learn about everything you accomplish in the future you're going to do big things and i'll be cheering for you now on to the next course where you'll be led by a new instructor jason a senior ux researcher on the equity engineering team who's ready to help you learn more about the research process you'll get to build a research plan conduct a usability study analyze and synthesize the study results present your research insights and iterate on your low fidelity prototypes good luck and have fun