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:
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:
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.
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.
We then saved and uploaded the file and were ready to begin our prototype user testing.