FATAH E-commerce

An e-commerce interface designed to keep the shopping journey clear, consistent, and easy to follow.

RoleUI Designer

TypeInteractive prototype

ToolFigma

FATAH e-commerce product browsing screen

01 — Overview

Project overview.

The project follows a straightforward shopping flow, from account access and product browsing to product details and checkout.

My work focused on the interface, page structure, visual hierarchy, and the interactions connecting the main screens.

02 — Design focus

What I focused on.

Clear navigation

Keeping search, categories, product actions, and the main navigation easy to find.

Consistent layout

Using repeated spacing, cards, colors, and controls across the shopping flow.

Simple interactions

Connecting account access, product selection, and checkout through a focused prototype.

03 — Final screens

Final screens.

Five selected screens showing the main account and shopping flow.

FATAH account registration screen — **Registration**Create a new account with the required account details.

FATAH login screen with social sign-in options — **Login**Access the app through a standard or social sign-in option.

FATAH product browsing screen with search and categories — **Product browsing**Search, filter by category, and compare products from the home screen.

FATAH product details screen for a denim shirt — **Product details**Review the product, discount, price, and primary purchase actions.

FATAH checkout screen with address, payment, voucher, and order summary — **Checkout**Confirm the address, payment method, voucher, and final order total.

Try the prototype.

Explore the main shopping flow directly in Figma.

Open Figma prototype

04 — Reflection

What I learned.

This project helped me understand how small layout decisions can affect an entire user flow. I also learned to keep components, spacing, and navigation consistent across multiple screens.

Next case study PVP on Duolingo