ABOUT

RAMADAN QUEST
VISUAL & MOTION DESIGN



      /INTRO

Ramadan Quest was a stamp-collecting campaign built for noon's Ramadan activation. It went live on-app during Ramadan 2024 across the UAE and Saudi Arabia. The mechanic was simple: earn stamps by completing tasks on the app, collect all five, win AED 50. Stamps could be gifted or requested between friends, making the collection a shared one.
       /WORK

My work focused on the visual identity of the campaign across all five iterations of the direction. This included the art direction, stamp design, UI treatment, and the overall visual language of the experience. The bulk of the creative effort went into the first direction — a system built around Islamic geometric tiles, used not as decoration but as the structural grammar of the entire UI.













THE FOUNDATION Islamic geometric tiles : the starting point

The first and most considered direction began not with colour palettes or lantern references, but with geometry. The intricate tessellating tile patterns that line the walls of mosques and madrasas from Córdoba to Samarkand, a visual tradition more than a thousand years old, and still one of the most mathematically sophisticated decorative systems ever devised : Tiles.


For a stamp-collecting campaign during Ramadan, this felt like an honest alignment. The idea of gathering, of incomplete collections becoming whole, rhymes with the geometry's logic. Each tile is nothing alone; together, they resolve into something transcendent.






Islamic Tiles - Moodboard
The appeal was not simply that the patterns are beautiful. It was that they mean something. Islamic geometric art is built on a philosophy: that the infinite complexity of the divine can be approached, if never fully grasped, through the rigour of mathematics.





Every tile pattern in the Islamic geometric tradition begins the same way — not with ornament, but with construction. A compass and a straight edge. No measurements, no marked angles, no scale. Just the relationships between circles and lines, and the intersection points they produce together.

The constraint is the point. Because neither tool carries a scale, nothing can be set by measurement — every proportion has to be derived. A circle is drawn. A straight edge connects two of its intersections. That line becomes the radius of the next circle. From the new intersections, further lines are drawn. The pattern grows outward from its own internal logic, each step a consequence of the one before it.





Some of the tile structures used in the visual elements

Constructing the grids with simple shapes connected












In the campaign's first iteration, these tiles appeared throughout the UI: as the background structure of the stamp collection, as ornamentation within the arch frame, and as the internal texture of each stamp's backdrop.

Credits : Sachin Rupasinghe for help in the UI design.


V1 - Colour Option 02


V1 - Colour Option 01









Object Details



One of the most considered decisions was to use a tile-derived geometric pattern as the background within each individual stamp. Rather than a generic dark field or a gradient, each stamp's interior was structured — a radial or tessellated geometry that gave the cultural object a setting, the way a mosque's mihrab frames the void of prayer. The object was not floating; it was housed, honoured, given context.






All Stamps






Detail - Tile Mesh in UI’s background




Detail - Stamp Construction


Color Variations









THE REST OF THE JOURNEY What followed the tiles direction was a process of finding what the campaign wanted to be — four iterations moving progressively toward familiarity, legibility, and production readiness. Each one made sense in context. Taken together, they show how a brief evolves when it meets the real constraints of a live campaign.




Iteration ❷ :
The Celebratory Turn




The second iteration introduces warmth and festivity. The palette shifts from near-black gold to a rich purple-violet, and string lights appear across the top, hung inside the arch. Two fanous lanterns hang as ornaments, glowing softly.

The tile borders survive here, still visible along the arch edges, still doing structural work. But the addition of the lights changes the register. The first iteration felt like walking into a centuries-old mosque; this feels like a Ramadan market at twilight. Both are honest to the occasion, they just describe different aspects of it.

The stamps themselves are now more colourful individually. Each has a distinct warm-toned background, moving away from the uniform dark field. The objects are clearer, more legible. The gradient at the bottom shifts to a warm pink-peach, creating the impression of a sunset or the warm interior light of a home during iftar.




Iteration 02




Pop-up screen - when a user receives a stamp they are shown a popup with an option to take them to the campaign landing page

\\\\




Revised Stamps









Iteration ❸  :
Multi-Colour Stamps




By the third iteration, the blue-indigo field is now definitively the background. The most significant change is to the stamps themselves: each now has a fully distinct colour - pink, purple, blue-grey, teal, gold. The stamps are individual, collectible, genuinely differentiated. The arch border is reduced to a clean line with minimal ornament, and the overall UI breathes more. The background is a more neutral dark space with a faint crescent moon and subtle star field.

This is the most conventional of the four directions. It is clean, it is functional, and it communicates the campaign clearly. For a production environment with tight development timelines and accessibility requirements, these are meaningful advantages.

Credits : Sachin Rupasinghe for help in the UI design.











Gift/Request Stamps Modal








Final Stamp Designs 








Final Version







Gift a stamp


First Time User Pop-up Interaction




App assets to support campaign visibility









That’s all folks!