DDRP

Web Design UI/UX

December, 2023

Role/Services

Web Design UI/UX

Designed & Built

HTML5 CSS3 JavaScript (ES6) Bootstrap 5 Figma Responsive

Client

DDRP, Designed at PROINTERNET

Category & Year

Project Overview

DDRP is a fuel ordering platform serving industrial and commercial clients across different regional coverage clusters. The previous site had an outdated design, confusing navigation, and an unclear fuel ordering process, making it difficult for visitors to find information about industries served, station locations, and services. I led the redesign, covering both design and front end development.

Problem

The previous site's outdated design and poorly organized information architecture created friction throughout the experience: navigation was confusing, the fuel ordering process wasn't clear, and information about industries and stations was hard to find. Compounding this, clients had no easy way to identify which regional cluster covered their location, creating recurring confusion about who to contact for service.

Goals

Modernize the visual design and improve overall usability
Restructure the information architecture for easier navigation
Clarify the fuel ordering process
Introduce an interactive map to eliminate confusion around regional cluster coverage
Deliver both design and front end implementation

Research

Research combined a UX audit using Nielsen's usability heuristics with competitive benchmarking of other players in the fuel ordering and distribution sector. The heuristic audit identified specific usability breakdowns in the existing site's navigation and information structure, while benchmarking clarified how comparable platforms organized service and coverage information.

Key insights

The heuristic audit confirmed that confusing navigation and disorganized information architecture were directly responsible for how hard it was to find basic information like station locations and services
Regional cluster coverage was a recurring source of client confusion, since there was no way to visually confirm which cluster served a given location, a problem that couldn't be solved through better copy alone, it needed a dedicated interactive tool
Benchmarking showed how competitors structured service and coverage information, which informed how DDRP's own information architecture was reorganized for clarity

User profile

Primary users are industrial and commercial clients needing to place fuel orders and identify which regional cluster serves their location, who need fast, unambiguous access to that information without navigating a confusing site structure.

Main user flow

The experience guides visitors to:

Identify which regional cluster covers their location using the interactive map
Find relevant industry, station, or service information
Complete a fuel order through a clarified, simplified process

UX & UI decisions

Modernized visual design replacing outdated patterns
Information architecture reorganized for clearer navigation
New interactive map showing regional cluster coverage, directly addressing a recurring source of client confusion
Simplified and clarified fuel ordering process
Full front end implementation to bring the design to production

Outcome

The redesign replaced an outdated, confusing site with a clearer, better organized experience, addressing navigation and information architecture issues identified through a Nielsen heuristics audit and competitive benchmarking. The new interactive cluster coverage map directly solved a recurring source of client confusion that existed in the previous site. No post-launch results or feedback are available for this project at this time.