Fragrance Finder
Built a seamless, user-centric fragrance quiz interface that guides customers through a personalized scent-matching experience—elevating digital product discovery on aesop.com.
Project Detail
As a Front-end Developer, I was responsible for implementing the Fragrance Finder experience—an interactive flow that helps users explore and identify the most suitable fragrance based on their preferences, moods, and sensorial inclinations.
Key highlights:
- Interactive quiz experience: Engineered an intuitive, multi-step quiz flow with dynamic transitions and contextual animations to maintain engagement across the journey.
- Mobile-first responsive UI: Designed with performance and accessibility in mind, ensuring a smooth experience across devices.
- Dynamic result rendering: Integrated logic to display personalized product matches with supporting imagery, descriptions, and purchase CTAs, all optimized for performance and elegance.
- Smooth micro-interactions: Incorporated subtle animations and hover effects that align with Aesop’s brand aesthetics, enhancing the luxury feel of the product discovery process.
- Component reusability: Built reusable design components and layout patterns that were later repurposed across other discovery tools within the site.
- Performance optimized: Leveraged lazy loading, optimized assets, and hydration-friendly rendering to keep the quiz snappy without compromising fidelity.
Tech Stack
React/Next.js, TypeScript, Tailwind CSS, Framer Motion, GraphQL, AWS Amplify
