{/* Side button hints make the frame read as a real phone */}

{/* Tiny scroll-affordance label, only when scrollable */} {scrollable && (

Scroll ↕

)}

); // ── Hero ──────────────────────────────────────────────────────────────────── const CBHero = () => (

Case · 02 Cashback · E-commerce · Giftcards

Cashback Mobile App

One mobile product that unifies three separate web platforms — cashback, shopping and gift cards — under one brand. A full redesign and a new product identity built from scratch.

{[ ['Role', 'UX/UI Designer'], ['Type', 'Mobile app · merger of 3 platforms'], ['Scope', 'UX research → Design System → Brand'], ].map(([k, v]) => (

{k}

{v}

))}

{/* Triptych — three phones, slight tilt, "merging into one" feel */}

); // ── The goal ──────────────────────────────────────────────────────────────── const CBGoal = () => (

The goal One app for three platforms.

Three web platforms — a cashback service, a shopping aggregator and a giftcard marketplace — needed to live under one mobile roof. Each had its own audience, patterns, and visual debt. None of them was made for mobile-first behaviour. The product redesign was paired with brand-building work: a new logotype, voice, colour and motion language strong enough to carry across all three jobs and still feel inevitable on a 6-inch screen. {/* Three pill labels */}

{[ ['Cashback', 'Earn % back per shop'], ['Shopping', 'Aggregated partner offers'], ['Giftcards', 'Buy + pay with saved cashback'], ].map(([title, sub], i) => (

{title}

{sub}

))}

); // ── Responsibilities ──────────────────────────────────────────────────────── const CBResponsibilities = () => { const items = [ ['01', 'User needs analysis', 'Mapped the three audiences and the overlap between cashback shoppers and giftcard buyers. Defined the unified user.'], ['02', 'Stakeholder interviews', 'Aligned product, marketing and ops on a single story for the merged platform — and what each side would not give up.'], ['03', 'Unified Design System', 'Tokens, typography, components, motion. The first source of truth shared across cashback, shopping and giftcards.'], ['04', 'Brand-into-product', 'Translated the new brand identity into mobile patterns — the yellow card, the bodoni headlines, the warm photography.'], ['05', 'New flows', 'Designed flows the web never had: address management, parcel locker pick-up, integrated checkout with cashback as a payment method.'], ['06', 'Manual testing', 'Hands-on QA across all three product types — cashback flows, shopping checkout and giftcard purchase. Bug triage with engineering before each release.'], ]; return (

My role · responsibilities What I owned end-to-end.

{items.map(([n, title, desc], i) => (

{n}

{title}

{desc}

))}

); }; // ── Brand-into-product ────────────────────────────────────────────────────── const CBBrand = () => (

Brand into product A loud yellow, a quiet system. Both on purpose.

{[ ['Marketing surface', 'The Twój cashback card is the brand object — strong yellow gradient, bodoni headline, big numbers. It anchors the dashboard, the profile and every checkout.'], ['One typeface family', 'Libre Bodoni for moments of voice (greetings, balances, headlines), DM Sans for everything functional. The shift in tone is the brand.'], ['Quiet UI, loud brand', 'Inputs, lists and form fields stay neutral. The yellow shows up only where it should reward attention — the primary CTA, the cashback total, the active state.'], ].map(([t, d]) => (

{t}

{d}

))}

); // ── NEW FLOW: Address management ──────────────────────────────────────────── // Walks through the design thinking behind a flow the web product never had. const CBAddressFlow = () => { const steps = [ { src: 'case-assets/cashback/addr-empty.png', n: '01', t: 'Empty state', d: 'Single screen, no fluff. CTA disabled until required fields validate — the user knows what is left to fill.' }, { src: 'case-assets/cashback/addr-filled.png', n: '02', t: 'Inline validation', d: 'Field-by-field, no submit-then-yell. The CTA flips to the brand yellow only when the data is good to go.' }, { src: 'case-assets/cashback/addr-france.png', n: '03', t: 'Country-aware fields', d: 'Selecting a non-PL country invalidates dependent fields. Same screen, but the user sees what changed without losing their place.' }, { src: 'case-assets/cashback/addr-list.png', n: '04', t: 'Saved addresses', d: 'Once saved, the address becomes reusable. A single preferred-delivery toggle removes the next checkout decision before it appears.' }, ]; return (

New flow · not in web Address management — designing a flow the web never had. The web product didn't store delivery addresses — every purchase re-asked for them. On mobile that breaks the "buy in two taps" promise. I designed the missing layer: add, edit, switch and pick the preferred delivery address — directly inside checkout or from the profile. {/* 4-step walkthrough */}

