How Webflow thinks about prototyping and Loom videos

Webflow's Head of Product Design dropped some prototyping knowledge bombs on me recently...

Here are two ideas that really stood out:

1 — Types of prototypes to drive alignment

​Kevin Wong said there are two types of prototypes that designers can use to drive alignment in the team 👇

1. 🌅 Lighthouses:

   • These prototypes cast a wide net to shine a light on all possibilities (nothing is left off the table).

   • The goal is to stretch people's imagination about how a problem might be solved.

2. 💥 Lasers:

   • These prototypes go as far and as deep as possible into a single direction.

   • This is when design needs to start thinking about data models, potential states, user permissions, etc.

It's your job to understand what the company needs based on where you're at in the design process.

Then you can create the right prototype for the job 💪

2 — Ways to improve your Loom videos

Most of the prototypes at Webflow are shared as async videos (which is becoming a skill in itself).

So I asked Kevin for specific tactics that you could use to improve your Loom videos. Here's the TLDR:

1. 🗣️ Speak to one person:

   • Ask yourself who it's most important that you receive feedback from and tailor your format 100% for them.

2. 🧠 Give the right context:

   • Before getting into specific screens, take a minute to communicate the problem you are solving, what insight you have, why you're exploring this now vs. later, etc.

3. 🙋 List your feedback request upfront:

   • This way they can think about their answer while viewing your designs vs. having to recall at the end of the walkthrough.

4. 🎭 Role play:

   • Talk as if you're the user (ex: "I am this user, I work for this company, I am trying to accomplish [JTBD], I'm feeling [emotion], etc.

5. 🏺 Emphasize "wet clay":

   • Call out the parts of your prototype that are the most fuzzy and emphasize that you're all shaping this together. That way people don't get hung up on what's not making sense and feel more comfortable sharing their ideas.

6. 🔗 Use the description:

   • Include the link to the Figma prototype and any supporting docs in the Loom description so that people can easily go deeper if they want.

There's a lot more insights where that came from 👇

👀 Inside design at Webflow

As soon as Webflow Conf 2023 happened I knew that I had to talk to Kevin Wong to get the backstory behind the rebrand and all the new features.

This is that episode :)

One of the segments I found especially interesting was hearing how the design team approached a massive visual overhaul leading up to the conference date.

Webflow has always been one of my favorite design-driven companies and we can all learn a ton from how they work.

Listen on YouTube, Spotify, iTunes, or wherever you get your podcasts 👇