8 steps from an app idea to a prototype

Before you start developing an application, you need to understand what this application is about: what it is expected to do, how many screens it should have, and how future users will interact with it. To figure all that out, we thoroughly examine a customer’s idea and then create a prototype of the future app. Here is how we do it.

1. Communicating with the customer

It is important to understand the purpose of the app and to work out what features the app needs, while trying not to get bogged down in details. It is better to concentrate on the concept itself and leave details to be hammered out in the process.

2. Looking for similar apps.

Or, to be more exact, services that address similar needs. Before you create something new, it’s worth having a look at what is already out there.

3. Drafting wireframes

Next, we formulate requirements and, for each of the major features, we work out user flows: the sequence of actions the user has to perform to reach their goal. We create wireframes on paper or in graphics editor software.

4. Designing positive flows

For each screen, we do a rough mockup. We usually use Figma, but Sketch, Adobe Illustrator, or Balsamiq will do just as fine. Then we organize screens into flows, adding arrows and comments, like “click button A to open screen B”.

5. Adding error screens

We think through alternative scenarios, when users fail to achieve their goals. When that happens, the app should inform the user that an error has occurred or that the operation failed. Such cases are also added to our wireframes.

6. Crash test

The entire team gets together to discuss the flows we have come up with. Anything deemed not user-friendly gets discarded, and we brainstorm how we can improve the UX. This ritual is repeated until our user scenarios are bulletproof.

7. Product demo

We combine screens into a prototype – clickable or with arrows – and demonstrate it to the customer. After the demo, customers will almost always want to change one thing or another. This is nothing to worry about, we don’t claim to have the ability to read our customers’ minds.

8. Fine-tuning

We make the requested adjustments and do another demo. When everyone is happy, the finalized user flows are handed over to designers or to developers to prepare estimates.

Our recommendations:

Use fewer colors

We do not use colors for prototypes. During the analysis phase, we prefer to keep things neutral – this helps to concentrate on application functionality without getting distracted by the colors of the buttons.

… and more movement

A clickable prototype will help the team to identify any missing screens and will give the customer a better idea of how the app will work, and will also generate more feedback.