top of page

My Work |

FuelPass - Redefining Aviation Fuel Procurement

FuelPass - Redefining Aviation Fuel Procurement

FuelPass is a desktop platform that streamlines aviation fuel purchasing with real-time data, transparent supplier insights, and smart tools for faster, more cost-efficient decisions. It empowers aviation professionals to manage fuel procurement with greater speed, accuracy, and control.

Goal

The objective was to design a digital platform that simplifies how aviation companies purchase and manage fuel. The focus was on creating a data-driven, efficient, and transparent system — helping users make quick, informed, and cost-effective decisions.

Challenges

Aviation fuel procurement was slow and scattered across emails, calls, and spreadsheets. Prices kept changing, and teams across different roles had no unified place to compare suppliers or track requests. With information split across multiple channels, decision-making became delayed and unclear.
The challenge was to streamline this entire workflow into a single web app with secure, role-based access—giving every stakeholder a clear, simple, and fast way to manage fuel procurement.

Outcome

Our FigJam workshops helped us map user journeys and clarify the key workflows. Using Figma, we turned these into clear wireframes and a consistent design system. The final FuelPass web app delivers a smooth, easy-to-use experience with real-time data and smart tools, making fuel procurement faster, clearer, and more organized for every aviation team.

Client

FuelPass

Industry

Aviation

Service

UX Research and Design

Team Setup

2 researcher + 2 designer

Time

16 Weeks

1. How I Approached It

1. Pain Points Identified

User Pain Points:

  • Information scattered across emails, calls, and spreadsheets

  • Difficulty comparing suppliers and prices

  • No real-time updates on requests or approvals

  • Slow, manual processes causing delays

  • Lack of clarity in tracking fuel orders and status

Business Perspective:

  • Inefficient workflows increasing operational costs

  • No centralized system for monitoring transactions

  • Limited visibility across teams and roles

  • Inconsistent data, making analysis and planning difficult

  • Slower turnaround affecting overall productivity

2. Discovery After User Interviews

  • Users needed a single place to manage all fuel requests

  • Different roles required different levels of access and control

  • Teams wanted real-time price visibility and supplier comparisons

  • Managers needed quick approval flows and clear audit trails

  • Everyone asked for a cleaner, simpler interface to reduce errors

3. Implementation

  • Mapped workflows and roles in FigJam to understand the entire process

  • Built wireframes and user flows to simplify complex tasks

  • Created a scalable design system in Figma for consistency

  • Developed a role-based web app with real-time data and automated actions

  • Delivered a clean, intuitive interface that speeds up procurement and improves clarity across all teams


ree


2. Design Process

1. FigJam – Team Brainstorming & Workflow Mapping: As a team, we began in FigJam, collaboratively mapping user journeys, identifying pain points, and defining the core workflows for each role. These sessions helped us align on what problems to solve and how the web app should function end-to-end.

2. Figma – Wireframes & Final UI: We collectively translated these insights into Figma, starting with low-fidelity wireframes and gradually refining them into high-fidelity screens. The team worked together to structure layouts, validate flows, and finalize the visual direction.

3. Design System & Reusable Components:

Alongside the team, we built a scalable design system—including grids, colors, typography, and reusable UI components. This ensured consistency across screens and made collaboration smoother during development.

ree

4. Front-End Implementation – HTML + Vue:

Once designs were approved, I independently converted the UI into responsive HTML and integrated it within the Vue framework. This included ensuring layout responsiveness, matching design system specifications, and preparing components for dynamic data.

3. Final Impact

Business Impact

  • Centralized all fuel procurement data in one platform

  • Faster decision-making due to clear visibility of requests and quotes

  • Reduced manual work and operational delays

  • Improved accuracy with consistent, structured workflows

  • Better tracking, reporting, and compliance for management


User Impact (Role-Based Access)

  • Each role gets a customized dashboard with only the tools they need

  • Operations staff can quickly create and track fuel requests

  • Managers can review quotes, approve requests, and monitor activity

  • Finance teams get clear visibility into costs, history, and reports

  • Suppliers can respond with quotes directly inside the platform

  • Reduced confusion because every role sees only relevant actions and data

  • Faster coordination as all communication stays inside the system

bottom of page