A Case Study
by
Tawfik Mahmoud
Product Designer
Your Gate To The Handcraft World
UX/UI Case Study · 2023 — 2024
Mohamed Tarek
Project Manager
Your Gate To The Handcraft World
A Case Study
by
www.Zoqaq.com
Designer
Tawfik Mahmoud — Product Designer
Platform
Web Marketplace
Views
Buyer / Vendor / Admin
Duration
2023 — 2024
Table of Contents
Cover & Overview
Project introduction and key metrics
01
Problem & Research
User pain points, personas, and market data
02
Brand Identity
Logo journey, color system, and typography
03
UX Architecture
Design principles, sitemaps, and user flows
04
UI Screens
High-fidelity mockups and component library
05
Localization
Bilingual strategy and RTL/LTR design
06
Outcomes & Reflection
Deliverables, learnings, and closing
07
Designer
Tawfik Mahmoud — Product Designer
Platform
Web Marketplace
Views
Buyer / Vendor / Admin
Duration
2023 — 2024
Table of Contents
01
Cover & Overview
Project introduction and key metrics
02
Problem & Research
User pain points, personas, and market data
03
Brand Identity
Logo journey, color system, and typography
04
UX Architecture
Design principles, sitemaps, and user flows
05
UI Screens
High-fidelity mockups and component library
06
Localization
Bilingual strategy and RTL/LTR design
07
Outcomes & Reflection
Deliverables, learnings, and closing
Problem Statement
Egyptian artisans are invisible to the world's largest consumer market.
01
No Export Infrastructure
Egyptian artisans lack the digital tools, logistics knowledge, and payment systems needed to reach international buyers.
02
Discovery Gap
American consumers interested in authentic handmade goods have no reliable, curated platform for Egyptian crafts.
03
Language & Trust Barrier
The bilingual gap between Arabic-speaking vendors and English-speaking buyers erodes trust at every touchpoint.
User Personas
Who We Design For
Three distinct user groups — each with unique needs, goals, and frustrations.
Sarah Mitchell
34 · Chicago, USA
Interior Designer & Buyer
I want unique, handcrafted pieces with a story — but I need to trust the seller and know exactly when my order arrives.
Goals
●
Find authentic Egyptian handmade decor
●
Reliable shipping to the US
●
Know the artisan behind the product
Frustrations
✕
Cannot verify quality online
✕
No trusted platform for Egyptian crafts
✕
Unclear return policies
Ahmed Hassan
42 · Cairo, Egypt
Ceramic Artisan
أنا بصنع أحلى قطع، بس مش عارف أوصلها للسوق الأمريكي. محتاج حد يساعدني.
Goals
●
Reach American customers
●
Simple Arabic interface
●
Fair pricing and fast payments
Frustrations
✕
No access to export markets
✕
Complex English-only platforms
✕
High marketplace commissions
Nour Abdel-Fattah
29 · Cairo, Egypt
Platform Operations Admin
I need to vet vendors quickly, track orders across continents, and keep both sides happy.
Goals
●
Efficient vendor onboarding
●
Clear order tracking dashboard
●
Bilingual communication tools
Frustrations
✕
Manual approval processes
✕
No unified analytics
✕
Handling disputes across languages
Market Opportunity
The Numbers Speak
$718B
Global Handmade Market
Expected by 2027 (Allied Market Research)
67%
US Consumers
Prefer handmade/artisanal products over mass-produced
12M+
Egyptian Artisans
Working in traditional crafts with limited export access
Problem Statement
Egyptian artisans are invisible to the world's largest consumer market.
01
No Export Infrastructure
Egyptian artisans lack the digital tools, logistics knowledge, and payment systems needed to reach international buyers.
02
Discovery Gap
American consumers interested in authentic handmade goods have no reliable, curated platform for Egyptian crafts.
03
Language & Trust Barrier
The bilingual gap between Arabic-speaking vendors and English-speaking buyers erodes trust at every touchpoint.
User Personas
Who We Design For
Three distinct user groups — each with unique needs, goals, and frustrations.
Sarah Mitchell
34 · Chicago, USA
Interior Designer & Buyer
I want unique, handcrafted pieces with a story — but I need to trust the seller and know exactly when my order arrives.
Goals
●
Find authentic Egyptian handmade decor
●
Reliable shipping to the US
●
Know the artisan behind the product
Frustrations
✕
Cannot verify quality online
✕
No trusted platform for Egyptian crafts
✕
Unclear return policies
Ahmed Hassan
42 · Cairo, Egypt
Ceramic Artisan
أنا بصنع أحلى قطع، بس مش عارف أوصلها للسوق الأمريكي. محتاج حد يساعدني.
Goals
●
Reach American customers
●
Simple Arabic interface
●
Fair pricing and fast payments
Frustrations
✕
No access to export markets
✕
Complex English-only platforms
✕
High marketplace commissions
Nour Abdel-Fattah
29 · Cairo, Egypt
Platform Operations Admin
I need to vet vendors quickly, track orders across continents, and keep both sides happy.
Goals
●
Efficient vendor onboarding
●
Clear order tracking dashboard
●
Bilingual communication tools
Frustrations
✕
Manual approval processes
✕
No unified analytics
✕
Handling disputes across languages
Market Opportunity
The Numbers Speak
$718B
Global Handmade Market
Expected by 2027 (Allied Market Research)
67%
US Consumers
Prefer handmade/artisanal products over mass-produced
12M+
Egyptian Artisans
Working in traditional crafts with limited export access
Logo Evolution
From Sketch to Symbol
The ZOQAQ logo merges the English "Q" with the Arabic "ق" (Qaf) — a bilingual symbol of crafted hands and cultural fusion.
Concept Sketches
Refined Form
Final Vector
Logo Evolution
From Sketch to Symbol
The ZOQAQ logo merges the English "Q" with the Arabic "ق" (Qaf) — a bilingual symbol of crafted hands and cultural fusion.
Concept Sketches
Refined Form
Final Vector
→
→
Logo Variations
Lockup Variations
Brand Pattern
Color System
A Palette Rooted in Earth
Primary
Primary Dark
#1A0A00
Deep backgrounds, text
Primary Core
#6B2A00
Secondary text, borders
Primary Main
#B54A00
CTA buttons, links
Primary Bright
#D45A00
Accent, hover states
Primary Light
#E06020
Highlights, badges
Secondary
Forest Green
#2A3320
Success states, trust
Sage Green
#8A9A78
Tags, subtle accents
Terracotta
#C45A20
Warm accents, warnings
Gold
#C4892A
Premium, ratings
Neutrals
Cream
#F2EFE4
Light backgrounds
White
#FFFFFF
Cards, inputs
Deep Black
#0C0502
Dark sections
Logo Anatomy
Decoding the Symbol
1
English Q
The contemporary letter Q forms the foundation — modernity and innovation.
2
Arabic ق (Qaf)
Seamlessly integrated, adding cultural dimension and commitment to Arabic heritage.
3
Curves = Crafted Hands
The flowing curves represent the craftsmanship of skilled artisan hands.
Logo Variations
Lockup Variations
Brand Pattern
Color System
A Palette Rooted in Earth
Primary
Primary Dark
#1A0A00
Deep backgrounds, text
Primary Core
#6B2A00
Secondary text, borders
Primary Main
#B54A00
CTA buttons, links
Primary Bright
#D45A00
Accent, hover states
Primary Light
#E06020
Highlights, badges
Secondary
Forest Green
#2A3320
Success states, trust
Sage Green
#8A9A78
Tags, subtle accents
Terracotta
#C45A20
Warm accents, warnings
Gold
#C4892A
Premium, ratings
Neutrals
Cream
#F2EFE4
Light backgrounds
White
#FFFFFF
Cards, inputs
Deep Black
#0C0502
Dark sections
Typography
Dual Type System
Manrope (300-800) for English. GE SS Two Bold for Arabic.
English — Manrope
Zoqaq
Weights 300–800 · Geometric sans-serif · Variable
Arabic — GE SS Two Bold
الزقاق
Bold weight · Geometric Arabic · RTL optimized
Display
56px / 800
Zoqaq
الزقاق
H1
44px / 700
Heading One
العنوان الأول
H2
32px / 700
Heading Two
العنوان الثاني
H3
24px / 600
Heading Three
العنوان الثالث
Body
16px / 400
Body text for paragraphs and descriptions.
نص الفقرات والوصف
Caption
12px / 700
CAPTION TEXT
نص التعليق
Stationery
Business Cards
Premium business cards — cream front with contact details, brown back with logo.
Front — Contact
www.zoqaq.com
Est. 2023
Tawfik Mahmoud
Product Designer
tawfikmahmoud@gmail.com ·
+20 1008292642
Back — Brand Mark
Size
90 × 55 mm
Stock
350gsm Textured Cream
Finish
Soft-touch matte + spot UV
Corners
3mm rounded
Design Principles
Guiding Every Decision
🏛
01
Cultural Clarity
Every design decision respects and celebrates Egyptian craft heritage while remaining accessible to Western consumers.
🌍
02
Bilingual by Default
Not just translated — designed natively for both Arabic (RTL) and English (LTR) from the ground up.
🤝
03
Trust through Transparency
Artisan stories, process photos, shipping tracking, and clear pricing build buyer confidence across borders.
✨
04
Simplicity at Scale
Clean interfaces that work for a Cairo artisan with basic tech skills and a Chicago designer on her laptop.
Information Architecture
Site Map
Zoqaq.com
Home
Browse / Search
Categories
Product Page
Cart
Checkout
Buyer View
Apply
Dashboard
My Products
Orders
Payments
Shop Settings
Vendor View
Dashboard
Vendor Applications
User Management
Orders
Analytics
Settings
Admin Dashboard
User Flows
Journey Maps
1
Buyer Flow (LTR)
Landing Page
Browse Catalog
Product Page
Add to Cart
Checkout
Confirmation
2
Vendor Flow
Apply as Vendor
Admin Approval
Setup Shop
List Products
Receive Order
Fulfill & Get Paid
3
Admin Flow
Login
Dashboard
Review Applications
Approve / Reject
Monitor Orders
Analytics
Layout Mirroring
RTL ↔ LTR Side by Side
LTR — English
Product Title
By Artisan Name
$64
Add to Cart →
RTL — عربي
٦٤$
عنوان المنتج
بواسطة اسم الحرفي
← أضف إلى السلة
Bilingual Typography
Arabic & English in Harmony
اكتشف الحرف اليدوية المصرية
Discover Egyptian Handmade Crafts
أصالة صنعت بحب
Authenticity Made With Love
كل قطعة تحكي قصة من الشوارع القديمة في القاهرة
Every piece tells a story from the old streets of Cairo
Challenges Solved
Localization Challenges
↔
01
RTL / LTR Mirroring
Every layout component must flex-reverse for Arabic. Navigation, cards, icons, and reading order all flip. We built a mirroring system that automatically handles directional logic.
🌐
02
Translation Quality
Machine translation loses cultural nuance. We worked with native speakers to ensure artisan descriptions, onboarding flows, and legal copy feel natural in both languages.
📏
03
Text Expansion
Arabic text is typically 20–30% longer than English. All UI containers are designed with flexible sizing to prevent overflow and maintain visual balance.
Deliverables
What We Shipped
Brand identity system & guidelines
Logo design with 6 lockup variations
Full color system with usage rules
Typography scale (Manrope + GE SS Two Bold)
3 user personas with research
Site map & information architecture
3 complete user flow diagrams
Buyer homepage (desktop + mobile)
Product detail page with annotations
Vendor dashboard (Arabic RTL)
Admin dashboard with analytics
Component library (8 core components)
RTL/LTR localization system
Key Learnings
What We Learned
The biggest challenge wasn't flipping layouts from LTR to RTL. It was understanding that Arabic-speaking artisans and English-speaking buyers have fundamentally different mental models for trust, navigation, and decision-making.
“
Designing bilingually isn't just about translation — it's about rethinking every interaction from two cultural perspectives simultaneously.
We learned that the warm, earthy palette wasn't just aesthetically pleasing — it was essential for making Egyptian artisans feel represented, while remaining sophisticated enough for the American market.
“
Every pixel carries cultural weight. A color choice, an icon, a border radius — they all signal belonging or exclusion.
We iterated extensively on the vendor onboarding flow, reducing it from 12 steps to 5, while maintaining all the compliance and quality verification needed for international trade.
“
Simplicity is the hardest craft. The platform needed to be simple enough for artisans with basic tech skills, yet powerful enough for cross-border commerce.
Zoqaq is more than a marketplace.
It's a bridge.
Connecting Egyptian artisans to the world's largest consumer market, one handcrafted piece at a time.
Designed byTawfik mahmoud — Case Study 2023 — 2024
Tawfik Mahmoud — Product Designer · Mohamed Tarek — Project Manager
Logo Anatomy
Decoding the Symbol
1
English Q
The contemporary letter Q forms the foundation — modernity and innovation.
2
Arabic ق (Qaf)
Seamlessly integrated, adding cultural dimension and commitment to Arabic heritage.
3
Curves = Crafted Hands
The flowing curves represent the craftsmanship of skilled artisan hands.