InVision StudioNEW UX Design

A Beginner’s Guide to Rapid Prototyping

Scroll down to learn how to form and validate ideas using rapid prototyping or download our UX Design ebook 🎉

Buy $10

Quick summary

Validating ideas through rapid prototyping and user testing is the first step in building A+ products. Today we’ll learn why…and how.

What you’ll learn

  • Rapid prototyping
  • Sketching and ideation
  • Low-fidelity wireframing
  • Feedback and user testing

What Is Rapid Prototyping?

Somewhere in-between the initial user research and mid-fidelity design, there’s a technique — a low-fidelity technique — known as rapid prototyping, conceived to help designers develop and validate quality ideas before diving into a design prematurely.

Listening to users as they talk about their problems is what user research is all about, however, mid-fidelity design is where we begin to detail a validated solution. Skipping user research is bad because it means we’ll have no idea what the user wants or needs; we may as well be designing blindfolded. If you’re not convinced, 60% of apps have never even been downloaded, and 57% of apps that are, are deleted within 30 days.

So, we know that designing a solution to a known issue makes more sense than assuming an issue exists and later realizing that it doesn’t, but…what happens next?

Coming up with an idea, and then designing it? 🤔

Absolutely not, because we are not our users — we can assume a solution, but we can’t validate a solution — only users can do that. It’s also uncommon find to success with the first idea, which doesn’t mean that we need to user test hordes of solutions, but we should be ideating a few solutions, building upon the best ones, and then taking a select few through user testing; and this is exactly what rapid prototyping is about.

Hmmm, What Makes It Rapid?

We do it quickly!

So, No Details?

Essentials only — we call this low-fidelity design. Diving straight into mid- or high-fidelity design is way too assumptive; before we invest buttloads of time, money, and resources on a full-blown idea that might not even be what the user wants or needs, we first need to ensure that our idea is on the right track, so let’s learn how to do that.

Start With Paper Prototyping

Designers often start ideation with what’s called paper prototyping, because it’s accessible and super-duper easy — all you need is something to sketch on, and with. However, ideas can come to us at the strangest of times, and while even a napkin will suffice, UI stencils, as shown in the example below, are neater and more effective.

Sketching with UI stencils

Digital Rapid Prototyping Tools

Remote design teams tend to fair better with digital rapid prototyping tools, since showcasing ideas and collecting feedback on them is slightly more difficult when designers work in distributed teams. Here’s a couple of tools you’ll find very useful.

InVision Freehand

Freehand, although missing some nice-to-haves like sticky notes, is the best rapid prototyping tool for those wanting an experience that feels like sketching IRL. Its shape-detection features will make you feel like an expert sketcher reeeally quickly.

Additionally, it enables teams to sketch on the same whiteboard at the same time!

InVision Freehand, visual brainstorming tool

RealtimeBoard

RealtimeBoard is designed for all types of agile collaboration, and sports many of the same features as InVision Freehand, including commenting and realtime collaboration.

However, those wanting extra features such as charts, sticky notes, kanban boards, diagramming tools, integrations, and a bunch of other features to help their team stay creative and agile, will certainly find RealtimeBoard useful — the diagramming features are handy for organizing thoughts with mind maps and organizing feedback with affinity maps, although, when the time comes, diagramming can also elevate our UX workflow to the next level with sitemaps, user story maps, empathy maps, and more.

RealtimeBoard, digital whiteboard tool

Crazy 8s and the Four-Step Sketch

Prototyping tools, digital or otherwise, can only take us so far. Ideation requires structure to ensure that we not only come up with a wide variety of ideas, but also iterate over some of them, building them up into something that we’d consider worthy of user testing while leaving crappy ideas behind; which is literally a thousand times better than running wild with a singular undeveloped idea that only exists in our mind.

Structure also ensures that we do this fairly quickly, so that we don’t become too obsessive, or wear down our creative thinking before we’re done brainstorming.

A well-known approach to ideation and iteration is the Four-Step Sketch:

  • Step 1: take notes for 20min (reflect on any relevant research)
  • Step 2: sketch rough ideas for 20min (be very brief, but creative)
  • Step 3: sketch eight variations of the best idea for 8min (i.e. Crazy 8s)
  • Step 4: turn the best variation into a simple 3/4/5-step storyboard (10-20min)

