10 Feedback & Testing

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:

1. Minimal toolset with powerful features that make translating ideas into design easy.
2. 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:

• The prototype uses an appropriate device frame.
• The prototype works as expected.
• The link to access the prototype works and you’ve enabled the correct permissions.

You’ll start with the frame.

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.

Adding a device frame to a prototype gives your testers a better idea of what the app will look like on a real device when it’s finished.

Figma lets you change the prototype’s background to suit your presentation arrangement, but for now, you’ll keep the default: black.

Now that you’ve checked the settings, you’re ready to share the prototype.

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.

If you’re a part of a Figma team, all team members have access to the prototype — and the design files — by default.

Before anyone outside the team can access the prototype, you need to invite them. To ensure that people outside the team can’t make any unwanted modifications to the designs, change the access control to can view.

Another way to share prototypes is to create a shareable link. Click Anyone with the link in the share options, then click Copy link. This will copy the link to the prototype to your clipboard.

Before sharing the link, check that it works. A quick way is to open the link inside an incognito browser window. If the prototype loads as expected, the link works.

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.

To do so, head to the Cinematic App page and click the Share button in the toolbar. The resulting share options dialog is similar to the one you used to share the prototype.

When you share the designs with other designers in the team, you probably want to allow them to make modifications. To do so, change the share setting to Only people invited to this file and select the can edit option for the email of each person you invite to the file.

Note

Figma’s free plan only allows two users to have edit access to a file, which should be enough for most side projects. To add more editors to a file, you need to upgrade to a paid plan.

Great job. You’ve now learned how to share your designs and prototypes with others so they can give you their thoughts and suggestions. Before proceeding, you’ll look at how to change the access controls for users you’ve already invited.

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.

To change the access rights for the design file, click the Share button to bring up the share menu. Here, you can edit the access controls for existing viewers and editors.

If needed, you can remove viewers and editors from the files by selecting the Remove option from the drop-down.

To modify the prototype’s access controls, click the Present button to open the prototype in a separate tab. Then, click the Share Prototype button to bring up the share menu. The options to modify viewers’ access and remove them are the same as those you used to modify access for the design files.

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.

This changes your mouse pointer to a marker you can place anywhere in the design file. When you place the marker on the design by clicking the canvas, a dialog box will open. This allows you to leave comments, feedback or suggestions.

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.

Depending on your team’s preferences and set processes, you can use different tools and platforms to collate and track feedback. Still, the essence of the feedback process tends to stay the same.

In this hypothetical scenario, the design has received two pieces of feedback.

One comes from an actual user who interacted with the prototype:

The other comes from an internal stakeholder:

If you recall, you built a filter feature in the chapter on wireframing. However, you never actually designed the feature — showing what happens if you don’t tackle critical use cases and iron out functional constraints during wireframing. In this case, user testing and feedback acted as a safety net, letting you address the point of friction in a user’s flow.

Imagine if you just went ahead designing the app according to your assumptions without involving others in the decisions and without feedback from the end-user. You’d still have a good looking app, but it would have some massive functional flaws.

That’s why collaboration, testing and feedback are essential elements of a great design team’s workflow. They not only help you build a better, more inclusive product but also give you a broader perspective into the problem you’re solving.

First, you’ll work on the filter feature. When that’s done, you’ll tackle the movie list iteration.

Designing the Filter Feature

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

• Genres
• Release year
• Director
• Duration

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.

Next, from the assets, add the icon_filter icon above the circle and center the icon both vertically and horizontally within the circle.

Group the circle and the icon and name it filter-button.

Constrain this group to the bottom and right and check the Fix position when scrollingoption.

To check that the button stays anchored to the bottom when scrolling, click the Presentbutton to open the prototype. When you scroll the movie list, the button stays in its location.

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 Mediumand a font size of 12.

Keeping the layer selected, click the Style button, and create a new text style. Name it Filter Text.

Next, open the Components page and create a new frame (F) measuring 242×92 and name it Filter.

Add a new text layer (T) to this frame with the text Action. Use the newly created Filter Texttext style for this layer.

With the layer selected, press Shift-A to create an Auto Layout frame from the text layer. Name it criteria.

From the Stroke section of the Properties panel, give the criteria frame a stroke of width 2using the color style text/accent. Make sure you apply the stroke to the Center.

Change the criteria frame’s corner radius to 5.

Next, from the Auto Layout properties section, click the Alignment and padding option.

Change the Horizontal padding to 8 and the Vertical Padding to 2.

Finally, change the text color to use the text/accent color style.

Duplicate the criteria frame to the right with a margin of 8 and change the text to Drama.

Repeat the process once more, changing the text to Fiction. Group the three criteria frames and name the group Filter/Unchecked.

You’ll need a checked variant of the filter criteria as well.

Instead of building it from scratch, duplicate the Filter/Unchecked group and rename it to Filter/Checked.

Expand the group and select the three criteria frames, then remove the stroke.

Add a fill to the three frames using the text/accent color style.

The text is hidden at this point. To fix it, select the individual text elements in the group and change the color style to text/secondary.

Select Filter/Unchecked and create an Auto Layout frame (Shift-A). Give it horizontal and vertical padding of 0 and item spacing of 8. Do the same for Filter/Checked.

Finally, select the Filter/Unchecked frame and create a component by clicking the Create component button on the toolbar or selecting the group, right-clicking and choosing the Create component option.

Do the same for Filter/Checked.

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.

Select the frame and reduce its height to 896.

