Hugo Lourival Portfolio Thu, 06 Nov 2025 02:52:27 +0000 en-US hourly 1 https://wordpress.org/?v=6.0.11 https://hugolourival.com/wp-content/uploads/2021/03/favicon-02.svg Hugo Lourival 32 32 Modec International 🌏 https://hugolourival.com/modec/ Mon, 03 Oct 2022 19:31:48 +0000 https://hugolourival.com/?p=2825 Modec has a number of in-house services and platforms to serve its thousands of employees around the world, and many of the systems...

O post Modec International 🌏 apareceu primeiro em Hugo Lourival.

]]>

Modec has a number of in-house services and platforms to serve its thousands of employees around the world, and many of the systems used were made by third-party companies, which caused a lot of problems. To solve this problem, Modec created a development and technology sector that I was invited to be a part of.

Role:

Product Design.

Platforms:

Web

 01. scope

Challenges faced

It was necessary to renew the company’s digital platforms. Each platform was made by a partner company, and these platforms did not connect with each other and had many different problems, such as slowness, usability, among others. Our first job was on MODEC’s KPI control system “Performance Management”.

RESULTS ACHIVED

the Release

Before and after

Unproductive work days

Internal analysis found that teams were spending several days of work per month on tasks prime for automation and on issues leading to extensive rework. This amounted to an average of 4 days per employee, per month, spent on inefficient processes, creating a significant drain on resources.

Driving Efficiency and Savings

The new design solution streamlined these core workflows and automated key tasks. This optimization reclaimed thousands of collective work-hours monthly, translating directly into a multi-million dollar (annualized) reduction in operational costs and boosting overall team productivity.

Increased Adoption Rates Across International Branches

With the launch and resolution of various issues, we successfully expanded system usage.

Previously, only 6 countries were utilizing the legacy system.

Following our product launch, adoption expanded to encompass 11 countries.

NPS Results

Following the launch, we distributed a Hotjar survey via email to all users. We achieved a score of 48, indicating ongoing refinement but a commendable outcome for a launch. In detail, the results comprised 26 detractors, 33 neutrals, and 102 promoters.

HOW I ACHIEVED THESE RESULTS

02. PROBLEM

Understanding the context

As is mapping

The first step to understand where we are going was to understand where we are. So, I scheduled 2 meetings with users who knew a lot about the system to explain how the current tool works.

User interview

After understanding the current platform and a little bit of the process, I organized the interview work, defining structures and scripts in the survey to understand the users’ problems and the company’s process. The product was used from intern to global director, each person with a purpose and at a different stage of the process.

36 respondents. The product was used from intern to global head.

Separate interview script was used to understand the tasks of each employee, stage of the process that works, and the pains.

Users were interviewed in 6 different countries: Brazil, Mexico, Singapore, India, Ghana, and Japan.

I had help from a junior product designer in the interviews and transcripts.

Service blue print

Part of the step of understanding the context was also necessary to map the process. Talking to several people, we were able to connect the part of the process that each one worked and create a service blueprint of the entire process.

Pain points

In these same interviews, we identified the problems that each one faced in their work using the current platform.

Relate the problems

After having the entire list of pain points, I started to list similar problems in categories and defined the size of each ball by the number of citations. I also created a link between the ball and the problem group for times when I needed to get more detailed information about the problem.

03. CONNECT THE DOTS

Linking the researchers

Alinhando as dores aos processo

I’ve combined each group of problems at the stage of the process where they occur, so it’s easier to understand which part of the process gives the most problems.

Personas

As the process is very large, and with many people working in stages of the entire process, it was also interesting to know when each employee was in the process. So, I drew some personas based on the interviews we did and combined it with the service blueprint to make the stage of participation of each user clearer.

04. IDEATION

Deciding what to build

Sitemap

After I had a complete understanding of the company’s process and the pain points, I moved on to the ideation part where I started with the sitemap that showed the changes in navigation and structure of the new platform.

Wireframe

I started with a very basic wireframe just to define the main flows and understand if users would agree with these changes. It wasn’t difficult to get their acceptance since, on the current platform, many navigation flows don’t make sense.

05. creation

Keeping Consistency

Design system

Leading a landmark project, I championed the implementation of a comprehensive design system. This initiative unified developers, designers, and the organization, ensuring alignment across interface decisions, accessibility, and culture. By fostering cohesion and consistency, we optimized user experiences and fortified the brand’s identity. This showcases my dedication to advancing UX practices and driving impactful outcomes.

During this phase, I organized the Figma pages using a Kanban board so that everyone could easily see the status of each page in terms of “Work in Progress” (WIP), “Review”, “Done”, and “Ideation”.

