Course 5 – Create High-Fidelity Designs and Prototypes in Figma

by
Contents hide
1 Week 6: Testing and Iterating On Designs
2 TEST YOUR KNOWLEDGE ON COMING UP WITH RESEARCH INSIGHTS
3 TEST YOUR KNOWLEDGE ON HANDING OFF DESIGNS
4 TEST YOUR KNOWLEDGE ON CASE STUDIES IN UX PORTFOLIOS
Spread the love

Week 6: Testing and Iterating On Designs

With your high-fidelity prototype now complete, the next step is to evaluate your designs through testing. This necessitates the execution of a usability study focused on assessing your mobile app prototype. The feedback obtained will be analyzed to derive actionable insights, enabling you to enhance your design effectively. Following the refinement of your designs, you will learn the process of transferring them to engineering teams for production. Finally, you will consolidate your knowledge of user research, ideation, wireframing, design, and prototyping into a comprehensive case study for your UX portfolio.

Learning Objectives:

  • Develop a usability study plan that aligns with project objectives
  • Establish success metrics and criteria for the usability study
  • Reduce bias in usability study methodologies
  • Execute a usability study
  • Analyze and synthesize data from the usability study
  • Transform usability study findings into actionable recommendations
  • Revise mockups and prototypes based on research insights
  • Articulate the factors that impact design iterations
  • Communicate design specifications effectively to engineering teams
  • Exemplify how to document design specifications within Figma
  • Identify key components of a portfolio case study
  • Recognize the advantages of comprehensive portfolio case studies
  • Document a mobile application effectively within a portfolio case study

TEST YOUR KNOWLEDGE ON COMING UP WITH RESEARCH INSIGHTS

1. What is an insight

  • A step-by-step examination of a group of users and their needs
  • An observation that helps a designer understand the user or their needs from a new perspective (CORRECT)
  • An assessment that allows participants to complete core tasks in a product without direct supervision
  • An assessment of how easy it is for participants to complete core tasks in a product

Correct: Insight is an observation that provides a designer with a deeper understanding of the user or their needs, often offering a fresh perspective that can inform design decisions.

2. What are the four steps in turning observations into actionable insights? Select all that apply.

  • Find peculiarities in data
  • Find themes in the data (CORRECT)
  • Come up with insights (CORRECT)
  • Gather data in one place (CORRECT)
  • Organize the data (CORRECT)

The third step in transforming observations into actionable insights involves identifying themes within the data.

Developing insights represents the final stage in the process of converting observations into actionable insights. Following this progression, the prior steps consist of data collection, data organization, and theme identification.

The initial step in converting observations into actionable insights is to consolidate data in a single location. Subsequently, the data should be organized, themes identified, and insights developed.

The first step entails consolidating data in one location. The second step focuses on organizing this data in order to transform observations into actionable insights. The identification of themes constitutes the third step, while the fourth step involves the development of insights.

3. Consider the following scenario:

During a usability study for a fast-food app, many participants had trouble completing their order. Multiple participants noted that the color contrast of the interface made it difficult to find the “Complete Order” button. Some participants with visual impairments could not differentiate between the different lines, buttons, and negative space in the app. The designers grouped these types of observations under the theme “Color.”

What kind of insight can the designers draw from these “Color” observations, and how can they improve their app?

  • The participants had trouble completing their order because the buttons weren’t responsive
  • The pictures on the fast-food ordering app were not clear enough for participants, so the designers need to replace the images.
  • The participants had difficulty navigating the app because of the color palette. The designers need to make the app more accessible by updating the colors to have higher contrast. (CORRECT)

Correct: The designers overlooked the importance of utilizing accessible color schemes. The inadequate color contrast hindered user navigation within the app, highlighting the need to reassess the color palette employed.

4. Consider the following scenario:

Designers conducted a usability study for an app they’re developing for a hospital. The app is meant to help patients fill out their paperwork on a computer or from their phone. The designers collected multiple helpful insights to improve their design. One particular insight stood out: The available selection for illnesses and symptoms wasn’t expansive enough.

Based on this feedback, what can the team do to improve their design?

  • Keep the selections as they are, but include an open text box for detailed descriptions of their visit.
  • Include expansive selections and an “Other” section, so patients can accurately describe the reason for their visit to the hospital. (CORRECT)
  • Add selections and symptoms that are common to the region that the hospital operates in.

Correct: The team needs to include a more diverse list of choices for patients when they fill out their online paperwork. The additional choices will help patients accurately record the reasons for their hospital visit.

TEST YOUR KNOWLEDGE ON HANDING OFF DESIGNS

