A dynamic gamification website created for XL's marketing campaigns, engaging users with interactive experiences and reward-driven participation to boost brand awareness and customer loyalty.
XL Circle was developed for a gamified marketing campaign under XL Axiata. The challenge was to build an engaging and shareable platform that could handle large-scale participation with anti-abuse measures. It included interactive mini-games, creting template pict with your fam, and social sharing to boost engagement. The platform successfully balanced fun and reliability during the campaign’s high traffic peaks.
Steps:
Register and accept T&C.
Upload group picture.
Drag and drop the face pict to the template.
Share generated img to your group.
Tech / Framework:
Next.js + TypeScript
html2canvas (share image)
Tailwind CSS
DndKit
FaceApi
Zustand
Suapabase
Achievement:
I built the resposive UI/UX across all device, make face detection and auto cropping feature, and also exporting or download function. Achieved high traffic reaching millions of users and significantly increased new user acquisition.