Bilingual E-commerce Platform
SVC — Special Variety Company
Bilingual coffee commerce platform for Special Variety Company (Riyadh) — machines, beans and spare parts with a full checkout, plus a projects and partners showcase.
Client — SVC — Special Variety Company, Saudi Arabia
Project Overview
SVC supplies premium coffee machines, specialty beans and spare parts across Saudi Arabia, along with installation, maintenance and barista training. I designed the full e-commerce experience — from the landing page and category browsing to product detail, cart, three-step checkout and the projects and partners section that proves the company's track record with 40+ brands.
- Role
- UI/UX Designer
- Timeline
- 2 Weeks
- Platform
- Responsive Website (EN / AR)
- Industry
- Coffee Equipment Retail
- Tools
- Figma, Design Systems, Web Design
- Since
- 2008
- Partner Brands
- 40+
- Catalogue
- 3 categories
- Languages
- EN / AR
The Problem
SVC sold machines, beans, parts and services entirely through offline relationships, so buyers could not compare products or order online.
- No way to compare machines or check VAT-inclusive pricing
- Repeat purchases of parts and consumables had no quick path
- The 40+ partner network that builds trust was invisible
- No Arabic experience for a largely Arabic-speaking market
Project Goals
Build a bilingual (English/Arabic) storefront that makes the three product families easy to browse, shows Saudi-market pricing with 15% VAT and shipping rules up front, completes checkout in three clear steps, and presents the partner network as social proof.
- 01
Make the three product families easy to browse and compare
- 02
Show SAR pricing, 15% VAT and shipping rules up front
- 03
Complete checkout in three clear steps
- 04
Deliver a full RTL Arabic experience alongside English
Research & Discovery
- B2B and B2C buyers shop differently: cafés arrive knowing the model, home buyers browse by category and price.
- Saudi buyers expect SAR pricing with VAT stated, free-shipping thresholds, and bank transfer plus cash on delivery beside card payment.
- Spare parts and consumables are repeat purchases, so wishlist and quick re-add matter more than discovery.
- Partner logos and case-style project pages are the strongest trust signal for commercial enquiries.
- Arabic support required a full RTL-ready layout and an always-visible language switch in the header.
User Flow
- Landing
- Shop / Category
- Product Details
- Cart & Wishlist
- Shipping
- Payment
- Confirmation
- Projects & Partners
From Wireframes to Final UI
Wireframes fixed a persistent header with search, language and cart total, then alternated cream product bands with deep-green service bands so the catalogue, trust badges and newsletter always land in the same rhythm across every page.
Low Fidelity
Structure first
Grey-box layouts to settle hierarchy, navigation and the order of information before any styling.
High Fidelity
Final UI
Typography, colour, components and states applied on top of the approved structure.
UI Design
Website
A coffee-led identity: SVC green for actions, roasted-bean amber for headings, a hand-drawn coffee pattern as page texture and deep-green bands for trust and footer areas. Product cards carry badges, ratings and one-tap add, while the checkout keeps a sticky order summary with VAT, shipping and payment marks.
Building a Scalable Design System
A coffee-led system built to mirror cleanly between left-to-right and right-to-left layouts.
Colour
- SVC green actions
- Roasted-bean amber headings
- Cream product bands
- Deep-green trust bands
Typography
- Bilingual heading pairing
- Arabic-ready body
- Price emphasis scale
Components
- Product card with badges
- Category carousel
- Cart line
- Sticky order summary
- Partner card
- Trust badge row
Patterns
- Persistent header with cart total
- Alternating band rhythm
- RTL mirroring rules
- Three-step checkout
Platform Modules
Storefront
- Category browsing for machines, beans and spare parts
- Search, filters, sorting and pagination
- Product detail with specs, features and reviews
- Wishlist and best-seller merchandising
Checkout
- Three-step shipping, payment and confirmation
- Card, bank transfer and cash on delivery
- 15% VAT, shipping tiers and promo codes
- Order summary persistent across steps
Services
- Installation and maintenance
- Repair and spare part supply
- Barista training and certification
- Turnkey café and restaurant solutions
Projects & Partners
- 40+ partner brand directory
- Individual partner case pages
- Testimonials and project galleries
- Enquiry and WhatsApp contact routes
Key Design Decisions
01Pricing Transparency First
VAT, shipping tiers and totals appear before checkout so commercial buyers can budget immediately.
02RTL as a First-class Layout
The grid and components were designed to mirror, not to be patched later for Arabic.
03Partners as Proof
The 40+ brand network became a browsable section instead of a logo strip.
Outcome
SVC now has an online storefront that prices transparently in SAR, closes an order in three steps, and turns its 40+ brand partnerships into a browsable proof-of-work section for commercial buyers.
What I Learned
Designing bilingually from the start taught me to think in mirrored layouts rather than fixed positions, which made the whole component set more resilient.
Interactive Prototype
Prototyped the full purchase path in order — landing, category, product detail, cart, shipping, payment and confirmation — plus the partners directory into a single partner case page.
Explore the final experienceView Prototype