XENA PERFUME

A premium luxury perfume e-commerce platform built on WordPress and WooCommerce, featuring a custom React-powered fragrance recommendation quiz that helps customers discover products tailored to their personality and preferences.

Overview

XENA PERFUME is a modern online fragrance boutique designed to provide a personalized shopping experience. While the core e-commerce platform is powered by WordPress and WooCommerce, I was responsible for developing a fully interactive React application that integrates seamlessly with the website.

The centerpiece of the project is the Discover Your Perfume experience—a custom-built recommendation engine that guides visitors through a series of questions before matching them with fragrances that best fit their personality and lifestyle.

The website also delivers a premium shopping experience with multilingual support, RTL compatibility, multi-currency pricing, and a responsive interface optimized for every device.

My Contribution

My primary responsibility was designing and developing the interactive perfume recommendation application using React and integrating it into the existing WooCommerce website.

Key contributions included:

Developing the complete multi-step quiz application.
Building the recommendation and scoring logic.
Creating smooth animated transitions between quiz steps.
Integrating quiz results with WooCommerce products.
Optimizing the experience for desktop and mobile users.
Supporting both English (LTR) and Arabic (RTL) layouts.
Ensuring seamless integration with the existing WordPress platform.

Key Features

Interactive Fragrance Recommendation Quiz

A fully custom React application that analyzes user responses and recommends perfumes based on personality, scent preferences, and lifestyle choices.

Personalized Product Matching

Instead of static recommendations, users receive dynamically generated perfume suggestions based on a custom scoring algorithm that maps quiz responses to fragrance profiles.

WordPress & WooCommerce Integration

The React application integrates directly with the existing WooCommerce store, allowing customers to move from quiz results to product pages and purchasing without interrupting their shopping journey.

Bilingual Experience

The website provides complete English and Arabic support, including proper Right-to-Left (RTL) layouts for Arabic-speaking visitors.

Multi-Currency Shopping

Customers can browse products in multiple currencies, creating a localized shopping experience for international visitors.

Responsive Design

Every section of the application was designed to provide a smooth experience across desktop, tablet, and mobile devices.

Technical Highlights

Multi-Step State Management

Built a dynamic multi-step form that preserves user selections throughout the quiz while allowing navigation between previous and upcoming steps without losing progress.

Recommendation Engine

Implemented custom business logic that evaluates user answers, assigns weighted scores, and determines the most suitable fragrance recommendation based on predefined product profiles.

Smooth User Experience

Designed animated transitions between steps to create a premium, engaging experience consistent with the luxury branding of the website.

WooCommerce Compatibility

Ensured the recommendation system integrates naturally with the existing WooCommerce product catalog, allowing users to continue directly into the purchasing process.

Performance Optimization

Optimized component rendering and state updates to keep interactions responsive while maintaining a visually rich interface.

Challenges & Solutions

Creating Meaningful Recommendations

One of the biggest challenges was transforming subjective personality answers into accurate product recommendations.

This was solved by designing a custom scoring system that maps user responses to fragrance characteristics and calculates the highest matching perfume.

Maintaining State Across Multiple Steps

Because users can freely navigate between quiz steps, preserving selections without resetting data was essential.

A centralized state management approach was implemented to ensure all answers remained synchronized throughout the entire flow.

Integrating React with WordPress

The quiz needed to behave like a native part of the WooCommerce website while remaining an independent React application.

This was achieved through seamless frontend integration that preserved the overall website experience without disrupting existing functionality.

Tech Stack

React
JavaScript (ES6+)
WordPress
WooCommerce
HTML5
CSS3

Outcome

The final solution provides visitors with a highly personalized fragrance discovery experience that bridges the gap between traditional online shopping and the in-store consultation process.

By combining a custom-built React application with the flexibility of WordPress and WooCommerce, the platform delivers a modern luxury shopping experience that encourages customer engagement while simplifying product discovery.