the key to a successful project

Hello everyone! My name is Zhenya, I am a systems analyst at Sminex IT. Today I want to share our experience of using prototyping methods in the implementation of the IT project “Product Portal”. I will tell you how, with the help of prototypes, we managed to meet the customer's expectations, meet the deadlines and make a cool product.

Eugene

Systems Analyst

Problems

As a rule, at the start of a project, the customer does not always understand exactly how much his wishes will be understood and observed. The opportunity to see and “touch” the finished result appears only when the first MVP version is ready. With this approach, a return to the analysis and development stages is inevitable, which imposes risks on the project: the development time and cost increase.

Prototyping

We included the prototyping stage in the requirements collection and analysis block to prevent the identified risks.

An interface prototype allows you to quickly get feedback at the very beginning of a project. It helps you understand how convenient the designed user interface is and whether it will allow you to close business needs.

Types of prototypes

The purpose of creating a prototype is to prepare a simplified version of the product that demonstrates its main functional capabilities. There are the following types of prototypes:

• Low fidelity prototypes — are created relatively quickly and do not require special knowledge. They allow you to work out the idea of ​​a function yourself or together with a designer. For example, you can sketch out interface sketches in Miro.

• Medium fidelity prototypes — a compromise between low and high fidelity. In such prototypes, interface elements are drawn quite realistically. At Sminex IT, their development is carried out by analysts and product/project managers. For creation, we use the MockFlow tool.

• High precision prototypes — fully developed product screen maps with designed visuals. They are created interactively by our UX/UI designers using Figma, Framer or Sketch.

Case study of prototypes application within the framework of the “Product Portal” project

The customer came up with a request to implement a common wiki for our development projects. This resource should provide employees with the necessary information and interaction about the projects.

Below we will tell you step by step how we applied prototyping during development, and how prototypes helped us at each stage.

Step #1. Synchronization with the customer

After collecting business requirements, we organized an additional meeting with the customer, where we demonstrated low-fidelity prototypes. The goal was to check the compliance of all the necessary functions and show the proposed interface elements.

What did this give us:

• Added an additional menu for accessing an external service with project information.

• The navigation system has been changed. We have abandoned the side menu to increase the product information area.

• Improved slider with house renders, fixed the problem with unavailability of images in previous versions of the portal.

Result: The result of the low-fidelity prototype work allowed us to improve the system requirements and take into account new features at the initial stage.

Step #2. Transferring the task to the UX/UI design department

We developed a medium-fidelity prototype based on customer feedback, established connections between screens, wrote user stories, created a user persona. Then we passed the technical specifications to the UX/UI design department.

Result: The medium-fidelity prototype in the specification helped prevent discrepancies between the analyst's expectations and the designer's ideas about the system.

Step #3. Usability testing

Now we have a high-fidelity prototype that meets the client’s expectations and has been adjusted from a UX/UI perspective. However, it’s important to make sure that the product is usable for end users. In fact, in step #2, the designer developed not one, but three prototype variants that we used to test hypotheses in a user focus group.

We have prepared tasks:

1. Find information about the project architecture (use the search).

2. Find and open source facade render images.

3. Subscribe to updates on parking space information.

4. Suggest correcting inaccuracies in the information on the playground page.

Result: It was found that for task #1, the second prototype option (search window in the center of the page) was more understandable to users. Respondents completed the task 60–70% faster than the first option (search window in the upper corner). For tasks #2–4, the results of execution in prototype options 1 and 2 were the same (+-15% deviation in time).

We also got some non-obvious results: we noticed that users did not quite understand that the project sections with a muted design were not available in the system. We decided to use a visualization option with an additional “status” plate, which gives users information about the readiness of the section.

At the output, we got the expected result, ensuring quality and deadline. “Product Portal” was successfully released into production, and users appreciated its convenience and functionality.

The practice of implementing the prototyping stage has shown positive results. We plan to scale it up to other projects and product groups.

Prototyping helps you meet deadlines and preserve content by:

• Careful development of functional requirements. Having a prototype allows you to better understand and formulate the functional requirements of the system.

• An accurate description of the tasks for the designer. A prototype helps to clearly and thoroughly explain the interface development tasks to the designer.

• Testing hypotheses before development. The ability to test various hypotheses before development begins allows you to create a product that precisely meets the customer's requirements.

• Demonstration of the product to the customer at the start of the project. Prototyping allows you to show the customer what the product will be like when it is finished. This helps avoid the need to make changes that could affect the project timeline.

Be sure to share your cases and questions in the comments. Until next time!