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.
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.
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.
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.
Creating a deal: region, name, and per-cent pricing across four discount groups (Base, Light, Lapsed, Conquest) and four fuel grades.
Managing deals: a searchable table of active deals with quick edit and delete, matching the dashboard's existing table pattern.
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.
Shipped and live in GasBuddy Business Pages. No engagement numbers to share yet.
Back to all work