let's take a moment to remember where we are in the design process you've just completed the high fidelity prototype for your dedicated mobile app focused on social good but that was just the first half of your portfolio project you're not finished yet coming up you'll be utilizing what you've created for your dedicated mobile app to design a corresponding responsive website at this point in the design process it's important to review the designs you've built for your app and think about how they can inform the design of the responsive website you're about to create many designers find it easier to tackle one project like a dedicated mobile app and take it through to the hi-fi prototype stage before beginning a design for another experience like a responsive website creating one experience at a time allows designers to learn all they can about users needs and pain points before beginning a new design on a separate device it also gives designers the opportunity to set up a design system based on a tested product that can be reused in the new designs in the end design for one experience first can save time and money and make the overall process easier to manage when you designed your dedicated mobile app you considered many different user needs and pain points so you could better understand the perspectives of the community members you're designing for you also collected feedback through a usability study when you design a responsive website you'll consider some of the same user needs and build on some of your earlier learnings but designing this new experience will also require you to think about different user needs or pain points now that they're using your product on a different device and in a different context the use case is important here a use case is how users would experience your product design when trying to complete a task you'll need to consider the use case for the responsive website you're designing compared to the dedicated mobile app you just completed let's use a real example to help bring this concept to life the american red cross is a non-profit organization committed to alleviating human suffering in the face of emergencies by mobilizing the power of volunteers and the generosity of donors their website educates users about their mission explains how to get involved and drives donations in other words the use case for the red cross website is to educate and involve users the red cross also has a mobile app the use case for the app is very different the use case focuses on driving blood donations on the dedicated mobile app users can find a location to give blood schedule an appointment manage an existing appointment and review the impact of their donations over time with the website and the dedicated mobile app side by side you'll notice that the look and feel of the brand across platforms is similar for example you draw attention to the buttons using the color red that's one of the ways you know that you're interacting with the red cross product for your project in this course not everything that your dedicated mobile app needed will be important for the design of your website focus on defining your use case for the website as a distinct and different experience once you know your use case for the responsive website you'll also have to choose which screen size to design for first to do this you'll need to determine who the product is being designed for for example if the target user for your website is millennials or the next billion users you may want to design your website for a mobile phone screen first or if your target users are knowledge workers who use the website in a business context designing for a laptop or desktop first may be appropriate good research can inform this important choice in the real world to determine which screen size of a responsive website you'll design first you'll research the device that your users are most likely to use but for the sake of this course and your current portfolio project you're going to assume that your users are more active on mobile phones than other devices you'll design for a mobile phone screen size first and work your way up to larger screen sizes this will allow me to better support you as you go through this course but now it's time for you to examine use cases for the dedicated mobile app and responsive website you're designing good luck as we begin talking about the different ways that you can create responsive websites let's review the importance of information architecture to refresh your memory information architecture or ia is the framework of a website how it's organized categorized and structured in other words ia is the structured organization of content to help users understand where the information they want is located effective information architecture is key to creating a seamless user journey so why is creating information architecture an important part of ux design good ia makes content easy to find and makes a product easy to use in addition strong ia allows your ideas to grow and change with the design the ability to adapt your approach during different stages of a project is a key skill for ux designers let's put ia into context with a real world example for an e-commerce website imagine you've made a purchase from a website and you're waiting to receive your product but the thing you've paid for never arrives how do you feel maybe you're annoyed but you're also curious about the status of the package you go to the order page on the website and there's no obvious place to see the order status or to report a lost package you'll eventually find the help section so you look for contact information but there's no easy way to find an email a phone number or a link to send an inquiry about your missing order at this point you're probably feeling confused frustrated even angry the struggle to find customer service information is just one example of why establishing good information architecture is an important step in your design process it creates a clear pathway for users to get what they want from a product as you think about designing your website it's important that you consider how your information will be accessed by your users our job as designers is to understand and anticipate our users needs in order to provide them with product experiences that meet those needs imagine you went to an amusement park specifically to see the brand new attraction everyone's talking about but you couldn't find it even after walking around for hours it's not good enough to build an awesome roller coaster or provide the desired functionality through some feature if people can find what they're searching for understand the terminology or navigate a product's hierarchy the feature or ride might as well not exist now that you understand the importance of information architecture let's put this into action for your own website design coming up we'll revisit how to build a site map with everything we just discussed about information architecture in mind it's time to create a site map for your responsive website remember a sitemap is a diagram of a website or an app that shows how pages are prioritized linked and labeled sitemaps are a great way to review all of the pages you'll need to design for your website building an effective site map also allows you to identify unnecessary pages or spot gaps where you need to create a new page so how do you create a sitemap for your responsive website there are six steps first think about pages that are commonly found on websites this is the research part of creating a sitemap it's helpful to check out the websites of your direct and indirect competitors or revisit the learnings from your competitive audit for this project you might also want to check out the websites of large non-profits or other organizations that drive social good take note of common pages that those websites include such as a page to describe the organization's mission a page to drive donations or a list of the organization's locations second recall information about users you'll want to keep your users problems and goals in mind as you create your site map to ensure that users get what they need from your site to do so revisit the information you collected during the empathize phase of this project through empathy maps personas user stories and user journey maps you learned a lot about the users you're designing this project for and many of those learnings should be relevant to your responsive website third decide on a website's structure what structure will your website use sequential hierarchical matrix or database remember you might use a combination of these structures or a different structure altogether let's review the first two which are the most popular choices as a quick reminder sequential describes a website structure that leads a user through a step-by-step process and a hierarchical structure describes a website that's organized by importance hierarchical is also the most common type of sitemap so you'll likely use some variation of a hierarchical website structure for this project okay back to the steps to create a sitemap after deciding the structure for your website it's time to start creating the sitemap you should start with the home page of your sitemap the home page is the access point for your website and the first part of your product that users will experience in addition the home page is often placed at the top of a site map so it's a logical place to begin from the sitemap you can name the main categories of content on your website remember for a website these categories usually appear in a navigation bar at the top of the home page or in a handbraker menu for this project your main categories might include things like an about page or a donation page and finally you can add subcategories this is when the final details of your sitemap will come together in other words you'll add subcategories that connect from each of the main categories you just outlined remember these are also called child pages that are attached to a parent page as you consider how to place the subcategories think about the user flow through your website and the navigation you want to create and just like that you will have a sitemap for your website this sitemap will give you a general idea of how your responsive website will function and the ways that it will meet your users needs now you have the opportunity to create a site map for the responsive website you're designing think logically and keep the user flow through your design and mind you've created some of the structural elements like a site map that will serve as the foundation for your responsive website now it's time to come up with lots of ideas for the layout of your site through sketching there are few things to think about before you start sketching first consider your design approach in the last course you designed a responsive website for a large screen size first a desktop computer then you scaled back your designs to fit on a mobile phone screen now in this course you're going to get some practice doing the opposite you'll start designing your responsive website for small screen size first and move toward a larger screen size later this means you'll use the progressive enhancement approach to design since you're moving from a small screen size to a larger screen size for your website designs second revisit the use case for your responsive website remember a use case is a description of how users would experience your product design when trying to complete a task you'll need to consider the use case for the responsive website you're designing compared to the dedicated mobile app you just completed what do you need for this design that you didn't have in the dedicated mobile app this will inform your sketches third as you think about potential solutions to the user problem keep your users top of mind take a second think about the user's step-by-step journey as they try to meet their needs by using your website remember there isn't one solution for your users problems your solutions will likely change and evolve over time finally remember the layout and sitemap you're trying to achieve for your responsive website designs this will help you focus your creativity on designing within those parameters i'll provide a quick reminder of some common website layouts in the next video at this point in the course you'll use the crazy aids exercise to quickly come up with ideas for your responsive website you'll need to revisit the problem statement you created earlier in the course because you'll come up with ideas for solutions to the user need you outlined to set up the exercise fold a piece of paper in half three times until you have eight boxes set a timer to 60 seconds for each sketch and get started your sketches might range from a really big donate button in the middle of the page to a carousel of images that bring stories of community members to life some of the ideas from this exercise might end up being parts of different pages on your website so get creative about how you can solve the problem your users are facing a pro tip for crazy aids is that it doesn't have to be completed in one sitting if you find yourself having trouble coming up with ideas take a break maybe grab a glass of water or give yourself a few minutes away from the page for some people powering through can ignite creativity but for others it doesn't and that's okay before you start ideating let's quickly review some common web page layouts at this stage of the project you're ready to start sketching ideas for your responsive website you've already created a sitemap to outline the pages you'll need to create so now it's time to decide how you want to organize content within each page of your website a good place to start is by deciding on a layout for the homepage of your website the home page is the access point for your website and the first part of your product that users will experience the rest of the pages on your website can follow a similar layout to the one you choose to use on your home page in the last course when you created sketches and wireframes for a responsive website you designed a large screen size first this meant you had a lot of layout options to choose from since there was a lot of space on the screen but now for this project you're designing for small screen size first like a mobile phone keep in mind that due to the limited space many responsive websites on mobile phone screen sizes are simple single column layouts so with that in mind let's start by discussing column layouts in a column layout there's a navigation menu at the top of the website and one or more columns of content that run down the site on blog sites like medium the focus is on content so a single column layout works well you'll notice that they use a single column layout for both the desktop and mobile versions of this page one thing to keep in mind when website designs use a two column or multi-column layout there's usually a focal point a focal point is a specific and distinct area of the website that captures the user's attention for example on the grow with google website images are used to draw the user's focus to the categories of the website notice that this website uses a two column layout for their home page when it's viewed on desktop computer but single column layout for the homepage when it's viewed on mobile this is responsive design in action when you're deciding on a layout to use for your responsive website designs consider the information that will be shown above the fold remember above the fold refers to the content on a web page that doesn't require scrolling to experience in other words this is the content users will see when they first land on your page you want to display the most important information for your user flow above the fold for example let's check out the feeding america website on the desktop and mobile screen size both versions of this responsive website clearly draw users to the donate button which is the user flow feeding america is most focused on in the last course we introduced a lot of ways that a web page can be laid out in addition to single column and multi-column layouts you also learned about a box layout which consists of boxes or squares of various sizes and proportions a featured image layout which places the user's focus on a single image or video that often takes up the entirety of the page asymmetrical layouts which have purposeful imbalance between different sides of a page including f-shaped layouts and z-shaped layouts a grid of cards layout which features a series of cards that provide previews of more detailed content and a tiered layer cake layout which has individual rows or layers stacked on top of one another within each row there can be different numbers of columns and they don't have to be consistent this is the layout that your instructor dave demonstrated on the library website if you'd like to learn more about layouts or explore examples of each website layout feel free to revisit the videos from earlier in the certificate program which will be linked in the course reading otherwise good luck coming up with ideas for different ways to lay out your website get your creative juices flowing with crazy eights earlier you created sketches to come up with ideas for the design of your project now it's time to use those sketches to create wireframes for your responsive website you'll start by creating wireframes for the mobile phone screen size of your responsive website you might remember that a wireframe is an outline or sketch of a product or a screen there are two ways to create wireframes paper and digital designers usually start with paper wireframes to plan the initial direction of the design later these paper wireframes are turned into digital wireframes to refine and build out the entire user flow platforms like figma and adobe xd are great for this for this project you'll have the choice to create paper wireframes and then build your digital wires like you've done for earlier projects in the certificate program or you can jump right into digital wireframes keep in mind it's faster and cheaper to draw paper wireframes so if you're still coming up with ideas for what your website pages should look like it's probably easier to start by creating wireframes on paper however if you already have a clear vision for all of the pages of your website then you can get right to digital wireframing another option is to do a combination of the two for pages where you need to id8 you might want to create paper wireframes but for pages where you already have a layout in mind you can skip ahead to digital wireframes early in your ux design career you're more likely to need to start with paper wireframes as you get more experience as a ux designer you'll have more ideas about how to layout a page and can build from previous designs you've created so you'll be able to more easily jump straight into digital wireframes without paper wires first okay you're ready to create paper and digital wireframes for the mobile version of your responsive website best of luck now that you have wireframes for the mobile version of your responsive website it's time to adapt them to a larger screen size so how do you as a ux designer apply responsive design to a website it takes a bit of planning and it begins with the wireframes that you've already created for example take a wireframe that you created earlier for a mobile phone screen size and plot it on dot paper using dot or grid paper makes it easy for you to shrink or scale elements of the wireframe in a consistent way since desktop screens are significantly larger and wider than mobile phone screens you'll now have to create a wider version of the wireframes you drew earlier you'll scale up your wireframe to two to three times the size to fit a larger screen since you're moving from a smaller screen with less digital page space to larger screens with more space you can add more elements and components to your new wireframes you may also need to increase the size of text and images across your website to ensure it still looks good on a bigger screen first start with a grid paper and a pen or pencil then draw a frame for each of the different size screens you want to scale your designs to next rearrange your wireframes for each of the different screens use the dot or grid paper to resize your existing wireframes to these new screen sizes alright here's an example that i came up with on the left is my mobile phone wireframe and on the right is my desktop sized wireframe first you notice that i converted elements and components that are meant to save space into larger designs i expanded the hamburger menu into a navigation bar at the top of the screen so each item is easy to click on next i place the text at the top of the mobile app below the navigation bar but it wasn't enough to fill the screen so i added a hero image to the right finally i flipped the vertical column of images into a horizontal row of images to make better use of the desktop screen width when you change your design elements to fit a new screen size you can resize the text icons images and navigation bars to fit better on your responsive grid for example a mobile screen size may not fit a hero image but its desktop screen size will have more space but you'll also want to focus on the spacing between elements make sure that the distance between icons or text is proportionate all right so that's how you resize your wireframes on paper keep in mind if you're working on digital wireframes only you can do the same resizing exercise in figma and adobe xd using a grid layout instead of grid paper now you're ready to adapt your own website wireframes for different screen sizes good luck great job creating wireframes for various pages of your website that will adapt to different screen sizes you've been working so hard during each stage of the design process in this course and it's time to move even closer to your final designs you'll turn your responsive website wireframes into a low fidelity prototype to create a lo-fi prototype you'll follow the same process that you did earlier in the course when you turned your dedicated mobile app wireframes into a low fidelity prototype remember the reason we create prototypes is to test the functionality of your designs and identify problems related to the function of your app focus on the main user flow and connect all of the screens in your app to move through that flow remember to think about connecting elements that will help users move both forward and backwards through the flow including arrows x icons and logos that connect back to the home page i know you're well prepared to create a low fidelity prototype using your wireframes you've done this before so it's time to show what you know you just built a low fidelity prototype for your responsive website great job this video is just a quick check in to remind you where you're at in the design process it's time to gather feedback on your responsive website with a usability study a usability study is a research method that helps us understand how easy it is for participants to do core tasks in a product you can conduct as many usability studies as you need to gather feedback make changes to your designs and improve the user experience keep in mind you can conduct a usability study focused on one screen size of your responsive website like the website on a mobile phone or you can test multiple screen sizes of your website it all depends on the type of feedback you want to receive as you move into this part of the course keep in mind the four things you'll need to do first plan the study second conduct the study analyze and synthesize the observations you collect during the study remember the goal here is to turn your observations into insights and finally iterate on your designs based on the insights that your research uncovered if you need more information about how to conduct a usability study and iterate on your designs check out the readings to revisit earlier material otherwise start planning at this stage you're moving into high fidelity design and can start to create your mockups these static designs are meant to feel like the final product mockups should include visual design elements like typography color and iconography mock-ups should also adhere to visual design principles like emphasis hierarchy scale and proportion and unity and variety at this point you've already created and stored some reusable visual and ui elements and components in a sticker sheet or assets panel remember to use them as you build the mock-ups for your responsive website in addition to creating the mocks for the mobile version of your responsive website you'll also want to create mocks for larger screen sizes as with your wireframes you'll want to consider how to change your design elements and components to fit a new screen size you can resize the text icons images buttons and navigation bars to fit better on your responsive grid here's an example of the mobile version of a website being resized to better fit a desktop version you'll notice that the mobile version has a carousel that a user can swipe through on the desktop version the carousel content has been broken out into cards arranged on a grid this layout makes better use of the additional screen space that's it we've reviewed some tips for creating mock-ups for your responsive website now it's your turn to work on your designs well done on creating mock-ups of your responsive website i'm sure it feels great to be so close to the end of this portfolio project you're almost there there's only one thing left to do for your responsive website convert your mockups into a high-fidelity prototype i bet you remember the process to create a high-fidelity prototype from earlier in the course when you created a high-fidelity prototype for your dedicated mobile app in case you don't here's a super quick refresher first lay out the mockups in the order of the main user flow second connect the screens or elements within the screens third add interaction details for your responsive website you'll probably stick to a mouse click but feel free to explore in figma or adobe xd fourth adjust the animation remember that animation settings determine how the prototype moves from one screen to another and fifth complete this process for all of the screens in your responsive website so why would you create a high fidelity prototype again well hifi prototypes give you the opportunity to test your app designs with users testing helps you decide how to iterate on your designs based on the feedback that users provide and testing proves whether the solution you've been designing addresses the community problem you're trying to solve also in the real world a high fidelity prototype is what you'll likely share with your manager colleagues and cross-functional teammates at the end of a design project it's always good to practice the tasks that you'll need to do in your future job for this project if you've been designing for a real organization or community the high fidelity prototype is what you'd share with them too all right that's it for my fast reminder on high fidelity prototypes go ahead and turn your mock-ups into a high-fidelity prototype now you've got this you've made it to the final step of your third portfolio project can you believe how much progress you've made during this course wow with the high fidelity prototypes of your responsive website ready to go you can test your designs and make improvements by now you know the four steps to conduct ux research plan the study conduct the study analyze and synthesize the observations you collect during the study and iterate on your designs based on the insights that your research uncovered before you get to work let me share one pro tip at this point in the design process it can be helpful to test a specific screen size since the user flow might be a little different for each screen size you should conduct the usability study focused on the screen size that your users are most likely to experience your product on whether that's a mobile phone a tablet a laptop or a desktop computer this is also a great time to gather feedback from the community you've been designing for to check that your solution addresses their needs and with that the time has come to conduct the very last usability study of this certificate program and iterate on your designs one more time you can do it a huge congratulations you've finished designing a dedicated mobile app and a responsive website for social good what a big milestone if you've been completing the courses of the certificate program in order you already know about the value of portfolios for ux designers portfolios are the primary way for designers to present their work to recruiters hiring managers and everyone else you've already added your first two projects to your portfolio now it's time to add your third and final project about designing for social good remember a major component of your portfolio is the case studies that showcase your work a case study is a detailed summary of a design project that typically includes the project goal and objectives your role in the project research methods and insights design process and artifacts challenges and constraints the outcome of the project and lessons learned case studies demonstrate your design knowledge your willingness to collaborate with the team and your ability to see an idea through from start to finish display challenges when a recruiter or hiring manager is considering you for a job they'll want to find case studies within your portfolio each design project you complete will have its own case study case studies should be presented in a concise and engaging way your case study needs to tell recruiters exactly what they need to know as quickly and efficiently as possible while being visually appealing and easy to skim there are some critical pieces that your case studies should include such as the goal of the project the objectives to meet that goal and the role that you played throughout it's helpful to include the key challenges or constraints that you faced your case study should also identify who the target user is describe the research methods you conducted and include the relevant insights from that research you should show the relevant artifacts that you produced throughout the project your sketches your wireframes prototypes and final polish designs it's important to show not only the final result but to also provide a glimpse into how well you use the design process to solve real users problems if the project launched or otherwise had a real introduction to the market sharing real outcomes is a huge plus and most importantly be sure to reflect on what you learned throughout by using the design process if you want to check out examples of entry-level designers portfolios to get inspiration for your own visit the course readings when you're ready you can begin building your case study for the dedicated mobile app and responsive website designs you just finished congratulations on finishing this course from the google ux design certificate you can access the full experience including job search help and start to earn your certificate by clicking on the icon or the link in the description below watch the next video in the course by clicking here and subscribe to our channel for more from upcoming google career certificates