Premmia: Elevating the Loyalty Experience

Premmia is Petrobras’s loyalty app for service stations in Brazil—customers earn points when they fuel up or buy at BR Mania and Lubrax+ and redeem them for partner rewards.

Beyond rewards, the app also lets users pay at participating stations (scan a QR in-store/choose a method in-app)

Design library & assets

I started with a quick UI audit and set up the foundations: color and type scales, spacing tokens, grid, and an updated icon set.

I built the core components (buttons, inputs, cards, nav, banners) with variants and states, documented usage, and ensured contrast and touch-target compliance.

Everything was structured in Figma with consistent naming, Auto Layout, and constraints for easy reuse.

Low-fidelity wireframes (flow validation)

I mapped the critical journeys—onboarding/login, points accrual, payment at the station, rewards discovery/redemption, and campaign entry points.

Then I produced low-fi wireframes and a clickable prototype to validate IA, copy, and step count with Product and Research.

Feedback led to fewer steps, clearer “Points balance + primary CTA” placement, and a simplified tab structure.

High-fidelity UI

With flows locked, I translated them into pixel-perfect screens using the new component system and brand guidelines.

I designed empty, loading, and error states; added subtle motion guidelines for key interactions; and checked accessibility (contrast, hierarchy, target sizes).

Handoff

I organized Figma pages by flow, linked components, and provided specs via Inspect with redlines and spacing rules. I exported necessary assets (SVG/PNG), attached motion notes, and documented tokens and component props to mirror in code. Finally, I ran a dev walkthrough, tracked open questions, and supported QA with quick UI fixes where needed.