Regardless of whether you’re sketching your rough ideas, iterating over the Crazy 8s, or refining the final storyboard, always keep it simple and don’t sweat the little details.

Note: if using the Crazy 8s method without digital tools, simply fold a sheet of paper three times, creating eight squares for the eight ideas. Also, since we only have eight minutes to sketch these eight ideas, it’s best to save any UI Stencils for the storyboard.

Below: a 3-step storyboard made with InVision Freehand.

3-step storyboard

Casting the Votes

Obviously we can’t user test every idea, especially when others may have ideas to contribute as well, so we’ll need vote on which idea to take forward. Our idea is our storyboard, assuming of course we used the four-step sketch technique. As a team, discuss each idea for a few minutes before moving onto the vote — teams using everyday office materials such as markers and stickies should find this straightforward.

Sticky note dot voting

Alternatively, remote teams will require a digital method of communication such as Slack, and for the voting, Slack has voting integrations like Polly; otherwise, both RealtimeBoard and InVision Freehand can facilitate a team vote — InVision by tallying simple marks next to each idea, and RealtimeBoard via their sticky note functionality.

Consider using the “dot voting” method. In the design sprint variation of this method, everyone on the team has two votes and the idea with the most votes is then user tested. In the event of failure, backtrack to this moment and simply try again with another idea. Never stop moving; don’t stall, don’t make any last-minute adjustments, don’t wonder if the idea sucks — if it sucks, user testing will confirm that soon enough.

Interactive Rapid Wireframing

Voting isn’t the final hurdle. We also need to make sure that the idea is tangible and interactive; something that can be user tested as if it were the real thing, and this is where our idea really starts to become a concept — a prototype — even if it doesn’t completely represent what the final app or website should do in terms of functionality.

What Is a Wireframe?

A wireframe is a skeletal mockup of a design, typically created by designers as they make their first attempts at figuring out the usability, accessibility, and information architecture without being forced to think about visual aesthetics, which comes later.

However, we can also use wireframes during rapid prototyping, to create interactive yet still relatively low-fidelity replicas of our sketched-out storyboard as we brace for initial user testing. Technically, our sketches are actually wireframes due their skeletal appearance, however, in order to acquire the best feedback, they need to be interactive.

So without further ado, let’s take a look at the best wireframe tools in 2019.

Roundup: Best Wireframe Tools

Fundamentally, wireframe tools are defined by the fact that they have libraries of readymade user interface elements to help with rapid wireframing, although, the best wireframe tools also ship with commenting features for internal feedback and user testing features for user feedback. Some wireframe tools also offer features that help designers create sitemaps, user journeys, and other later-stage deliverables, so they’re extremely useful even after our concept has been through user testing and validation.

Axure RP

  • Wireframing: yes
  • Interactions: yes
  • Device mirroring: yes
  • Remote user testing: with integrations

87% of Fortune 100 companies use Axure RP for wireframing. It’s been king of the castle for 16 years, and it can effortlessly carry our design all the way to mid-fidelity.

Axure RP has a bunch of killer features to help create dynamic, adaptive, animated, conditional, and even data-driven mockups, which, although might not be useful at this stage, will certainly be useful later. Wireframing UX with Axure RP is a very magical experience, and with the ability to annotate, track tasks, and create flowcharts to depict sitemaps and user journeys, there’s literally no aspect of UXD that we can’t strategize.

Axure RP, wireframe tool

Balsamiq

  • Wireframing: yes
  • Interactions: yes
  • Device mirroring: no
  • Remote user testing: with integrations

Balsamiq is a suitable choice for those mostly interested in the low-fidelity rapid prototyping techniques we’ve been learning about in this lesson. Balsamiq has a beautiful hand-drawn wireframe skin that reminds us to stay lean and leave the little details for later. Basically, it’s a sweet combination of ideation and rapid wireframing.

Balsamiq, rapid wireframing tool

Whimsical

  • Wireframing: yes
  • Interactions: no
  • Device mirroring: no
  • Remote user testing: no

