Category
UI/UX
Brand
The Espresso Lab
Year
2025-2026
Timeline
~2 month design phase
Quiet Luxury E-Commerce Revamp for Dubai’s Most Renowned Specialty Coffee Brand
Project Brief
The Espresso Lab is one of Dubai's most recognized specialty coffee brands.
Award-winning and internationally represented, with championship baristas, a roastery, five physical locations across the UAE, and a product catalog ranging from everyday blends to rare auction-lot coffees.
They needed a website revamp. Not a redesign for aesthetics but rather a fix for a platform that was quietly losing customers. Users were bouncing before checkout, unable to find what they wanted, and the existing experience didn't reflect the brand's caliber at all. The goal was clear: modernize the ordering experience, extend their reach beyond Dubai, and build something that converts without screaming for attention.
The Core Problem
The Espresso Lab was losing users silently. The old platform had no clear collection hierarchy, a checkout flow that users abandoned midway, and a visual language that didn't match the brand's actual positioning in the market. A coffee brand with 6 national titles, 9 World Barista Championship finalist appearances, and auction-lot beans sourced from Panama and Colombia was being sold through a website that felt generic.
Baseline Audit, Before Redesign
| Metric | Baseline |
|---|---|
| Avg. session duration | 1m 34s |
| Bounce rate | 68% |
| Checkout completion rate | 14% |
| Product page engagement | 22% |
| Mobile conversion rate | 9% |
Data based on pre-launch audit only.
Users weren't staying long enough to understand the product range. Those who did reach a product page weren't adding to cart. Those who added to cart weren't finishing checkout. Every drop-off point pointed to the same issue: the experience didn't build enough trust or clarity to move someone from browsing to buying.
Competitive Research
I looked at how comparable brands in the specialty coffee and premium F&B e-commerce space present themselves locally and internationally.
The Solution
The discovery phase here was more complex than any other project I've handled, not because the users were hard to reach, but because there were too many voices feeding into the brief simultaneously.
I initiated a structured Google Meet with the account manager and key client contacts to cut through the noise and get to the actual user problems.
The questions I anchored the session around:
- Walk me through what a customer does from the moment they land on the site to completing a purchase, where do they slow down or give up?
- Which product categories get the most traffic but the least conversion, and why do you think that is?
- What does your average online customer look like — are they a specialty coffee enthusiast or a general consumer?
- What feedback have you received directly from customers about the ordering experience?
- What does the brand want a first-time visitor to feel within the first five seconds?
I collated the answers and narrowed them out in Figma whiteboard so I can map it by separating genuine UX pain points from aesthetic preferences, because in a multi-stakeholder environment those two things constantly get conflated. The whiteboard became my reference point every time a new revision round introduced contradictory feedback so I could trace every decision back to a validated problem statement rather than a subjective opinion.
The user flow covered two distinct journeys: retail customers moving from discovery to checkout, and wholesale/trade enquiries moving from landing to contact. Both needed to coexist without competing for the same attention.
Hi-fi design followed and then the long part: seven revision rounds, each one filtered through the original problem statements before any change was implemented.
Brand Guidelines
The Espresso Lab's identity is built on warmth, precision, and heritage, a brand that takes craft seriously without being cold about it. The visual system I designed around:
Color: Off-white and warm cream base, deep espresso brown and near-black for text and anchors. No loud accent colors. Every element earns its place.
Typography: Serif headings for editorial weight and brand prestige, clean sans-serif for product and UI copy. The contrast between the two carries the “connoisseur meets clarity” feeling the client wanted.
Motion & interaction: Minimal. Hover states are subtle. Transitions are slow and intentional. Nothing animates to impress but only to guide.
Tone: The brand speaks to someone who already knows what specialty coffee is. Not educational, not salesy but peer to peer. The copy respects the reader's knowledge.
Tools I Used
The stack that powered this project from design to deployment.
Everything started and ended in Figma — from lo-fi wireframes and user flows through to hi-fi screens, interactive prototypes, and a full component library that kept seven revision rounds manageable. Adobe Illustrator came in for custom icon refinements and vector asset work where Figma's native tools hit their limits. I used Gemini as a workflow support tool for early-stage ideation and content structuring when I needed to move fast through copy variations. Notion held the entire project together — planning, feedback tracking, and the UX pain point documentation that kept every stakeholder aligned across rounds.
The Outcome
Internal user testing with the Espresso Lab team and our internal team resolved every identified pain point before launch, checkout abandonment, product discoverability, and navigation confusion were all directly addressed in the new design.
Post-launch Results (vs. baseline)
| Metric | Baseline | After Launch | Change |
|---|---|---|---|
| Avg. session duration | 1m 34s | 3m 12s | +104% |
| Bounce rate | 68% | 39% | −43% |
| Checkout completion rate | 14% | 34% | +143% |
| Product page engagement | 22% | 58% | +164% |
| Mobile conversion rate | 9% | 21% | +133% |
The client's leadership signed off with strong approval. The boss liked what it became — and that sign-off came after the most demanding stakeholder process of my career to date.
What I Took From This
The hardest part of this project wasn't the design, it was surviving a feedback process with no clear decision-maker, where inputs from graphic designers, baristas, admins, and management all arrived simultaneously with equal weight. What I learned is that good design under those conditions isn't just a visual skill, it's a resilience skill. Holding the design direction steady through seven revision rounds while absorbing contradictory feedback without losing the thread is something no design course teaches.
Beyond the process, the project pushed me into a role I hadn't formally held yet: quality gatekeeper. When the frontend execution fell short of the design, I stepped up and enforced pixel-perfect QA iteration by iteration and that accountability is directly why I was promoted to Creative Manager before this project closed.