← All cases

Case study03 · Firefly

Supply & AdOps Hubone platform for a street-level ad network

Firefly runs digital screens on rideshare and taxi roofs across US cities. Behind every campaign, operations teams manage drivers, hardware, inventory and advertisers. The “all services under one umbrella” platform brings Supply Ops and AdOps together on a new design system, improving the experience for both customers and employees.

RoleSole product designer: research, UX, UI, design system
Team3 product managers and the development team
Timeline2 quarters to first release
PlatformB2B SaaS web app, dark & light themes
Firefly operations dashboard on a desktop monitor
+30%increase in sales with the new products, and still growing
5new products integrated into the platform
1design language system across legacy and new services
2 quartersof planned design work

01

Context

Firefly Supply Ops covers the physical side of the network: vehicle logistics, driver onboarding, inventory tracking and the deployment of smart screens on cars. Firefly AdOps covers the commercial side: planning, selling and optimising digital advertising campaigns.

Both had grown one service at a time. Sales, operations, support and, increasingly, advertisers themselves were all working with the same data from very different angles.

Firefly-equipped car at a street event
The hardware every ops workflow ultimately serves.

02

The problem

The legacy AdOps app worked, but it had been built feature by feature. Research and stakeholder sessions kept surfacing the same three problems.

01Design inconsistencyNo shared visual language or component structure. Screens solved layout differently, fragmenting the experience and making the product harder to maintain.
02Diverse usage habitsMany roles use the same platform for very different activities. A redesign that ignored existing habits would break workflows people depended on.
03No self-serviceCustomers couldn't serve themselves, which lowered satisfaction and pushed a rising number of support requests onto the team.
Legacy landing page
Before: the legacy landing page.
Legacy driver payments screen
Before: a typical legacy detail screen.
Problem statementHow might we build a design system that serves diverse user needs without disrupting their existing behaviours, and ultimately boosts sales once customers can use it themselves?

03

Key decisions

01

Map the system before redrawing it

Working closely with the product managers and running stakeholder interviews, I reviewed the platform to understand user needs and business goals, then mapped every user flow into a single information architecture. That let the redesign reorganise navigation, and absorb future products, without dropping any of the paths people already relied on.

Information architecture map of the platform
Information architecture: every service, flow and entry point on one map.
02

Foundations first: a design language system

A moodboard set the visual direction for the new design language. Then, instead of redesigning screen by screen, I built the Firefly DLS alongside the first services: tokens, layering, typography and a component library, documented in Storybook and Style Dictionary. Every new product shipped on the same foundations, in both dark and light themes.

Design tokens and components
Tokens, variants and icon set.
Data table component in light and dark
One data table system, two themes.
03

One hub, every service a click away

The legacy app hid services behind nested menus. The new landing page lays out every area (Plan, Manage, Report, Payment, Products, Drivers, Service, Inventory, Authorization and Notifications) as cards with direct links to their most-used views.

New landing page with service cards
The new hub: all services and their key views on one screen.
04

Self-service by design

Complex setup tasks became guided, step-by-step flows with draft states, clear status badges and CRM sync from Salesforce, so sales and customers could create opportunities and campaigns without routing every request through the ops team.

05

Put location data on the map

Coverage, geofences, audiences and delivery are spatial by nature. Key views pair a working panel with an interactive map, so users draw targets, check inventory and read performance where the data actually lives.

06

Validate early, then refine

I explored concepts in wireframes with product managers and engineers, refined them into visual design based on their feedback, and prototyped the key interactions before build.

Wireframes next to the final visual design
From wireframe to visual design: the inventory report.

04

The solution

The redesign shipped as improved Supply Ops services, such as driver details, wrap campaigns, monitoring and coverage, plus five new products, all built on the same design language system.

ProblemDesign inconsistencyThe platform lacked visual consistency because services had been integrated directly, without proper design consideration.
SolutionDesign language systemA new design system created one cohesive visual language, so existing and new services blend together.
ProblemReporting with sheetsAccount managers and sales executives had no central place for reporting, and sent Excel sheets back and forth by email.
SolutionDisplay, campaign & inventory dashboardsInteractive dashboards keep the tables Excel users know, enriched with charts and interactions for effortless analysis.
ProblemCampaign creationCustomers relied solely on account executives to create campaigns, with no self-service option, which risked delays.
SolutionCampaign ManagerA guided, step-by-step flow lets customers create campaigns on their own, asking only for what each stage needs.
Monitoring and diagnostics dashboard
Supply Ops: monitoring & diagnostics.
Wrap campaign details
Supply Ops: wrap campaign details.

Opportunity Manager

Sales pipeline & CRM

Sales pipeline and customer relationship management, synced with Salesforce. Opportunities move from draft to contracted with market-level geotargeting built into the creation flow.

Opportunity listing
Opportunity listing with status stages.
Geotarget drawing on a map
Drawing geofences during opportunity creation.

Campaign Manager

Campaign management

Direct and takeover campaigns in one place, with a step-by-step flight setup covering schedule, geofence, creatives, smart delivery, data connections and vehicle targeting.

Step-by-step campaign creation
Step-by-step flight setup with per-step completion states.

Campaign Planner

Audience planning

An audience planning tool: import audience files, layer them with geotargets on a hexagon heat map, and estimate reach, impressions and budget with day-parting before a campaign is sold.

Campaign planner with delivery estimates
Delivery estimates and day-parting on top of audience data.

Campaign, Inventory & Driver Ops Reporting

Reporting

Performance tracking for campaigns, real-time inventory visibility with chart and list views, and driver activity and fleet growth, so each team works from the same numbers.

Campaign report dashboard
Campaign reporting.
Driver operations dashboard
Driver ops performance.

Advertiser Dashboard

Client-facing

A client-facing view where advertisers follow their campaign live on the map or over a chosen time period, without needing to ask the ops team for reports.

Advertiser dashboard live feed
Live feed: which vehicles are playing the campaign right now.

05

Impact

Sales rates increased by 30% with the new products launched, and are still growing. During the planned design process, 5 new products were integrated into the platform.

+30%increase in sales
5new products implemented
1shared design system across every service

Because I built the design system alongside the first services, new products arrived consistent by default instead of being retrofitted later.

06

Takeaways

01

Foundations compound

Investing in the design language system before individual screens is what made five launches possible on one team's capacity.

02

Respect existing behaviour

Mapping the flows people already used kept a large redesign from breaking daily operations, and made the new structure easier to adopt.

03

Self-service is a business lever

Letting customers create and follow campaigns themselves showed up directly in sales and revenue, not just in usability.

Next case · 04
Driver Companion