Loading...
Back to Resources
Frontendin progress
Gloss By Jacob
5 views
Complexitybeginner
Typeclient
Duration1 week
About
In the highly competitive beauty market, traditional e-commerce checkout flows often introduce unnecessary friction, leading to abandoned carts especially for boutique brands where personalization and immediate consultation drive sales. For Gloss By Jacob , an emerging premium lip gloss brand, the challenge was twofold: establish a luxurious, high-end digital presence while providing a seamless, highly personal path to purchase. We needed to eliminate the impersonal, multi-step checkout and replace it with direct conversational commerce, allowing customers to order immediately via WhatsApp.
Key Highlights
- Conversational Commerce Drives Conversion: By bypassing traditional carts and routing users directly to WhatsApp with pre-filled intents, we dramatically reduced the barrier to purchase, fostering an immediate, personal connection between brand and consumer.
- Micro-Animations Elevate Perceived Value: We learned that subtle, physics-based animations (powered by Framer Motion) on product cards and hero elements significantly elevate the brand's perceived luxury status.
- Accessibility Doesn't Mean Compromising Aesthetics: Leveraging Radix UI taught us that we can maintain strict web accessibility standards (ARIA compliant) while executing a highly customized, unconventional dark-mode aesthetic.
- Modern CSS Paradigms: Upgrading to Tailwind v4 streamlined our PostCSS pipeline, proving that adopting edge-release styling tools can significantly reduce build times and simplify configuration in production environments.
Technologies Used
ReactViteTailwind CSSFramer MotionRadix UI Primitives
Challenges & Solutions
Gloss By Jacob needed more than just a standard website; they required a digital flagship store that immediately communicated luxury and exclusivity. Traditional e-commerce platforms felt too rigid and transactional for a boutique beauty brand that thrives on personal connection and high-end aesthetics. We built this bespoke, highly animated landing page to bridge that gap, prioritizing visual storytelling and replacing clunky checkout forms with a direct, conversational WhatsApp purchasing funnel. - Delivered a premium, high-fidelity brand experience that rivals top-tier international cosmetics brands. - Established a zero-friction, direct-to-consumer conversational sales funnel via WhatsApp integration. - Achieved exceptional performance and smooth 60fps rendering for complex visual assets and animations.
Lessons Learned
- Radix UI + Tailwind is the Gold Standard for Custom Design Systems: Building complex, accessible components from scratch is time consuming. Radix primitives combined with Tailwind v4 allowed us to achieve pixel-perfect fidelity for the dark-mode/rose-gold aesthetic without fighting default browser behaviors or bloated component libraries. - The Power of Conversational Commerce: Routing a "Buy Now" action directly to a WhatsApp API link with a pre-filled message fundamentally shifts user behavior. It turns a static transaction into an immediate customer service interaction, which is incredibly potent for boutique beauty brands where buyers often seek advice or shade matching. - Animation as a Branding Tool: In the beauty sector, the UI must feel as smooth and refined as the product itself. We discovered that investing heavily in Framer Motion for scroll-linked animations and hover states wasn't just "extra polish" it was a core requirement for establishing the brand's premium positioning.