Full prototype: https://scout-fuel-redesign.vercel.app/
Date: March 23, 2026 | Hours: 40
Over the past 40 hours, this engagement delivered a fully functional React prototype of the Scout Fuel dashboard — not a Figma mockup, but a working web application ready to connect to a real backend. Moving from this prototype into a live build is a 20x faster path than starting from a Figma file, because the component architecture, data shape, and UX patterns are already real code.
The work has been guided by a single strategic shift: moving Scout Fuel from a system of record into a system of intelligence — a tool that surfaces insights, drives action, and makes the money being left on the table visible and recoverable. The redesign was shaped by client feedback across five UI treatments, culminating in a design system deeply influenced by Uber's design language. Light and dark modes provided for each UI style.
Five distinct visual directions were delivered. Styles 1–3 established the design space. Styles 4 and 5 were direct iterations built on client feedback. Style 5 is the current direction. It's grounded in a research deep dive into the Uber design system — typography, color, density, component behavior, and interaction patterns. An AI model was trained specifically on Uber's design language to validate that every styling decision matched the system correctly.
The first thing a user sees when opening the dashboard is two cards designed to create motion:
Together, these give every user a clear target every time they open the app. No report needed — winning or losing is visible in a single glance.
A stat strip gives managers the key numbers for the selected time frame: total purchased, average cost, total savings, and total spend.