Leyla: Luxury Beauty Products & In-Store Service Booking Website
About This Project
Leyla is a premium beauty brand website that merges online product shopping with in-store service booking into one high-end digital experience. Customers can explore and purchase luxury skincare and makeup products, then seamlessly schedule beauty treatments at their nearest Leyla outlet — all without leaving the site. The design language is refined and editorial, reflecting the brand's luxury positioning from the first scroll.
The Problem
Leyla operated both a product line and in-store beauty services but had no unified digital presence for either. Products were sold through a third-party marketplace that diluted the brand experience, and service bookings were handled manually through phone calls. The disconnect between the product side and service side meant customers rarely discovered both offerings.
Key pain points:
- Products listed on third-party platforms — no owned brand storefront
- Service bookings handled manually with no online option
- Customers buying products online had no visibility into in-store services, and vice versa
- The brand's luxury identity was undermined by a generic third-party marketplace presence
- No way to cross-sell products and services to the same customer
Our Solution
We designed and built Leyla a unified luxury website that presents the brand's products and services as two parts of one premium beauty experience.
Core features delivered:
- Luxury Brand Homepage — immersive editorial hero, featured product collections, and service highlights woven together to tell a cohesive brand story
- Product Shop — skincare and makeup catalog with detailed product pages, ingredient highlights, and a streamlined checkout
- In-Store Service Booking — customers can browse available beauty treatments, select their preferred outlet location, choose a date and time, and confirm their appointment online
- Cross-Selling Integration — product pages surface relevant in-store treatments, and service pages recommend complementary products — connecting both sides of the business
- CMS-Managed Content — Sanity Studio for independent management of products, services, outlet details, and editorial content
- Premium Mobile Experience — every detail of the design adapts elegantly to mobile, maintaining the luxury feel on any screen
Our Process
Phase 1 — Brand & UX Direction (1 Week)
Studied the brand's visual identity, product range, and service menu. Defined a design direction — minimal luxury with rich editorial imagery — and mapped the key user journeys connecting product discovery to service booking.
Phase 2 — Design (2 Weeks)
Built a full Figma design system with homepage, product catalog, product detail, service listing, booking flow, and outlet finder. Every component was designed to feel premium and intentional.
Phase 3 — Development (3 Weeks)
Built with Next.js for performance and SEO. Implemented the product shop, service booking flow with outlet selection and calendar, and cross-sell logic connecting products to services. Integrated Sanity CMS across all dynamic content.
Phase 4 — Testing & Launch (1 Week)
Full QA across devices. Booking flow tested end-to-end. Launched with CMS handoff and a brief training session for the brand team.
Results
- Brand's first owned luxury digital storefront — no longer dependent on third-party marketplaces
- Product shop and in-store service booking live under one unified experience
- Cross-sell journeys connecting products to services driving dual engagement from day one
- Multi-outlet booking system live with location-specific availability management
- Client team managing all products, services, and outlet content via Sanity Studio independently
- Client praised the high-end aesthetic and the seamless product-to-appointment flow as exceeding expectations
Screenshots
