Mobil - MP.DSGN

Web Design UI/UX

May, 2023

eGas

Role/Services

Web Design UI/UX

Designed

HTML5 CSS3 JavaScript (ES6) Bootstrap 5 Figma Responsive

Client

Mobil Golfo, Designed at PROINTERNET

Category & Year

Project Overview

eGas is a B2B software provider serving gas station operators in Mexico. Their existing website had significant visual and content issues: it was outdated, poorly maintained, and made it difficult for interested businesses to find the information they needed to evaluate the company's services. I led both the design and front end development of the redesign.

Problem

Mobil Golfo needed the engagement and interactivity that social media typically provides, without being able to use social media itself. A standard institutional website wouldn't give the brand the audience interaction it needed to build presence and reach, while any social-media-like feature had to be built directly into the site itself, since no external platform was permitted.

Goals

Recreate social media style engagement (commenting, reacting) within a traditional institutional website
Give Mobil Golfo a strong, distinctive digital presence despite the platform restriction
Leverage the brand's Formula 1 partnership as a central engagement hook
Deliver both design and front end implementation for a dynamic, motion-driven experience

Research

Research was conducted through competitive benchmarking of other gas station and fuel brands, to understand how comparable companies built digital presence and audience engagement within a traditional website format.

Key insights

Since social media itself wasn't an option, the engagement mechanics people expect from social platforms, commenting, reacting, and following ongoing content, had to be rebuilt natively into the website's own architecture
The Formula 1 partnership was a uniquely strong engagement hook at the time, given the surge in Mexican fan interest in F1 and Checo Pérez, and needed to be positioned as a central feature rather than a secondary mention
A single static homepage wouldn't sustain repeat visits without a social platform to drive return traffic, so the site needed its own reasons for people to come back, like ongoing news and updates

User profile

Primary users are consumers in the Gulf region interested in Mobil Golfo's offerings, fuel-related news, and its Formula 1 partnership, who would otherwise expect to engage with the brand through social media.

Main user flow

The experience guides visitors to:

Discover Mobil Golfo's products, services, and Formula 1 partnership
Engage with news and content directly on the site through commenting and reactions
Access practical services like the nearest gas station locator

UX & UI decisions

Forum-style news sections built directly into the site, allowing comments and reactions in place of social media engagement
Formula 1 partnership given prominent, dedicated placement as the platform's central engagement hook
Energetic, motion-driven visual design to compensate for the absence of a social feed
Integrated map for locating the nearest gas station
Full front end implementation to support interactive, dynamic content across the site

Outcome

The platform gave Mobil Golfo a way to deliver social media style engagement, including commenting and reacting to content, entirely within an owned website, working around the brand's restriction on social media accounts. The Formula 1 partnership, positioned as a central feature during a period of strong fan interest in Mexico, served as the platform's main engagement driver. No post-launch results or feedback are available for this project at this time.