The Purpose of a Prototype


Try Loop11 free. Sign up now to get started. Get Started


Course Chapters



Prototypes are an important part of any product development. They allow for rapid user testing without the need to invest in or build an entire website or app. A prototype is essentially a mockup that simulates parts of the final product. Prototypes can range from a quick hand drawn sketch to a high-fidelity interactive design.

Nothing brings you closer to the functionality of the final product while simultaneously providing users with the experience you’d envisioned. That well thought out piece of functionality may have sounded great, but you won’t know if it works until a clickable prototype is created and tested with your target audience.

Not only do prototypes help provide proof of concept, they more importantly expose any usability flaws behind the design.

At EverWear, we would like to create a high fidelity prototype to assist with the following:

  1. Testing early on: By soliciting design feedback frequently and early, we are able to gather more accurate requirements, form a baseline and do so at a low cost.
  2. Setting priorities: Design and functionality decisions are guided either by gut or user data. Testing with a prototype means we can receive feedback surrounding these elements without having to build them out first.
  3. Iterate quickly: With priorities validated, we can set about iterating rapidly and comparing results of testing to ensure we are moving in the right direction.

Building in testing affordance

Prior to creating a prototype, we need to consider how we will test it with users. Testing should focus on critical tasks, aiming to facilitate only the most common use cases. This ensures designers are not distracted by building out a prototype which caters for every use case.

The most common use cases for EverWear customers revolve around the following:

  1. Learning more about the sustainable manufacturing process
  2. Browsing the product range
  3. Purchasing inventory

With the above use cases in mind, we can set about creating a prototype which facilitates the testing of each of these in a completely natural way. Whilst you don’t need to design every page or enable all functionality, creating a meaningful user journey which replicates the anticipated ‘live’ experience is still important.

As such, we have created prototype which provides sufficient information about the organisation’s manufacturing process as well as an end-to-end purchase experience for a couple of product lines only.

Creating a prototype

For the purposes of EverWear, and our requirements to rapidly mock up a mobile prototype, we decided to use the combination of Adobe Photoshop and the popular prototyping tool InVision.

We chose this option because we have a certain level of experience with the Adobe suite and believed we could quickly create all the screens we needed in Photoshop. The design featured different folders for each page of our prototype, as well as separate folders for our site wide elements such as the header and menu.

Prior to creating the prototype we had signed up to InVision and downloaded InVision Sync. InVision Sync functions a lot like DropBox whereby you save your Photoshop files to a folder on your computer and then those files are synced with your InVision account.

We then logged in to our InVision account and found our prototype. Because of how we saved our screens into folders, InVision automatically knew how to split the design out into it’s separate pages. From that point, it was simply a matter of using InVision to create the hot spots and define how menu’s would function.

Once ready, we exported our InVision prototype to HTML and uploaded the files to a subfolder on our own website. With that done, the last step to ensure the prototype was ready for testing was to insert the Loop11 javascript. This was a straightforward copy from our Loop11 account, and a paste into the bottom of the InVision index.html file.

We then saved and uploaded the file and were ready to begin our prototype user testing.

Want more inspiration?
Join the Fab-UX 5!

Five links to amazing UX articles,sent to you once a week.

No SPAM, just pure UX gold!

No Thanks