RODONAVES
Design research
Product design

Improving employee experience through a user-centric approach to create a new TMS system

about the project

Abstract

icone de uma pessoa
My Role

I worked on this project as a leader and main designer inside the challenge

icone de uma medalha
Business Achievements

The improvement of employees' experience and the decrease of time-wasting

icone de uma estrela
Personal Achievements

Improving facilitation skills by applying workshops within many Rodonaves units

Role
Working as a Product Designer Lead
Design Team
2 Product Designers, 1 Service and Product Designer, 1 Researcher
Durantion
12 months long
Technology
Angular Material for web

My work

icone de uma pessoa
Discovery

Planning and execution of the research process based on interviews, shadowing, and also visiting and experiencing.

icone de uma medalha
Define and Design

Working along with the Product Managers and Key users to define and design features and interfaces for the new system version.

icone de uma estrela
Delivery

Building interfaces and prototypes using a smart component library based on Angular Material Design with Figma.

Summary Phrase

We moved one of the biggest logistics companies in Brazil from the COBOL age into the Web Cloud Service age, working along the users.

Context

Brazil is a country as large as a continent, that's why there is a dependence on the use of road systems, so there are many transportations companies disputing a share of this market. RTE Rodonaves is one of the most important transportation company in Brazil, which was founded 30 years ago and nowadays have been improving its technology. After the arrival of FeedEX and UPS and the recent advancement of technology, Rodonaves had to rethink its use of technology and systems inside the company to improve the user's efficiency, experience and process.

Challenge

We had the challenge to make a system with the users’ participation, in other words, thinking the new system together. Our challenge started with three departments, which were using systems made in COBOL and Dot.Net. They've been using this TMS system (Transport management system)  for the last 20 years, so we needed to found all user's patterns, behaviors and vices before making a complete new system. To found these answers only understand the process isn't enough, we needed to understand the user who was working daily with these old systems.

Double Diamond Process

The double diamond diagram. Discovery, Define, Design and Delivery

Solution

Applying a traditional design thinking process named Double Diamond, we decided to use a field research methodology during the discovery step. For this purpose, we visited 5 Rodonaves units across the state of São Paulo in Brazil. I particularly chose to visit the two most important distribution centers and three regular units with different sizes and behaviors. Our research was tought by us to identify the differences inside the same process that is replicated by diverse units, and also to bring a deep understanding of our user's behavior. For this, I defined four-step to be applied inside each unit; The first one was to map the process through a design thinking workshop, then a shadowing methodology helped us to watch the process happening. After getting the knowledge about the process, we started to learn about the user's behavior profile applying Interviews, Surveys and finally I chose to record the user's screen, because with this I would be able to understand the vices related to the COBOL and DOTNET interfaces.

Rodonaves' old system based on Cobol
Old System made on Cobol Language
New system based on Angular in cloud
New system made on WEB Angular

Discovery

Workshops

The process was mapped with the help of Rodonaves' employees during a workshop session that brought the process and the "monsters" (pain points) inside the process

Shadowing and one day in their shoes

Non-participative and participative shadowings were used to understand how the process works in practice, bringing a broad perspective of the user's task

Interviews

A deep interview process helped us to understand the user's profile and build personas that showed us the existence of users variety with unique necessities and behavior

A workshop facilitated by me
Shadowing processShadowing process

How I applied

As the project leader, I was responsible for the quality of our outcomes and the definitions of methodology and process. Besides that, I worked as a Research Designer inside the entire discovery and a UX and UI designer inside the delivery step.
During the discovery, qualitative and quantitative methodologies were applied to understand the whole picture of the user's process, behavior, and profile. However, the highest point was the experience moment, where we lived one day in the user's shoes, which means experiencing the user's task and working as one of them. I personally had the chance to deliver some packages across the city, having the same experience that my user had in his daily work. I strongly believe that this kind of approach shows us the reason that makes a process change. Besides that, when we spend some days having an immersion with the users, we can notice some aspects that weren't so evident before. As a designer, these aspects allow us to build interfaces oriented to the users.

Outcomes

an icon of a person with a heart, meaning love
Service Blueprints

More than 10 services blueprints were built to bring how each process worked and what were the problems inside those process

an icon with three person, where one of them is the leader
Discovery Report

A compilation with all the user's behavioral point, necessities and pains was made to help us to think solutions for the new system

an icon with a person and a search symbol
Personas

7 Personas were made to exemplify the amount of employees that uses the system and to help us to understand their profiles and digital maturity

Service blueprint

example
Download example

Usability discoveries

DISCOVER example
Multiple system windows opened to complete a task

mining information

The necessity to open more than one window to complete a simple task. Because of spread information all over the system and the lack of resources such as searching and copy and paste commands. The user needed to have opened a lot of system windows to get all the pieces of information necessary. So, only one user was generating many sessions at the same time, make it an unstable system.

Download report

Personas

example

A persona is a tool that allows us to have an understanding of the user's profile and behaviors. Besides that, it's a strategic tool that approaches the users with the engineering team, creating empathy among the people inside the project and making it easier to find Key Users that help the design and engineering team during the development process.

One of the personas that were made in this project
Download example

Define and design

The define and design processes were executed bringing the Product Manager, Engineer team, and Key users into the process. So, it allowed us to be faster and more precise. Besides that, as the user was inside the process, a lot of mistakes and problems were found before the test. At some point, due to the lack of time we had to skip the user test and build de interface based only on the key user vision, although isn’t the best practice, it was definitely more efficient and necessary during some moments.
Sometimes we need to forget the "by the book" process and to make some decisions based on the business necessity, there is no perfect scenario where we will be able to apply all the steps from the design methodology without having any problem.

About the process

Tiny-Workshops

The ideation process with the product manager, engineer team, and key-user.

Wireframes

A co-creation section to make a wireframe that exemplifies the solution

Prototype

Building a high fidelity prototype on Figma to test with users

An example of a Wireframe section with Product manager and Key-user
The co-creation process among users, product owners, and designers.

Deveopment

icone de uma pessoa
Smart Components

A smart component library was made on Figma, which allowed us to have a design consistency during all the project.

icone de uma medalha
Prototypes

High fidelity prototypes were built to help us show and get the approval from the users and stakeholders.

icone de uma estrela
Interfaces

More than 120 interfaces were made by our team in 12 months of project, and more than 10.000 layers on Figma were used.

One of the new interfaces that was made by me during the project
One of the new interfaces that was made by me during the project

Take away

an icon of a person with a heart, meaning love
Working with users save your time

When you have key users inside the process, you'll save time but also need a senior team to deal with the situation

an icon with a person and a search symbol
User research helps to sell design

When you apply a good research process, the people begin to understand the design value

an icon with three person, where one of them is the leader
Simplify for development

Sometimes we need to think the simplest solution in order to get the job done on time

an icon with a target, meaning the objetive
Design Patterns along the time

Old systems like COBOL, make the users cultivate specific design patterns along the time.

Design System

Building a design system using an open-source one as your base structure isn't always the best option.

Failing fast, learning even faster

Sometimes we need to cut out the design process to get faster results in our project.

🤞 You should check more cases.

All the site was made by me | © COPYRIGHT 2024 - TODOS OS DIREITOS RESERVADOS.