While you’re at it, lock the movie-list, bottom-nav and status-bar frames since you don’t need to modify them.

Next, add a rectangle (R) to the frame measuring 414×448 and place it right above the bottom-nav. Give the rectangle a white fill and name it filter-background.

Apply a Drop Shadow from the Effects options to the filter-background with X and Y set to 0.

Add a text layer (T) on top of the filter-background layer and give it the text Genres. Apply the Section Header text style to this layer and name the layer genres-filter.

Place it at a margin of 32 from the top and 24 from the left.

Next, from the Assets section, add a Filter/Checked instance below the Genres text layer.

Place it at a margin of 16 from the top and 24 from the left.

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.

Swap the component to Filter/Unchecked.

Duplicate the unchecked criteria row and place it at the bottom of the checked row. Give it a margin of 12 from the top and 24 from the right.

Change the criteria text to Thriller, Horror and Mystery.

For the final criteria, add another Filter/Unchecked instance to the right at a margin of 8 and change the first criteria to Musical. Select the other two criteria and hide them.

Now, select the genres-filter text and the four filter instances and group them. Name the group genres-category.

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.

The filter UI will have two more categories, Directors and Duration. Repeat the steps you followed this far to create these two categories.

As shown below.

Feel free to refer to the final project if you need help.

Finishing up

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

Select the top right and top left corners, hold Shift and click each one. Give the selected corners a corner radius of 16.

Finally, from the Assets section, add the icon_collapse icon and place it on the top-right of filter-background at a margin of 16 from the right and the top.

Here’s how the final version looks:

Group all the elements that make up the filter UI and name the group filter-sheet. Constrain the filter-sheet to the center and bottom and check the Fix position when scrolling option.

Great job designing the filter UI. You’ve just solved one of the app’s pain points and you’ve improved the user experience considerably in the process. Next, you’ll iterate on the movie list screen and create a new variation to incorporate the PM’s suggestion.

Creating the Movie List Iteration

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

In the new movie list variation, you’ll emphasize the immersion aspect of the feedback which will also take care of making the screen stand out more.

To give you a sneak peek, here’s what the new version will look like next to the current version.

Lucky for you, the iteration will be relatively quick because of the way you’ve structured your project so far. You’ll leverage components, styles and existing layouts to make your changes.

Inside Cinematic App, add a new iPhone 11 Pro Max frame (F) to the canvas and name it movie-list-immersive.

Copy the backdrop group from the movie-details frame and paste it into the new frame.

Change the dimension of the backdrop group to 414×896.

Next, select the backdrop-gradient and movie-image layers within the group and change their dimension to 414×896. Center the backdrop-gradient and movie-image layers horizontally and vertically and center the backdrop layer horizontally and vertically within the frame.

Here’s how the final version should look:

Next, copy the bottom-nav and the status bar instances from the movie-list-filter frame. If you locked them earlier, you’ll have to unlock them first. Finally, paste them into the movie-list-immersive frame.

The status bar and bottom navigation now retain their positions.

To prevent unintended modifications, lock the bottom-nav, status bar and backdrop layers.

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.

Give the rectangle a corner radius of 24 and a white fill and place it below the status bar.

Give it a margin of 80 from the top and center the rectangle horizontally using the alignment options on the Properties panel’s top. Name this rectangle movie-card-background.

Add another rectangle (R) measuring 238×343 to the frame, above movie-card-background. Give the rectangle a corner radius of 24.

Place it at a margin of 31 from the top, right, and left.

Give this rectangle an Image fill. Select the Birds of Prey movie poster from the movie-imagesfolder that came with the downloaded files.

Name this layer movie-image.

Good going! Next, add a text layer (T) to the frame with the text Birds of Prey. Place it below the movie-image layer at a margin of 20 from the top and apply the Title text style. Center the layer horizontally. Name the layer title.

Now, copy the movie-info and genres instances from the movie-details frame and paste them into the movie-list-immersive frame. Center both the layers horizontally.

Place movie-info below the title layer with a margin of 16 from the top. Place the genresinstance below the movie-info layer with a margin of 16 from the top.

For the final piece, add a rating instance below the genres instance from the Assets section.

Apply the text/muted color style to the rating text and center it horizontally with a margin of 20 from the top.

Group all the elements that make up the movie card and name the group movie-card.

Adding finishing touches

Finally, to add the finishing touch to this list, duplicate the movie-card group towards the right at a margin of 42.

When you do so, the duplicated instance will jump out of the movie-list-immersive frame. Notice the same on the Layers panel.

To fix it, in the Layers panel, simply drag the duplicated instance back into the movie-list-immersive frame, and you’re good to go.

Repeat the same process and duplicate a movie-card instance to the left at a margin of 42. Group the three movie-card instances and name the group movie-list.

This is how the final version will look:

Great job! The final designs look great at this stage, but more importantly, you’ve fixed the issues with the functionality and improved the user experience. In the real world, the feedback and testing phase in a design cycle takes more time due to the nature of the process and multiple moving pieces, but this simulated scenario gives you a sense of the process.

Key Points

• You learned how to prepare your designs and prototypes for sharing.
• You learned about the different collaboration tools Figma offers.
• You learned how to provide design feedback using the comment tool.
• You then incorporated user feedback to solve a functional issue.
• You finally incorporated an internal suggestion to iterate on the movie list screen and make it more immersive.

In the next chapter, you’ll build a design system from the project’s different elements and prepare to share it widely within your organization.