10. Feedback & Testing
Written by Prateek Prasad

You finished the last chapter with a fully functional prototype that not only looks great but also supports interaction. You’re now at a critical checkpoint in the design lifecycle. At this point, your designs are detailed enough to communicate the core intent and you’ve structured your workspace so that introducing new additions or making changes to existing pieces won’t be a massive undertaking.

Now, it’s time to put the designs into the hands of users and stakeholders, get feedback and brainstorm about what you can improve. The importance of cross-team collaboration is a point I have been stressing over the previous chapters. Now, it’s finally time to put it into practice.

This chapter will show you another reason behind picking Figma as the design tool of choice.

So far, you’ve explored two of the three pillars of what makes Figma an excellent design tool:

Minimal toolset with powerful features that make translating ideas into design easy.

Built-in prototyping tools allow you to bring your designs to life with minimal effort.

The third pillar is rich collaboration tools that make asynchronous communication and collaboration in a distributed setting painless.

For designers who need to go from wireframes to high-fidelity designs to a fully interactive prototype, these features are compelling.

They not only eliminate the need to learn and switch between three tools to close the product development loop, but they also improve productivity by leaps and bound.

This chapter is all about collaboration. The three key things you’ll learn are how to:

Prep your files and prototypes and share them with stakeholders.

Gather feedback and suggestions.

Incorporate feedback into the designs.

Now, it’s time to get started.

From the downloaded materials, open chapter-10-starter.fig in Figma. The project file contains the prototype, wireframes and designs in their final form. In this chapter, you’ll work with the Cinematic App design and the Cinematic App Prototype.

Soliciting Feedback

When you build a new product, getting feedback early and often is key to ensuring you’re on the right track. Without feedback, it’s easy to get sidetracked and build something completely different from the original idea.

Feedback brings diverse perspectives into the design process and helps build inclusive and accessible products. Typically, when gathering feedback, you want to include both the internal teams involved in building the products and the users or customers who’ll use the app.

Internal teams can bring their ideas and constraints to the table early on. Involving real users lets you observe any friction points in their interaction with the product. Ideally, this happens frequently and in different stages of development, offering you the opportunity to correct your course while the designs and ideas are still flexible enough to change.

It’s also worth mentioning that nothing is set in stone when figuring out how to best collaborate with all stakeholders. The right method depends on factors like the structure of your teams, how communication works in the organization and the test group’s availability.

Now that you know why collaboration is so important, it’s time to prepare the prototype so you can share it with other teammates and pass it on for user testing.

Preparing the Prototype for Testing

Open the Cinematic App Prototype page. You need to check a few things before passing it along to others, including:

Checking the Prototype’s Frame

First, click on the Prototype tab on the Properties panel and ensure you’ve selected the iPhone 11 Pro Max under Device.

Sharing the Prototype

Click the Present button to open the prototype in a separate tab, then click Share Prototype. The dialog that appears lets you modify the access controls.

Sharing the Design Files

The prototype gives stakeholders an idea of what using the app feels like. However, to gather more fine-grained feedback about the design, such as the color palette and typography, you need to share the design files.

Moderating Access

Moderating access to files is handy for revoking access for someone who is no longer a part of the project or modifying the access controls for existing viewers and editors.

Leaving Feedback on Design Files

Before you incorporate feedback into your designs, consider how you can leave feedback and suggestions to get a 360-degree view of the process. Figma comes with a handy Comment option that you can find on the toolbar or activate by pressing C.

Incorporating Feedback

Now, imagine that you’ve shared the file and prototypes with your team and the test group. It’s now time to incorporate their feedback into your designs.

Designing the Filter Feature

The filter feature allows users to filter the main feed by:

Adding a Launch Button

First, you’ll add a button to launch the filter UI. Open the Cinematic App page and, in the movie-list frame, add an ellipse (O) measuring 60×60 with a white fill. Place it above bottom-nav at a margin of 32 from the right and bottom.

Building the Filter UI

Next, you’ll handle the filter UI. Before building the filter sheet, you’ll build each component for the individual filter criteria. Open the Typography page and add a new text layer (T) below the Genre Text layer and add the text: Filter Text. Use the font Rubik with a weight of Medium and a font size of 12.

Building the Filter Sheet

To build the filter sheet, open the Cinematic App page and duplicate the movie-list frame by selecting the frame in the Layers list and pressing Command-D or Control-D. Name the frame movie-list-filter and delete filter-button from the frame.

Adding the Genres

Duplicate the instance and place it to the right at a margin of 8. Change the text of the criteria frames to Scifi, Period and Romance.

Adding Filter Rows

Add another text layer to the bottom of the genres-category with the text Release Year and Section Header text style. Repeat the steps you followed for the genres filter criteria to create the filter rows, as shown below.

Finishing up

For the final polish, select the filter-background and double-click it to enter the vector editing mode.

Creating the Movie List Iteration

Your next goal is to tackle the feedback left by one of your teammates. Here’s the comment:

Upgrading the Movie Card

Now, for the fun part. Create a rectangle (R) measuring 300×579 in the frame. If the rectangle isn’t visible, check your Layers panel and ensure the rectangle is above the backdrop layer.