The benefits of creating a product surfaces collection

How we created an easy-to-search collection of key product surfaces in Figma

Here at Pinterest, the Product teams are structured around many initiatives, all working in different areas of our product but with one goal: creating a delightful user experience. To achieve this, we lean on cross-functional collaboration and nonstop iterations for improvement. And when a company scales into so many product teams, with each team developing and creating the user experience of their product areas, it becomes hard for cross-functional collaborators to find certain assets or screens or for marketing folks to find the most up-to-date mock-ups.

So, with that in mind, let’s put our creative hats on and imagine you’re a designer here at Pinterest. You need to find a few product mock-ups that relate to a new feature you’re working on, but they belong to a different team. You reach out to a few folks and look through the many files we have at the company, but you can’t really find the asset you’re looking for. Since this is delaying your work, you decide to rebuild the necessary mock-up (we will call them surfaces from now on) for your project, which knocks a few hours out of your work day and slows down your productivity.

Not fun for anyone, right? Besides slowing productivity, it causes friction across teams, and effective collaboration is one of the foundations of our organization. So the question is: how can we curate a usable, discoverable and efficient collection of product surfaces so anyone at Pinterest looking for common screens and patterns can find them?

Discovering internal structures

The idea of having a collection of key surfaces was on the wish list for a long time. But we can’t just put all of the many product surfaces inside a single file and call it a day — that can lead to frustration and reduced adoption, which puts us back at square one. So, the first step in creating this collection was to interview designers inside the company to understand their needs. We wanted to get a better sense of:

• designers’ expectations when searching for surfaces
• where the surfaces should be located
• how they intend to use this collection
• the pain points that get in the way of easily finding surfaces from different teams

By learning from the designers, we could make more informed decisions and reduce the risk of creating an unused library.

What we learned

The first main discovery was that each team has different needs when using a product surfaces collection, but almost everyone highlighted that it would be ideal to use as a point of reference: product screens to show stakeholders, facilitate design decisions, improve communication between teams and speed up the design process.

The collection could also help areas such as engineering and marketing: a place to understand which pieces are shipped and launched, how surfaces differ between platforms and mock-ups of how an advertisement looks on Pinterest. One of the primary topics mentioned by interviewees was the difficulty in understanding ownership of designs due to how initiatives are structured. Teams also have their own processes in place, so the naming of files can get specific and require context to understand what they refer to. In the end, searching for specific surfaces in different product areas amongst all the files inside of Figma leads to constraints and time lost. Each initiative has its unique and special way of organizing and structuring content — which is perfectly fine when you’re familiar with it, but when outsiders face this lack of holistic structure on a broader level, it creates a bottleneck in our decision-making process.

Learning how this collection would be used, the audience and the problems we currently face helped us define the best location for the library, the appropriate information architecture and how all users would expect to find the information they’re looking for.

Organizing the product surfaces collection

To make sure our product surfaces collection is beneficial and useful for everyone, we needed to make sure we were addressing the pain points when putting our library together. Since Figma is the design tool used at Pinterest, we decided to keep all surfaces there so they are available to anyone at the company. Defining the information architecture of files was key to improving discoverability and minimizing the confusion of ownership. We also leveraged Figma’s organizing tools, such as Teams and folders, to arrange the content.

Due to the org structure, sometimes the same product area belongs to two or more teams. So instead of following the organizational structure, which is subject to changes when reorgs happen inside the company, we decided to follow the Pinterest product. But, how does that work?

We’re all familiar with Pinterest’s core product — which is where we gather all the inspiration for building the life we want — but Pinterest also serves businesses and has many surfaces relating to advertisers and business partners. We started with an overview of the business side and the core product architecture, separated them, and began to divide their structure into logical chunks, such as “Profile,” “Home feed,” etc. Then, the bigger folders were organized into smaller ones, separating them into sections to remove the guesswork in locating files. Now, a single file might contain designs from different teams, but anyone can easily locate files: brand-new designers, managers, engineers, marketers and more. Also, if a reorganization of teams happens, the fundamental structure of the files continues to be the same. A win/win!

Defining the best way to organize surfaces inside each folder was also fundamental to guaranteeing they’re easily discoverable inside a huge file. The Pinterest Home surfaces can have many variations, and they all need to be easily found. So we structured a division of bigger categories and continued to divide the surfaces into more granular categories. We initially focused on the platform for each surface group (e.g.: surfaces for desktop and iOS), and inside the platform group, we focused on the function and purpose of each surface to further simplify the process of locating a surface inside a Figma file that can contain thousands of screens. Finally, we narrowed the surfaces into individual frames containing user flows, with groups having clear labels to make them easily identifiable. Then, we applied this logic across all files for consistency.

Finally, a small detail that makes a ton of difference: we also included the points of contact and owners of projects inside each file to facilitate communication between teams.

Results, benefits and future plans

So why is all this work important, you’re wondering?

There are many benefits to building a product surfaces collection that encapsulates every area of our product in a single place. Some of the benefits we’ve seen so far include:

1. Establishing a single source of truth. The main benefit is having a single reference point of all key product surfaces in a single place.
2. Improving collaboration. Making this source of truth accessible to all colleagues can significantly improve collaboration beyond just Design.
3. Facilitating design decisions. It also facilitates design decisions and work between teams by increasing the visibility of key initiatives.
4. Speeding up design processes. It can speed up the design process just by simply having one well-organized and universal reference file to look at when searching for specific product surfaces for the next great design iteration.

It is worth pointing out that such awesome work is not possible without a major collaborative effort between many design teams to guarantee the mock-ups are up-to-date and reflective of what’s currently in the product. Since development at Pinterest is never-ending, a detailed maintenance plan and sync with all collaborators involved is key to maintaining this collection and keeping it useful for all. The trade-off of dedicating a few hours every quarter to maintain this effort significantly improves how aligned design teams are inside the company. And, if a library of this size isn’t updated regularly, chances are its contents will be worthless pretty soon. Ultimately, designers should take ownership of their work and think holistically about how this effort supports other areas.

Now, if we go back to the hypothetical situation we discussed earlier, and put our creative hats on once more, the scenario we pictured earlier gets very different — when looking for those key Figma mock-ups to speed up your project, you have access to an extensive and well-organized library to find exactly what you’re looking for!

To learn more about Pinterest Design, follow us on LinkedIn.