{steps.map((s, i) => (

{s.n}

{s.t}

{s.d}

))}

{/* Decision rationale strip */}

{[ ['Why one screen', 'Splitting the form into steps would have added taps and a back-stack the user has to debug. One scrollable card kept the mental model flat.'], ['Why nickname-first', '"Home" / "Office" labels reduce cognitive load at checkout — users pick by intent, not by re-reading street names.'], ['Why preferred toggle', 'A single radio in the list removes a recurring decision at checkout. Cashback users buy small things often; every saved tap compounds.'], ['Why inline edits', 'Editing a saved address from the checkout screen keeps the user in the buying mindset — no profile detour, no lost cart.'], ].map(([k, v]) => (

{k} {v}

))}

); }; // ── Checkout merge — three roads into one ─────────────────────────────────── const CBCheckout = () => { const flow = [ { src: 'case-assets/cashback/cart.png', label: 'Cart', sub: 'A toggle in the cart switches between Products and Giftcards — both live side by side, shortening the order process.' }, { src: 'case-assets/cashback/summary-gc.png', label: 'Order summary', sub: 'Digital delivery, no shipping. Pay with saved cashback as a method.' }, { src: 'case-assets/cashback/summary-1.png', label: 'Address-aware summary', sub: 'Picking a parcel locker on the first order also saves the phone number — the user never re-types it on the next purchase.' }, { src: 'case-assets/cashback/paczkomat.png', label: 'Parcel locker', sub: 'Map-based locker picker replaces a clunky 3-step web wizard.' }, ]; return (

Checkout One checkout. Three product types. Giftcards, products and cashback payouts all settle in the same summary screen. The summary adapts: physical items get a delivery card, digital ones don't, and saved cashback always shows up as an opt-in payment method.

{flow.map((s, i) => (

{s.label}

{s.sub}

))}

); }; // ── Design system + Marketing surface ─────────────────────────────────────── const CBSystem = () => (

Design system · marketing Components, motion, brand.

A single system carries cashback, shop and giftcards — and the marketing site that drives traffic into the app. Same tokens, same patterns.

{/* Big composite card */}

{/* Color swatches */}

Palette

{[ ['#FCC00D', 'Brand · Yellow'], ['#1A1408', 'Surface · Deep'], ['#F8EFDA', 'Cream'], ['#222', 'Ink'], ['#FF914D', 'Accent · Warm'], ].map(([c, label]) => (

{label}

))}

{/* Type pair */}

Typography

Twój cashback

Libre Bodoni · headlines + numbers

Every flow rests on DM Sans for clarity, and lifts into Bodoni at the brand-defining moments. The contrast is the system.

DM Sans · body + labels

{/* Buttons */}

Buttons

Kupuję i płacę

Wybierz paczkomat

Dodaj kolejny adres

{/* Brand object — Cashback card preview */}

Brand object The yellow card. A single recognisable object the user sees in every flow — profile, transactions, checkout. It's the logotype's job, done by UI.

{/* Mini cashback card */}

Twój cashback

1202,00Uznany 920,40Oczekiwany 2122,40Suma oszczędności

Jak działa cashback?

); // ── Impact ────────────────────────────────────────────────────────────────── const CBImpact = () => { const stats = [ ['−30%', 'QA-reported UI issues', 'A single Design System cleared the inconsistencies that had piled up across three legacy stacks.'], ['1 → 3', 'Platforms merged', 'Cashback, shopping and giftcards behind one product and one brand — the first time mobile-first.'], ['Lower', 'Checkout friction', 'A unified summary, saved addresses and parcel locker picker cut taps and decisions in the buying flow.'], ]; return (

Impact Three platforms, one experience.

{stats.map(([n, label, desc], i) => (

{n}

{label}

{desc}

))}

); }; // ── Modal shell ───────────────────────────────────────────────────────────── const CashbackCaseStudy = ({ open, onClose }) => { React.useEffect(() => { if (!open) return undefined; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, [open]); React.useEffect(() => { if (!open) return undefined; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, onClose]); const scrollRef = React.useRef(null); const [progress, setProgress] = React.useState(0); const onScroll = (e) => { const el = e.currentTarget; const max = el.scrollHeight - el.clientHeight; setProgress(max > 0 ? el.scrollTop / max : 0); }; React.useEffect(() => { if (open && scrollRef.current) { scrollRef.current.scrollTop = 0; setProgress(0); } }, [open]); return (

{/* Top bar */}

Case 02 · Cashback

End of case · 02 / 04 More work — coming soon.

); }; Object.assign(window, { CashbackCaseStudy });

{children}