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 2026 across the UAE and Saudi Arabia. The idea was simple: earn stamps by completing tasks on the app, collect all five, win the hero prize. 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 along with motion design. The bulk of the creative effort went into the first direction which was a system built around Islamic geometric tiles, used as the structural grammar of the entire UI.













THE FOUNDATION Islamic geometric tiles : the starting point

The first and most considered direction began with avoiding the obvious - dark green backgrounds with lantern references. I started 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 : the system of Tiles.


The approach aligned well with a stamp-collecting campaign during Ramadan. It resonated well with the idea of gathering, of incomplete collections becoming whole. Each tile is nothing alone; together, they resolve into something transcendent.






Islamic Tiles - Moodboard
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 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. 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 objects of significance were housed and given context inside these structures.






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 where do we take the campaign for better comprehension. Iterations moved progressively toward familiarity, legibility, and production readiness. 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 and 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 out of all 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 were 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






Despite going live during an unfavourable time (the US-Iran conflict), the campaign performed really well and exceeded expectations. People adopted the campaign mechanism quickly and soon it was being discussed on social media and Reddit threads, winning popularity and gaining engagement. More on the campaign numbers in this space soon.







That’s all folks!