Product designers, if you haven’t started prototyping, it’s time to start
Do you remember that assignment in school where your teacher asked you to write up directions for making a peanut butter and jelly sandwich? It was a laughable task until your teacher followed your directions to a “T,” which would lead to a humorous yet frustrating outcome. Even after the laughter subsided and you made revisions, the teacher could not make a sandwich.
We internalize knowledge, this is a crucial survival skill, but it can make collaboration with others challenging. When we expect people to know what we know, see what we see, and jump to the same conclusions it doesn’t lead to a “peanut butter and jelly sandwich.” Instead what we have is a confusing mess.
I’ve left my fair share of meetings with design teams and stakeholders frustrated because they didn’t ‘get it.’ I was frustrated they couldn’t see it, but the reality was I wasn’t doing an good job of bringing them along. It was unfair to expect buy-in as I scrolled through a messy file of explorations hoping they would see the treasure I created. My thoughts and designs were scattered, and there was no rhyme or reason to what I was presenting. So why should they get it?
If my teammates don’t understand what I’m designing, how can I expect them to build something that our customers will?
How do you help people see what you see?
Make it easy for them. Build a clickable prototype. “A prototype is an early sample, model, or release of a product built to test a concept or process.” In product design this is the process of building out interactive experiences and flows with static designs.
Prototyping helps others make the mental leaps that you’ve internalized by walking them through a user flow in a consumable way. This is design 101. If you want someone to do something, remove the cognitive load and friction preventing them from taking that action. In our case, it’s understanding the solutions we are proposing. We need to design ways for people to understand our designs (so meta).
Tools like Figma have removed the barriers to creating clickable prototypes. Gone are the days of cumbersome uploads and managing multiple apps. Instead, make a design, click a layer, set a trigger, and publish.
Prototypes help communication
Sales teams use slide decks to pitch ideas. Designers use prototypes to pitch ideas. These prototypes communicate solutions, create assets for engineering discussion, and facilitate buy-in from stakeholders. Prototypes keep people focused.
Prototypes expose bad patterns early
Have you ever designed an interaction and had an engineer build it only to realize things didn’t feel great? It wasn’t the engineer’s fault. It was a poor design decision. Prototyping can get us closer to a finalized state and help us vet an interaction or flow before we invest in developing the final solution. With prototyping, you can explore many versions of a solution with relatively low time investments.
Prototypes come in all shapes and sizes
Prototypes don’t need to be fully interactable to be powerful. For example, you can create a happy path using a couple of keep screens and funnel the user experience to tell a story. Use voice-over to tell a story and fill in the details synchronously or asynchronously.
Prototypes paired with a recorded walk-throughs are powerful assets
One thing I’ve embraced is the power of asynchronous communication. Creating a prototype and recording a quick walk-through with a tool like Loom can drive home your storytelling. Send a Loom to coworkers or clients before a meeting to build context or propose a solution without a meeting. Walking through a prototype with your commentary is practically a cheat code that can bring people along.
When to skip a prototype?
A prototype isn’t necessary for every task. There a plenty of times when a static mock will suffice:
- When there isn’t an interactive component to what you are designing
- When the user experience is static
- Content updates
- Rearranging layouts basic layouts
Even if you skip a prototype, think beyond that static mock. Something usually happens before and after the user engages with what you are designing. Understanding the whole picture can help you make better choices. Prototyping enables you to think through flows and journeys. They allow you to see the bigger picture.
How to start
Having my designs in the same place as my prototypes was a game-changer for my workflow. Most design apps now have built-in prototyping. Both Figma and Sketch have some helpful getting started guides:
There are tutorials all over the internet. Do a quick YouTube search and you’ll be set. Good luck, and go make some clicky things!