Problem
Users need a reliable way to discover, compare, and buy smartphones across web and social channels without friction.
UX Case Study
MobiCity
Smart Phones Marketplace
Scroll
Chapter 01
Product Overview
Understanding scope, challenge, and market opportunity — before a single pixel is designed.
5.85B
Social Media Users by 2027
$2.9T
Social Commerce Value by 2026
5
Design Thinking Stages
01.
Overview
From Goals Understanding to Project Implementation — starting with understanding project scope.
Baseline42%
Users compare less than 2 products before purchase.
Target65%
Users compare 3+ products with confidence signals.
Success Signal-18%
Reduction in uncertain checkout exits.
Goal
Define business and user outcomes.
Method
Apply mixed UX research and iterative design.
Output
Design system, flows, wireframes, and UI pages.
Insight
Trust and clarity drive smartphone purchase decisions.
Decision
Prioritize transparent product info and scalable components.
The Overview
MobiCity is a smart phones marketplace where people can browse, explore and purchase smartphone products directly on the web, mobile app, or social media commerce. Trust is the main currency of the future of e-commerce.
Social Commerce Integration
The number of social media users worldwide will reach 5.85 billion by 2027. The value of social commerce sales worldwide is estimated at $2.9 trillion by 2026.
The Challenge
MobiCity — A New E-Commerce Vision
Designing an e-commerce product easy to use for vendors and consumers where people can browse, explore and purchase directly without any blocks — merging social shopping at its core.
Business Target: Build a new online brand in the smartphone marketplace.
Executive Summary
From trust gap to measurable marketplace outcomes
Target Users
Researchers, value hunters, gift shoppers, brand devotees, social influencers, and repeat upgraders.
Solution
A trust-first e-commerce experience built with a modular design system and a full design thinking workflow.
Impact Signals
Clearer product evaluation, stronger conversion intent, and better post-purchase confidence through guided UX flows.
Chapter 02
Design Process
Five iterative stages of Design Thinking — from empathizing with users to validating with testing.
02.
Design Process
I implement the Design Thinking Process — five iterative stages that shape every decision.
Research Inputs5
Interviews, survey, analytics, CRM, competitor scan.
Iteration Cycles3
Flow and interface iterations before final UI.
Validation Goal>80
SUS target for usability confidence.
01
Empathize
Research your users' needs — Interviews, Surveys, Data Analysis, Competitors, Customer Journey Maps.
02
Define
State users' needs — Personas, Problem Statement, Empathy Maps, User Journeys, Task Analysis.
03
Ideate
Challenge assumptions — Brainstorm Sessions, User Flow, Information Architecture, Mind Maps.
04
Prototype
Create solutions — Wireframes, Interactive Prototypes, Mockups, Micro Interactions, Hi-Fi Design.
05
Test
Validate with users — Usability Testing, A/B Testing, Heuristic Evaluation, SUS Surveys.
Flexibility — Design thinking is iterative and can skip steps based on current scenarios.
The Empathize Phase
Hold customer interviews to understand needs and motivations
Reach out to the sales team for direct customer insights
Gather both quantitative and qualitative data from CRM & Analytics
Analyze competitors to understand users outside our database
Research-to-Decision Traceability
FindingEvidenceDesign DecisionExpected Outcome
Users fear fake listingsInterview theme + support ticketsTrust badges, rating visibility, clear warranty infoHigher confidence in checkout step
Price comparison frictionSession replay + competitor auditComparison-friendly PLP and sticky filtersMore evaluated products per session
Drop-off at payment stageAnalytics funnel and abandonment logsSimplified checkout with concise stepsLower payment-stage abandonment
Usability Test Protocol
Sample
12 participants across 3 key segments.
Scenarios
Find, compare, buy, and submit review/referral.
Pass Criteria
Task success ≥ 85%, SUS ≥ 80, major errors ≤ 1 per flow.
02.1
User Segments
By customizing our experience to align with user segments, we maximize reach, drive sales, and boost engagement.
Primary Segments6
Distinct groups with separate motivations.
Personalization Target+22%
Expected uplift in engagement per segment. (Design goal — not yet measured.)
Content Fit90%
Key journeys mapped to segment needs.
The Researcher
Spends time learning about products, comparing technologies, and reading reviews.
The Value Hunter
Interested in the best prices, deals, and discounts. Maximizes value for every spend.
The Gifter
Enthusiastic buyer purchasing products for their network of friends and family.
The Brand Devotee
Loyal promoter of brands like Samsung and Apple — repeat buyers and brand ambassadors.
Social Influencers
Always interested in new content, reviews, and offers. Drives social commerce growth.
The Replenisher
Repeat customer passionate about staying up to date with the latest technology.
02.2
User Journey
7 stages that define how customers interact with MobiCity from first touch to referral.
Journey Stages7
End-to-end from search to referral.
Drop-off Focus2
Highest risk points: evaluation and payment.
Post-Purchase Goal+15%
Increase review and referral completion.
01 — Search
First contact through search engines, email, or social. Visitors may arrive with a specific product in mind or to browse generally.
Curious / Neutral02 — Discovery
Occurs on product pages — customers first learn about items.
Interested / Engaged03 — Evaluation
Both on and off the site — customers compare prices, read reviews, and assess if the product fits their needs.
Anxious · Highest drop-off risk04 — Purchase
Shipping details, secure payments, and confirmation that the purchase was successfully made.
Tense · Second highest drop-off risk05 — Delivery
Keeping customers updated on shipment status and providing ongoing customer support.
Expectant / Patient06 — Usage
Customer uses the product and may require support. Post-purchase engagement begins.
Satisfied · Support window07 — Review & Referral
Customers share a review and receive referral incentives like discount vouchers.
Delighted · Advocacy potentialCritical Edge Cases
No search results found. Provide suggested brands and quick filters.
Use skeleton cards in PLP/PDP while pricing and stock are fetched.
Payment/API failure should show clear retry action and support route.
Chapter 03
Visual Design
Design system, UI components, wireframes, and final screens — from atoms to full pages.
03.
Visual Design
Goals were set based on research findings — shaping every visual decision from atoms to pages.
Token Families4
Greyscale, primary, semantic, typography.
Reusable Components20+
Atoms, molecules, and organisms documented.
Consistency Goal95%
Shared patterns across pages and flows.
Wireframes
Hand-drawn wireframes gave the process its authentic touch — bridging research and high-fidelity design.
Low-fidelity exploration completed before locking the visual system and component architecture.
Design System Atomic Design Approach
Typography — SST Arabic
SST Arabic
Bold
Medium
Roman
H180px700−0.04emHero · Page Title
H1 Display
H256px700−0.03emSection Title
H2 Headline
H340px700−0.02emSub-section · Card
H3 Title
H428px600−0.01emComponent Heading
H4 Subtitle
Body16px / 1.654000General body copy
The quick brown fox jumps over the lazy dog.
Label12px6000.08em·CAPSTag · Badge · Eyebrow
LABEL TEXT
Colour Palette
Greyscale
Primary
Semantic
Buttons
Sizes — LG · MD · SM
Variants
Icon Variants
Component States Matrix
StateVisual RuleBehavior Rule
DefaultPrimary token with clear text contrastOne primary action per context
HoverDarken one tonal step (500 to 600)Use only for pointer-capable devices
ActivePressed feel with reduced shadowFeedback should appear within 100ms
FocusVisible 2px ring with spacingKeyboard access must stay fully visible
DisabledLower opacity and no hover affordanceNo click or submit; disabled meaning is explicit
ErrorError token plus helper textExplain what failed and how to recover
Usage Guidance
Use when: the action is direct, clear, and has a single priority.
Avoid when: multiple primary actions compete in the same viewport area.
Composition rule: one primary button plus one secondary button per action group.
Design System Changelog
- v1.2 Added the button state matrix and keyboard focus policy.
- v1.1 Unified semantic tokens for success, warning, and error states.
- v1.0 Initial release with atomic components and responsive support.
Badges & Tags
Product Status
جديد
خصم −20%
الأكثر مبيعًا
متوفر
كمية محدودة
غير متوفر
Filter Tags / Chips
Alerts
تمت العملية بنجاح! تم إضافة المنتج إلى سلة التسوق بنجاح.
تنبيه! الكمية المتبقية من هذا المنتج أقل من 5 قطع.
حدث خطأ! تعذّر إتمام عملية الدفع. يرجى المحاولة مجدداً.
معلومة. سيتم شحن طلبك خلال ٢–٣ أيام عمل.
Form Inputs
+20
Breadcrumb
Header / Navbar
Footer
منصة اكتشف موبايلك الجديد بأفضل الأسعار مع ضمان الجودة والشحن السريع.
Product Cards
Grid View
جديد
Apple
iPhone 16 Teal 128GB
٤٬٩٩٩ ج.م
الأكثر مبيعاً−15%
Samsung
Galaxy S25 Ultra 512GB
٧٬٦٤٩ ج.م٨٬٩٩٩ ج.م
نفذت الكمية
Apple
iPhone 17 Pro Max 2TB
١٤٬٩٩٩ ج.م
−10%
Xiaomi
Redmi A5
١٬٣٤٩ ج.م١٬٤٩٩ ج.م
List View
الأكثر مبيعاً
Samsung
Galaxy S25 Ultra 12GB+512GB Titanium
شاشة Dynamic AMOLED 2X ٦.٩ بوصة — كاميرا ٢٠٠MP — بطارية ٥٠٠٠mAh — شحن سريع ٤٥W
٧٬٦٤٩ ج.م٨٬٩٩٩ ج.ممتوفر
PLP — Product List Page
New
Apple
iPhone 16 Teal
$1,199
Hot
Samsung
Galaxy S25 Ultra
$799$939
Apple
iPhone 17 Pro Max
$1,799
Xiaomi
Redmi A5
$149
Apple
iPhone 15 Black
$999
Apple
iPhone 17 Pro
$1,499
لا توجد نتائج لـ "iPhone 16 Mini"
جرّب إزالة الفلاتر، أو مراجعة الكتابة، أو تصفح الاقتراحات بالأسفل.
PDP — Product Detail Page
متوفر في المخزن
Samsung
Samsung Galaxy S25 Ultra 12GB + 512GB Titanium Silverblue
٧٬٦٤٩ ج.م٨٬٩٩٩ ج.موفّر ١٬٣٥٠ ج.م
اللون: Titanium Silverblue
التخزين
شحن مجاني
إرجاع ١٤ يوم
ضمان سنة
تقسيط بدون فوائد
Cart & Checkout
السلة
٢
الشحن٣
الدفع٤
التأكيدبيانات الشحن
ملخص الطلب
Samsung Galaxy S25 Ultra
512GB · Titanium Silverblue · الكمية: ١
iPhone 16 Teal 128GB
١٢٨GB · Teal · الكمية: ١
المجموع الجزئي١٢،٦٤٨ ج.م
الشحنمجاني
خصم الكود−٥٠٠ ج.م
الإجمالي١٢،١٤٨ ج.م
UI Design
Full pages assembled from the design system components — from Home to Checkout.
Home Page
أشهر العلامات
AppleSamsungXiaomiGoogleOnePlusSony
منتجات مميزة
عرض الكلجديد
Apple
iPhone 16 Teal
٤،٩٩٩ ج.م
الأكثر مبيعاً
Samsung
Galaxy S25 Ultra
٧،٦٤٩ ج.م٨،٩٩٩ ج.م
Apple
iPhone 17 Pro Max
١٤،٩٩٩ ج.م
Xiaomi
Redmi A5
١،٣٤٩ ج.م
منصة اكتشف موبايلك الجديد بأفضل الأسعار مع ضمان الجودة والشحن السريع.
This preview demonstrates token and component consistency from hero to product grid.
04.
Results & Outcomes
Usability testing was conducted with 12 participants across 3 key segments. Here is what the validation revealed.
Task Success≥85%
Target achieved — find, compare, and checkout flows completed without critical errors.
SUS Score Target>80
Usability confidence target set at SUS 80 across all key segments.
Checkout Drop-off−18%
Design goal: reduce uncertain exits at payment step through simplified, transparent checkout.
What the Testing Showed
Participants responded positively to trust signals (badges, warranty visibility, seller ratings). The comparison feature reduced evaluation anxiety for The Researcher and Value Hunter segments. The checkout simplification cut the number of form fields from 12 to 7, which participants described as “much faster than expected.”
Project Scope Note
MobiCity is a commissioned UX design project — the prototype was fully validated in usability testing and delivered as a Figma handoff with design system documentation. The platform was not shipped to production during the scope of this engagement.