App Prototyping - Benefits Design-Tools and Examples

Often prototyping is not considered enough in the initial phase of a software project. However, the benefits of a prototype are immensely valuable to save costs and time and to achieve a better result in the end. Why this the case and how we create and use prototypes at Apps with love, you can read on the following lines.

What App Prototyping is

Prototypes are an attempt to simulate an app without having to spend time and effort on programming. Prototypes can be thought of as interactive, multi-linear "PowerPoint" presentations. They show you how an app will work without being fully functional.

At Apps with love we distinguish between two types of prototypes:

1. Functional prototypes

2. Visual prototypes

A functional prototype aims to show the designed app in its entirety. The aim is to find out whether the functions, for example buttons, are placed in such a way that users can find and use them. In this context, we also speak of a click dummy: It's about finding out how the app can function. The visual appearance is not the main focus. Rather, it is about functionally validating the users' interactions with the app.

If possible, a functional prototype should include all screens of the app. You can see a simple example here:

If you want to test the Figma prototype for yourself, you can do so here.

A visual prototype, on the other hand, could theoretically represent the entire app, but this would usually be too complex and therefore too expensive. Therefore, visual prototypes are limited to a single transition between screens or to the animation of an element on a screen (e.g. a button or a loader). So visual prototypes are more about single visual elements and their design.

Why you should create a clickable prototype for an app

You can compare it to building a house: Why should an architect create a model from the building plans before starting the actual construction? Topics such as light exposure, southern orientation or integration into the neighborhood can only then be properly considered. The situation is similar with software, especially apps. Mobile applications are developed on a desktop PC. However, the end product is only viewed by users on the small screens of cell phones. If the app design is not viewed on a small screen during conception, it is easy for mistakes to creep in. With a prototype, you can successfully protect yourself against these.

The procedure for rapid prototyping

Rapid prototyping is not, as the term suggests, fast or faster than "normal" prototyping. At least not in the area of user interface or user experience design (UI/UX). The term "rapid prototyping" comes from the industrial design industry, where products or components are tested using 3D models before they go into mass production. In this context, creating a prototype is much faster and cheaper than waiting for the finished product and finding flaws there. 

In the field of UI/UX, we interpret the term in such a way that every finished designed part is checked by the target audience by means of testing. If defects are found, they can be corrected immediately and with relatively little effort. By rapid prototyping we understand normal prototyping as an integral part of an iterative process during conception.

What benefits a prototype can bring

Most prototypes or click dummies are limited to a multilinear sequence of screens. These can be called up by clicking or tapping. As a user, you get a sense of time in addition to the visuals. How long does it take to use the app? Could the path to the target screen be shortened? A good UX is the be-all and end-all of an app, and it's important to make it as easy and uncomplicated as possible for users to use.

Apps can be experienced to a certain extent before they even exist. That's why prototypes are also particularly well suited to convince potential backers of an app idea. You already have much more in your hands than "just" a theoretical business idea. This makes it easier to find investors or increases the chances of crowdfunding, since you can already convey a much more realistic picture of the possible end product than if you were to just describe it.

As mentioned above, prototypes help in particular to shield oneself from miscalculations and high expenses to undo them. Logically, money could be saved by not using a prototype during conception. However, the probability that an idea fails during prototyping is often high. If you were to discover the misconception only when the app is programmed, you would practically have to start all over again, or at least reprogram a lot, in order to correct the error. These efforts would exceed those of a clean prototyping phase several times over. Therefore it is worthwhile to invest in a prototype during the conception phase and not to start programming directly.

Why a certain amount of programming can still be useful

In addition to clickable design prototypes, there are also prototypes that already contain programmed elements. Programmed prototypes are created, for example, for apps that have to work in conjunction with other hardware. In this case, a conceptual prototype would be useless, since you want to test the communication between the hardware and the software and not, as is usually the case with prototypes, the app architecture or user experience. 

In this case, we would rather speak of a proof of concept (PoC) or explicitly of a technical prototype. The aim is to validate whether a certain technical component can work at all. This requires at least a certain amount of programming work. This can also be a console application or an app with practically no user interface (UI).

So programmed technical prototypes or PoCs bring an advantage when you don't want to test the user interface or the user experience, but effectively the technical feasibility or functionality. For example, if the interaction with an existing product (software or hardware) or an interface (Bluetooth, NFC, complex authentication) is necessary.

For this prototype only two screens are necessary

• an overview

• the detailed view of an image

Since no "real" content is shown, the detailed view of all images looks the same. The effort to put this prototype together is minimal. Nevertheless, it illustrates how the solution is built and how the navigation through the photo collection will work.

Here you can try out the prototype yourself.

Here, the number of screens is based on the number of images in the collection. One screen is needed per photo in the prototype

• Overview

• Detailview image 1

• Detailview image 2

• Detailview image 3

• ...

The number of screens of a prototype can therefore multiply quickly, depending on what is to be displayed.

Here you can click through the prototype yourself

Save time, costs and nerves

Click dummies and prototypes in general, are a valuable tool to test functionalities without already incurring expensive programming efforts. By mapping the intended user flow, possible logic errors become visible and can be corrected at an early stage. Furthermore, prototypes help future users or clients enormously to imagine how the solution will work. That means prototypes illustrate much better what the idea behind a planned app is and how it will feel. Thus, a prototype can also become an important tool, for example, in the search for potential funders.

A relatively small investment in a clean prototyping phase is well worth it, as it can save time and money in the long run.

Contact us if you have an app idea that you would like to validate and take to the next level with the help of a prototype.