Laylaa.ae
E-Commerce Experience for Truffles in the UAE
Role
Lead designer and developer
Tools Used
Figma, VS Code, Adobe
Year
2025
Problem
Laylaa.ae set out to capture the fast‑growing UAE market for gourmet truffles and bite‑sized
treats.
Without an existing online presence, the brand needed a tailored e‑commerce platform built from
the
ground up—one that would reflect Laylaa’s premium identity, support both English and Arabic
audiences,
safeguard customer privacy, and deliver seamless shopping across devices.
Research
- Market & Competitor Scan: Mapped leading UAE confectionery sites to understand UX patterns, multilingual flows, and chatbot best practices for food‑and‑beverage retailers.
- Brand Workshops: Collaborated with Laylaa’s stakeholders to distill core brand attributes—luxury, authenticity, and delight—into design guidelines and interaction principles.
- Technical Studies: Assessed client‑side data strategies and SEO requirements to ensure user privacy and discoverability, while evaluating frameworks for future chatbot expansion.
Strategy
1. Brand‑First Design
- Craft every pixel in Figma from scratch to faithfully convey Laylaa’s artisanal craftsmanship—no third‑party UI kits or stock components.
2. Bilingual Experience
- Architect a language switcher that seamlessly toggles between English and Arabic, preserving layout integrity and right‑to‑left typography.
3. Scalable Chatbot
- Embed a lightweight JavaScript chatbot offering curated menu suggestions and FAQs, with an API‑ready architecture for future AI enhancements.
4. Privacy‑Centered Data Handling
- Keep all user interactions, from cart contents to chatbot prompts, on the client side—minimizing data collection and reinforcing trust.
5. SEO & Responsiveness
- Structure semantic HTML, optimized headings, and meta tags to maximize search visibility.
- Employ SCSS breakpoints and fluid layouts to guarantee pixel‑perfect rendering on smartphones, tablets, and desktops.
Design Phase
Figma Exploration
- Developed mood boards and interactive prototypes illustrating Laylaa’s signature textures and elegant color palette.
- Iterated on product grid layouts and checkout flows to optimize conversions.
Component Library
- Hand‑coded modular SCSS utilities (color variables, mixins, responsive breakpoints) to ensure consistency and maintainability.
Multilingual Fine‑Tuning
- Created mirrored style sheets for Arabic, adjusting font families, line heights, and navigation placement to respect RTL conventions.
Key Takeaways
Privacy by Design
- Handling all data client‑side fosters user trust—especially critical for luxury food purchases.
Modular & Future‑Ready
- A lightweight, component‑based codebase and API‑friendly chatbot pave the way for rapid feature expansion.
Conclusion
By fusing brand‑driven design, bilingual support, privacy‑centric development, and SEO rigor,
Laylaa.ae
launched as a standout e‑commerce destination for truffles and bites in the UAE. The site’s
flexible architecture and elegant UI set the stage for sustained growth, allowing Laylaa to
delight
chocolate lovers today—and scale effortlessly tomorrow.
