A Case Study
by
Tawfik Mahmoud
Mohamed Tarek
Product Designer
Project Manager
بوابتك لعالم الصناعات اليدوية
Your Gate To The Handcraft World
UX/UI Case Study · 2023 — 2024
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
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 Anatomy
Decoding the Symbol
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
نص التعليق