Haj Arafa App
A bilingual shopping concept shaped around Haj Arafa’s Egyptian attara heritage.
RoleUX Designer, Front-End Developer & AI Workflow Lead
Designed bilingual discovery, product and cart states, and directed implementation review.
Problem
A varied catalog needs a clear starting point and enough detail to support a choice. I explored how categories, product information and cart feedback could form a connected shopping journey.
Key decisions
I organized discovery around familiar categories, search and filters. Product origin, weight and usage help shoppers assess an item. I carried the same flow into Arabic through mirrored layouts and localized details.
Solution
I designed the shopping journey and visual direction, then guided and reviewed the responsive implementation. The bilingual concept connects discovery, product details, favorites, cart feedback and checkout.
Explore screens & design details
A closer look at the features, interface and evidence behind the work.
From discovering a product to finding a branch
Browse honey and dates, coffee and herbal drinks, spices and grains, nuts and snacks, wellness, natural cosmetics, and incense. Search, price filters, ratings and grid/list views support different ways of shopping.
Product pages bring weight, origin, usage recommendations and product information together, so shoppers can check the details before choosing.
Mobile navigation, saved favorites and a slide-out cart let shoppers move between browsing and reviewing their choices. Guided checkout shows delivery costs and free-shipping thresholds.
Find branches and partner retail locations, open Google Maps directions, or start a WhatsApp inquiry from the branch locator.
Switching language mirrors layouts and directional icons, with localized weights, units and origins. The experience is designed around both languages from the start.
Warm product presentation, clear spacing and subtle interaction feedback give the brand room to breathe. Semantic structure and keyboard navigation support access to the same shopping tasks.
Start with categories and search, then carry product details, cart feedback and order costs through the shopping journey.
Trade-off: A rich catalog and motion can compete with shopping tasks. Clear product details and reduced-motion support keep actions understandable.
Why this approach
Each stage answers a shopping question. Categories show where to look, product details explain the choice, and cart feedback confirms the action. Arabic layouts need to preserve those relationships.
What I learned
Brand character depends on details such as category names, imagery and spacing. I specified those choices and reviewed their behavior across both languages.
Next validation task
Ask shoppers in both languages to find an item, explain its weight and origin, update the cart and recover from a checkout error. Check keyboard access and reduced motion.
Evidence includes designs, live demos, and documented decisions. Business outcomes require sourced measurements.