WAIE

Completed

Redesign

Service

WAIE serves as an electronic system designed to facilitate vehicle refueling management for both businesses and individuals. Utilizing remote sensing technology on fuel pumps, it identifies the customer's vehicle by a smart chip (tag) installed near the vehicle tank.

Aldress Petroleum & Transport Services Company, a Saudi joint stock company boasting 500 gas stations and a fleet of 2500+ top-notch trucks and trailers across the Kingdom of Saudi Arabia and GCC countries, powers WAIE.

WAIE serves as an electronic system designed to facilitate vehicle refueling management for both businesses and individuals. Utilizing remote sensing technology on fuel pumps, it identifies the customer's vehicle by a smart chip (tag) installed near the vehicle tank.

Aldress Petroleum & Transport Services Company, a Saudi joint stock company boasting 500 gas stations and a fleet of 2500+ top-notch trucks and trailers across the Kingdom of Saudi Arabia and GCC countries, powers WAIE.

Team

Yellow media

Role

Research

UX/UI design

Design system

Prototyping

In numbers

425 hours

425 hours

160 screens

WAIE serves as an electronic refueling system designed to facilitate vehicle refueling management for both businesses and individuals.

After Image
Before Image
Before
After

Challenge

Traditional dating platforms are bogged down by static profiles, endless swiping, and high friction, leaving users frustrated by outdated photos, fake accounts, and slow paths to conversation.The objective was to design SHIMY—a high-intent, real-time, geo-based dating app that replaces passive browsing with active, live presence. The core challenge centered on balancing instantaneity and safety: how to build a low-friction discovery loop driven by ephemeral, live-captured selfie updates while maintaining strict identity verification (via Yoti) and preventing overwhelm, ultimately driving users from app open to an active conversation in under 10 minutes.

My role

Throughout the project, my responsibilities encompassed all stages: from initial research in collaboration with the lead designer and project manager to prototyping and the creation of the UI kit. The design process involved numerous discussions, consultations with business representatives, and team brainstorming sessions.

Define and Research

Discovery

Collecting requirements and restrictions was the initial stage of the project. This stage spent two days of discussion. It was close cooperation with the product owner and project manager and we polished some points that weren't too clean for understanding.Note: The diagram shows final ux flow for the project for desktop and mobile. It was initially developed in a simplier way with simple schemas, but for demo with client it had to be updated with UI screens.

Clarification

Overall I took around 2 weeks for additional calls with clients and team brainstorming sessions we defined some secondary requirements and restrictions. We've found that clients have additional rules and regulations for corporate customers, that can affect system behavior and some technical details. Then started to claim goals we needed to earn during the project.

Project goals

Information clarity: This partially followed from the previous one. Focus on the design of the information panel, giving priority to visual clarity to ensure users have a clear understanding of crucial system events. Scalability: Enhance adaptability for various fleet sizes, ensuring a seamless experience for users managing multiple corporate vehicles. Intuitive navigation: Prioritize navigation clarity, allowing users to easily locate essential functions and interact with them without cognitive overload. Automation: reduce manual steps and enhance efficiency for both corporate employees and private users. New design system: The current style looks extremely outdated. It has to be redrawed from scratch. We kept the main colors from the main company style and expanded it with new clean and accessible colors that pass WCAG standards.

Solutions

New dashboard

One of the main tasks was to create a convenient dashboard from which the user could access essential information without navigating through different sections. In addition, during the interface development process, onboarding for new users was implemented, helping them input the information to work with the system. Of course, this onboarding could be turned off if needed.

Scalability

A crucial requirement for the new interface was its scalability based on the user type and fleet size. The system needed to ensure ease of management for both 1-2 cars and a fleet ranging from dozens to hundreds of vehicles. Firstly, a separate user type was added for individual users. This feature was not presented in the system before as I previously mentioned due to orientation towards the corporate segment.

Improved fleet management

The client can choose the type of services according to requirements: both the development of a unique system and a salesforce-based solution. Depending on the needs, the client can choose one of the available options:

Digitalized tag installation process

Previously, the installation of tags on vehicles occurred manually, requiring customers to call the company's call center and arrange for tag installation at a station. Now, there is the option to remotely schedule, track, and manage the timelines for tag installation on vehicles in the fleet.

Mass actions

When project comes to us it`s defined as one of the largest problem. Company with large fleet can't manage a bulk of cars and make changes to some groups, categories and types. Multiple vehicles actions were added both to desktop and mobile versions, but they works in a bit different ways due to screen sizes and resolutions.

New style and design library

And the last mentioned part but the same important as previos topics was The updated design also required new design assets and a review of the approach to creating the control elements set. Therefore, just before crafting the UI interface layouts, I worked on creating it. The project didn't allocate resources for designing a full-fledged design system, so it was decided to stop at a limited UI kit. This decision brought the following advantages:More flexible change management in design elements through a component-based approach. Acceleration of UI interface assembly since most elements were implemented as components. The process itself transformed into screen assembly using the design library. According to estimates, this saved 30% of the time allocated for the current stage.Easier changes management and design improvement for future updates. It helps to reduce resources for the next design iterations.oject comes to us it`s defined as one of the largest problem. Company with large fleet can't manage a bulk of cars and make changes to some groups, categories and types. Multiple vehicles actions were added both to desktop and mobile versions, but they works in a bit different ways due to screen sizes and resolutions.

Polishing interaction experience

Few screens with the updated UI showed below. Some of flows were reworked from scratch while other requires only minor changes with UI updates.

Conclutions

The objective is to streamline access to the contactless gas service, making it as seamless as receiving complimentary food samples in a store. Users should easily grasp the value with just a few clicks and minimal physical interaction. Achieving this goal may entail exploring alternative methods for tag installation.

Get in touch

serhii.i.yermolenko@gmail.com

Get in touch

serhii.i.yermolenko@gmail.com