Advent Calendar — Seasonal Feature
A date-driven Advent Calendar in the GjirafaMall app — each day of December, customers tear open a wrapped door to reveal an exclusive product deal, with a celebratory burst to mark the moment.
The Brief
A 24-day advent calendar for the GjirafaMall mobile app. The product designer handed me a wireframe: 24 cards, one reveal per day, three states (locked, ready, opened).
Beyond the wireframe, every design and motion decision was mine. It would have been easy to ship a grid of tiles and call it done — I wanted it to feel like something worth waiting for.
The Calendar
Opening today's card.
Opening a door
The Constraint
The calendar lives inside a shopping app, which pulls the brief two ways. It has to read as part of GjirafaMall — but feel different enough that opening today's card is an event, not another tap.
Every state had to read at a glance: on day 12, a user should know which card is today's without reading anything. And the reveal had to earn the anticipation the locked days built up.
The Cards as Objects
I designed each card as a wrapped gift — a slightly playful, literal metaphor for what the calendar is. Ribbon detail, gift-card proportions, and a small visual identity per card that hints at variety without revealing the contents.
The metaphor sets the interaction expectation: a tile gets tapped, a gift gets opened.
Four States, One Glance
Locked: a wrapped, Christmas-colored door with a closed padlock, the day number, a bow, and a live countdown to opening.
Available: today's door — still wrapped, with an "Open" prompt and a looping shake that draws the eye.
Revealed: the unwrapped product — image, name, vendor, and a "Best Price" with the original struck through. It taps straight through to the product page.
Expired: missed days are dimmed and stamped, so it's obvious the deal has passed.
Locked
1 / 4
Date-Driven by Design
Every card knows where it sits in time. Its state comes from comparing today's date with that day's window, plus stock — so locked, available, and expired all come from one source of truth, not manual toggles. And the calendar takes care of itself:
- Remembers what's opened — revealed doors are saved on the device, so they stay unwrapped when you come back.
- Wakes itself up — when a countdown hits zero, the day flips from locked to openable in real time, no reload.
- Guides to the right door — when today's door scrolls out of view, a floating gift button jumps you back to it.
The Reveal
Tapping today's door doesn't flip it — it tears it open. The wrapping breaks apart, the product is exposed, and the screen celebrates.
The motion gets room to land. This is the rare case where the Doherty Threshold is the wrong frame: the system makes the customer wait on purpose, because anticipation is the whole experience.
The Animations
Today's door breaks into a 3×3 grid of tiles that scatter outward — each spinning off and fading — like physically unwrapping a gift. As it clears, confetti rains across the screen.
Before it's opened, today's door breathes with a soft looping shake; tapping a day that hasn't arrived triggers a quick shimmy — a playful "not yet."
All of it runs on native-driven animations at a steady 60fps, even with dozens of cards and a hundred confetti particles in motion.
Idle invitation
1 / 4
Why This Mattered to Me
Most product surfaces are about efficiency: an honest cart, a short checkout, a fast search. The advent calendar is the opposite — slowness is the point.
Designing it well meant working against the instincts that serve the rest of the app, and trusting that anticipation, not speed, was worth optimizing for.
Wireframe → Final
The handoff on the left; what shipped on the right. The bones stayed — a door a day, one reveal per day. The states, the motion, and the gift metaphor are new.
Handoff wireframe
Shipped
Next project
GjirafaMall App Redesign
An end-to-end redesign of the GjirafaMall mobile app — owned solo from research and Figma through production React Native. A case study in holding design and engineering as one discipline, and the system that came out of it.