1. Jean-Marie is a UX designer at a design agency. They have just finished their designs. The agency’s lead engineer has requested the design specifications. What can Jean-Marie do to successfully prepare the design for the engineering team?

  • Email an engineer and begin working on the next project
  • Send the engineering team a list of problem areas that are not yet addressed in the design
  • Provide the design system, mockups, prototypes, and specifications (CORRECT)
  • Finalize every aspect of the designs before sharing it with the team (CORRECT)

To successfully send off the design to the engineering team, Jean-Marie will need to put together the details of the design system, mockups, prototypes, and specifications. This will make it easier for the engineers to start the coding process once they have all the references they need. They should also finalize every aspect of the design before sharing it with the team.

Since Jean-Marie is working at a small design agency, it’s best practice to have every aspect of the design finalized before sending it off to the engineering team. While this might be the case at larger companies as well, smaller companies typically operate like a relay race. The baton needs to be delivered completely before the race can continue, and the next team member takes over. They should also provide the design system, mockups, prototypes, and specifications.

2. Mona just finished their designs in Figma and is preparing to send them off to production. What can she do to successfully deliver them to the engineering team? Select all that apply.

  • Set the file permissions to view only
  • Exclude color schemes
  • Create thumbnails that include hyperlinks, specifications, and requirements for the design (CORRECT)
  • Test and share the prototypes (CORRECT)

Figma’s customizable thumbnail feature empowers designers to incorporate a variety of essential information for fellow team members, including hyperlinks, images or illustrations, and even the current file status. Prior to handing off the designs to the engineering team, Mona should thoroughly evaluate and disseminate the prototypes. By testing and sharing the prototypes before submission to the engineering team, Mona can confirm that the files effectively convey the intended flow and objectives of the design.

Additionally, she should generate thumbnails that encompass hyperlinks, specifications, and design requirements.

3. There’s no singular “right” way to send designs off to production. Procedures can vary by company and depend on how teams prefer to conduct the development process. Which of the following is true when you’re ready to deliver your design to the engineering team?

  • Send the engineering team a detailed list of problem areas that are not yet addressed in the design
  • Leave the designs incomplete when you send them to the engineering team
  • Provide the design system, mockups, prototypes, and specifications (CORRECT)
  • Begin working on the next design project

Correct: To successfully send a design to the engineering team, you will need to provide the details of the design system, mockups, prototypes, and specifications. This will make it easier for the engineers to begin the coding process, as they’ll have all the references they need

4. An entry-level designer is responsible for deciding how the hand-off process flows for their organization.

  • True
  • False (CORRECT)

Correct: Entry-level designers will generally not be expected to design hand-off protocols for their organization.

5. When design and engineering teams work together simultaneously to complete a product, what is one challenge they might face?

  • Coordinating a project hand-off
  • Slowing down project timelines
  • Identifying areas that have to be redone as they design and engineer (CORRECT)
  • Establishing a project deadline

Correct: Simultaneous design and engineering of a product may lead to inefficiencies, requiring team members to revisit earlier stages to modify or recreate aspects of the product. For example, if a designer opts to alter a layout, the engineer tasked with executing the design will likely need to revise parts of their previously completed work. This scenario can hinder progress and result in excessive rework.

TEST YOUR KNOWLEDGE ON CASE STUDIES IN UX PORTFOLIOS

1. Fill in the blank: A case study is a(n) ____ of a design project that typically includes the project goals and objectives, your role in the project, the process your team followed, and the outcome of the project.

  • observation
  • rubric
  • summarized presentation (CORRECT)
  • data-driven report

Correct: A case study is a comprehensive summary of a design project that outlines key details such as the project goals, your role and contributions, the process and methods used by your team, and the final outcome or results. It provides a detailed narrative of how the project unfolded, the challenges faced, and how they were addressed, offering insight into your design thinking and problem-solving skills. Case studies are essential for showcasing your work, particularly in your professional portfolio, to demonstrate your expertis.

2. Why are case studies beneficial to have in a portfolio? Select all that apply.

  • Allows UX designers to understand users and their needs from a new perspective
  • Helps designers turn observations into actionable insights
  • Demonstrates a designer’s willingness to collaborate with a team (CORRECT)
  • Serves as a visible demonstration of design knowledge (CORRECT)

Correct: A case study is a presentation of a project that showcases a designer’s design knowledge and highlights their ability to collaborate with a team. It demonstrates the process of working with others, such as during the interview process, data documentation, and the creation of actionable insights.

3. Harjot is organizing a case study of the website they designed for a local architect. The architect specializes in designing futuristic, eco-conscious homes for clients looking to build from the ground up. What type of information should Harjot include in the case study for their portfolio? Select all that apply.

  • The client’s phone number and email
  • Highlight challenges (CORRECT)
  • A hero image (CORRECT)
  • Goals and objectives (CORRECT)

Correct: Every design project has its own set of challenges. Hiring managers and recruiters are interested in seeing how a designer faced and overcame these challenges. The case study should also include a hero image, along with the project’s goals and objectives, to effectively showcase the designer’s approach and problem-solving skills.