05. DELIVERY

Value to the user

User interface

After gathering a lot of information through research and ideation, I began designing the interface while continuously referring back to the research to ensure that I was addressing the identified issues.

During this phase, I organized the Figma pages using a Kanban board so that everyone could easily see the status of each page in terms of “Work in Progress” (WIP), “Review”, “Done”, and “Ideation”.

IMPROVIMENTS

Login

KPI Record

KPI List

Import Data

Dashboard

KPI Analysis

User flow

Login

Register KPIs

Import KPI Data

KPI Dashboard

Analysis of KPI

O post Modec International 🌏 apareceu primeiro em Hugo Lourival.

]]> Q4 inc App 🇨🇦 https://hugolourival.com/q4/ Wed, 14 Sep 2022 22:04:02 +0000 https://hugolourival.com/?p=2701 The Q4 app had not been supported for a long time, so there were a lot of issues, bugs, and improvements to be...

O post Q4 inc App 🇨🇦 apareceu primeiro em Hugo Lourival.

]]>

The Q4 app had not been supported for a long time, so there were a lot of issues, bugs, and improvements to be made, but supporting the app was much more expensive than starting a new one. I was temporarily hired to do the discovery on this project.

Role:

Product Design

Timeframe:

Nov 2021 – Jan 2022

Platforms:

iOS, Android

01. AVAILABLE DATA

Looking inside the company

Old researches

First, I got all the data from previous research to understand what the company already had of information that could help us. I got information from an old research that was done for the app but that was not carried forward.

I worked on this old research data and separated it into topics that could help us.

Nice to have

User behavior

Technology preferences

Problems faced

Quantitative data

I also got metric data from the app and the desktop platform and worked on them to try to find out some things like the most used features, most accessed pages, and other information that could bring answers and assumptions.

I was able to discover the most used features on the desktop that I didn’t have in the app, behavioral differences between the app and desktop, and login issues that users were experiencing with the app.

Screen Shot 2022-09-15 at 14.24.57

02. CURRENTLY PRODUCT

Understanding what we have

Mobile vs Desktop

I also compared the desktop version with the app to understand how different they were and what they delivered to users.

I designed the navigation flows both in the current app and in the desktop platform, then I created a link between each screen of the app with its desktop version to make the comparison better.

App

Desktop

Differences between platforms

With that, I identified more problems within the app, such as features that didn’t work and inconsistencies between versions.

I also made a comparison between the app and desktop versions.

03. IMPROVEMENTS

Add value to the user

Quick wins

At the end of that, I separated a list of quick wins that we could attack in the new app to make the first version come with some improvements based on problems found in previous research.

04. User opinion

Talking to customers

After that, I started interviewing the users to get more feedback, and then I broke it down into a few steps.

Document the survey structure with users

 

Define the sample of users and salespeople

 

Define the script for interviews with users and salespeople

Pilot test of the script

 

 

Hightlights

The result of the interviews I managed to separate into 9 topics that helped us to understand the needs of users, such as habits, preferences, pain points, ideas, and many others.

Insights

With these highlights, I got several insights into decisions we could make to develop a better product. Each of them with high depth details so that decisions were based on clear information.

Interview results

With the result of all this research, I moved on to the design of the app. We considered everything we learned, focusing on the basic navigation and then improving it.

05. DELIVERY

The user interface

That’s when the interface design part started, where I was revamping the screens according to the research findings and the Q4 design system.

Unfortunately, I didn’t finish designing the interface because the contract was for a certain period of time, in which Q4inc planned for me to work on the Discovery stage. In conclusion, I delivered all the discovery work and a part of the ideation.

O post Q4 inc App 🇨🇦 apareceu primeiro em Hugo Lourival.

]]> UOL Mail Apps 🇧🇷 https://hugolourival.com/uol-mail-apps/ https://hugolourival.com/uol-mail-apps/#respond Thu, 18 Mar 2021 20:06:09 +0000 http://hugolourival-com.umbler.net/?p=1905 explore prototypes Android iOS The UOL Email Apps were built for 10 million users who only had access to email via the web....

O post UOL <span class="notranslate"> Mail<span> Apps 🇧🇷 apareceu primeiro em Hugo Lourival.

]]>

explore prototypes

Android

iOS

The UOL Email Apps were built for 10 million users who only had access to email via the web. These Apps are UOL Mail, UOL Mail Pro, and BOL Mail, but they use the same structure.

Role:

Product Design, Research.

Timeframe:

2018 – current

Platforms:

iOS, Android

 01. scope

Challenges faced

