Mobile Commerce E-Commerce UX

Haj Arafa App

Mobile-first e-commerce interface showcasing search-first navigation and express 2-step checkout.

Open Live Website
Haj Arafa App interface preview
Notice the search-first hierarchy, curated categories, and shortened mobile checkout path.
Role UX Designer
Timeline 3 Months
Platform Mobile-First Web App
Status Live Interactive Build
Read Time 3 min read
01 Challenge & Context

The design brief focused on simplifying deeply nested mobile categories and a lengthy checkout flow that required account creation.

User problem

The brief called for easier product discovery and a shorter checkout journey. These needs informed the concept; they are not findings from a reported user study.

Business problem

The brief identified checkout friction as a business risk. Production abandonment and repeat-purchase data were not available for this concept.

Design goal

Design a mobile-first shopping journey with search-first navigation and a shorter guest checkout.

02 Solution & Execution

Mapped the intended shopping journey and designed search-first navigation, guest checkout, and prominent 44px touch targets informed by relevant WCAG 2.2 criteria.

Key Design Decision

Consolidated five interface stages into one accordion-based checkout concept with address autofill and a clear cost breakdown.

Trade-off: The accordion reduces checkout-page length but hides later steps, so progress must remain clear and the pattern still needs usability validation.

Figma User Research Wireframing Prototyping E-Commerce UX WCAG 2.2 informed
03 Impact & Learnings

Delivered a live responsive implementation with a shorter, clearer path from product discovery to order confirmation.

to 1
5 to 1 Checkout stages consolidated
px
44px Minimum touch target standard
clicks
3 clicks Product-to-cart journey
Search-first navigation

The implementation gives search and curated categories prominent positions. Findability remains a question for usability testing.

Streamlined checkout

The proposed checkout shortens the purchase path. Its effect on conversion has not yet been measured.

Responsive implementation

Built mobile-first with keyboard interaction, visible focus states, and responsive layouts informed by WCAG 2.2.

The live implementation demonstrates the proposed journey. Conversion and abandonment outcomes have not yet been measured and require privacy-conscious production analytics.

What I learned

Special learning: shaping a concise responsive commerce journey and directing AI agents to implement navigation and checkout states faithfully.

Designed with accessibility, WCAG 2.2, and performance in mind.