Why Prototyping is a Must for TeamsWhy Prototyping is a Must for Teams

Every product team knows the challenges of translating design into code. Learn how prototyping helps overcome these pain points.

avatar

Jarrod Drysdale

January 16, 2020

The following is a guest post by Jarrod Drysdale, Product Designer. Tens of thousands of designers read Jarrod’s newsletter, books, and courses. He’s also the founder of a design collaboration tool called Mod&Dot and a 15+ year veteran of the design industry.

No matter how long you’ve been a designer, you’ve certainly experienced the speed bumps that happen when development on a new product begins.

There’s "design handoff" and the ensuing competition between design and development priorities. Or, design changes that happen mid-development causing delays. And you’ve surely witnessed stakeholders and user testers misunderstanding design flows, leading everyone down the wrong path.

But there’s good news: for modern design teams, these problems are old news. Let’s take a moment to walk through common issues facing product design and development teams, and a good prototyping tool can help your team move past issues, providing renewed focus on your product.

Move beyond static

The main thing that keeps many teams stuck in the cycle of using static mockups is that prototyping is too time consuming. Designers get the bare minimum time needed to make a rough representation of the UI for developers to build, and that’s it.

But this very approach is what causes common delays and issues in the traditional 'design handoff' workflow. When the design isn’t thorough enough because designers didn’t have the time or when design hasn’t been user tested before handoff, problems are guaranteed to crop up during development. And let’s face it: not every team has a unicorn who can tackle gaps in the design during development to keep things on schedule. Developers will find hover states or form validation styles that weren’t provided. New edge cases will pop up. Technical constraints will force things to change. And then, your release will be delayed.

Moving beyond static design into prototyping allows teams to avoid these kinds of issues and fully vet and detail the product before development begins. While prototypes sometimes take a little extra time, they are still much less expensive than the development delays many teams deal with daily.

Further, prototypes don’t take as long as you might think, using the right tools. In Framer, both visual design and prototyping happen in the same place. Prototyping becomes part of the design workflow by default, and designers can create surprisingly high fidelity click-through prototypes in minutes, without writing any code. Through canvas tools and pre-made interactive components, Framer allows you to quickly whip up realistic prototypes that get everyone on the same page.

Present the full experience

How many times have you presented a mockup to a client, exec, or stakeholder only to spend most of the meeting trying to explain what a mockup is rather than the design direction itself?

While that can be frustrating, if you think about it, it’s no ones fault but ours as designers. If the way we’re presenting our work is hard to understand, then we need to change how we present our work.

We’ve all championed new user-centered design techniques, but we’re still neglecting the very first users of our work: the people who approve it.

Static mockups are a stumbling block for everyone who isn’t a designer. Stakeholders need to see interactivity, micro interactions, and user flows to understand how a design will work. By adopting prototyping, design teams will see increased understanding and appreciation for their work—not to mention quicker approval than with static assets.

In Framer, you have complete control over how deep your prototype becomes. You can create simple micro-interactions, fancy animations, and page transitions, or full-fledged component-based prototypes that export directly to production-ready React code. You get all the power and flexibility you need to create design assets everyone will understand.

Enjoying this post?

Sign up to our email list to get the best of the Framer blog sent directly to your inbox.

Close the design and development gap

Perhaps the most infamous struggle product teams face is when designers and developers sit down together. But most of this infamous struggle is caused by static design mockups. As mentioned earlier, designers are the only people who really understand them.

While some developers certainly possess considerable design savvy, just don’t have the experience with design to help them understand the design direction from a simple snapshot. Designers are comfortable stitching together workflows in a mental model from static comps—it’s almost instinctual to us and we might not realize that—but others can struggle to see the macro perspective. Prototypes make this big picture easy for everyone to grasp, so there is less confusion about how everything works when development begins.

That underlying confusion is what leads to the infamous conflict between designers and developers. Interactive prototypes show exactly how the product works and behaves, so that developers aren’t missing critical information when they begin their work.

But Framer takes this even a step further by allowing design assets to become development assets. All the details are baked right in so that misunderstandings become much more rare. When a designer creates a component in Framer, under the hood, it is a real React component. Developers can grab that code and get a huge jump start in development, and designers retain more control over design details.

handoff

Get better feedback from user testing

As your team adapts deeper Product Design workflows, you’ll realize that design is not merely illustrating what the app should be so that developers can build it. Now, design means discovering what the app should be and demonstrating how it should work. To discover and demonstrate concepts, user testing and prototyping need to be part of your workflow.

But the problem is that user testing before development begins is difficult for many teams because all they have are static mockups. User tests on static mockups are fine in some situations, but often designers need more information. After all, the very term 'user test' implies that there is an interface to use. If there isn’t, the resulting data can be less valuable.

Creating prototypes during the design process can help your team get more information from user testing in some situations. Designers need to be able to decide how detailed a prototype should be in order to get the information they need. Being stuck with static mockups all the time limits the effectiveness of testing.

Framer has built-in ways to run user tests with prototypes. With Framer’s Live Preview and the Page tool, you can quickly create a shareable link to your prototype, then provide it during user tests. This makes running quick, informal user tests at key points in the design process much simpler.

Build a single component library

Modern design tools allow designers to create design systems, symbols, and shared design assets. Development libraries like React, Vue, and Angular allow developers to separate logic and presentation into self-contained, reusable components.

These techniques are providing huge time savings and increasing both designer and developer happiness. It’s a great time to work in tech.

But, these techniques and tools are leading both designers and developers to become more entrenched into their own separate tools. It’s becoming even more difficult to bridge the divide as both sides have invested so heavily into their own systems.

Everyone is searching for the holy grail: the single source of truth across both design and development. But the sad truth is that most solutions only work on one side of the fence.

When designers choose Framer to create higher-fidelity, component-based design systems, they can perfectly map to development React components. Framer is the only tool that can truly provide a single source of truth for both design and development. Learn how code components in Framer X work here.

Design with real data

Lorem Ipsum is the greatest embarrassment of the design industry. Using filler text and fake data leads to incorrect design, wasted time, and bad user experiences. Designers need to leverage real data during the design process to create a quality product. Many static mockups don’t allow for this. Designers know this—but we have to proceed with fake data because sometimes we don’t have access to the real thing. Using real data can be a considerable hurdle. Accessing live data often requires help from developers or other teams. They have to run queries and convert to a format designers can use, which takes time away from their own responsibilities. With Framer’s React-based prototypes, designers can easily leverage live data from all kinds of sources without getting help from developers. Learn how to bring live data into Framer here, and check out packages for specific data sources.

real data

Move beyond the old conflicts

Teams have faced hurdles during the transition from design to development for too long. Modern design tools like Framer provide so many ways to alleviate these issues. And so do development tools like React.

If your team is still experiencing those old conflicts, it might be time to move on and give prototyping a try. You’ll find it gives your team more control and detail at key points in your process, which leads to a better product and a happier team.

Did you find this helpful? Check out some of our other resources:

Like this article? Spread the word.

Bring your best ideas to life

Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.