How to build an
application prototype ?

15/01/2021
Prototype application
A prototype, in this case of an application, is a functional sample of the application you want to develop.

It shows potential users and/or investors what the application will look like and helps you determine whether your product meets a real need, whether the user understands the interfaces and navigates smoothly through the application (called user experience - UX).

Let's discover together the main steps to create your "From Scratch" prototype.

User research

- Understanding the problem

This is the most important step in the prototyping process. Validate with your target users the problem encountered and shared by all. Focusing on a problem is essential for the next steps. 

- Build a simple solution

Once the problem has been identified, the next step is to address a solution to the problem by focusing on the key features. It is quite possible at this stage to list and prioritize the features you want to have for users testing step, once the prototype is completed. Limit yourself to a number of features so as not to mix features that will improve the product or meet new or specific needs with features that are essential to the application.

Telling a story

Once you have identified your future users, you will be able to test and improve your project even before you start working on the wireframes. By describing in the form of scenarios, how your users (personas) will be able to interact with your solution.

As is the case with an "Elevator Pitch", the objective is to know if the project is understood as a whole. However, you can also have other people read your scenarios. This step is very useful to start designing wireframes.

Decline the list of your features in Wireframes

For this, you can simply bring a pencil and paper. The idea is to make sketches of the different interfaces without focusing on the details.

It is important to limit yourself to creating a skeleton of the application, the objective being to present the main content and iterate on the interface design process. The interfaces will have to follow the logical navigation in the application to simulate future interactions.

The advantage of wireframe design is the speed of design, which allows feedback to be gathered very quickly, and of course its cost, which remains very low.

Wireframes therefore come in the form of gray squares, reserved spaces, and lines as shown below: 
Wireframes application

Turn your Wireframes into Mockups

Increase the level of detail and visual appearance of your interfaces. This next step is to show what the final product will look like. 

- Choice of typography
- Define the colors (main, secondary...)
- Choice of icons and images
- Fine-tune the structure, spaces, grids 
Mockups

Make your mockups interactive

Once the mockups are finished, the last step is to turn your mockups into a prototype. That is, allowing users to interact with the application by making it functional.

The prototype simulates the final product. It is ideal for fixing possible problems before starting to work on the development phase.

After the design process? The tests!

Define a maximum number of people to whom you will have your prototype tested. The number should be representative enough but not too high so that you can focus on each feedback.

Create scenarios to set up a perimeter and specify the sequence of events around the tests. The scenarios could have an objective to test the ergonomics, to evaluate the user flow within the application, to evaluate the users' understanding.

Still having trouble differentiating Wireframes from Mockups and Prototype? We've written an article for you, right here. 

The toolbox

For the conception of your Wireframes:
- Balsamiq

For the design of Mockups:
- Adobe XD
- Sketch 
- Figma  

To animate your prototype:
- Invision  

Sketch and AdobeXD can also be used to animate your interfaces. 

On the inspiration side:
- Dribbble 
- Behance 

More resource:

To help you in the discovery and design process, we have written an article on Design Sprint.

Do you feel the need to be advised or challenged on the creation of your prototype? Contact us and let's talk about it.