Jarir Bookstore AppUX/UI Redesign

The app struggled to present Jarir's wide product range clearly. Category structure was disorganized, browsing required too many steps, and the checkout flow introduced unnecessary friction — leading to a fragmented shopping experience.

A five-person team project at Tuwaiq Academy's UI/UX bootcamp. My part was building the personas from our research and designing the product page, among other screens. We followed a full Design Thinking process: user interviews and an affinity map identified core pain points, competitive analysis shaped structural decisions, and Crazy 8's sessions explored layout alternatives. The final direction restructured the category hierarchy, simplified navigation, and reduced checkout steps.

Despite being one of Saudi Arabia’s largest retail chains, the Jarir app’s user experience was fragmented. Users struggled to navigate disorganized categories and were overwhelmed by repetitive product listings (e.g., different colors of the same device listed as entirely separate products). Furthermore, the checkout process introduced unnecessary friction, leading to potential drop-offs.

Our initial heuristic evaluation and competitive analysis revealed a critical metric: completing an order on the Jarir app took 7 steps, compared to the industry standard of 6 steps found in competitors.

Listening to the Users: To validate our assumptions, we conducted 1-on-1 interviews with 6 active users. We mapped their responses using an Empathy Map to identify core pain points.

Key Insights:

• Variant Clutter: Users found it frustrating to scroll through identical items differing only by color or storage capacity. They expected a single product page with variant selectors.
• Checkout Friction: The payment flow was perceived as tedious. Users explicitly requested modern payment integrations like STC Bank and Apple Pay, alongside a guest checkout option.
• Visual Overload: The interface felt outdated and cluttered, lacking visual hierarchy, making it difficult to locate essential product details quickly.

Structuring the Solution: We synthesized our research findings using Affinity Mapping, categorizing user feedback into actionable themes: Usability, Interface, Search, and Payment Options.

To address the cluttered listings, we redefined the Information Architecture (IA). We proposed grouping product variants under single master listings and restructured the category hierarchy to be more intuitive.

We then mapped a new, streamlined User Flow that reduced the checkout process by eliminating redundant screens and integrating auto-suggestions for search and faster payment gateways.

We generated rapid layout concepts using the Crazy 8’s method before committing to digital wireframes.

To ensure consistency and a smooth developer handoff, we established a localized Design System. We selected the “Tajawal” typeface for its high legibility in Arabic UI, standardized the primary brand colors (Jarir Red), and documented the states of each component.

We compared the original app screens with our redesign, side by side. This was a design comparison, not a test with users, so what follows is what we changed, not measured results.

• Product page: specifications, warranty and reviews merged into one section, colour and storage options on the same page, and a single Add to Cart button fixed on screen.
• Checkout: shipping and payment details merged into one page, an order review step added, and payment options including Apple Pay and STC Bank.
• Navigation: the app reorganised into main and sub-categories, with fewer ads and less colour on the home screen.

Next step: testing the new checkout with real users would show whether it actually cuts time and drop-off.