Introduction to Prototyping.

A guide to the different formats and purposes of prototypes.

Michelle Lamoureaux
December 4, 2014

With the majority of websites today being designed to be responsive by default, static designs and wireframes built in Photoshop or Illustrator fall short in demonstrating how the product will be experienced by the end-user. And as sites become increasingly dynamic, they also become harder to define. It’s not uncommon to produce a 100+ page document to describe complex interactions and experiences. These documents tend to be extremely time consuming and cumbersome, not to mention difficult for many clients to understand and conceptualize. This is especially true when working with a very agile development team.

Since we’re building sites that respond to the device being used to view them, we should also be designing them in their intended environments. One of the hardest jobs of a designer is explaining their concepts and intentions to the client. A prototype allows you to articulate complex interactions in a more dynamic and iterative way. The client becomes far more vested in the project when they’re able to interact with it in some way—the old adage of “show, don’t tell.”  

Prototypes are a very impactful way to present to the client and generate well-informed conversations early on in the process. This ultimately leads to better design and a smoother process overall. Showing design intentions in action rather than describing them in a lengthy document frees up large chunks of time that designers would have spent annotating wireframes. 

Whenever possible, prototypes should use real content. This forces you to gauge and address your content needs early on. Does the content fit with the design and overall feel of the site? Does the navigation fit properly across all breakpoints? Are content blocks too big or too small? Not to mention, clients love seeing their own content. 

When presenting to the client, prototypes can be changed or updated quickly by making on-the-fly changes. This can be an incredibly powerful benefit for both you and the client. Rather than going back to the designer, updating PSD files and/or documentation, and then resubmitting the project to the client for review, changes can be in real time and in one place. Not only does this save an incredible amount of time, it involves the client more in the process and gives them an increased feeling of ownership from the very beginning of the project. 

Prototyping’s primary purpose is to focus your limited time on what’s really important: making something your customer wants. Your job is to identify that you’re building the right thing, solving the right problem, and that the concepts you’re proposing are something your team is capable of building within the given timeframe. For the prototype to be successful, it needs to speak to the right audience. Before you start, make sure you understand who needs to be able to use it and provide feedback, how soon it needs to be delivered, and how complex the ideas are that you’re trying to communicate. These factors help determine the type of prototype you should build. 

There are several types of prototypes you can build, depending on the needs of the project. 

  • Paper prototypes are rough, hand-drawn sketches that help to illustrate rough interactions or basic design concepts.

  • Lo-Fi prototypes include PDF or PSD files and/or prototyping tools. Static wireframes or slides demonstrate a linear flow through the site.
Wireframe

  • Medium-Fi prototypes are clickable wireframes that can be used to demonstrate interactions to the client in a more interactive way. They can also be used for basic user-testing.
  • Hi-Fi prototypes most closely resemble the actual product. These prototypes are presented live in the browser and across multiple devices (desktop, tablet, mobile). This is the best choice for presenting complex interactions such as transitions, fading, parallax scrolling, animations, swiping, etc. This version the best choice of prototype for user-testing.
HiFi prototype

Some popular prototyping tools include InVision, Marvel, Axure, and Justinmind, all of which are free. These robust tools can help you create anything from a lo-fi static wireframe to a hi-fi interactive rendering. Don’t freak out if don’t know anything about code - these tools were built with UX & Visual Designers in mind, so no coding experience is necessary.

All this sounds pretty wonderful, but it’s important to not go overboard. Hi-Fi prototyping isn’t for presenting an entire site, and prototyping’s purpose in general isn’t to just make something pretty to impress the client. Its purpose is to demonstrate small bits of interaction or specific workflows. Determining the right prototype fidelity to use for each flow or interaction is extremely important. 

Teams are transitioning from documentation to prototypes as their final deliverables. Large companies such as Airbnb, Evernote, Facebook, Apple, and Google have started including prototyping in their workflows. Some of these companies have even developed their own toolkits, like Facebook’s Origami and Apple’s poorly kept secret toolset rumored to be called “Mica.” 

While prototyping may strike some as a new fad, the truth is that it is a better way to work and helps teams create better products and facilitates richer conversations and deeper buy-in from both clients and team-members.