Directo · TicTacOffers feed · paired with Renato Garcia7 min read
The feed's bottleneck was the cost of the photo.
Thirteen card templates for the TicTac feed, chosen by comparing every combination
- Client
- Directo
- Period
- Aug. and Sep. 2026
- Role
- Paired with Renato Garcia
- Scope
- TicTac offers feed
- 39
- combinations drawn, and not one new measurement in the system.
- 11 of 13
- templates run on the photo the shop already has, with no paid production.
- 1 week
- from brief to the first round's handover.
00 File
| Client | Directo, a Diletta client |
| Product | TicTac · a feed of offers from physical stores |
| Role | Senior Product Designer at Diletta Solutions, the company where I work, pair designing with Renato Garcia start to finish |
| Scope | the thirteen card templates, the comparison, the data contract and the feed redesign |
| Validation | with the client team, decision by decision |
| Platform | mobile, plus a web panel |
| Tools | Figma, FigJam |
| Period | August and September 2026 |
01 Summary
Problem. Every offer type in TicTac wanted its own card, and the brief arrived asking for ten templates. Kept by hand, they become ten components, and every fix gets made ten times.
Role and team. I'm a Senior Product Designer at Diletta, and Directo is a Diletta client. I worked in pair designing with Renato Garcia: we met every day and worked the elements together, to get more out of them and deliver faster. Directo's team validated every decision.
The decision. Measure the templates by what the store spends on the photo. The bottleneck is not the card, it is the cost of the photo.
Result. On paper, 11 of the 13 templates run on the photo the merchant already has. One needs paid production and one uses no photo. None needed a new measurement.
Status. Design delivered to engineering in one week and validated with the client team. Not live yet. The other half of this project is the app for the people who produce the offers: Creator case.
02 Context
TicTac is a feed of offers from physical stores. Retailers and brands advertise, someone near the store buys, and a creator produces the offer by photographing and writing about the product on the shelf. The money comes from retail media budget, what a brand pays to show up where the purchase happens.
That is why the card advertises a shelf a few minutes away rather than a delivery. Instead of shipping, it carries pickup, expiry and that store's stock.
CPF Seguro, the company's fraud protection product, runs inside this same app under Directo's brand.
03 Constraint
One week for the first round. Research, templates, comparison and validation, all in the same week. With no time to iterate on opinion, the decision had to come from a number. The deadline picked the method.
The card does not live in one app. The feed ships as a package inside hundreds of client apps, and changing the card means updating all of them. Business rules cannot be frozen inside the package. That decides what becomes a component and what keeps being served from outside.
Two categories in the same feed. In retail, the user buys. In food, the user activates the offer and picks it up at the store, on the same card.
The feed was already live. I redesigned a screen people were using.
04 Exploration
A decision board in Figma, with no final screens
The first round's deliverable was a Figma board with ten sections, built to close the choices with Renato and with the client team. It starts from the components that already existed, moves through the formats and templates, and lands on the comparison in numbers, the analysis, the data contract and the decisions.
Two of those sections I would defend on any project. The analysis has a part just for what is still fragile, because the team needed to decide while looking at the risk. And the data contract comes before the pixel: which fields the system has to deliver for each card to exist. That is what let five card types cover the thirteen templates.
When Renato and I disagreed, the number in the comparison won.
The comparison drew all 39 combinations
Thirteen templates across three formats make 39 combinations, and we drew every one. An empty cell would make the reader think the template does not work there, when it works with a different crop of the photo.
With everything drawn, what separates one combination from another showed up: how much the merchant spends to produce the image that card asks for.
| 39 | combinations drawn · thirteen templates across three formats, none empty |
| 11 | run on the photo the store already has · product on a neutral background, recomposed by the system |
| 1 | needs paid production · the brand template, funded by industry trade budget |
| 1 | has no photo · the coupon, where the value takes the image's place |
| 0 | new measurements · card, image, button, deadline and listing block identical |
The structure held. The same fields carry a mall countdown, a bulk discount and a price per kilo without growing a pixel. What the comparison exposed was the full screen format, which needs a genuinely photographed scene and so is the most expensive one for the store.
The question arrived as "which card format?". The format was already solved. The photo was what held the offer back.
05 Decisions
D1 · No new measurements
Card, image, button, deadline and listing block stayed identical across the thirteen templates. The variation lives in the content and the photo.
Why: a new measurement becomes a new component, and a new component is a cost forever. Without one, all thirteen enter the system that already exists.
What I gave up: free proportions. No template got the size it asked for.
D2 · The column format ships first
Why: every merchant already has the photo it asks for. Full screen goes last because it depends on a photographed scene, which is what costs money.
D3 · The information block is locked
A 390 × 490 card with the information block locked at 130 pixels.
Why: if that block changes height, the list loses its rhythm. Locked, it lets the card vary in the image without breaking the feed.
D4 · Everything declared by name before the next template
Color and typography were loose values. I recommended declaring color, spacing, radius, typography and shadow by name before drawing one more template.
Why: every template built on loose values makes the cleanup later more expensive.
Finding: the twelve old styles in the file had never been applied. They existed in the library and on no screen.
D5 · The store name box stops being fixed
It was 75 pixels, centered. It became flexible in both categories.
Why: a store name is third party data, and third party data does not respect your box.
D6 · The surprise bag ships, with the risk written down
It sells with a single field and opens the food category. The risk is written next to it: the product could become this and nothing else.
Why: the client team makes the call, and it only really makes it with the risk on the table.
D7 · A smaller card and two reading modes
In September I went back to the feed. The card shrank until one whole card and a peek of the next one fit. And the feed gained two modes: continuous, with the header and button outside the media, and full screen, one card per screen.
Why: the large card pushed the buy button off screen. A smaller card shows more offers per session, and the product lives on offers seen.
What I gave up: large media as the default. It became a mode people choose.
D8 · The word "feed" left the screen
The architecture still has one feed per partner app. On screen, people choose a radius and a place.
Why: "feed" is a word for the people who build the product. Buyers think in distance. The idea came from a conversation with Directo's designer.
06 Craft and system
Reference card at 3:4, an 8 pixel grid, a size scale with 12 steps. It ended with five card types, a 40 pixel black button and a badge at three levels.
The engineering handover, counted in the file:
- 40 components in four layers, all with descriptions
- 113 variants
- 27 text styles, measured from the components
- 0 loose solid colors
07 Result
- 11 of the 13 templates run, on paper, on the photo the store already has. One needs paid production, funded by the brand, and one uses no photo. The product is not live, so this is not measured spend yet.
- 39 combinations drawn and 0 new measurements. The thirteen templates enter the system that already existed.
- 8 decisions, D1 to D8, validated with the client team, each with its reason written down.
- 2 reading modes in the feed from September on.
08 What I would do differently
Measure against real use. The comparison says which template can carry which offer. It does not say which one sells more, and that is the missing number.
Test with the people who buy. Validating with the client team lowers product risk, but it does not replace testing with users.
Look for the bottleneck sooner. The cost of the photo only showed up in the analysis, at the end of the week. Had I seen it on day one, the project would have had fewer card templates and more design of how the store produces its images.