Magrudy — e-commerce experience and mobile journey
01 Overview
Magrudy is a long-running retail brand in the UAE, trading since 1975 across books, toys, stationery, uniforms and educational supplies. The brief was to make a very large, mixed catalogue easy to navigate — and to carry that experience onto mobile, where a large share of shopping happens.
The work covered the e-commerce experience end to end: product discovery, the shopping journey, mobile UX improvements, and collaboration with development on the React Native application.
02 The Challenge
A catalogue spanning books, toys, uniforms and stationery creates a genuine discovery problem: shoppers arrive with different intents — a parent buying uniform pieces, a teacher sourcing classroom materials, a parent replacing a specific toy — and each needs a different route through the same inventory.
On mobile, that complexity is amplified. Long category trees, dense product information and a multi-step checkout are difficult to navigate on a small screen, and the catalogue is the primary driver of revenue.
- [Add the specific usability problems you identified — e.g. category depth, filter behaviour, product page hierarchy.]
- [Add research method: interviews, analytics, heuristic review, task testing — and what each revealed.]
- [Add the business constraint you were designing against, e.g. shipping thresholds or inventory limits.]
03 My Role
I owned the experience design for the storefront and mobile journey: discovery and navigation, product and category pages, cart and checkout flows, and the mobile app screens that support them. I worked directly with the client team and with developers during handoff and build.
Because the mobile application was built in React Native, my prototypes and specifications were written to be buildable — component behaviour, states and edge cases were defined closely enough with the developers that design intent survived implementation.
04 UX Process
The stages the work moved through, from understanding the catalogue to shipping the experience.
05 Key UX Decisions
Product discovery
[Describe how you reduced the catalogue to something navigable — category structure, search, filtering, sorting, and how a shopper with a specific intent reaches the right item.]
Shopping journey
[Describe the path from landing to checkout: what you shortened, what you removed, and how you handled the cart across devices.]
Mobile experience
[Describe the mobile-specific decisions — thumb reach, information density, interaction patterns, and how the app differed from the responsive web build.]
06 Design System
A shared set of patterns kept the storefront and the mobile app visually and behaviourally consistent, and gave developers a clear specification to build against.
Typography
Colour
Components
| Item | Qty | Total |
|---|---|---|
| Product | 1 | — |
| Product | 2 | — |
07 Final Design
[Short paragraph describing the shipped experience and how the pieces fit together in use.]
08 Outcome
[Describe what changed after launch and what you can evidence — for example a simplified journey, a reorganised catalogue, an agreed component library, or a mobile app shipped from the same design language.]
- [Qualitative outcome 1]
- [Qualitative outcome 2]
- [Add measured result here only if you have real data, with the source noted]