Week 4: Designing A Complementary Responsive Website
With your final designs for a standalone mobile application, you are now heading towards applying all you’ve learned about your product and users towards designing a responsive website for social good. To kick off, you will design spaces for multiple user experiences and different screen sizes. You will examine the importance of information architecture and draw a sitemap for your website. Furthermore, you will sketch several ideas and possible layouts of the site and make wireframes-either on paper, digitally, or both-into different screen sizes.
Then you will create a low-fidelity prototype, will conduct a usability study to iterate on designs, move on to high-fidelity designs creating a mock-up for different screens of your responsive site, and finally add high-fidelity prototype creation and re-testing to the mix. By the end of this section, you will have polished up cross-platform designs, ready and waiting to show off in your online portfolio!
Learning Objectives:
- Examine the platform considerations that impact designs
- Draft a use case for a portfolio project
- Introduce standard website layouts
- Define information architecture value
- Construct a sitemap for a responsive website
- Use ideation techniques to trigger ideas for responsive website designs
- Wireframe a responsive website across multiple screen sizes
- Develop a low fidelity prototype for a responsive website
- Plan and conduct a usability study by creating a low-fidelity prototype
- Mockups for a responsive website in Figma or Adobe XD
- Build a high-fidelity prototype for a responsive website.
- Planning and conducting usability study for a high-fidelity prototype
- Creating a case study for a portfolio project.
TEST YOUR KNOWLEDGE ON COMMON WEBSITE LAYOUTS
1. What is the focal point on this website?
- The images, which draw a user’s attention to the categories (CORRECT)
- The navigation bar, which is clearly anchored at the top of the page
- The arrows, which are blue, and direct users where to find more details
- The headers, which inform the user about how to find key information
Correct: A site focal point is a particular area of a website that attracts attention to the users. In this case, the images act as focal points directing users’ gaze towards categories. In fact, pictures are more attracting, even more so if those pictures contain people, and less so when they carry text.
2. In a responsive website design, the content that’s above the fold should include the most important information for the user flow.
- False
- True (CORRECT)
Correct: ‘Above the fold’ refers to the part of web pages from where users will see the content without scrolling. Therefore, it should contain the most important information, as this is the first content users will see when they land on the page.
3. A designer creates a website with individual rows stacked on top of each other. Within each row, the designer includes a series of columns. What website layout is the designer using?
- Tiered layer cake layout (CORRECT)
- Featured image layout
- Asymmetrical layout
- Grid of cards layout
Correct: This tiered layer cake arrangement has individual layers or rows stacked into one another. Every row may have a variable number of columns, and the column configuration may not be uniform.
TEST YOUR KNOWLEDGE ON CREATING WIREFRAMES
1. Imagine that a designer creates wireframes for a mobile responsive website. Then they want to create wireframes for the companion desktop site and its larger screen size. They start with the mobile wireframe, and plot it on dot paper. What steps come next? Select all that apply.
- Apply a template that matches the project specifications
- Create wireframes for smaller screen sizes
- Scale up the wireframes two or three times larger (CORRECT)
- Add elements and components to the wireframes (CORRECT)
Correct: When plotting the frames on dot paper first, it allows the designer to effortlessly scale elements uniformly to large wide screens. Incorporating what they miss on the mobile, they can add more elements and components this way.
2. What should a designer do with text when scaling up a wireframe from mobile to desktop?
- Revise the site’s information architecture
- Increase the size of the text (CORRECT)
- Reposition text below the hero image
- Adopt a desktop-friendly typeface
Correct: Because such larger computer screens carrier e-paper space, the designer can add more elements and components as well as increase text and images to improve their visibility and user experience.
3. Fill in the blank: Designers can _____, scale, and resize content in wireframes for different screen sizes.
- undo
- contain
- rearrange (CORRECT)
- fold
Correct: Designers resize, scale, and place content in the wireframes with respect to the different screen sizes. For example, if a mobile screen does not show the primary navigation bar because it is hidden behind the sandwich, such display on a bigger screen would simply default to the display of the navigation menu without needing the use of the hamburger. Adjustments can certainly be made to the wireframes, thus ensuring that the user experience is consistent across devices.
TEST YOUR KNOWLEDGE ON PLANNING AND CONDUCTING USABILITY STUDIES
1. What is the goal of a usability study?
- Share rough design sketches to generate participant feedback early in the design process
- Develop a research plan and confirm the correct sample size of participants
- Assess how easy it is for participants to complete core tasks in a product (CORRECT)
- Determine how product features can accommodate a participant’s design preferences
Correct: Usability studies are study participants during which evaluators assess their easy performance of important tasks in a product. These are very potent feedback-gathering opportunities for improving draft works and ultimately advancing the user experience.
2. A UX designer creates a website for a regional health nonprofit. They plan a usability study, recruit participants, and conduct the study. Then, they iterate on the initial design, and share the updated website with their client. What step did the designer skip in conducting this study?
- Establish the website’s information architecture
- Analyze and synthesize observations (CORRECT)
- Write a research report
- Decide which product to test
Correct: In general terms, there are primary stages of designing a usability study, which include that the first step involves preparing the usability study plan, recruiting subjects, conducting the study, and finally analyzing and synthesizing observations from the study. However, an important aspect of ensuring that the study is effective can be neglected by not analyzing observations after the study, leaving a lot of valuable insights unrevealed.
3. How many times is it appropriate to conduct usability studies?
- As many times as needed (CORRECT)
- One usability study is sufficient
- Twice, once before the project begins and after the product is released
Correct: If you want to collect feedback, improve your designs, and improve the overall user experience, you can conduct usability study as many times as necessary. Its perfectly acceptable to do a study with just a low-fidelity prototype and it can give you a lot of very useful information at an early stage in the design process.
TEST YOUR KNOWLEDGE ON DESIGNING MOCKUPS
1. Mockups should adhere to visual design principles, and include design elements like typography, color, and iconography.
- True (CORRECT)
- False
Correct: The design now shifts into high-fidelity, where it closely approaches the way a finished product would actually look and feel. It would now have detailed visual design elements that form a more polished and realistic deliverable.
2. Imagine a design team is building a mockup of a responsive website. Based on preliminary marketing research, they know a significant proportion of users will access the website using smartphones and tablets. What principles should they apply to improve cross-platform design? Select all that apply.
- Reach out to the back-end developers to ask about changing website architecture
- Wait until user research is complete before deciding on typography, color, and iconography
- Consider how to change design elements and components to fit a new screen size (CORRECT)
- Resize text, icons, images, buttons, and navigation bars to fit better on a responsive grid (CORRECT)
Correct: If workloads require more than developing mobile layouts, larger mock-ups plan to use the same effectiveness as responsive programming-the resizing of text and even icons, images, buttons and navigation bar-diver within scale scope.
Correct: Importance of adaptation:- when designing across different platforms, it is critical to adapt design components and graphical elements to larger screens for a perfect and user-friendly unification.
3. When creating mockups of a responsive website, the design team should create mockups for various screen sizes.
- False
- True (CORRECT)
Correct: The designers should create mockups for both mobile and large screen versions of the site. They should think about how to adapt their design elements and components to fit into different screen sizes across platforms in a similar manner as a wireframe.
TEST YOUR KNOWLEDGE ON UX PORTFOLIO CASE STUDIES
1. Imagine that you finish this program, and compile a concise and engaging case study about your responsive website to add to your portfolio. The case study includes the project goals and objectives, your role, the insights you gained through research, and what you learned from the project. What’s missing from this case study? Select all that apply.
- Feedback on the project
- Challenges and constraints (CORRECT)
- Outcome of the project (CORRECT)
- Design process and artifacts (CORRECT)
Correct: A study of this type should revolve around the problems and limitations of the project. It should be able to provide a succinct, exciting, and yet detailed account of the project, covering the result, design processes, and relevant design artifacts.
Correct: A description of the project outcome is a critical component of the case study. Case studies should offer a concise, engaging, and detailed summary of the project. It should also include challenges and constraints you faced, and the design process and artifacts.
Correct: The design process plus artifacts becomes a relevant aspect of case studies. An invulnerable case study should provide a succinct, exciting, and comprehensive overview of a project.
2. When developing a case study, what artifacts should you include from a project? Select all that apply.
- Design sketches from previous projects
- Prototypes (CORRECT)
- Final designs (CORRECT)
- Wireframes (CORRECT)
Correct: It is important to include prototypes as part of a case study to show how you conceptualized your design and display the growth of the project.
Correct: It is important to showcase such relevant artifacts generated through the project to demonstrate how well you apply the design process to solve the user’s problem. This includes the final designs because they showcase the solutions you come up with.
Correct: You should include wireframes in a case study to demonstrate your progression through the project.
3. What does a use case describe?
- How designers would learn about users’ needs and pain points while designing different experiences
- How designers would apply findings from user research when mocking up a website
- How users would report their pain points when participating in a usability study
- How users would experience a product design when trying to complete a task (CORRECT)
Correct: A use case represents how a user interacts with a designer’s product so as to complete a task. Designers have to come up with and design for different use cases for different platforms-a responsive website or a mobile application-using the product effectively for all users in diverse contexts.
4. Fill in the blank: Information Architecture (IA) is the framework of a website. A designer should consider IA when planning a website because good IA _____.
- helps the UX researchers design an effective user testing methodology
- makes content easy to find and the product easy to use (CORRECT)
- makes the coding process straightforward for back-end developers
- helps the designer scale wireframes for large and small screen sizes
Correct: Information architecture (or IA) deals with how content is organized, structured, and categorized in a website. It is really important for users’ navigation through a site, hence ensuring that they have an effortless and intuitive user journey. Well-organized IA enables the users to quickly and easily locate what they are looking for; thereby improving their overall experience.
5. What are the two most popular types of website structures? Select all that apply.
- Database
- Matrix
- Sequential (CORRECT)
- Hierarchical (CORRECT)
Correct: Sequential and hierarchical are the two most frequently used types of website structure. A sequential structure walks the user through a step-by-step experience, usually for tasks that must be done in a specific sequence. On the other hand, a hierarchical structure organizes content based on importance, having its broad categories at the top with more specific subcategories falling below. Both of these types are useful for enhancing navigation and improving experience through accessibility to information.
6. When sketching your site, you should consider your design approach, revisit the use case, and _____.
- focus your creativity on innovating website structures
- keep your users top of mind (CORRECT)
- design your site for a large screen size
- revise your use case based on the user’s needs
Correct: Creating a thorough map of each user’s step-by-step journey through your website to fulfill their needs is important. It is in your understanding of this journey that you recognize stress points and opportunities for optimizing the overall user experience. In this process, you have developing appropriate solutions to address user problems and improve their satisfaction with the site.
7. Identify best practices for the Crazy Eights exercise.
- Complete the sketches in one sitting
- Create one sketch per sheet on a large drawing pad
- Draw the sketches in digital design software
- Set a timer for 60 seconds for each sketch (CORRECT)
Correct: In the case of Crazy Eights, create eight boxes by taking a piece of paper and folding it in half three times. After drawing the boxes, set a timer and sketch for 60 seconds for each image. The idea is to get quickly as many as possible within a short time, inspiring creativity and iteration without overthinking. All accomplished with just a few strokes, this rush exercise has a way of stimulating a broad array of different solutions and sharpening your thinking during the design.