Ôbar’fum – Perfume Bar
Discover Ōbar’fum, the first perfume bar in Morocco offering luxury generic perfumes made in Grasse. Premium niche perfumes at affordable prices, personalized advice from our expert perfumers. Delivery throughout Morocco.
screens
Overview
Homepage Laptop
Homepage Tab
Homepage Phone
Custom Pack Page
Our concept Page
Checkout Page
1
specifications
Specifications
The client wanted to completely overhaul its existing e-commerce platform to create a modern and immersive shopping experience, revolutionizing the digital approach to its “perfume bar” concept in Morocco. The project required a complete technical migration while preserving customer history and critical business data.
Redesign Challenges
- Modernize an existing platform that has become obsolete
- Preserve the integrity of customer data and historical orders
- Significantly improve the user experience and conversions
- Optimize technical performance and security
- Implement new specialized business features
Data Migration and Preservation
Customer Data:
- Complete migration of the existing customer base
- Preservation of user profiles and preferences
- Preservation of login and authentication data
Sales History:
- Complete migration of past orders
- Preservation of customer purchase history
- Maintenance of billing and delivery data
- Preservation of order status and tracking
Vision and Positioning (New Architecture)
- Create a unique shopping experience
- Make exceptional fragrances accessible to all
- Develop a strong brand identity based on olfactory expertise
- Highlight French origins and Grasse quality
- Optimize technical architecture for performance and scalability
Structure and Design
- Sleek and modern design reflecting the world of affordable luxury
- Intuitive interface emphasizing the sensory experience
- Smooth navigation between different product ranges
- Product enhancement with high-quality visuals
Specialized E-commerce Features
Advanced Selection System:
- Personalized fragrance selector with intuitive interface
- Management of multi-format packs (30ml, 50ml, 100ml)
- Simplified display of product variations
- Featured products with quick selection
Optimized Customer Experience:
- Wishlist management to build your collection
- Smooth and secure ordering process
Marketing and Conversion Strategy
- Mechanisms for highlighting flagship products
- Cross-recommendation system
- Customer review management to build trust
- SEO optimization for the perfume industry in Morocco
Migration and Transition Strategy
- Gradual migration to minimize service interruption
- Migrated data integrity testing
- Secure failover plan with full backup
- Post-migration monitoring for continuous optimization
2
methodology
Overview of developments
Technologies and Environmen
Development on WordPress with advanced WooCommerce architecture, integrating customized solutions to meet the specific needs of the perfume industry.
Integrated Extensions and Optimizations
E-commerce:
- WooCommerce for perfume sales
- Product variation management
- Abandoned cart system with automatic reminders
- Automatic generation of invoices and labels
User Experience:
- Optimized AJAX search
- Customized login/registration system
- Integrated customer review management interface
- Dynamic display of Google reviews
- Wishlist management to encourage future purchases
Performance and Security:
- Performance optimization
- Advanced security
- SEO Optimization
- Professional management of transactional emails
Migration
Customer Base Migration:
- Transfer of 100% of existing customer accounts
- Preserve passwords and login information
- Migration of billing and delivery addresses
- Preserve scent preference history
Order History Migration:
- Complete transfer of past orders (X orders over Y years)
- Preservation of product details and order quantities
- Maintenance of order statuses and key dates
- Preservation of payment and delivery data
- Generation of post-migration verification reports
Developed Features
Featured Product Display – Smart Highlighting (New Feature)
I designed and developed a WordPress/WooCommerce plugin that dynamically displays a featured product, with simplified user interaction optimized for conversion. This feature offers:
- Automatic selection of the last “featured” product in WooCommerce
- Simplified display of variations via an intuitive interface adapted to variable products
- Add to cart via AJAX, with fine-grained error handling and dynamic quantity updates
- Optimized loading of assets (CSS/JS) only when necessary
- Seamless integration into the site design thanks to a customizable shortcode and a superimposed template system
- Optimized UX performance with intelligent cart management and WooCommerce fragment refresh
Obarfum Pack Selector – Multi-Format Management (Complete Redesign)
I designed a custom solution for perfume pack selection, replacing a previous, inflexible system. This advanced module allows for seamless customization of complex products while ensuring full compatibility with WooCommerce:
- Dynamic and intuitive selector of 3 fragrances for 30ml, 50ml, or 100ml formats, depending on the product tag.
- Automatic adaptation to the detected format, with filtering of corresponding variations.
- Calculation and display of the prices of the selected fragrances, taken into account in the shopping cart.
- Complete registration in the shopping cart, the order, and confirmation emails.
- Real-time validation on the customer side, with intelligent blocking of the “Add to Cart” button in the event of a duplicate or incomplete selection.
- Responsive design optimized for mobile, with integrated custom styles.
- Compatibility with the WooCommerce administration, allowing the pack composition to be displayed in the back office.
- Progressive migration of old packs via automatic capacity detection and product categorization.
Obarfum Perfume Selector – Personalized Selection (Post-Migration Innovation)
I developed an advanced module for WooCommerce that allows customers to select a unique fragrance in a guided and personalized way. This solution integrates perfectly with a seamless user experience and centralized management.
- Intuitive selection interface, filtered by scent category (configurable IDs)
- Dynamic display of the selected fragrance throughout the ordering process (cart, checkout, emails)
- Compatibility with simple and variable products
- Integration with inventory management via standard WooCommerce products
- Client-side validation: prevents addition to the cart if no fragrance is selected
- Smart deactivation of the “Add to Cart” button until the selection is complete
- Personalization of transactional emails with the inclusion of the name of the selected fragrance
- Migrated customer preference history, ensuring a seamless user experience
- Responsive UX: clear interface optimized for mobile
- Automatic shortcode injected according to the product category
- Generate a list of available fragrances based on specific categories
- Add product metadata to WooCommerce orders
- Conditional JavaScript scripts and embedded CSS styles to ensure the module’s autonomy
3
technical
Technical details
CMS:
WordPress
Technologies:
Results
A comprehensive e-commerce platform that revolutionizes the online perfume shopping experience in Morocco:
Industry Innovation:
- First “perfume bar” concept in Morocco
- Immersive and personalized shopping experience
- Showcase of French perfumery expertise
Technical Performance:
Report: click here
- Scalable solution
- Optimized inventory management system
- Intuitive user interface maximizing conversions
Impact of the Redesign:
- Complete modernization of the user experience
- Retention of 100% of customer data and order history
- Significant performance improvement (loading time divided by 3)
A successful technical redesign that combines innovation, performance, and preservation of existing features, creating a new benchmark in perfumery e-commerce in Morocco while capitalizing on the history and established customer loyalty.
Performances:
let’s work together
Ready to launch your web project?
Whether you need a new website, a redesign, or a specific feature, I am here to help you realize your digital project.
Or contact me