The UOL Company had hired another company to develop the Email applications. Unfortunately, the contracted company did not deliver a good experience to the users. Due to many problems with the Apps delivered, the UOL company decided to discard these apps and build new apps within the company.

RESULTS ACHIVED

the Release

Before and after

Result

After the launch the new apps, we were able to see an increasing number of users who started using the app and also in the store reviews.

Store evaluation

It also brought the data from the scores in the app store, App Store, and Play Store.

HOW I ACHIEVED THESE RESULTS

 02. problem

Understanding the context

We started by mapping the main users’ pain points with feedback information that the old apps already had. Within the apps stores, there were several negative comments about the old apps that indicated where the users’ biggest pains were. In addition, we did some interviews. We separated some users’ profiles, also users’ data that the company already had, and others’ data we obtained from users’ surveys, such as interviews and benchmarks.

Desk research​

Users per months

Desirability and engagement

Users per month, Desirability, and engagement: The graph on the left indicates the average number of users per month of the old applications. The number of users shows the users’ need for email APPs.

Source: Google Analytics

Reviews about previous APPs

Reviews about previous APPs: Data indicates the rating and amount of ratings. These notes informed how dissatisfied users were with the old APPs.

Fonte: Google Play Store and Apple App Store.

Problem Statement

Users’ pains and biggest problems were mapped from what they say in app reviews within app stores.

Very slow application. It takes time to sync and bring new emails and send emails.

 

 

 

Many mistakes. These errors appear at various times when using the app, making it impossible for the user to view attachments, delete emails, and view emails.

Users feel abandoned by developers. There are many quotes about a lack of update to fix existing problems.

 

 

Lack of features in the app. Users are often forced to go to a computer to complete the action they needed.

 

 

Very complicated app navigation. Several reports of difficulties with using the app were identified.

Application crashing a lot for no apparent reason, ends up closing by itself.

 

 

Users get frustrated by using a paid product while other free competitors offer better quality apps.

User journey

Collecting information from real users from app reviews and calls in the call center and triangulating with information from stakeholders plus information from Google Analytics, it was possible to create a user journey.

 03. Ideation

Discovering what to build

Benchmarking

Comparing our product to competitors that our users compare us to helps me understand what they believe is a good solution to the problems they face today. After this consolidation, it is always easier to define what to build.

Priority Matrix

Before defining what the MVP would be, I had a dynamic with the entire team of developers and stakeholders to discuss what we could deliver with greater value and less effort to deliver something of value in the shortest possible time to the user.

 04. Creation

Bringing ideas to life

Wireframe

I created the digital wireframe to visualize how the functional prototype would look. With the data shown above, I found patterns that would facilitate usability for users. I also identified that it would be better for each platform to have interactions and flows more consistent with the native device, so iOS and Android apps had different navigations.

wireframe final2

05. DELIVERY

Value to the user

User interface

After all the research, wireframing, and alignment, the product’s user interface was built to be developed and tested with users, including all the features that should be included in the product’s MVP, and also with a list of future features.

Differences between iOS vs Android

Minimalist design

I followed a minimalist style to show how the new app fits perfectly between modern apps or any other competing app, following trends, and keeping a modern design.

Consistency with the operating system

Each system received components according to the operating system to facilitate the user to identify and use the product.

Navigation

Different navigation flows according to the user’s mental model of the specific product.

06. Validation

Testing the solution

Usability test

I applied some usability tests to evaluate the UOL Apps and identify usability issues among others that we could solve before launch.

Goals

Understand the difficulties users may experience with the app and what we can fix before launch. In addition to capturing information on desirable features and understanding user habits.

Test structure

The test consisted of asking questions and asking users to perform tasks, evaluating the time taken to complete the task, difficulty, and personal opinion about the application and the tasks.

Information to consider

10 people were selected, 5 iOS users, and 5 Android users. All were already users of the application. Users were diversified by age, gender, and time as a customer based on previous research.

Test findings

To summarize the entire usability test report, I brought here the most important points discovered.

Out of 14 tasks, only 2 tasks (30% of users) had difficulty.

 

 

On a satisfaction scale comparing the current app with the new one on a scale of 0 to 10, the new app scored 8.7.

50% of users had a problem with the way some functions were written in the app.

 

Improvements

  • Fix the flows that were having problems.
  • Consider use cases that have not been addressed.
  • Improve the app’s UX writer experience.

Before and after

iOS

Android

O post UOL <span class="notranslate"> Mail<span> Apps 🇧🇷 apareceu primeiro em Hugo Lourival.

]]> https://hugolourival.com/uol-mail-apps/feed/ 0