Admin dashboard · UX + UI design

Giving convenience stores a way to run their own flash deals.

I designed a new Flash Deals section for GasBuddy Business Pages, the admin dashboard convenience retailers use to manage their stations. It lets retailers create time-limited fuel discounts that show up directly in the GasBuddy app.

Role
UX + UI design, Figma prototype
Client
GasBuddy Business Pages, at PDI Technologies
Status
Shipped, live in production
The brief

Product wanted Flash Deals (short-term, per-fuel-grade discounts stores could turn on to drive traffic) as a new capability inside GasBuddy Business Pages, the existing admin portal convenience retailers already use for listings and reputation management. I got wireframes and requirements from product and had to design the feature myself, matching a live dashboard I didn't have a design system or icon library for.

Starting point

The existing dashboard, with no design guide.

Existing GasBuddy Business Pages dashboard summary with reviews and station metrics

I only had access to this live dashboard: no component library, no icon set, no color or type spec. Every new screen had to reverse-engineer the existing patterns closely enough to feel native.

Designing within someone else's system

With no design guide to lean on, I pulled every color, spacing value, and control style straight from screenshots of the live dashboard: the teal accents, the modal structure, the table and button conventions. The goal was for Flash Deals to feel like it had always been part of the product, not something bolted on.

What I designed

Create, price, and manage deals in one flow.

Create New Flash Deal modal with region, name, and discount group pricing by fuel grade

Creating a deal: region, name, and per-cent pricing across four discount groups (Base, Light, Lapsed, Conquest) and four fuel grades.

Active Flash Deals table listing deals by region and price per fuel grade with edit and delete actions

Managing deals: a searchable table of active deals with quick edit and delete, matching the dashboard's existing table pattern.

Proving it out

Before handing anything to engineering, I built a fully clickable Figma prototype covering the whole flow: creating a deal, seeing it land in the active list, editing and deleting. Product and engineering could walk through the real interaction before a line of code was written.

Status

Shipped and live in GasBuddy Business Pages. No engagement numbers to share yet.

Back to all work