16 November 2021

A more efficient product in less time with UX/UI Design

In a highly technological world, where the digitization of products and services has become massive and users have become quite demanding, it is imperative to capture their attention with offers that are extremely efficient in achieving your goals and which, ultimately, stimulate their confidence.

A correctly structured interface offers users a fluid user experience, guaranteed by the combination of valuable information for their experience, presented sequentially. Before starting any development, UX/UI Design seeks to understand its audience, their needs, expectations and difficulties, responding to these and other important questions. These, therefore, help to structure the choices and actions of each persona, which are crucial to designing the ideal service that provides an intuitive and simple navigation solution fed by relevant content.

When this process is prepared correctly, the final product translates into a highly functional solution in which the UX/UI Design guarantees the maximization of efficiency, generating:

  • Increased end-user satisfaction;
  • Increased product or service acceptance rate by users;
  • Fluid communication and shared perception of knowledge by development teams;
  • Shortening the feedback cycle between stakeholders during development;
  • Drastic reduction in the Cost of Change;
  • Decrease in churn-rate and customer acquisition costs;
  • Increased business revenue.

In fact, a satisfied user creates a positive relationship with both the brand and the company, driving growth, credibility and use of the solution. It is therefore extremely important to emphasize that, when betting on the UX/UI Design of a solution, there is a lower probability of users encountering obstacles in its use, and it is not necessary to carry out constant changes and upgrades, helping to reduce costs of time and investment in the development.

Iteractivity as one of the basic processes of UX/UI Design is an important action in the process of creating a product. After identifying the business, technological and user needs, it is possible for the UX/UI Design and development teams to architect the information and iterate until reaching a product that meets and covers all the previously defined requirements. It is at this point that the importance of the iteration process comes in, as a reactive response from a perspective of continuous improvement. After completing the prototype and testing phase, the teams assess the need for iterations and alignments that may be necessary to perform to optimize the final product, thus enabling the launch of a high-performance version to the market.

As a case study in this context, we present Doc Recognizer, the document management automation platform fully developed according to the principles of user experience. Supported by artificial intelligence algorithms, it allows the massive extraction of data from documents, automatic processing and integration into other existing solutions.

During the initial design process, the UX/UI Design team focused on architecting a platform that would allow its users to extract and organize information from documents in a massive, easy and fast way. With the integration of artificial intelligence it became possible to create a product that automatically extracts information from documents and digitizes it in a structured way. This allows its users to reduce both information processing time as well as errors caused by manual work and document decentralization.

It was during the process of iteration and continuous improvement that it became possible to obtain new answers to the needs raised. With an optimization roadmap focused on reducing the number of interactions to achieve the goals, questions also arose about the possibility of integrating new features and reducing the technical complexity of those that already existed. Since the project had been structured in such a way as to be able to integrate these new solutions, the Doc Recognizer team decided to redesign the platform while maintaining the ability to use the code base. This redesign does not only contemplate the addition of new features, as it allowed for a complete review of its usability and the customer journey map defined to represent the route of user interaction. Thus, while new features were added, an attempt was also made to simplify the user experience (fig.1):

  • Reduction in the complexity of actions;
  • Fewer clicks to reach the same goal;
  • Decrease in the number of screens;
  • Increased communication assertiveness by clarifying the correct path to close each action.

UX/UI Design

Fig. 1 – Simplification of the user experience by removing modals and presenting all the actions necessary to complete an objective in the same context.

The redesign of Doc Recognizer was supported by Atomic Design, a methodology used to develop the platform. This methodology focuses on eliminating inconsistencies in usability and design, using components that are reusable and a set of rules that cut across all interfaces that make up a product. Almost like a standards manual, this methodology allows you to maintain consistency and preserve the brand identity throughout the development of the entire project, also helping to reduce design and development time and costs.

This approach makes it possible to act quickly on changes and corrections that need to be made to the product.

  • Quickly create pages with the same structural organization.

UX/UI Design

Fig. 2 – The reuse of the layout in numerous pages with a single development.

  • Component reuse to create new features.

UX/UI Design

Fig. 3 – The development of reusable components.

Atomic Design also allows for better communication and knowledge sharing between everyone involved in the project, from teams to stakeholders. This approach was worked mostly by the UX/UI Design team, which was responsible for spreading the design and development process among the various teams (Front-End, Back-End and Data Science) and external stakeholders (customers and various partners of services).

Simultaneously with this methodology, our Doc Recognizer team decided to adopt a proprietary process built by BI4ALL’s UX/UI Design area based on three touchpoints. The BI4ALL Touchpoints (fig.4) represent three moments of approval shared between the different elements of the teams during the creation of new features. The great competitive advantage boosted by BI4ALL Touchpoints is given by better communication and a reduction in errors during product creation (which usually lead to corrections after development and which delay release):

  • Touchpoint 1 – The shared approval takes place after the gathering of requirements and before the beginning of the design, with the approval of the new features.
  • Touchpoint 2 – The shared approval of the layouts to guarantee the development capacity of the designed elements;
  • Touchpoint 3 – The shared approval of the development, with a view to guaranteeing consistency between the expected result (through the design previously approved by the client) and the result achieved (with the product development).

In an agile process in which all team members respond about their area of ​​expertise but with the ability to understand the work of colleagues, the functionalities quickly go into production after the BI4ALL Touchpoints, without major need for adaptation.

UX/UI Design

Fig.4 – Touchpoints as a BI4ALL methodology for reducing the Cost of Change.

In short, the Doc Recognizer rebranding process gave the product a more efficient response in achieving the users’ goals and also a greater technological performance. This allowed for new responses to the identified challenges, with a focus on improving the user experience, reducing the number of actions and simplifying those that were strategically maintained. As a result of this process, we identified the creation of journeys that allow users to perform tasks from start to finish more intuitively and faster. In parallel, the creation of a stronger and more consistent brand, while contributing to the growth of user confidence. This process was possible to carry out due to the application of the aforementioned methods (Agile, Atomic Design and BI4ALL Touchpoints) which, in an agile way, allowed us to respond and find effective and low-cost solutions.

    Cláudia Santos                       
    UX/UI Designer