Offers feed · paired with Renato Garcia11 min read
Directo · TicTac
Thirteen card templates for the TicTac feed, decided from data
- 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.
- 40
- components with 113 variants in the engineering handover.
- 1 week
- from brief to the first round's handover.
Paired with designer Renato Garcia. Client: Directo. Product: TicTac. Period: August and September 2026.
00 File
| Client | Directo |
| Product | TicTac · a feed of offers from physical stores |
| Role | product design paired with Renato Garcia. Research, templates, comparison and decisions made by the two of us, start to finish |
| With | Renato Garcia · design partner, shared process |
| 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 |
One line. Thirteen card templates across three formats make 39 combinations. All of them were drawn, and not one needed a new measurement: height, width, spacing and button are the ones the product already had. The comparison did not prove the design was pretty. It proved the existing structure could carry everything the product wanted to sell.
01 Summary
Problem. The TicTac feed needed ten different card templates to cover the offer types and the product's two categories. Ten templates maintained by hand is guaranteed debt: each one becomes its own component, and from then on every fix is made ten times.
What I did. In the first week, the research, the thirteen card templates, a comparison measuring them in numbers, and the data contract for each one: which fields the system has to deliver for the card to exist. In September I came back to the feed to change the card's size and split the reading into two modes.
Result. 39 combinations drawn without a single new measurement. Eleven of the thirteen templates run on the photo the merchant already has, with no paid production. Seven decisions closed with the team, and an engineering handover with 40 components and 113 variants.
The second front. The feed only has offers if somebody produces the offer inside the store. That part became its own project, and it is in the Creator case, the app of the person who produces the offer.
Role. Product design paired with Renato Garcia. Research, the comparison, the templates and the data contract came out of the two of us, and every design decision was argued between us before it went to the client team, which validated them one by one.
02 Context
TicTac is a feed of offers from physical stores. Retailers and brands advertise; the person near the store buys; and the person who produces the content of the offer is what the market calls a creator, someone who photographs and writes about the product on the shelf.
The money in that chain has a name: retail media budget, the amount a brand pays to show up in the channel where the purchase happens. It was the fastest growing media market in Brazil over the last three years.
That matters for the card because it advertises a shelf a few minutes away rather than a delivery. Instead of shipping and delivery dates, the design carries pickup, expiry and that store's stock, each one as a field from the system.
03 Constraint
CPF Seguro, the company's fraud-protection product, runs inside this one, embedded under Directo's brand. Two cases that meet in the same app.
One week for the first round. Research, ten templates, comparison, decision and validation. The deadline is the constraint that explains the method: with no time to iterate on opinion, the decision had to come out of a number.
The card does not live in one app. The feed ships as a package inside hundreds of client apps. Changing the card's design means updating all of them, so whatever is a business rule cannot be frozen inside the package. That constraint starts technical and lands on product: it decides what becomes a component and what keeps being served from outside.
Two designers, one shared process. Renato and I work as design partners. Research, decisions and screens went through both of us, and not one product decision here was made alone. When we disagreed, the tiebreaker was the data, not who had been around longer.
Two categories in the same feed. Retail and food, with different actions: in retail the user buys, in food the user activates an offer and picks it up at the store.
A feed that already existed. The source screen was live. This was not a new design.
04 Exploration
The deliverable was a decision board, not a screens file
The deliverable was a Figma board with ten sections in vertical sequence, built to close the choices with the other designer and with the client team. No final screens in it. The order of the sections is the argument:
00 cover
01 the system table of the components that already existed
02 the three formats
03 the ten templates
04 the comparison in numbers <- this is where the decision is born
05 the pickup types the 4 steps of the physical flow
06 the analysis flow, consistency, scalability, robustness
and architecture, each with an objective measure
AND what is still fragile
07 the data contract
08 the seven decisions each with a recommendation
09 appendix the comparison drawn piece by piece
Two things in that board are unusual and carry the whole case:
Section 06 states what is still fragile. An analysis that only lists what went well is a brochure. Naming the fragility is what lets the team decide with the risk in plain sight.
Section 07 is a data contract, not layout. A card with no data contract is a card that breaks on the first real offer. Defining the data before the pixel is what let four card types cover thirteen templates.
The comparison, and why it has no empty cell
Thirteen templates by three formats make 39 combinations. All drawn, none empty, on purpose. The reason is written on the board and it is the best sentence in the project:
An empty cell hides a format, and the reader concludes the template does not work there when it works with a different crop.
What separates one combination from another is not layout. It is photo cost: how much the merchant has to spend 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, no paid production |
| 1 | needs paid production · the brand template, funded by industry trade budget |
| 1 | has no photo at all · the coupon template, where the value fills the image frame |
| 0 | new measurements · card, image, button, deadline and the small listing block, all identical |
What the comparison proves. That the structure holds. The same fields, meaning header, image, icons, social proof, payment method, expiry, button and the reason for the offer, carry a retail countdown, a bulk discount and a price per kilo without growing a pixel.
What it exposes. That the full-screen format is the most expensive one. Five of the thirteen templates have a genuinely photographed scene; the other eight run on product against a neutral background and pay off less there. The bottleneck of the format is not layout, it is photo production.
That last line is the result of the project. The question arrived as "which card format", and the comparison answered "the format is not your problem, the cost of the photo is".
The food category invented no new screen
The rule that closed the scope: food copies the retail card and swaps the content. No new design for a category with the same decision structure.
05 Decisions
D1 · No new measurements, and that is the deliverable
Thirteen templates across three formats, and card, image, button, deadline and the small listing block stayed identical. All the variation lives in the content and in the cost of the photo.
Why: every new measurement is a new component, and a new component is a permanent cost. Zero new measurements means the thirteen templates enter the system that already exists, with no debt.
What I gave up: freedom of proportion. No template got the size it asked for; they all fit the one that existed.
D1b · The column format ships first
Of the three formats, the column one was the recommended entry point.
Why: every merchant already has the photo it asks for. The full-screen one goes last, because it depends on a photographed scene, and a photographed scene is the bottleneck.
D2 · The information block is locked
A 390 × 490 card with the information block locked at 130 pixels tall.
Why: a variable height in that block destroys the rhythm of the list. Locking the information is what lets the card vary in the image without breaking the feed.
D3 · Declare more than color by name
51 variables and 26 styles in the round when the decision was taken. Spacing, corner radius, typography and shadow also become declared by name, instead of written as a loose value on each screen.
Finding: the twelve old styles in the file had never actually been applied. They existed in the file and did not exist on the screens. A declared system is not an adopted system, and the difference only shows up when someone measures.
D4 · The store name box stops being fixed
It was fixed at 75 pixels and centered. It becomes flexible, in both categories.
Why: this is a robustness fix, not an aesthetic one. A store name is third-party data, and third-party data does not respect your box.
D5 · Fix the file before drawing one more template
Color and typography were written as loose values. The recommendation was to declare everything by name now, before drawing anything else.
Why: this is file work, not design work. If a new template lands first, the cost of fixing it multiplies.
D6 · The surprise bag ships, with the risk stated
It sells with a single field, which is why it is the entry point for the food category. The risk is written down too: the product could become this and nothing else.
Why: a decision with the risk in plain sight is the team's decision. A decision with the risk hidden is the designer's decision pretending to be the team's.
D7 · The card's size is a business decision, not an aesthetic one
The card shrank so that one whole card plus a peek of the next one fits on screen. And the feed gained two modes: the continuous one, with the header and the button always outside the media, and the full screen one, one card per screen, with the buttons over the media.
Why: a large card pushed the header and the buy button off screen. A smaller card shows more offers per session, and an offer seen is the product's currency.
What I gave up: large media as the default. It became a mode, chosen by whoever is looking, instead of the only shape.
D8 · The word "feed" left the screen
The architecture has one feed per partner app, and that stays true underneath. On the screen, the word is gone: people choose a radius and a place.
Why: a feed is a concept from inside the product. Distance is a concept from the life of the person buying and the person selling. The decision came out of a conversation with Directo's designer, and it is one of the few in the project that changed vocabulary instead of layout.
06 Craft and system
- Reference card at a 3:4 ratio. An 8-pixel grid. A size scale with 12 steps.
- Five card types at the end, with a row of tags, a 40-pixel button in black and a badge at three levels.
- The reference button was defined before the templates, not after.
- An icon is a real vector drawing, not a font character. And a system component actually used, never a visual copy pasted in.
- Its own Figma page with everything engineering needs to build.
07 Result
- 39 combinations drawn, 0 new measurements. The thirteen templates enter the system that already exists.
- 11 of the 13 run with no paid photo production, on product against a neutral background recomposed by the system.
- The finding that repositioned the first problem: the bottleneck is not layout, it is photo production.
- Seven decisions closed with the team in the first round, each with a recommendation and with the risk stated.
- Two reading modes in the feed, continuous and full screen, with the card shrunk so one whole card plus a peek of the next one fits.
- Engineering handover closed at 40 components, 113 variants, 53 plus 1 variables, 27 text styles and not one solid loose color.
- The first round took one week, from brief to engineering handover.
08 What I would do differently
The comparison measures the templates against each other, not against real use. It answers "which template can carry which offer" and it does not answer "which template sells more". Instrumenting the feed did not fit in one week, but that is the number that is missing.
Validation was with the client team, not with users. Seven decisions closed with people who know the business is good for product risk and it does not replace testing with the people who buy. It is written that way on the board on purpose.
The finding arrived late. The discovery that the bottleneck is the cost of the photo showed up in the analysis, at the end of the week. Had it shown up at the start, the scope of the project would have been different: fewer card templates, more design of how the store produces an image.