Creating High Fidelity Prototypes for App Development

What Are Prototypes?

A prototype is a visual representation of how the final software product will look and behave once it has been built by our development team. App prototypes can take several forms, ranging from ultra-low to high fidelity. At the beginning of a project, it makes sense to iterate through concepts quickly and keep the prototype limited, but as the designs progress, the fidelity and complexity of the prototype will increase. At the end of a FullStack Labs design phase, the deliverable is a high fidelity prototype that demonstrates every feature and workflow of the app with pixel perfection alongside clear design documentation. 

Methods

To accomplish this, we use a design and prototyping tool Called Figma. This allows us to stitch together views, dialogs, and even demonstrate the intended transitions between them. In the prototype, the clickable areas are indicated with a blue highlight. Tapping or dragging on those areas will allow you to interact with the app as though it had already been built. In addition to viewing the prototypes on your laptop, they can be loaded on your phone to help you get a sense of how it will feel in your own hand. We use these prototypes to get stakeholder feedback, conduct usability testing, and to demonstrate the final workflows to our development team. 

By creating prototypes the FullStack Labs design team is able to both iterate quickly and demonstrate the app’s functionality in a way that a written product requirements document never could.