4. How should case studies be presented in a portfolio? Select all that apply.

  • Case studies should include every aspect of the design and the design process.
  • Case studies should be presented as straightforward as possible.
  • Case studies should be visually appealing. (CORRECT)
  • Case studies should be presented in a way that’s concise and engaging. (CORRECT)

“A lot of groundwork is necessary to make a design project successful, but it’s essential for the final outcome to be visually appealing, concise, and engaging. Since much of UX design is visual, case studies should be crafted to attract the attention of recruiters and hiring managers, many of whom may not be designers themselves.”

“Displaying case studies in a concise, engaging, and visually appealing manner is crucial. They should tell a clear, cohesive story that highlights how the designer enhanced the user experience through their expertise.”

5. What questions should a designer consider to determine if their designs are final? Select all that apply.

  • Has the design team used up all of its resources?
  • Are participants or users able to interact with and interpret the designs without extra help? (CORRECT)
  • Have placeholder texts been replaced with finalized assets? (CORRECT)
  • Are the designs a true representation of the intended user experience? (CORRECT)

Prior to designating a design iteration as complete, it is imperative that participants or users can engage with and comprehend the designs independently, without supplementary guidance. This step ensures that the designer has developed an intuitive and user-friendly interface. Additionally, it is vital to confirm that the designs faithfully embody the desired user experience and that any placeholder text is substituted with finalized content.

Before finalizing a design, the designer must confirm that all placeholder texts, icons, and images have been replaced with completed assets. This provides the engineering team with a comprehensive package ready for production. Moreover, it is crucial to verify that the designs accurately reflect the envisioned user experience and that users can interact with the designs without additional assistance.

After conducting comprehensive analysis, testing, and interviews, it is essential to assess whether the final designs resonate with the genuine requirements and preferences of users. Ensuring that placeholder text has been replaced with finalized content and that participants can engage with the designs independently is equally critical.

6. The app you have created is now in the final stages. You are ready to test it and conduct a usability study. What should you do before you begin a usability study?

  • Write a UX research plan. (CORRECT)
  • Find users to test the app.
  • Evaluate the ease of navigation within the app.
  • Ask colleagues to review the app’s UX design.

7. At what point in your design process should you conduct a usability study?

  • During each stage of the design process (CORRECT)
  • During the low-fidelity prototype phase
  • At the end of the design process
  • Before designing mockups in Figma

8. You are conducting a usability study for your prototype and are guiding users through the study. What type of usability study are you conducting?

  • Pilot
  • Unmoderated
  • Moderated (CORRECT)
  • Mediated

9. You have gathered all of the data from the usability study, organized it, identified themes, and now have actionable insights. Now, you are ready to update your design. Where should you make the updates?

  • High-fidelity prototype
  • Mockups (CORRECT)
  • Wireframes
  • Low-fidelity prototype

10. You have implemented all of the feedback from the usability study and have iterated your designs. You think you are done and are ready to move the prototype into production. What are some questions you can ask to identify when you are done with design iterations and ready to hand off to production? Select all that apply.

  • Do we have enough budget left to continue to iterate the designs?
  • Are all the final assets in place? (CORRECT)
  • Can users navigate through and use the designs without guidance? (CORRECT)
  • Does the design represent the desired user experience? (CORRECT)

11. You have created a custom thumbnail of your design files in preparation for the production hand off. What information would be helpful to include for the production team?

  • Monitoring activity
  • Documenting incidents
  • Managing alerts
  • Analyzing events (CORRECT)

12. In preparation for hand off, you have created custom thumbnails of your design files. What actions did you take in Figma to do this?

  • Right-click on the prototype file and select Set as Thumbnail.
  • Right-click on the frame of the design file and select Set as Thumbnail. (CORRECT)
  • Right-click on the canvas of the design file and select Set as Thumbnail.
  • Right-click on the page of the design file and select Set as Thumbnail.

13. You are working on your portfolio and adding case studies to each project. Which factors should you consider when creating case studies?

  • They should be visually appealing and easily skimmable. (CORRECT)
  • They should include only the project start date, end date, and the client name.
  • They should be at least a page long with clear paragraphs and sections.
  • They should outline, in great detail, everything you did throughout the project.

14. You are constructing your case study for a project that will go in your portfolio. How much detail of the research you conducted should you include in the case study?

  • You should include only the key insights from the research. (CORRECT)
  • You should include all of the research you conducted and the corresponding findings.
  • There’s no need to include the research in the case study.
  • You should include all of the empathy interview results and usability study data you collected.

15. You are creating a case study for your portfolio for the app you just designed. Which parts of your design visuals should be included? Select all that apply.

  • Only the final product 
  • Wireframes (CORRECT)
  • Paper sketches (CORRECT)
  • Low-fidelity prototype (CORRECT)

