What is prototyping

Take a look around your office, computer, and smartphone: most of the ingenious modern products you use daily started as humble prototypes. To create a prototype, designers use rapid iteration to make, test, and incorporate feedback into a product design.

"Prototyping is a quick way to go from sketches or wireframes to a simulation where you can get user feedback,” explains Tom Lowry, Director of Advocacy at Figma. "With Figma's prototyping tools, you can turn sketches into a series of interconnected screens, so you can see how a user can navigate through an experience—without having to write any code."

Why does prototyping matter?

"The goal of a prototype is to ensure your design works in the hands of the user," Tom explains. “Getting feedback on a prototype is one of the easiest and cheapest ways to get feedback, before you spend a lot of money building something that might not meet user needs. Then you'd have to spend even more to course-correct."

Creating a prototype allows design teams to hone a product concept before it's built and launched—saving time, money, and headaches for everyone involved. Prototyping helps designers at every step of the design process, in three specific ways.

1. Validate early concepts

In a design sprint, you can bring your concept to life with a rapid prototype. This helps stakeholders align on what's being designed, giving everyone a realistic depiction of what the experience will be.

2. Facilitate communication

Whether you're working with clients or talking with your CEO about goals and needs, you've probably noticed that designers and non-designers often speak different languages. Figma has commenting features to share perspectives and feedback, so that everyone's on the same page—and nothing is lost in translation.

3. Refine features and flows

When you’ve designed something from the ground up, it becomes hard to see it with a fresh eye. No matter how much research you’ve incorporated into your initial design, rote data can’t replace user testing with a prototype.  This will expose UX challenges that weren’t obvious during planning, and enable quick and easy changes to UI.

Low-fidelity vs. high-fidelity prototyping

There are many kinds of prototypes, but most fall into two basic categories: low-fidelity and high-fidelity.

Low-fidelity prototypes

Designers use "lo-fi" prototypes at the beginning of concept development. A low-fi digital prototype might have simple transitions between screens, but nothing elaborate. Despite their simplicity, low-fidelity prototypes are powerful tools to inform design and development. For example, if stakeholders request new functionality, a low-fidelity prototype can validate (or invalidate) the idea before too many product design and development hours are dedicated to it.

Low-fidelity prototypes are usually:

• Quick and easy to create and revise
• Simple, like a sketch or a flowchart
• Limited in functionality, with just enough detail for a proof of concept

High-fidelity prototypes

"Hi-fi" prototypes are closer to the finished product, and may even evolve into the finished product. Midway through the design process, a high-fidelity prototype might focus on evaluating one specific, high-priority feature, while other features remain works in progress. Later project phases may demand higher fidelity prototypes, with more design polish, interaction fidelity, and logical flows.

High-fidelity prototypes require more time to create and revise, with designs that:

• Solve UX and UI problems with refined functionality and interactivity
• Include specific, fully functional features for user testing
• Cover more details, including conditional logic, micro-interactions, polished animations, even hardware functionality (like phone cameras or sensors)

Pro tip: build the right prototype for the challenge at hand

Different challenges in the design thinking process call for different prototypes:

• Paper prototypes sketch out rough ideas of site or app architecture, functionality, and user flow/journey. Paper prototypes are easy to change on the fly—but less effective to give users a feel for the end product, or collect helpful feedback.
• Low-fidelity digital prototypes bring basic wireframe models to life. Coding skills aren’t necessary to build engaging interactive prototypes with Figma’s easy-to-use prototype templates. Designers and software developers can quickly mock up functioning UX and basic UI, creating real-world prototypes that give users a better sense of how the product will work in practice.
• High-fidelity digital prototypes include greater functionality and realistic design details, like color, buttons, menus, and interactive elements. Figma's prototyping tool lets designers add polish and functionality quickly—no coding required. Programmers and engineers can incorporate feedback and design improvements into coded components, transforming prototypes into finished products.

The secret to better prototypes

“Prototyping is vital to successful design—and teamwork is the most critical piece of the prototyping process," says Tom. "Effective communication between all your project stakeholders is the best way to identify areas for improvement and find problems designers might otherwise miss." Figma makes it easier for designers and programmers to brainstorm and iterate in real time, with collaborative cloud-based tools that won't lag when multiple users work simultaneously.

"Without prototypes to quickly validate ideas and design decisions, you're investing a lot in your build before users even try it—and that's a big risk,” notes Tom. But building prototypes doesn't have to be hard. Tom recommends kickstarting your prototype with a FigJam prototype template, and using Figma's professional guide to prototyping to build, test, and refine your prototype for success.

Go to next section

Sources

[1] https://www.interaction-design.org/literature/article/design-thinking-get-started-with-prototyping

[2] https://www.interaction-design.org/literature/article/stage-4-in-the-design-thinking-process-prototype

[3] https://blog.adobe.com/en/publish/2017/11/29/prototyping-difference-low-fidelity-high-fidelity-prototypes-use

[4] https://careerfoundry.com/en/blog/ux-design/design-thinking-stage-four-prototyping/