In 2018, the rockets will fire and NASA’s next generation Space Launch System will fly off into space, marking the start of a new generation of spaceflight. However, its journey begins six years earlier. In 2012, NASA began wind tunnel testing the initial designs of the vehicle. Did NASA begin with a full-scale build of the vehicle? Nope; rather, scaled models are used in the wind tunnels to learn about the design’s aerodynamics, test for vibrations, and see how air affects the vehicle. All the information found will be used to improve and iterate on the design. And while we at UpTop aren’t in the rocket building business—and a tip of the hat to those who are—a design team follows a similar design practice of using a scaled model to continually iterate, test, and validate designs. We create prototypes.
Much like with scaled models, the end result of prototyping in the tech industry is a fake or downscaled version of a working product. Whether it’s an iPhone app, a website, or a stand up kiosk, the prototype captures desired interactions or workflows. In theory, a prototype can capture anything ranging from entire capabilities of an app, to single microinteractions. In practice, a prototype will capture a golden path in a specific workflow. With that said, it will depend on your reason to prototype.
Why Prototype
In general, there are three main reasons we prototype:
- To Explore
- To Explain
- To Validate
Using a prototype in the design process can free a designer to explore interactions that would be impossible to accomplish in static wireframes. For example, a designer using a prototype can create a button micro interaction and quickly fine-tune the appearance of the animation; this level of detail can’t be replicated in a static wireframe. In a world of meaningful transitions, this can improve the memorability, desirability, and overall delight of a product.
Another reason to prototype is to explain interactions. Rather than annotating a wireframe, a developer can click through and/or view specific interactions. Using this method, less is lost in translation. Imagine explaining the prototypes above.
“Selecting the image captures transitions to the detail page. The selected image is then displayed at the top. The title overlays the image and the content is displayed below.”
The description accurately explains the interaction, but remains completely inadequate all at the same time.
While prototypes are used to explore and explain, by far the most common reason to prototype is to validate. Much like NASA testing their SLS years before ever launching, we create prototypes to test, validate, and learn about designs. Rather than a wind tunnel, the tech industry uses usability studies.
In this scenario, a prototype is made to recreate the experience of a product or feature. Real users are then brought in to use the product. As the user works with the product, problems with the design and expectations are surfaced. A prototype can allow for a realistic test of the viability or usability of product experience before development has ever started. This allows for a product or feature to be tested and pivoted or scrapped without having committed cost, time, or resources to production code. Even if a usability study finds that an entire feature or product should be scrapped, it’s far less painful to walk away a few weeks into a design than it is to walk away several months after a release.
How to Prototype
Over the last few years, there has been a proliferation of prototyping tools. The tools can range from patches and noodles tools (patch programming) such as Origami by Facebook and Form by Relative Wave, to using Keynote or PowerPoint to create a basic prototype.
A Prototype of the iOS Calendar application. What sort of wizardry was used to create this prototype?
Most Prototyping tools fall at different points in a spectrum of being better at Page Flows or Microinteractions and across another spectrum of “depth” versus the ability to make quick changes.
Deciding on the tool to use depends on the level of functionality that a designer is trying to explore, explain, or validate.
Using Axure allows for a very thorough, interactive, and immersive experience. Axure can handle very detailed microinteractions and thorough page flows; however, Axure comes with a trade off in that it takes more overhead to make changes to interaction; this can lead to less exploration in designs. This makes Axure a great tool for usability studies, but not as effective at exploring multiple designs.
A tool such as Framer is on the other side of the spectrum. A designer can quickly create and recreate detailed animations and microinteractions; however, recreating an entire click through experience in Framer could become more complicated.
For many of the design projects at UpTop, we’ve found InVision to be a proverbial sweet spot. Many of our projects usually have higher-level design questions at the page flow level, rather than the microinteraction level. InVision allows us to rapidly validate these page level questions, while keeping the flexibility to explore further changes and iterations without too much added complexity. However with that being said, it all depends on the level of questions that the prototype is trying to validate.
When To Prototype
Ideally, design processes extend from wireframes into a prototype. Much like NASA beginning their wind tunnel testing years before launch, a prototype in a digital product should be introduced as early as possible. The earlier in the design process prototypes are created, the quicker it is to validate, learn, and explore further design changes. With many of the prototyping tools allowing imports from Adobe Photoshop and Sketch, the process of going from wireframe to prototype has been simplified. Because of this, we aim to put designs into InVision, enabling click through prototypes of the golden path page flows. From that, we’re able to use the prototype in usability studies, learn, and iterate designs.
When creating digital products, there are many paths that can be taken, and with that, many interactions that can affect the usability and acceptance of a product. The title used for a label can alter the usability of a product. Rather than spending the time to create a fully developed product without putting it in the hands of users, take a page from NASA’s book. Create prototypes to take a digital product through the wind tunnel to learn, validate, iterate, and improve long before launching into the unknown.