16. You are writing the UX research plan in preparation for the usability study you will conduct on your app. You need to write key performance indicators (KPIs) to measure certain elements in your app. What are some examples of key performance indicators (KPIs) that you may include? Select all that apply.

  • A list of what users should be able to do in the app
  • Amount of time a user spends on a task (CORRECT)
  • Use of navigation functionality compared to the use of search functionality (CORRECT)
  • User error rates (CORRECT)

17. You have started to transition your observations from the usability study into actionable insights. To start, you have gathered and organized the data. What should you do next with the data?

  • Create a list of insights based on the common themes.
  • Update the prototype based on the user data.
  • Ask users for another round of feedback.
  • Identify common themes or patterns. (CORRECT)

18. You have finished implementing feedback from the usability study. You have iterated your designs. You feel that you are ready for next steps. What should you do with your designs next?

  • Make the product live.
  • Double-check your designs one more time.
  • Hand them off to the production team. (CORRECT)
  • Ask a colleague to do a final review.

19. You have been working in Figma for the majority of your app creation. You have collaborated with numerous partners throughout the design process. Who are you most likely to have collaborated with? Select all that apply.

  • End users
  • Copy editors (CORRECT)
  • Developers (CORRECT)
  • Project managers (CORRECT)

20. You have shared the design files in Figma with several groups. You have given the project manager viewer access. What does this access allow the project manager to do within the design files? Select all that apply.

  • Change out stock images
  • Preview frames (CORRECT)
  • Select layers (CORRECT)
  • Make comments (CORRECT)

21. You have finished the project and have added it to your portfolio. You need to add case studies to your portfolio. Which projects in your portfolio should include case studies?

  • The first project in your portfolio
  • All portfolio projects (CORRECT)
  • The largest portfolio projects
  • The portfolio projects that are the most complex

22. Based on the usability study, you have made revisions to a few pages in your mockups. What should you do with the outdated pages from your mockups?

  • Keep them where they are so you can refer back to them at any time.
  • Move them to an archive folder.
  • Remove them from your design. (CORRECT)
  • Minimize the pages so they are still available if you need them.

23. You have handed off your designs to production. When will you iterate on your designs again?

  • After the product has launched (CORRECT)
  • Never; you are done with the product
  • Before the production team finalizes the coding
  • After the engineers have prepared it for final delivery

24. You have provided some of the production team viewer-only access to the Figma design files. What can they do with this type of access?

  • Export assets (CORRECT)
  • Swap out an icon
  • Update content
  • Move a connection

25. You have added your designs to your portfolio. Now, you need to add case studies to each portfolio piece. What should your case studies include? Select all that apply.

  • Project scope and budget
  • Process (CORRECT)
  • Project goals and objectives (CORRECT)
  • Project outcome (CORRECT)

26. When you are writing a case study for your portfolio project, it is a good idea to tell a story. Which is the best way to structure the story?

  • Ensure there is a beginning, middle, and end to the story.
  • Use the five steps of the design thinking framework as a guideline. (CORRECT)
  • Weave the 5 C’s of storytelling throughout your case study—circumstance, curiosity, characters, conversations, conflicts.
  • Incorporate your personal experiences into each section of the case study.

27. In the case study you are writing for the portfolio project, why is it important to include the results of the usability testing you conducted?

  • It is a way to add more content to the case study and ensure it looks substantial to readers.
  • It can prove that your designs were accurate from the beginning.
  • It is a way to show what you learned from the research. (CORRECT)
  • It is a way to prove that you actually did the research.

28. You are in the midst of writing your UX research plan. You have already identified your research goals. Now, you will write the research questions. What types of questions should you write?

  • Yes or no questions
  • Rhetorical questions
  • Leading questions
  • Actionable and specific questions (CORRECT)

29. After the usability study is complete, you have gathered and organized the user feedback. Then, you have identified common themes that were prevalent in the user feedback. What should you do next?

  • Prep the prototype for final delivery.
  • Create a list of insights based on the common themes. (CORRECT)
  • Make changes to the prototype based on the user insights.
  • Conduct a second usability study to validate the first group’s observations.

30. You are ready to hand off your Figma design files to production. What can you do to help orient new collaborators or the development team to the files?

  • Create custom thumbnails to orient users to your files. (CORRECT)
  • Conduct a conference call and walk everyone through the files.
  • Tag team members in each file and direct them to look at the files and ask questions, if needed.
  • Take a screenshot of each file and add in comments explaining each element.

31. You are almost finished with your designs and are starting to think about showcasing them to hiring managers. When should you update your portfolio?

  • At the beginning of the design process
  • At the end of the design process
  • At the midpoint of the design process
  • Throughout the design process (CORRECT)

Leave a Comment