Directo · Local AdsLocal ads app · flow and code5 min read
From flow to a running app in four days.
Retail ads for the corner store, from flow to a running app in four days
- Client
- Directo
- Period
- Sep. and Oct. 2026
- Role
- Flow, design system and code
- Scope
- Local ads app
- 4 days
- from the flow in FigJam to an app you can navigate in the simulator.
- 65
- flow screens, and not one button without a destination, counted by a script.
- 85
- routes in the Flutter app, reading the same colors and components as the screens.
- 1,908 → 1,633
- components in the product's design system after the cleanup for engineering.
00 File
| Client | Directo, a Diletta client |
| Product | Local Ads · radius-based ads for physical stores, with a prepaid balance |
| Role | Senior Product Designer at Diletta Solutions, the company I work for. Flow, design system, screens and the app in code |
| Scope | the advertiser flow, the product's design system, 65 flow screens and the Flutter app running in the simulator |
| Platform | mobile |
| Tools | Figma, FigJam, Flutter, Claude Code |
| Period | September 28 to October 1, 2026 |
01 Summary
Problem. Directo wanted a third product: neighborhood businesses advertising to the people who live nearby. The brief was as simple as possible, with code ready by the end of the week.
Role. I designed the flow, set up the product's design system and the screens, and wrote the Flutter app with Claude Code, wired to the same system as the screens.
The decision. I removed everything a bakery owner would not use. The audience became a radius on a map, and the money a prepaid balance they control.
Result. Four days from the flow in FigJam to an app you can navigate in the simulator, with 85 routes and not one button without a destination.
Status. Design approved and a demo app with sample data. The API integration has not been built yet.
02 Context
Directo sells media inside retail. TicTac is the offers feed, and Creator is the app for whoever produces the offer in the store. The small advertiser was missing: the bakery, the pharmacy, the corner shop that spends little and wants to be seen by whoever walks by.
This advertiser has a business registration, has a phone and has no agency. They do not know what targeting is and will not learn.
03 Constraint
Four days. My manager asked for flow, screens and code by September 30. There was no time to design a new design system.
A new app, not CPF Seguro, the fraud protection app, painted green. I used the in-house design system as the base. The first version of the screens came out looking like CPF Seguro in another color, and I threw it away myself.
Ads go through approval. Local business creatives get rejected often, and the owner needs to know why.
04 The problem in numbers
A bakery spends on ads when it fits the day's cash. That is why the balance is prepaid and the cost shows per person reached, cents at a time, never as a monthly budget.
05 Exploration
The flow before the screens
The first day was only the flow, in FigJam: sign in, create the creative, pick the radius, offer and dates, preview, publish, approval, live. Every detour has a way back: rejected with a reason, draft, empty balance. The performance panel is reachable from anywhere.
The first version, thrown away
I built 35 screens with CPF Seguro's screen grammar: centered top bar, warning banners, lists for everything. Changing color and font was not enough. It looked like CPF Seguro in another color.
I redid it with one rule: the design system provides button, field, badge, icon, color and spacing. The product's own pieces, like the balance card, the map with the radius and the ad card, are designed for this app, with the system's pieces inside.
06 Decisions
D1 · The audience is only the radius
The owner drags the radius and sees how many people fit inside it. There is no filter for age, gender or interests.
Why: the person deciding is the store owner, between one customer and the next. Demographic targeting needs a hypothesis they do not have, and a bakery sells to whoever walks past the door.
What I gave up: audience precision. A big brand would miss it. A corner shop will not.
D2 · An empty balance pauses, a new balance resumes on its own
The ad spends balance while it is live. When the balance hits zero, it pauses with a warning. When the owner adds balance, it goes back live with no other step.
Why: a small advertiser's fear is spending without seeing it. With prepaid the ceiling is what they put in, and the automatic pause protects the cash without taking the ad down for good.
D3 · Publish comes after approval
Creating takes four steps. Spend and duration live on the publish screen, after the ad has been approved.
Why: asking for money before approval means charging for something that may never go live. This order came from a proposal by Directo's team, and I adopted it.
D4 · Every action lives in the footer
A button never floats in the middle of the screen. Actions go in the fixed footer, and back, close and step live in the top bar, map screens included.
Why: in four days, a rule that holds for every screen saves one decision per screen.
07 Craft
Every screen has a note underneath saying where each button goes. A script walked the 65 screens and counted zero buttons without a destination.
In code, one rule for reading the design: a Figma drawing that changes a single component is a state of the same screen, not a new screen. Uploading and uploaded, Pix copied and expired, a tab switching. The first test in the simulator failed on exactly that, and it was what changed most between the first and second version of the app.
08 Result
65 flow screens and 8 visual direction screens, covering account, team, Pix, card, password and notifications. The product's design system cleaned up for engineering: from 1,908 to 1,633 components and from 73 to 63 pages, without cutting anything still in use.
The Flutter app has 85 routes and runs in the iPhone simulator with sample data. It reads the same colors and components as the screens, published as a design system release, so changing the brand in the system changes the app.
It is not live, so I have no usage numbers.
09 What I would do differently
I would show four direction screens before building the whole flow. I threw away 35 screens that a sketch would have stopped on day one.
And I would take the first version to a real store owner. The radius rule and the balance rule came from conversations with the client, and no bakery owner has touched them yet.