Gent Noir is a conceptual luxury eCommerce experience created to explore the intersection of **product thinking, UX design, and frontend development** within a modern retail environment.
The project focused on designing a premium fragrance shopping experience that balanced luxury branding, conversion-focused UX, responsive frontend performance, and scalable interaction patterns. Rather than approaching the experience purely from a visual design perspective, the project evaluated how interface decisions, user behavior, and technical implementation contribute to usability, engagement, and conversion.
Many fragrance eCommerce websites rely on cluttered layouts and aggressive promotional patterns that weaken the premium shopping experience.
Gent Noir was intentionally designed using:
The interface focused on reducing cognitive overload while reinforcing the exclusivity and sophistication associated with luxury retail experiences.
Traditional product grids often overwhelm users with excessive information and competing calls-to-action.
The proTo improve product discovery, each product card was simplified to include:cess included:
This streamlined structure improved scannability, reduced interaction friction, and created a cleaner browsing experience while maintaining the premium visual aesthetic. The interface was built using reusable product card structures, responsive grid behavior, and scalable layout patterns to ensure consistency and usability across devices.
Many eCommerce experiences interrupt browsing flow by redirecting users to separate cart pages after product selection.
To reduce friction, a custom slide-in cart system was implemented featuring:
The slide-in cart was designed to minimize context switching and encourage continued browsing while maintaining checkout visibility throughout the shopping journey.
A lightweight promotional signup experience was introduced to support engagement and customer acquisition.
The signup flow included:
Technical Considerations
The experience was designed with a mobile-first approach to ensure usability across devices.
Key considerations included:
The mobile experience was treated as a primary shopping environment rather than a secondary adaptation.
Technical Stack
The project used a lightweight frontend architecture focused on performance, scalability, and maintainability without relying on heavy frameworks.
To support scalability and visual cohesion, the interface was built using a lightweight component-based design system approach.
Reusable patterns were applied across:
The system prioritized responsiveness, maintainability, and a consistent premium user experience across the platform.
Gent Noir demonstrates a hybrid approach combining:
The project focused not only on visual presentation, but on how product decisions, frontend implementation, and user behavior work together to create a modern, high-performing digital commerce experience.
Core areas of focus included: