Animalia DS

Challenge

Working in the area of ​​UX governance at TOTVS, we maintain and promote the company's DS (Design System), which unfortunately is incipient in several areas that do not understand the value and benefits and therefore, end up not engaging.

These issues sometimes go against the consistency and standardization that a DS proposes, which is why we seek to identify aggravating factors to solve in this context and promote it more and more.

One of the points identified was precisely the entry point, the Portal's home page, which should function as a landing page and provide enough relevant information to generate conversion and direct users to the main resources already available.

Approach

One of the factors discovered was that the low adherence of Designers and Developers, the main target audiences, had difficulty searching for library materials on the portal or even did not know where to find them, which generated frustration and consequently factors such as low engagement.

There were some hypotheses on the subject due to some facts, but it was in September 2023 that the research team delved deeper into the topic to map the issues that could be generating this low engagement and promotion of Animalia DS at TOTVS.

From there, I started the Usability stage by understanding the entire scope mapped out so far. There was a direction and now we needed to follow the path to find out what could be done.

It is important to highlight that this demand was assigned to another more junior designer on the team, who was having difficulty executing the process. That is when I came in and took over the leadership of the project, planning activities within a schedule.

However, the merit of implementing Delivery belongs entirely to this designer who worked with me in executing the project.

Gathering Data

We began the project by doing a brief retrospective of the research to get an overview of the artifacts found in it. With this, we understood that users were frustrated with the UI and had difficulty navigating and finding contents with that information architecture.

In this way, we extracted the telemetry data available to date to identify user behavior patterns, which made it possible to identify several inconsistencies in the interface and raise hypotheses for solutions.

Some things that were quite clear from this telemetry data were both the areas of interest based on the Heat Map (including UI elements that apparently contained interactions), and the level of interest in the content according to the Scroll Map of the page.

Another important aspect we worked on was to highlight Animalia DS's Mission, Vision and Values. To achieve this, we worked on the UX Writing of certain content already contained on other pages of the portal, emphasizing each of them in an objective and summarized way for the home page.

Additionally, I considered reusing the inputs generated in a Card Sorting dynamic previously executed by another team member to organize the Animalia DS material library in Figma.

With this, I was able to better understand how people categorize certain design system topics, which weused as a basis for structuring the portal's information architecture, including new navigation items to improve usability.

We also carried out benchmarks in 6 design systems that are references in the market, seeking general insights for the redesign of the Animalia DS portal.

Here we emphasize points such as how graphic elements are used and how information is categorized and distributed in the content hierarchy of the respective portals.

Crafting

After collecting all these inputs, we began to sketch out some wireframes with variations in the layout of both informative and navigational content with shortcuts that led to the most relevant materials for users according to our hypotheses, that would be tested later.

This method was developed in Miro, in a very dynamic and collaborative way with the tool's own wireframe elements, allowing us to elucidate our ideas in a practical way.

At this stage, we worked hard on UX writing and content design issues, not only to facilitate the understanding of labels and clickable elements that were problematic issues in the UI, but also to generate a general understanding of the design system for people.

After we had advanced in the crafting of several variations, we invited some designers to participate in a Critique, so that they could evaluate everything that could cause a usability problem, their preferences and so on.

We had very relevant participation at this time that made it possible to generate new inputs, which we used as a basis to select what we had designed best in each variation to merge into a better and more refined proposal, now moving on to a Medium Fidelity prototype.

With this new proposal in hand, we also dedicated ourselves to adding some interactions and navigations to fictitious pages so that it would be possible to carry out validation, and thus, to verify in more depth possible inconsistencies and other needs of people not foreseen in the initial understanding.

Validation

After developing the prototype and checking its functionality, we continued preparations to carry out the Usability Tests, writing a script with the main scenarios that needed to be tested, in addition to recruiting users.

We separated some tasks with objectives that could be measured – I will comment more on this in the Key Results section – considering the following scenarios:

• Understanding what Animalia DS is;
• Access to the UI Kit;
• Access to the Contribution Guide;
• Access to component documentation;
• Locating communication channels;
• Changing the portal theme.

At the time, we recruited 2 types of personas in this context of Animalia: 1) Designers and 2) Developers, with 6 people from each profile where we applied the tests in a guided manner over two days.

At the end of all test rounds, we started the Analysis and Prioritization of Adjustments to gather learnings and iterate on the final delivery of scenarios that had worked, generated doubts or simply did not meet the requirements.

This method consists of going through the transcripts of each test, highlighting points that we consider important in the users' statements beyond the objectives of the tasks during the validation, which made it possible to identify the following improvements:

• Fine-tuning terms used in texts and UI element labels – to adapt to broader user understanding;
• Changing the way cards interact – removing buttons and applying mouseover effects to meet the mental model already predicted by users;
• Inclusion of the Styles section in the navigation bar – to reduce friction when accessing, making navigation more fluid;
• Inclusion of the "Most visited" area – to enable access to content visited most frequently on the portal;
• Search box in menu sub-items – to make it easier to find content from specific contexts, such as Components.

During the process, we also mapped 7 other opportunities beyond the scope of this first wave of redesign, for future application in new cycles for continuous improvement, such as new content pages and additional information in component documentation.

Delivery

Then, after analyzing and prioritizing all insights gathered during the validation stage, we move on to the final delivery, applying the improvements directly to a High Fidelity Prototype that serves as documentation and a guide for development.

The result was a more practical Portal that was more adherent to the designers and developers who use it, highlighting the main CTAs of Animalia DS according to the needs of these users discovered and improved throughout the process.

First steps

The main CTA is highlighted in Hero, considering the initial steps for both profiles and being able to direct them to the respective sections, whereas before it was necessary to navigate between the portal to enter such information.

Shortcuts

Just below, we have included some shortcuts to access the most relevant Design System materials, as well as the pages most accessed by users, in order to facilitate navigation and usability.

UX Writing

In addition, we wrote the texts contained in the portal to improve understanding as a whole, emphasizing the principles and connecting them with the other integrated parts of the ecosystem, aiming to improve the perception of the value delivery of Animalia DS to improve engagement.

Support

Last but not least, we reinforced some fundamental links and added communication channels for contact, something that generated doubts among users and sometimes Churn, as there was no way to request support from the project support team.

Key Results

In total, we had 21 people directly contributing their insights to the project. This way, we were able to measure the results and the potential impact of the final delivery with some metrics obtained during the project, as well as various qualitative feedbacks.

The NPS score obtained at the end of each round of usability testing reinforces the positive perception of the work with only Neutral and Promoter evaluations. Even though it was still evaluated at the Medium Fidelity stage, the satisfaction rate reached the Excellent level, with 55.56%.

As for the Success Rate, which is obtained through the calculation of effectiveness in executing the tasks applied in the Usability Test reached 100%, that is, all users were able to carry out the tasks directly and, no doubts.

Customer Testimonials

As mentioned previously, there was also a lot of qualitative feedback from people who participated throughout the process:

With this, we also concluded in a qualitative way the assertiveness of the proposed solution in relation to the main objective of the project.

Are you interested in my job? Contact me here.