Whimsical, being the new kid on the block, doesn’t quite match up to veterans like Balsamiq and Axure RP in terms of UI elements, and to-date, it’s lacking the ability to create interactions and mirror them to a device. That being said, it’s an incredibly lightweight and simple tool, not to mention the most fun to use and the best looking.

Definitely keep an eye on this one.

Whimsical, wireframe tool

Pidoco

  • Wireframing: yes
  • Interactions: yes
  • Device mirroring: yes
  • Remote user testing: fully-integrated

Pidoco may not look like much, but it’s actually one of the best wireframing tools available today. Despite its somewhat outdated look, it can harvest surprisingly interactive wireframes, and it even has its user testing capabilities fully-integrated.

Pidoco, online wireframe tool

Justinmind

  • Wireframing: yes
  • Interactions: yes
  • Device mirroring: yes
  • Remote user testing: with integrations

Justinmind services designers from wireframing all the way to high-fidelity. Despite having a buttload of toolbars and features, it doesn’t feel as clunky as Photoshop, but it’s not the cleanest of tools. It’s a decent choice if you need something for everything.

Justinmind, wireframe tool

MockPlus

  • Wireframing: yes
  • Interactions: yes
  • Device mirroring: yes
  • Remote user testing: with integrations

Similar to Justinmind.

MockPlus, wireframe tool

MockFlow

  • Wireframing: yes
  • Interactions: yes
  • Device mirroring: no
  • Remote user testing: with integrations

MockFlow is like Justinmind as well, however, the mockups result in real code that can be hosted with a few clicks. Imagine a modern WYSIWYG editor, but with sitemapping, wireframing, high-fidelity design, and collaboration features. We’re not quite sure why MockFlow isn’t that well-known, but it’s been around for a decade, so it’s worth a look!

MockFlow, wireframe tool

Marvel

  • Wireframing: yes
  • Interactions: yes
  • Device mirroring: yes
  • Remote user testing: with integrations

Interestingly, Marvel ships with POP — a mobile app that helps convert drawn wireframes into interactive, digital wireframes. It seamlessly integrates with user testing tool Lookback, and is known to be one of the easiest design tools to master, although the downside is that high-fidelity prototyping with Marvel relies heavily on their Sketch integration, so later down the line there’s a bit of a dropoff in the workflow.

Still, it’s still one of the best online wireframe tools today.

Marvel, online wireframing tool

Alternative Wireframe Tools

Designers that would rather “a tool for everything” might enjoy our UI design tools roundup. While these aren’t really wireframe tools, they can be used for wireframing.

Concluding With User Testing

Assuming that the wireframes are now complete, and also interactive enough that users can click or tap through them as if they were real, it’s time to start user testing.

Here are some user testing tips you’ll want to memorize:

  • Let users explore freely
  • Don’t force the idea upon anyone
  • Ask questions to help the user think aloud
  • Listen, and learn as much as you can from users
  • Make note of any insights, e.g. likes, dislikes, feelings
  • Conclude the test with a summative user review
  • Comfort the user, assure them that all feedback is valuable

User Testing Tools

Wireframe tools that don’t have built-in user testing features should otherwise integrate with external user testing tools. Each integration has its own setup, but once integrated, users should be able to view the interactive wireframe on their device as we watch them use it, talk face-to-face, and make note of their feedback and reactions.

Here are some of the best remote user testing tools in 2019:

Lookback, user testing tool

What Next?

Depending on the feedback received, we might need to iterate a little more before achieving true validation. Or, if the idea winds up being a total fail, we might need to backtrack and user test a different idea. Either way, once we have a validated idea, even if it is just a low-fidelity wireframe, we can then move onto mid-fidelity UX wireframing, focusing more on the little details, including usability and accessibility.

Designers tend to strategize most of their design using wireframe tools, since visuals contribute only a small amount to the overall user experience. Finally moving up to mid- or high-fidelity design is aided by usability testing, which we’ll cover in the next lesson.

We’ll see you there.

Read this article and more in ebook format to learn more about full-stack UX design.

Daniel Schwarz, author

Daniel Schwarz

Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.