Super App

Challenge

Initially, we were given the mission of unifying all the experiences contained in the journeys of 4 mobile applications for the backoffice segment, namely: Meus Ativos, Meus Contratos, Meu Protheus and Meu Desconto INSS, which encompass workflows related to Requests, Approvals, Data Views, Indicators and Asset Movements.

The biggest challenge was to merge all these diffuse and divergent experiences, in order to facilitate users routines, considering the profiles of Requesters, Analysts and Managers.

• Non-logged-in area: the purpose of which was to provide information and news regarding unified applications;
• Configuration Wizard Shortcut: to enable access to a functionality for linking user registration to the mobile products;
• Notifications: to inform users about the progress of their processes in the App;
• Branch toggle: to make this action easier and more intuitive, without the need to login again.

Approach

This project was executed by me and two other designers, one being a Usability Specialist who managed the execution, and another third-party analyst who carried out the hands-on with me in the steps that I will explain below.

We started the project by getting a general understanding of each of the applications by mapping the user journey in each workflow. At this stage, we used a lot of internal documentation from the development teams and customer support to quickly put together a diagram, but it was still difficult to understand the nuances of these flows.

So I suggested we do a User Experience Mapping using a technique I had used to structure two other successful ERP tool redesign projects, similar to a sitemap but using the application interfaces themselves, making it easier to understand each workflow, interactions and start to identify patterns and inconsistencies:

Subsequently, we reviewed this mapping material with the project's core team, made up of technical and business people with know-how on each of the applications.

With this, we clarified each touchpoint of the workflows and understood how these applications relate to each other, making crucial discoveries of functionalities that were even, ironically, considered an “easter egg” due to inconsistency in usability.

After analyzing the material in more depth with due understanding, we were able to identify the following patterns among the applications:

• Actions for requests with pending status;
• History of requests with approved and rejected status;
• Filters for requests.

Additionally, and perhaps most importantly, we also identified some inconsistencies between the apps’ experiences, such as:

• Different information architecture for each application;
• Actionable elements, such as cards and buttons with different behaviors;
• Divergent navigation pattern and interface;
• Writing in general, especially on action labels using different terms for the same type of action.

An extremely important point, was identifying that the Meu INSS app was disconnected from the others and could cause confusion. We explained this to the project sponsor based on the mapping we carried out and obtained permission to remove it from the scope.

Based on these lessons learned, we began to design a new and unique mental model focused on unifying these experiences, but also minimally maintaining the current functioning of the business rules of the other applications.

We structured this information architecture in a mental map without designing the interface itself, focusing on terms such as navigation, actions and data listing, which made it possible to organize and iterate in a much more agile and efficient way as the idea matured.

Soon after consolidating this architecture, we began designing some interface models with a low-fidelity prototype.

This stage was crucial to seek solutions in a creative and collaborative way, involving both the usability specialist to refine the proposals, and the core team itself in checkpoints to assess the technical feasibility of the solution.

To achieve this, we took into account some design assumptions for this new model to create the Non-logged-in Area, Configuration Wizard Shortcut, Notifications, Branch Toggle, as detailed in the Challenge section.

In addition to the premises, we also brought additional concepts with insights obtained during the mapping of journeys for a better experience with the products unified in the new proposal:

• Overview: emphasized the number of Requests with pending status for each workflow to help manage these demands, which are the core of the application;
• Information summary: highlighted the main information in a consolidated manner to assist in decision-making for each workflow;
• Quick navigation: in addition to a toolbar for instant access to Notifications and Branch Change with global access in the application, a quick-filter was implemented in the Information Summary.

After a few sessions, we converged these ideas and began designing the medium-fidelity prototype, adding the appropriate interactions to carry out the usability test.

With these characteristics, we achieved consistency and simplicity in general, creating an easy-to-understand information architecture with only 3 navigation levels and the same Mental Model for each workflow, namely: 1) the Home Page, 2) the Context, 3) and Context details.

Once the mid-fidelity prototype was developed, we began usability testing to efficiently and cost-effectively validate the solution created.

