How to develop an interactive prototype correctly?
Hello! My name is Natalia Moskovkina, I am a senior business analyst. This article will be useful for business analysts who work with data management systems and often face the fact that the customer has a hard time making a decision on the implementation of the system based on static mockups. There are also cases when transferring the system to development requires a lot of communication and clarification with the developers to discuss the functionality. In such situations, an interactive prototype will help solve the problem.
An interactive prototype is a simplified version of a real information system that allows users to test various scenarios, evaluate possible implementation effects, and make optimal decisions. A system prototype creates a virtual environment in which users can interact with various elements of the system and see the results of their actions.
Recently, we at KORUS Consulting worked on a project in which interactive prototypes helped us and the customer select the most suitable tool without implementing a full version of a complex system, and decide on the final version of the product.
The customer of the project was a large transport holding, whose analytical systems use more than 1,500 indicators, which are formed on the basis of data obtained from 1,500 sources. The main limitation was the use of only Russian technologies, which does not affect the stage of layout and prototyping, but significantly limits the choice of technology stack for implementation.
We did a lot of preparatory work, including analyzing documentation and interfaces, interviewing users, and working through business scenarios. After that, the team began creating interactive prototypes. This work consists of several stages, which I will discuss in more detail below.
Step 1. Creating static layouts
Based on the collected information and customer requirements, the specialists created static layouts in which they drew various options for each widget (screen element) using special Figma tools. Such drawing of widget options helps to record how a particular widget will change depending on other interactive elements (filters, buttons, switches). It was for this stage that we analyzed documents and interfaces. For example, the screenshot below shows various options for widgets of one screen, as a result we get easily customizable functionality for displaying multiple options for screens and widgets. By the way, it would not be superfluous to collect real data on indicators in order to demonstrate in the prototype the dynamics of real indicators for at least one quarter or half a year, and not abstract data.
Step 2. Describing scenarios for different user roles
At the stage of developing business scenarios, we put forward hypotheses about what indicators in what volume will be available and useful to users of different levels and, accordingly, with different roles. What the user's path in the system might be, have we taken into account all possible needs. Here we have already moved on to recording these scenarios in relation to visualization. The scenario must record the user's goal, what actions the user needs to perform to achieve the goal and what result the user will receive. Goals and scenarios must be arranged in the order of a certain logical use case, this should be a kind of history of the user's actions in the system from logging to obtaining the necessary information. Then the designer must collect the necessary layouts in Figma according to the scenario, so that we can be sure that we have not forgotten the screen options needed for the prototype. Then the BA (business analyst) collects the final presentation for each of the roles, such a presentation can serve as an artifact for demonstrating the visual solution of the role model to the customer, and as instructions for the designer to collect the interactive prototype.
Step 3. Assembling the prototype
Based on the layouts and scenarios, the designer creates an interactive prototype, adding missing layouts if the scenario requires it, in order to create connections between layouts, taking into account all drop-down menus and transitions. In the screenshot below, you can see what the Figma interface looks like with connections added between layouts.
When I first saw this web of connections, I honestly admit that a picture from the Internet came to mind, here it is, by the way.
The final appearance of the connections between screens may be scary, but firstly, the user of the interactive prototype will not see these connections, secondly, all these connections are established by the designer, i.e. a professional in his field, thirdly, if there is an interest and desire to create prototypes yourself (or if all the designers are busy with other activities), then there are a huge number of both free and paid Figma courses on the Internet.
Step 4. Recording a training video on working with the prototype
Finally, we always record a demo video of the prototype. It is better to describe the prototype demonstration scenario in advance to make it easier to record the video. It does not have to be long or very detailed, it is enough to record the main points that need to be voiced, as well as the order of these points. It is also important to use a good microphone and rehearse several times.
What you need to learn to create a prototype
Working in Figma.
Figma is a very intuitive tool for prototyping. In addition, sometimes it is faster to make edits to the layouts yourself than to write a technical task, wait for the execution, and then check. And prototyping in Figma is available even to a beginner and with certain skills will not take much time, which will make prototyping a more accessible stage of the project.
User goals and objectives.
It is necessary to delve into the issue of user goals and tasks, and understand how they differ. We must clearly understand what business problem we are solving and what business value we bring to the customer through our new system. It is not worth adding visualization elements if they do not help achieve the user's goals or do not solve any problem. Before adding an element, ask yourself the following questions: What is this element for? Does it help solve the problem? If so, which one? Does this problem bring the achievement of any of the user's goals closer? It will also be useful to track the length of the user's path from logging in to achieving the goal. For comfortable use of the system, this path should not be too long.
User scenarios.
Find out what user scenarios are and what they should include.
Pros and Cons of Using an Interactive Prototype
While working on this project, we clearly identified the benefits of using an interactive prototype.
An interactive prototype allows all project participants, from developers to end users, to better understand how the system will work. This helps avoid misunderstandings and reduces the likelihood of errors.
An interactive prototype simplifies and speeds up the process of testing new ideas and hypotheses, allowing developers to quickly determine which ones work and which ones don't.
Using an interactive prototype allows you to reduce the risks and costs of developing and implementing a system, as it allows you to identify and correct errors at early stages.
An interactive prototype helps you understand how users will interact with the system and make any necessary changes before its final implementation.
Working with an interactive prototype also has its disadvantages that should be taken into account before deciding to develop it. These include the labor intensity of creating and maintaining a prototype, the length of the preparatory work for creation, and the high level of detail of the layouts to maximize the effects and, as a result, an increase in the cost of the project and the time frame.
But all these disadvantages are leveled out if we include a prototype in the work plan for the implementation of an IT project and gain experience to go through all the stages faster. For example, the first scenarios took us days of work, the next ones we wrote in a few hours. In addition, with the help of a prototype, you can avoid a number of errors in the development of an information system.
So, if you want to help the customer choose the most suitable tool without implementing a full version of a complex system, decide on the final version of the product, or test the usability of the system being developed long before its implementation, then using an interactive prototype will be very effective. This will allow you to get an idea of what the final product will look like exactly at the time when the interface is being developed from scratch.
