FuelX ERP

Desktop app UI and UX design for ERP tool

Desktop app UI and UX design for ERP tool

Desktop app UI and UX design for ERP tool

Q4 Fuel is a nationwide fuel distribution company. We developed the FuelX app as an ERP tool to optimise their order and fleet management.

Q4 Fuel is a nationwide fuel distribution company. We developed the FuelX app as an ERP tool to optimise their order and fleet management.

Q4 Fuel is a nationwide fuel distribution company. We developed the FuelX app as an ERP tool to optimise their order and fleet management.

My responsibilities

Usability audit UI/UX design Visual QA

Team

UX lead Business analyst Front-end developer

Industries

Logistics Fintech B2B

Client

Q4 Fuel Fintec Labs

Date

August 2020

FuelX scheduler
FuelX scheduler
FuelX scheduler

Project overview

The project started as a bootstrapped, spreadsheet app with a database that created a rudimentary, automated UI. In time it evolved into a more robust ERP tool with three Fintec Labs developers building a scheduler and dashboard. I was asked to join the team to take the lead with the interface design of the next iteration and help optimise the user experience.

FuelX Status icon key
FuelX Status icon key
FuelX Status icon key

Problem statement

The existing UI had usability issues and lacked visual refinement. A redesigned interface was required to improve the user experience and workflow. The purpose of the project was to make the ERP app easier to navigate and speed up the workflow of Q4 Fuel’s personnel. As the existing UI was bootstrapped by the developers, it had a fragmented visual language and flagrant usability problems. My goal was to improve the UI/UX and collaborate with the dev team to implement the redesign accurately.

FuelX dashboard
FuelX dashboard
FuelX dashboard

Dashboard redesign

I redesigned the existing dashboard, resolving its usability issues and expanding its functionality. The tab structure and data table were retained as display methods, because they were suitable for the type of data. To enhance the usability of the various status columns (order, fleet, payment) I created a set of unique icons with a handy icon key above the table so that the scheduling managers could reference it easily. We also added a right-click menu that allowed users to quickly assign a new status to an order.

FuelX scheduler design decisions
FuelX scheduler design decisions
FuelX scheduler design decisions

Scheduler redesign

The most challenging and rewarding stage of the redesign was the scheduler. I managed to simplify the interface while adding functionality in the process. I applied the new colour scheme and typographic system to unify the aesthetics of the interface. A big challenge was resolving the wasted space and optimising the data-ink ratio. In the end I managed to create a cleaner-looking UI that made the daily tasks of the users easier and faster to execute.

FuelX mockup
FuelX mockup
FuelX mockup

Project outcomes

The new FuelX app delighted the client, improved their efficiency and reduced working capital required. Their workflow speed increased fourfold with a 25% reduction in working capital required. I really enjoyed working with the developers and being able to refine the front end through regular visual QA. In hindsight, I would have insisted on meeting with the administrators of Q4 and doing some user research to find out their most salient problems first-hand.

Client feedback

“What took me a whole day to do I could complete in 2 hours in the app.”

Client avatar

Q4 Fuel Logistics Manager

I believe in the power of collaboration and imagination. Together we create better, smarter and more innovative solutions.

© 2023 Dian Wessels. All rights reserved.

I believe in the power of collaboration and imagination. Together we create better, smarter and more innovative solutions.

© 2023 Dian Wessels. All rights reserved.

I believe in the power of collaboration and imagination. Together we create better, smarter and more innovative solutions.

© 2023 Dian Wessels. All rights reserved.