Designing an application is an important task that must be done before the development.

But it is a process that must be done in several stages. Indeed to increase the chances of success of an application, it is necessary that the design is well thought out and adapted to the needs of users.

In the sprint design method we use, the design of an application is done in 3 main steps: Wireframe, Prototype, Mockup.

Wireframes contain the key visual information of our application. Their creation makes it possible to define the structure of the application and the hierarchy of the elements in order to provide a first descriptive visualization of the user interface.

As a general rule, wireframes are made of lines and squares, in different shades of gray that indicate the hierarchy of elements. No picture, no video, and preferably no real text. Therefore you only need pen and paper to start. 

The goal here is to master the visual architecture of our application and adapt the position of the elements to create the best user experience.
Fast to implement, inexpensive and accessible to all, wireframes give a framework to the design of the application and allow us to project ourselves more easily into its future appearance. 

Once the wireframes are defined, the next step is to make a prototype out of them. Prototyping focuses much more on the user journey by simulating the navigation in the app, or the interactions between the different views.

A prototype is therefore more similar to the final product than the wireframe in terms of usability, but does not yet contain a final design. 

This time, we need more than a pencil and paper to set up the prototype of the application. Indeed, in this exercise we try to simulate the behavior of the application based on the user interactions. For example, if a user who tests our prototype clicks a button, we must be able to show him the behavior of the application as the result of this click! A new page? A popup? The new state of the application must be shown clearly!

At this point, we can already test the application's flow with test users and gather feedback on their browsing experience and their interaction with the app.

Their opinions are very important because they allow to point out possible problems in the navigation, a misunderstanding of the user journey, or other problems. Thus, a prototype tested with users and changed according to their opinions greatly increases the chances of having a successful application in the end.

Changes at this stage are very cheap compared to changes once the application is developed. 

It is very important to validate the previous steps before starting the design of the mockup. Indeed, it represents the last point before the development of the application! A mockup is a prototype, but with the final colors, the images, the videos, and the design.

In this part, we define the graphic charter of the application, and we incorporate the latest design. Here, it is not mandatory to simulate the interaction of the app with the user since it has been validated in the previous stage. This time what is important is to validate "the colors" in the broad sense of our application.

The mockup will allow to have a very close to reality visualization of the final application. This will validate it with the general public and provide feedback on the design this time. It can also be used as marketing material to promote the application or to be presented to investors. 

These phases of the development cycle of a mobile application make it possible to build robust and clear technical specifications, which are necessary to start the development of an application as efficiently as possible!

All these steps are the components of a week-long exercise that we practice at MobileThinking: Sprint Design. This exercise starts with an idea and then finishes with a prototype of an application tested by users!

If you are interested or intrigued, do not hesitate to contact us directly to find out more.