Why Meta Uses ProtoPie for High-Fidelity Prototyping & User Research

Meta is best known as the company behind Facebook and Instagram. But, you may have heard that their recent rebranding saw them venture into the AR/VR market, with a goal of unifying physical and digital worlds.

When designing the digital experiences of tomorrow—especially at the caliber of Meta—creating high-fidelity prototypes saves you from making mistakes that cost valuable development time. However, for some time, product designers at Meta had been frustrated with the accessibility gap between the existing prototyping tools in their tech stack.

That is, until they found ProtoPie.

In our latest webinar, we met Jon Bernbach, a product designer in the Internal Design Tools team at Meta. His team designs and builds tools to help product and content designers do their jobs at scale. Here, you can hear him talk about where prototyping fits into Meta’s design workflow, as well as how and why he choose ProtoPie as his team’s go-to prototyping tool.

Prototyping as a big part of Meta’s product development cycle

At Meta, they maintain high standards for their products by moving testing and quality assurance to an early point in the development process. This is known as shifting left.

“Everything to the ‘right’ of implementation or going public with your product can be very expensive in terms of development time and engineering,” Jon explains. “The idea is to keep quality to the left and try to pinpoint issues and mistakes before you get to that stage.”

Shifting left is a big part of what Jon’s team is trying to get teams to do more of, meaning things like:

• Adhering to existing design systems and components.
• Using correct colors.
• Following accessibility heuristics.

In practice, that means they are asking teams to do a lot of prototyping and user research. And of course, to do that, they need the right tools.

Why it is important to prototype designs

According to Jon, there are three key areas that showcase the important role that prototyping plays in developing great products.

1. It communicates design experiences

Prototyping, especially for innovative digital experiences, increases your team’s velocity by reducing miscommunications that can occur when presenting only static mock-ups.

Reviewing prototypes also helps your team make more informed and strategic decisions, and align on what is happening so you don’t have to guess or make assumptions.

2. It unblocks design research

User testing with prototypes dramatically improves usability gains with each round of testing.

With prototypes, a team doesn’t need to rely on A/B experimentation after implementation. This is a very popular practice in technology, especially at big tech companies where it is common to implement a couple of options and then do A/B testing to determine which product is the best fit.

But, unfortunately, sometimes not even A or B is the correct solution to a problem. That’s why it is so important to keep things to the left, as it helps mitigate instances of wasting development time on products that are bound to fail.

3. It improves product quality

By shifting interaction design and decision-making into the hands of designers rather than engineers, product quality is all the better off for it.

The question is, while we know prototyping can help level up quality, why haven’t designers been including much of it in their design process?

Bridging the accessibility gap between prototyping tools

Meta’s internal research showed that a very small percentage of designers at their company used prototyping tools as part of their workflow.

And the reason for that was that Meta designers who needed to create mid-complexity prototypes were frustrated by a significant tool gap.

While they do use prototyping tools like Figma, Origami and Framer at Meta, their designers found that:

• Figma is great for low-complexity prototyping, but it is limited in what it can do. There are also security risks when it comes to testing on participants, using prototypes outside of Meta and other onboarding obstacles.
• Other tools like Framer and Origami Studio, which they built in-house at Meta, are amazing for high-complexity prototyping. The challenge has been the difficulties in learning how to use the tool, which frustrated and deterred many designers from prototyping.

At Meta, they know from experience that when a team doesn’t incorporate iterative prototyping and research into their product cycle, the result tends to be lower quality experiences.

Jon realized that this tool gap was a significant problem they needed to fix. He set two main goals:

• Fill the mid-complexity prototype gap between Figma and Origami
• Identify a viable prototyping tool to help supercharge secure, iterative design research at Meta.

After assessing thirteen different tools and features, ProtoPie stood out as the tool that was most aligned with the future needs of the most common product designer and UX researcher.

Why Meta's designers are choosing ProtoPie

Jon finds ProtoPie a great tool for anyone who wants to prototype realistic animation interactions, transitions that are not within Figma’s capabilities and sometimes difficult to figure out in tools like Origami Studio or Framer.

He also says it is super ideal for prototyping experiences seen in mobile apps. Another great future is ProtoPie Connect, which they have been using in the reality labs to prototype with external hardware such as the Oculus headsets, smart watches and other IoT devices.

1. A low-to-medium learning curve

The mental model of ProtoPie is easy to grasp, and there are a number of free and paid educational resources to help you get the hang of things. This was a huge factor for Jon in choosing ProtoPie.