To this end, we have developed a script with some real scenarios to clarify tasks related to the Contract Management, Purchase Orders, Accounting and Asset Management workflows.

It is worth mentioning that for the Home Page, we designed some models that translated the summarized information into different views, and we sought to understand which would work best for users during validations with an A/B “plus” preference test.

In total, there were 13 rounds of usability testing where we took notes of all the observations made by users, and then consolidated everything for a later analysis together with the project's core team.

Learnings

With the inputs generated from the test analysis, we were able to better understand some user behaviors and preferences, which made it possible to iterate on the flows and make them even leaner and more simplified. Below is a highlight of these iterations:

• Navigation: the position of the application's back button has been changed, reusing the users' mental model on mobile devices, expanding the space for content on the screen and making navigation more intuitive;
• Filters: eliminated “quick filter” options on context pages as they conflicted with the understanding of the Filter action, thus also making the interface cleaner;
• Filter parameters: another necessary change in the filters was the marking of the selected parameters on the screen, to show whether they were applied, which also allows for the quick removal of applied parameters when viewing the data;
• Asset Flow: in this journey, a pre-existing visualization mode of the original “Moviment History” was also improved after realizing that this caused confusion, we relocated it to the 3rd navigation level (Context Details) which would make it easier to understand and search for this information;
• Key Info: new information has also been added to the data index listed after users report their importance to help identify and locate them.

Other small UX Writing adjustments to the labels of some elements, such as buttons, were also adjusted according to the users' understanding of the business rule.

---

Delivery

In the end, we consolidated all the learnings obtained during the Approach, iterating the solution with the points mentioned above and then, refining it to a pixel perfect level, in a high fidelity prototype.

Home page

The Home Page made it possible to view key information in a consolidated manner with visual resources and data that aid fast decision-making, also facilitating access to workflows with better direction.

Requests

Similar to the Home page, we designed the Requests page to channel this type of task present in each workflow into a single context to reduce friction by having all request in one place.

This also allowed the creation of request actions with greater autonomy and efficiency for users, allowing them to be approved or rejected individually or in batches:

Contract Management

For the Contracts workflow, it follows a very similar mental model in a list of cards, adapting only the information necessary for the user to identify the type (purchase or sale) and also have a quick understanding of the current progress.

Each of the listed contracts can be navigated to the third level, where it is possible to view a monitoring history for more detailed information:

Assets Management

As with other workflows, the Assets page presents the same mental model of the information architecture in order to maintain consistency across the application as a whole for better usability.

Its particularities are: the main action to “Read the label” of company assets for inventory and the data necessary to identify records.

Each of the listed assets can also be navigated to the third level, where it is possible to view a history of movements and other details of the record:

It’s worth mentioning the importance that modeling in information architecture provided to the final Super App solution, providing not only a great usability, but also making it possible to index extra workflows from other applications with similar functions.

Key Results

To ensure that the delivery would generate value, at the end of the project cycle, I consolidated all the metrics we captured during the dynamics, providing a perception about the effectiveness of the solution before proceeding to Delivery.

A high NPS was noticed among users who participated in the process, with 100% of the positive evaluations of the solution crafted:

• 81% of users rated the experience as extremely satisfied (9-10 ⭐);
• 19% of users rated them as satisfied (7-8 ⭐)
• No user rated it as neutral or dissatisfied (0-6 ⭐).

In total, 13 users participated in the usability tests, which resulted in a 92.9% Success Rate, taking into account in the score only tasks performed exactly as specified, no minor issue, no doubts, which corroborates the effectiveness of the design.

Furthermore, we applied the SUS method at the end of each test, which resulted in 86.7 points in the usability scale of the solution as a whole, above the acceptable average of 68 points.

These metrics prove not only the acceptance of the crafted solution, but also demonstrate the effectiveness of the design.

Customer Testimonials

See some of the feedback received from customers who participated in the process:

It is also worth mentioning that, at the end of the tests, we also asked about preference between the old applications or the new unified solution, and in 100% of cases, people opted for the Super App.

Are you interested in my job? Contact me here.