Mobile-First Interactive Event Microsite for NARS Cosmetics
We built a mobile-exclusive microsite designed to elevate attendee engagement for NARS Cosmetics' special event. Attendees initiated their journey by scanning a QR code, entering their information via a mobile-optimized form, and progressing through four uniquely branded stations: Love Letter, Fireplace, Phone Booth, and Dining Hall. Each station required a redemption code for validation by staff. User data was stored in Google Sheets in real-time, with duplicate entries automatically validated. The journey concluded with a congratulatory message and gift acknowledgment. The project was delivered with full documentation for seamless reuse.
Project Overview
Learn how we brought a unique digital journey to life for a live NARS event through a tailored microsite.
NARS Cosmetics sought an interactive web solution for an on-ground event that could offer guests a gamified experience with minimal friction. We developed a mobile-first microsite that worked seamlessly across devices and was intuitive for both users and event staff. The microsite integrated multiple checkpoints, data collection features, and real-time validation, making it a practical and engaging digital companion for the event.
Industry
Others
Services We Provided
Web Development, Web Hosting Solutions
Project Duration
0 Months
Technologies We Use
React
TypeScript
Material-UI
AWS
Styled Component
SCSS
Event-Specific Digital Challenges
Developing a feature-rich yet lightweight microsite with a strict deadline and field-operational requirements.
The microsite needed to support real-time interactions while maintaining data integrity and event scalability. Our primary challenges included handling QR-based entry points, managing real-time data submissions securely, verifying user progress at physical checkpoints, and ensuring mobile responsiveness throughout.
Building a seamless mobile-only web app optimized for instant load times.
Integrating QR code-based entry and checkpoint verification.
Designing an intuitive interface for staff to validate redemption codes.
Storing user data in Google Sheets in real-time with duplicate entry validation.
Ensuring data accessibility post-event for client insights.
How We Solved It
Here’s how we solved each challenge step-by-step to deliver on time with precision.
QR Integration
Set up unique event QR codes for instant user access to the microsite.
Mobile Form Setup
Built a responsive, fast-loading form to collect user info (name, email, contact).
Google Sheets Sync
Integrated Google Sheets API to store form submissions in real-time and validated duplicate entries on the fly.
Interactive Station Map
Designed a clickable map featuring four immersive locations—each with a redemption entry box.
Completion Logic
Programmed logic to track completed stations and trigger a final “Congratulations” message upon finishing all.
Deployment & Documentation
Deployed the app and delivered comprehensive usage documentation for smooth reuse and internal training.
