Mobile apps are complex products that require our full attention during the development process, and even before it. You may wonder why a certain app looks and feels the way it is – who designed the functionality, who decided to place the button in the top right corner, or why are there 4 steps from login to purchase. Most of these questions should be answered at the beginning – in the phase of app prototyping. Prototyping is one of the most important steps that connect the dots between the problem an app needs to solve and the best ways it can be solved. All phases during app development, the design, development, testing, and deployment phase should rely on decisions made in the prototyping stage.
In this article, we will cover everything we know about app prototyping, and why it should no longer be a choice, but is a necessity.
Read this if you have an app idea or want to improve your development life cycle.
What is an App prototype?
Simply explained,
A prototype is a simulation of the app’s functionalities and user interface, presented in a set of mockups or wireframes in order to showcase the ways users will interact with the app.
It helps team members, investors, and clients to be on the same page while understanding the app. Moreover, it gives everyone involved in the project the opportunity to discuss, or propose improvements sooner.
The team usually includes a UX designer, developers, and a product owner working on prototyping together. In this stage, the app is presented visually in the form of sketches or digitally, with clickable elements, for the sake of getting better or more detailed feedback from stakeholders. It contains no working code in the background because its purpose is to save time and money identifying bad usabilities or dysfunctional elements before the design and development phase start.
What types of prototypes are there?
Prototypes do not necessarily look like a final product. Depending on the time and budget, prototypes may be created with higher or lower amounts of content, interactivity, and visual details. Based on those criteria, there are low fidelity and high fidelity prototypes.
Low fidelity prototypes (lo-fi)
Low fidelity prototypes are used to explain the basic functionalities of the app, in the shortest possible time. Using such simple tools, the product team saves loads of money and time, while still being able to present core ideas, UI elements, shapes. Besides pen and paper, printed screens from Sketchsheets gives a better perspective on how your designs look on different screens. To make a good prototype on paper, a team needs to do make some steps before the start:
- Create a list of features app will have
- Create personas, to try to map the customer journey
- Define one main problem the app needs to solve, to stay focused on what matters
Another way to create low-fidelity prototypes is wireframing. It can contain clickable elements but not necessarily, the idea is to digitize app screens and provide a better look and feel of the app. In fact, wireframes are the second step in prototyping. Sometimes, the product team starts from there, but very often, the paper is the very first step many are not ready to give up yet. Some of the most popular tools to create wireframes are Balsamic or Adobe XD+, InVision or POP.
High fidelity prototypes (hi-fi)
High fidelity prototypes consist of visually more accurate designs, used to get better feedback from users, clients, or investors. This type of prototyping feels so realistic that end users will hardly distinguish between the real mobile app. The elements are clickable, animations, designs and visual identity are set up exactly as for the final product would look like, so users can go back and forth and play with features without forcing imagination on “what is this button supposed to do?”.
The end result of hi-fi prototypes is usually high-quality feedback about every aspect presented over there. The cons of this approach are higher costs and longer development, but if the goal is to get better feedback for the lowest price possible, then hi-fi prototyping seems to be the optimum solution.
| Costs of production | ||
| No Prototype | Low Fidelity App prototype | High Fidelity App Prototype |
| There are no initial costs as there is no prototype, but there is a significant probability to increase the costs of production later, due to changes on UX/UI side, or even app functionalities. | Low or at no cost. | Slightly higher costs at the beginning for preventing huge costs due to changes in code later. |
| User feedback | ||
| No Prototype | Low Fidelity App prototype | High Fidelity App Prototype |
| It is very difficult to get valuable feedback from users just by explaining to them what the app is supposed to be doing. The main challenge is users’ inability to properly visualize the flow | This is the effective approach for getting general feedback about app features and the position of the elements. Users may struggle to understand completely the app flow, but will still be able to provide information about user experience | This is the most effective way of getting feedback from users. It contains elements that would be included in a real app. Users are able to look and feel the product and so expressing an honest and experience-based opinion that is extremely important for understanding the user perspective. |
| Pitching for funds | ||
| No Prototype | Low Fidelity App prototype | High Fidelity App Prototype |
| Even though you are 100% sure you have an amazing app idea, there is no high chance to get funds for something you are explaining to investors using only words. Without a real product or at least a prototype to show, it might be considered as amateurish and unprofessional. | If combined with a good presentation, covered by data and market research, it will be acceptable to show only your wireframes that explain app features. | Hi-fi prototyping is considered a professional and sophisticated way to explain what you want to build. Even though the finished product or the product with the most functionalities has the best chances of getting funds, high fidelity prototyping is the second-best way to succeed. |
| Client feedback | ||
| No Prototype | Low Fidelity App prototype | High Fidelity App Prototype |
| Even if you agree to present the end product when it’s done (which is rare) you may end up in trouble if you fail to meet the client’s expectations. Without a prototype is almost impossible to predict what clients hope to get. | This is a good and efficient way to explain the basics, especially if your budget or time is limited. The main goal is to address potential pain points of the app on time, which is very possible with this way of prototyping. | If you work on a huge app with a lot of features or have various personas as a target group, this, again, might be the most efficient way to get the appropriate feedback from the client, and on time. |
| Understanding the purpose of the product | ||
| No Prototype | Low Fidelity App prototype | High Fidelity App Prototype |
| Before your developers dive into coding, there are few other things that need to happen before. We wish to have a prototype the first thing on your list, but even if it’s not, try to define the app purpose the best you can. It will save time for the whole team. | If you try to look at your users’ problem as yours, it will give you a better perspective of what features to give priority over others. Simple sketches will help you visualize this concept better, and the feedback you get thanks to the prototype will help you validate the idea. | If you are looking at ways to identify the main problems an app needs to solve, this is always a good solution, but it doesn’t have to be a high-fidelity prototype to know if your app will be ‘Vitamin’ or ‘Painkiller. ‘ |
| Time to produce | ||
| No Prototype | Low Fidelity App prototype | High Fidelity App Prototype |
| If you start without a proper testing or acquiring relevant feedback, you may be forced to miss your deadlines. | Time to create a lo-fi prototype is very short, which is one of the best advantages over the others. | The time to create is longer compared to lo-fi prototyping. |
| Understanding App costs | ||
| No Prototype | Low Fidelity App prototype | High Fidelity App Prototype |
| App costs might be underestimated if you don’t spend some time drawing screens or thinking about features. | With proper sketching, it is more realistic to predict the costs of the development as you will be able to predict the number of screens, deadlines, technologies, possible obstacles, etc. | This is an even more accurate approach to predict future costs of app development as it cuts every possibility to miss a feature or misunderstand UI / UX design challenges. |
| Maintain the proper communication between stakeholders | ||
| No Prototype | Low Fidelity App prototype | High Fidelity App Prototype |
| Here we come at the highest risk in the development process. If there is no proper way to present how the product will work, there is a high chance that the end product won’t meet the expectations of users and clients. | Lo-fi prototypes are the most efficient in the early phase where the main communication still happens between the product team. | High-fidelity prototypes reduce the chance of missing information out, or not being able to see opinions that come from different sides. |
What steps you need to take to make an app prototype
The good news is that you do not have to be a designer to do prototyping. Once you define the goal and audience, you are ready to draw. Here are some helpful tools that you can use to get great results.
The process of creating can take a few days or months. It depends on the complexity of the app, but try not to spend too much time in this phase. The point is to get ideas validated as quickly as possible, not to make a perfect design that should be done in some of the later stages.
“Design is done when you have validated a prototype as a suitable solution, Engineering has agreed to the viability of the solution, and you’ve defined the look and feel of the solution that all stakeholders have agreed to.”
“The Product Book” – Josh Anon & Carlos González De Villaumbrosia
If you are interested in learning more about prototyping and a product life cycle, we recommend reading books “The Product Book” and “Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days”. It should give you more information about the importance of early validation from many aspects, but also should help improve the conversation within the team during the development process.
Conclusion
Building a prototype is a simple but interesting process that gives you the opportunity to remove unnecessary frustration from your work. Many great products failed just because they were not presented with realistic deadlines and technologies at the beginning.
Even simple prototyping will help you increase your reputation, as your clients will appreciate the transparency and open communication throughout the process. If you intend to pitch an idea to investors, it will increase chances to get the necessary investment because it is easier to understand a tangible idea. Moreover, you will be perceived as a professional who has clear goals and knows how to achieve it. If you need help with this stage, get in touch with our team. We will build an interactive prototype for you based on the delivered app requirements.