His team was looking for a design tool that designers can learn relatively quickly and feel excited about using. If they had chosen a tool that had every capabitility under the sun, but wasn’t accessible to designers, they would have just ended up with low adoption and their problem of bridging the tool gap wouldn’t be solved.

2. No-code, no-variant prototyping tool

Based on Meta’s research, code is often an aspect that makes or breaks a tool in the eyes of designers. For example, tools like Framer have low adoption rates because of the high intensity coding aspect to it when doing very complex or mid-level complex things.

ProtoPie’s integration with Figma was another must-have, as Jon says they wanted a non-variant prototyping tool where designers don’t have to do everything from scratch. According to him, they can accomplish a lot more without having to design a lot of screens.

“It’s kind of like hacking your way to a prototype,” Jon tells us.

3. Secure and growing remote research capabilities

Being able to share prototypes with test participants outside of Meta securely and through web browsers was another important factor.

While it is also great to have native Android and iOS previewer apps, web browsers are a must in the current remote research environment. That’s because test participants don’t really want to download a lot of apps.

Instead, they just want to go on to a website and start looking at a prototype, so it is much simpler for UX researchers at Meta to use ProtoPie when doing their testing sessions.

Learn more about user testing.

4. Flexible, forgiving and highly usable

“ProtoPie has found the sweet spot of a powerful interaction design tool that is relatively easy to adopt,” Jon says.

With features like variables, conditions and custom components, designers have the ability to realistically prototype anything beyond what you can do in Figma.

And while ProtoPie is nearly as powerful as Origami Studio and Framer, the modern interface follows a lot of familiar design patterns that makes the experience more intuitive for designers.

In addition to these four reasons, other must-haves for the team at Meta when choosing ProtoPie were:

• Access to the device’s camera, sensors, and voice UI
• Share and collaborate with XFNs via cloud account
• Real keyboards and multi-touch gestures
• Real-time interactions across multiple devices

Onboarding Meta's designers to ProtoPie

It takes lot of work to onboard employees to new software at a large company like Meta, because of steps like SSO implementation, creating presentations to promote the tool, getting designers ramped up with educational materials and troubleshooting along the way.

Watch the following video to find out more about how Meta started using ProtoPie.

Only a small amount of people at Meta already had experience with ProtoPie. However, Jon found that during the onboarding process, some people were learning quite fast and jumped into help others get up to speed.

They worked with researchers separately as they are a completely different user group. The process entailed telling them how to

• Navigate the cloud account
• Set up a prototype so it is secure
• Make sure a test participant cannot engage with a prototype after the research session.

How ProtoPie became the go-to prototyping tool for Meta

Learning a new tool will always be a challenge for most, especially in a fast-paced development environment like Meta.

But, according to Jon, early engagement signals are overwhelmingly positive, and they are seeing results that they never considered before:

• Prototypes are being used in reviews as well as research, which Jon was surprised to see happening so quickly. Designers are also learning the new tool, so to see them actually using it quickly and ramping up somehow and then using it in their reviews for new ideas and in research session was a really big deal that gives them a lot of positive validation.
• Designers are advocating and evangelizing the tool on their own teams. Designers that Jon was not even aware of on the pilot are using ProtoPie and finding out that it actually fits the needs of their team. As Meta is large, you don’t necessarily always know what is going on on everybody’s team, so it was very satisfying to find that ProtoPie is spreading organically even beyond the initial pilot program.

Moreover, ProtoPie fits into the workflow of the VR team working on the Oculus headset and hand controllers.

Designers for the VR team are exploring how to prototype 2D experiences to test inside headsets. They are also currently working with ProtoPie to develop features to make their headsets more immersive.

In this example of a prototype, the designer used variables and formulas and other sophisticated interactions to make everything happen.

The designer learned ProtoPie in a couple of days, and by the end of the week he was prototyping quite advanced stuff. This, Jon says, is a testament to the ease of learning ProtoPie, and stood out as a big opportunity for making ProtoPie the go-to tool for the team.

“By using ProtoPie, the team’s production velocity increased since the prototyping can be done without an engineer,” Jon says. “The future looks bright for ProtoPie in the current market, as it found the sweet spot for being a prototyping tool for designers when Figma just won’t do.”

Discover a powerful tool that helps you express your ideas at ease

Join Meta and 15,000 other companies in using ProtoPie for high-fidelity prototyping. Try ProtoPie for free now.