Designing an e-commerce platform where people browse, compare, and buy smartphones — with social media shopping built directly into the experience.
MobiCity is a smartphone marketplace where people can browse, explore, and purchase products directly — on the web, mobile app, or directly through social media. The project addresses the permanent shift in how people shop, fusing traditional e-commerce with the social commerce wave that defines how the next generation of consumers discovers and buys products.
Why smartphones? The smartphone category is uniquely suited to social commerce. Buying decisions are driven by reviews, comparisons, unboxings, and influencer opinions — all content that lives on social platforms. MobiCity puts those signals at the centre of the purchase funnel.
E-commerce has become cut-throat. Trust is the main currency. Brands must be transparent, authentic, and present where consumers spend their time. Social commerce is precisely that intersection — and it's growing at a rate no pure e-commerce player can afford to ignore.
Designing an e-commerce product easy to use for both vendors and consumers — where people can browse, explore, and purchase directly without friction — while merging the experience with social shopping.
Business target: Build a new online brand in the smartphone marketplace that leverages social commerce as a primary differentiator — not a bolt-on feature.
I followed the Design Thinking framework — a five-stage iterative process that prioritises deep user understanding before any solution is designed. The approach is non-linear: stages can be revisited or collapsed based on the insights uncovered.
The empathy phase began with a multi-source research approach: user interviews with customers who recently purchased a smartphone, stakeholder interviews, sales team debriefs, and quantitative data from CRM and web analytics. I also looked at competitors to understand patterns users have already internalised.
Spoke with best and high-value customers to understand their needs and motivations when buying a smartphone. What research steps do they go through? Where do they get stuck?
The sales team has the most direct contact with customers. Their input surfaced what high-value customers look for, object to, and compare — intelligence that doesn't appear in analytics.
CRM and web analytics data to understand device usage, geographic patterns, age demographics, and drop-off points in the existing funnel. Used both quantitative and qualitative data to triangulate findings.
Reviewed major smartphone retailers and social commerce platforms to identify mental models users already have, patterns worth adopting, and gaps worth owning.
Research revealed that smartphone buyers are not a single audience. Six distinct behavioural segments emerged — each with different needs, motivations, and decision triggers. Designing for all six without creating a bloated, confusing experience was a core design challenge.
Mapping the full customer journey revealed that friction points exist well beyond the purchase screen. The delivery experience, post-use review, and referral loop are as important as the product page — and were historically underinvested.
Key insight from journey mapping: The Review & Referral stage is the most underutilised growth lever. Social Influencers and Brand Devotees are natural amplifiers at this stage — the design needed to make it effortless to create, share, and be rewarded for UGC.
In the ideation phase, I focused on how to integrate social commerce without turning the product into a distraction. The core principle: social proof should be in context, not in a separate tab. Influencer posts appear alongside product detail pages. A purchase can be triggered from within a social post directly.
Mapped every path from landing to purchase. Eliminated unnecessary steps. The critical path from product page to confirmation was reduced from 7 screens to 4.
Identified 3 integration layers: (1) Influencer posts embedded on product pages, (2) A "Social Shop" feed on the home screen, (3) Direct checkout from social posts — no redirect required.
E-commerce trust signals placed at decision moments: social proof near the Add to Cart button, security indicators at checkout entry, delivery transparency on the order page.
Designed conditional experiences: Value Hunters see deal badges and price-drop alerts; Brand Devotees see a streamlined quick-reorder flow; Researchers see spec comparison tools surfaced prominently.
Paper and digital wireframing allowed rapid validation of structure and layout without the distraction of visual style. Key screens covered: homepage, category page, product detail page, social feed integration, and checkout flow.
An interactive representation of the MobiCity home screen, illustrating the social commerce integration pattern — products and social posts co-existing in a single, shoppable feed.
These are the actual wireframe screens developed in Figma — covering the core flows before visual design was applied.
The visual design system draws from a clean, premium palette with deep navy and electric accent colours — conveying trust and technological aspiration without the sterility of minimalist tech aesthetics. Typography is Inter for UI legibility. Product photography and UGC content are the visual heroes.
Final UI screens produced in Figma — showing the visual system applied across the main product flows.
Rather than a separate "Social" section, influencer posts are embedded contextually — on product pages (under Reviews), on the home screen (Social Shop widget), and in search results. The purchase action is available in-context: no redirect, no lost flow.
The product detail page was redesigned around the Researcher segment. A persistent "Compare" bar allows users to add up to 3 phones side-by-side. Key specs (camera, battery, processor) use plain-language labels, not spec sheet shorthand.
The home feed adapts based on segment signals: Value Hunters see deal banners and a "Price Drop" section. Brand Devotees see new releases from their brand. Replenishers see loyalty points and trade-in offers. First-time visitors get curation by editorial.
Authentic reviews (with verified purchase badge) are placed above the fold on product pages. The checkout flow includes an explicit security guarantee and displays the number of people who purchased in the last 24 hours — social proof at the moment of highest anxiety.
MobiCity is a conceptual project that demonstrates the full Design Thinking process applied to a real-world e-commerce problem. The work spans from qualitative research and segment definition through to high-fidelity UI — covering the end-to-end product design lifecycle.
What I'd explore next: Vendor onboarding UX — the experience of a seller listing a phone, managing inventory, and running social campaigns from within MobiCity. The supply side is as important as the demand side, and vendor tooling is often where marketplace UX fails.
Interested in applying social commerce thinking to your product? Let's talk.
