Case study 01 — Flagship / Lead role
A comprehensive overhaul of Firstcry.com's Product Details Page — and, underneath it, a new, modern design system for the Middle East market. As the leading UI/UX designer, I owned the entire design lifecycle: research and strategy through high-fidelity prototyping and implementation reviews with developers.
01 — Challenges
Outdated aesthetics. The visual design was no longer competitive — dated against contemporary e-commerce, hurting brand perception with a generation of users who expect modern, intuitive interfaces.
Inconsistent experience. Without a unified design system, visual and functional inconsistencies had spread across sections and product categories, undermining trust and making navigation unpredictable.
Poor usability. Friction in the key interactions — viewing details, selecting variations, adding to cart — was producing frustration, high bounce rates, and incomplete purchase journeys.
Competitive disadvantage. Noon, Namshi, and Mumzworld were offering more modern, seamless shopping experiences and pulling users away.
02 — Process
Discover. Aligned on mission, scope, and KPIs with product managers; quantitative analysis of existing product data to locate friction points.
Define. Synthesised the data into pain points, built personas and empathy maps to capture users' emotional and functional state, and formulated clear problem statements.
Design. Wireframes → design system → interactive prototypes, with usability testing measuring success rates, task time, and error rates.
Deliver. Post-testing refinement, implementation reviews for design and accessibility standards, and monitoring A/B test results with the development team.
Research with PMs showed the majority of users prioritize fresh, minimal, and interactive design — the market had moved; the page hadn't.
01
Align on mission, scope & KPIs. Quantitative analysis of product data to locate friction.
02
Synthesise into pain points. Personas, empathy maps & sharp problem statements.
03
Wireframes → system → prototypes. Usability testing on success, time & error rates.
04
Refine, review for a11y standards & monitor A/B results with the dev team.
03 — Competitive analysis
A comparison across regional and global platforms established best practices and made the gap measurable:
| Dimension | Old Firstcry | Noon | Namshi | Mumzworld |
|---|---|---|---|---|
| Aesthetics | ✕No | ✓Yes | ✓Yes | ✕No |
| Product visuals | ✕No | ✓Yes | ✓Yes | ✓Yes |
| PDP navigation | ✕No | ✓Yes | ✕No | ✕No |
| Information structure | ✕No | ✓Yes | ✓Yes | ✕No |
| Mobile UX | ✕No | ✓Yes | ✓Yes | ✓Yes |
| Trust signals | ✕No | ✓Yes | ✕No | ✓Yes |
| Variant selection | ✕No | ✕No | ✓Yes | ✕No |
04 — Users
Empathy mapping went a level deeper than demographics — what each parent says, thinks, does and feels on the page. Designing for a stressed mother on a lunch break and a sceptical engineer comparing warranties is not one design problem, it's four. Each card below is a research readout: the verbatim that defined the segment, the emotional state we designed against, and the behaviour it drove.
Working mother
32 · Mobile-first60-second checkout
“If I can't check out in 60 seconds, I'm going to miss my meeting.”
Emotional state
Pain
Slow loads, hidden buttons, tiny touch targets, checkout friction.
Goal
Speed, delivery reliability, visual proof of quality.
On the pageHunts for a fixed, high-contrast CTA at the bottom of the screen; skips detail, fills only what's required.
Father · Engineer
35 · Desktop researchSpec-driven
“I don't care about the cute photos. Just show me the dimensions and the warranty.”
Emotional state
Pain
Vague copy, buried specs (weight, battery), hidden warranty.
Goal
Clear technical data, long-term value, manuals.
On the pageSearches keywords like ‘weight limit'; scrolls past marketing straight to Technical Specs and the user manual.
Expecting mother
28 · First-timeSafety-obsessed
“Safety is non-negotiable — I need a clear badge to confirm certification.”
Emotional state
Pain
No safety certs, vague materials, information overload.
Goal
Verifiable ratings, authentic reviews, clear specs.
On the pageOpens every accordion, zooms into images to read labels, and reads the Q&A before ever checking the price.
Stay-at-home mother
30 · Community-ledPeer-vetted
“I trust my peers more than the brand's glossy ads — show me real customer photos.”
Emotional state
Pain
Generic stock shots, no community evidence, hard to share.
Goal
Real customer photos, genuine reviews, easy sharing.
On the pageJumps to reviews-with-images first, shares links to her mom group, and browses ‘frequently bought together' for validation.
05 — The system
The design system was built entirely in Figma as a single source of truth: a reusable component library with detailed usage instructions and accessibility considerations, empowering faster and more consistent design and development across the Middle East division. Arabic wasn't an afterthought — the type system pairs Nunito with Noto Sans Arabic, and components handle RTL natively.
English
Nunito Regular / Semibold / BoldArabic
Noto Sans Arabic Regular / Medium / Bold — full RTL supportPalette
Iconography
Location field
Buttons & inputs
Navigation, cards & chips
06 — Solution
The new PDP is clean and minimalist with enhanced visual hierarchy: improved product imagery presentation, a more prominent call-to-action, clearer product variation selection, and integrated customer reviews for social proof. Because every element comes from the system, every future page inherits the fix.
07 — Outcomes
08 — Companion board
A visual companion to this page — board layouts, additional screens, and the design system in presentation form — is posted on Behance.
Next — 02