The Value of Live Prototyping

Transform meetings and collaboration with these tools

Posted on April 24, 2023 in Blog Posts

Imagine you’re in a meeting about a new service workflow. Patrons can now request laptops to use for a week. The goal is to figure out what the patron sees on the request form on your website. Things are getting… hand-wavy.

“So the user selects the pickup time on the request form, right?”

“Okay, then they’ll have to pick a library location first, since the hours are different for our branches. So maybe the time options can change dynamically based on the location.”

“We should say ‘preferred pickup location,’ since we might not have enough laptops if everyone chooses the same place. Then we’ll confirm the location by email.”

It’s at this point—overlapping, speculative discussion—when people might start to lose track of what they’ve found consensus on and what the imagined page and workflow will look like. That’s when I always suggest doing live prototyping.

What is live prototyping?

In a nutshell, live prototyping means sketching out an interface (like a web page or form) on a screen that everyone can see during the meeting. When someone has a suggestion, you can make the change to the prototype right then and there to see if it makes sense. The end result of live prototyping is a collaboratively created mock-up, which can be used as a reference when building the real page.

Benefits of live prototyping

• Saves time: your entire team can quickly see what does and doesn’t work, rather than having to email suggestions and mock-ups back and forth.
  
  
• Clears confusion: reduce the risk that everyone’s imagining something different by creating the prototype together.
  
  
• Fun (potentially): it can be an enjoyable team-building exercise to build something!

How to do live prototyping

You’ll need:

• A desktop/laptop computer
  
  
• Your prototyping tool of choice (suggestions below)
  
  
• Screen-sharing ability if your team is meeting remotely, or a big screen you can use if the whole team is in the meeting room
  
  
• Optional but recommended: a starter page set up with your prototyping tool ahead of time, with the website’s logo, main menu, and anything your team has already agreed on

First, explain what you’ll be doing. You might say something like: “Since our goal today is to come up with what the form looks like for the service, let’s sketch out what will be on the form. At this point, we’re just brainstorming what will go on the page, so let’s not worry about details like color or precise text yet.”

Once the team starts brainstorming, you’ll begin implementing their ideas on the prototype. For example: “We’ll need to ask for the patron’s email address!” Add the text box to the form. “We’ll need to explain what the service is first.” Scoot everything in the page body down, then add placeholder text (Lorem ipsum…) at the top of the page. If people in the meeting have conflicting ideas, try both! Screenshot one version before trying the other, or save two versions.

Example:

Prototypes can come in a spectrum of doneness:

• Low-fidelity prototypes are very sketchy and loose. They help you hammer out the basics, like what content belongs in an interface and the general layout. You might use placeholder text since you’re not at the point of fine wordsmithing yet. These can also be called mock-ups or wireframes.
  
  
• High-fidelity prototypes are like a final draft. Visually, they look like the finished product in terms of text, colors, fonts, and images. They might even be interactive, e.g., showing the full user flow across a set of pages.

Tools

Since you’ll be prototyping live in front of your peers, you’ll want to choose a tool that you’re comfortable with. If it’s a new tool, practice using it ahead of time.

Beginner

• Whiteboard: go low-tech and use markers and a whiteboard! It’s easy to draw and erase.
  
  
• PowerPoint or Google Slides: draw shapes and write text, using each slide to represent a page.

Intermediate

• Whimsical: this web app is made for prototyping web pages, making flow charts, and more. It uses a soft color palette. There’s a free but limited version.
  
  
• Balsamiq: this downloadable software makes a charmingly sketchy-looking, low-fidelity prototype, which is useful for keeping people focused on the content, not the look. There’s a free trial, but it costs money after 30 days.

Advanced

• Figma: this is widely used in the user experience (UX) industry. It’s most useful for high-fidelity prototypes. You can make them interactive, for instance, showing what happens when someone clicks on a dropdown menu. It has a somewhat steep learning curve. There’s a free version.

Final tip

The intermediate and advanced tools all have keyboard shortcuts, which are big time-savers when the discussion is flowing fast! For instance, just pressing the T key in Whimsical switches your cursor to the Text tool. Once you know these keyboard shortcuts, you’ll feel like a wizard.

---

Read more by Robin

• Why You Should Think of Stressed Users as Your Default Audience
• Use Your Reference Interview Skills to Do User Research

---

Sign up for LibTech Insights (LTI) new post notifications and updates.

Interested in contributing to LTI? Send an email to Deb V. at Choice with your topic idea.

Related Posts