UI/UX Design

Al-Muhrem Store

UI/UX design for Al-Muhrem (المحرم), an Arabic online store for Hajj and Umrah supplies: its visual identity, user flow, and final desktop and mobile screens. Designed by Ahmed Ali and shown here with his permission.

Year :
2024
Industry :
E-commerce
Designer :
Ahmed Ali
Tools :
Figma · Photoshop
Al-Muhrem Store presentation: the store’s home page on desktop and mobile beside its title, the designer’s role, the e-commerce field and the tools Photoshop and Figma

Problem :

Al-Muhrem is an online store specialising in Hajj and Umrah supplies. In its own words, it aims to make religious life easier by offering pilgrims and Umrah performers the products they need, with high specifications and competitive prices, and to become their main destination for those needs.

The design had to support that from the first visit to a confirmed order: finding the right products, managing an account and completing a purchase, in Arabic, on desktop and on mobile.

Three mobile screens of the store: about us, the home page with featured products, and the about page with partner logos

Solution :

The identity pairs a warm gold (#BD9A61) and a deep green (#016359) with near-black tones (#0A0A0A and #2E2E2E), set in Noto Kufi Arabic, with line illustrations of the Kaaba and the Grand Mosque in the backgrounds.

A user flow maps the store around its home page: about, favourites, products and contact pages, and the account pages (sign-up, login and profile), with a purchase path from the products to the shopping cart, order details, order summary and order confirmation.

The store’s user flow: the home page linking to about, favourites, products, contact and account pages, and the path from products to cart, order details, summary and confirmation
The “About Al-Muhrem” panel: two mobile screens beside the store’s Arabic introduction, over a line drawing of the Kaaba

Challenge :

The store serves a specific audience in a specific context, so the design had to feel fitting for Hajj and Umrah while still working as a familiar online shop: an Arabic, right-to-left interface with product listings, product details and a complete checkout.

It also had to cover every step of that journey consistently, from creating an account and logging in to the cart and the order steps, in both desktop and mobile layouts.

Summary :

Al-Muhrem Store is a complete UI/UX design for an Arabic e-commerce store for Hajj and Umrah supplies, designed by Ahmed Ali in Figma and Photoshop. It defines the store’s colours and typography, maps its user flow, and delivers the final screens: login and sign-up, home, products, product details, cart, order details, summary and confirmation, articles, contact with FAQs, and about, with mobile versions.

Its direction is calm and respectful: warm neutrals with gold accents, line drawings of the holy sites, and clear product cards and calls to action.

Desktop screens: login and sign-up, the home page with products, a Hajj box offer and articles, and a product page
Desktop screens of the order steps: order summary, order details with payment and delivery, articles, and the order confirmation
The colour palette, gold #BD9A61, green #016359, #0A0A0A and #2E2E2E, and the typeface Noto Kufi Arabic