Programe una reunión conmigo

Product design

RedPacifico

Oil and Gas stations System Redesign

Overview

RedPacifico is a software provider for some gasoline distributors located in the north of Mexico and their platforms are used by thousands of people every day at the gas stations.

The software that these businesses are using, helps them measure and control tanks gas levels, control business fleet vehicles, manage customer payments and credits, and control the gas stations where the final user buys their gas for their vehicle.

The problem

RedPacifico has the necessity to redesign their current software because it was created twelve years ago and along all this time It had just a few improvements. They decided that It was better to start a new project from scratch to entirely rebuild the software using new technologies and develop methodologies, therefore they look to implement and improve the user interface and user experience.

The Challenge

The software was large and the challenge was to develop a design system that scaled and support all the management data modules (Providers CRUD, customers, etc) without redesigning each screen of the software, this allows us to invest more time defining and designing the modules that the final user going to interact.

Product ideation

We started by dimensioning all the modules that the system had, working with RedPacifico’s team, we define priorities according to their business needs and project priorities.

It was nice to know that at the project beginning RedPacifco’s lead knew really well the benefits of working and implementing a good user experience in their new software, working with them was so easy and fast because they always were open to new ideas and to dialog about important decisions to take for new features, new patterns, and new behaviors to implement on the system.

On the first meeting with the development team we notice that we were not going to be able to implement design systems based on what we already knew and with the most experience we had like Material Design or Human interface Design, this because the technologies and initial requirements said that the system must keep be based on Windows OS and must be a desktop platform, same as the previous version. The technologies and frameworks to implement had some limitations, that's the reason why we decided to design the new system implementing Fluent Design by Microsoft.

Navigation redesign

When we were analyzing the system actions structure we notice a pattern, the old system was designed based on spreadsheet behaviors, so It was important to keep that structure and functionalities, so we redesign the full navigation system but we kept the mental model of the old system, we implement tabs based on browser style and submodules.

The objective of this new navigation was to show to the user the information in a general way (at the top of the screen) to a particular data (bottom of the screen), giving to the user more organized information.

Admin modules

At this point we had defined and designed the main navigation, now was time to ideate how we are going to organize all the system modules and their behavior. We made a modules classification and a design for a system main menu.

Final user interface

This was the most interesting part of the project because this is the module that the final user and gas operators interact with to refuel their vehicles every day.

This module must to acomplish these requirements:

We design an interface to be easy to use for users who wants to refuel their vehicles, giving them a big digital keyboard on the interface to avoid or minimize that the user make slips errors or unconscious errors caused by inattention and mistakes or conscious errors. We used different colors on the elements and movement to give feedback to the user about what the system was processing.

The previous interface has a lot elements and it showed all the posible actions to the user, so now in the new design we reduce the cognitive load showing just the action according to what the user was doing at certain moments, for example, we didn't show the “Stop” action to refuel the gas when not even has started the process

Errors prevention

We design interactions to give to the user the opportunity to prevent slips error (unconscious errors) or mistakes (conscious errors based on a mismatch between the user’s mental model and the design)

Reference: https://www.nngroup.com/articles/ten-usability-heuristics/

“Our customers are happy with the value of the UX and UI for the new product, is more useful, is easier for them to use the new environment”

🤝 Schedule a meet

Let's take that project you have in mind to the reality

Schedule a meet