Directo · Flash EnterpriseBrand web dashboard · design and code5 min read
The dashboard left Ant Design in one week.
The brand dashboard for retail media, designed and coded with the same design system as the apps
- Client
- Directo
- Period
- October 2026
- Role
- Research, design and front end
- Scope
- Brand web dashboard
- 197 → 0
- dashboard files importing Ant Design, in one week.The dashboard now runs on the apps' design system.
- 51
- design system pieces on the web, with the same color, type and components as Flutter.
- 34
- clickable prototype screens across six flows, before the first line of code.
- 185
- screens in Figma: the dashboard as it was coded, and the new version.
00 File
| Client | Directo, a Diletta client |
| Product | Flash Enterprise · the web dashboard where a brand follows its own shoppers, products and campaigns |
| Role | Senior Product Designer at Diletta Solutions, the company I work for. Research, prototype, design system and the version 1 front end |
| Scope | the market research, a 34-screen prototype, six style versions, the web version of the design system and the dashboard migration |
| Validation | with Renato Garcia and Directo's team, screen by screen |
| Platform | web, desktop |
| Tools | Figma, FigJam, React, web components, Claude Code |
| Period | October 2026 |
01 Summary
Problem. Directo's dashboard was built for retailers and ran on Ant Design, an off-the-shelf component library unrelated to the apps' design system. Directo started selling to brands, and brands did not see themselves in it.
Role. I did the research, the prototype and the style versions. Then I took the apps' design system to the web and migrated the dashboard with Claude Code, on a branch, reviewed by the team.
The decision. Promise transparency about spend, never performance. The dashboard shows who the shopper is and how much engagement turns into purchase, and it does not promise a return.
Result. In one week, the 197 files importing Ant Design dropped to zero. The dashboard and the apps now share one design system.
Status. The new version is on the release branch. Shopper insights runs on sample data until the API exists, and the first validation is with Café Cajubá.
02 Context
Directo ties media to in-store sales. A brand pays to show up in the retailer's app and wants to know whether it sold.
The meeting where the focus moved to brands named three pains: spend goes out blind, the brand does not know any of its customers, and there is a lot of data and little guidance on what to do with it.
03 Constraint
Performance cannot be promised. The line is the client's: transparency on spend, yes; performance, no. The dashboard could not suggest a return the mechanics do not measure.
The dashboard was in production. Migrating could not stop the team, so everything went in on a branch, piece by piece, with a count that could only go down.
Real data does not exist yet. The insights API comes later. The screen had to be decided with sample data, without pretending it was real.
04 The problem in numbers
197 dashboard files imported Ant Design. Every new screen repeated color, spacing and components by hand, and none of it matched the apps.
05 Exploration
Research, prototype and six versions
I started with market research and a design thinking session with Directo. The reference model was receipt-reward apps, which measure the purchases of people who saw the ad and people who did not.
The prototype came out with 34 clickable screens across six flows. Then came six style versions, from the official blue identity to the final one with tiered plans. The rule that stayed from version 5: the plan tier only shows where it changes permission, limits or money.
06 Decisions
D1 · The profile belongs to the chosen audience
Four audiences at the top: engaged, followers and lovers, who live in the retailer's app, and buyers, who come from every retail network. Picking one changes the profile and the trend below.
Why: "who is my shopper" has no single answer. Followers and buyers are different people, and blending them hides exactly what the brand wants to see.
D2 · An index against the network, not a raw number
Each slice of the profile carries an index: 100 is the network average, above 110 is affinity, below 90 is absence.
Why: "64% women" says nothing without knowing the share across the whole network. The index turns the data into a campaign decision.
D3 · One chart per data point, and the shape comes from a rule
A donut when there is a clear majority, bars when values are close. A design system rule picks, not whoever builds the screen.
Why: with five charts per screen, every eyeballed choice becomes five different styles within a month.
D4 · Version 1 is what the client can react to
Four metrics stayed, three filters and the sign-up profile: gender, age, income and children. The buyer lifecycle moved to version 2.
Why: insect repellent gets rebought twice a year, cream cheese three times a week. The rule for new, returning and loyal changes by category and by brand, and deciding it without a client would be a guess.
What I gave up: the most complete screen. I got a screen that goes in front of the client now.
D5 · The web adopted the apps' design system
The design system was born in Flutter, for mobile. I took the same color, type and components to the web as web components, and the dashboard swapped Ant Design for them.
Why: keeping two systems means fixing everything twice. With one, a fix in the design system reaches the app and the dashboard in the same release.
07 Craft
Two chart cards on the same row came out 310 and 290 pixels tall. The defect was in the design system's card, which did not fill the row's height. I fixed it there, published a new release, and the dashboard got the fix along with the other products.
08 Result
197 files with Ant Design went to zero in one week, October 10 to 16. The design system now has 51 web pieces, and the dashboard uses the same source of color, type and components as the apps.
Figma holds 185 screens: the 83 of the dashboard as it was coded, and the 102 of the new version.
Shopper insights has no usage numbers yet. Validation starts with Café Cajubá.
09 What I would do differently
I would have settled the data contract with engineering before the fourth style version. Some screens asked for numbers the API will not have, and I only found out while designing Shopper insights.
And I would measure, with the client, the time to the first campaign decision, which is the number that tells whether the dashboard works.