Redesigning a Paint Retail Experience
A bilingual (Arabic / English) redesign of a paint retailer’s online store: a smarter quantity calculator, a clearer My Orders, and audit-led fixes across fifteen screens for two very different shoppers.
Role
Main UX/UI Designer
Timeline
About 2 months
Team
PM, me (main UX/UI), another UX/UI designer
Platform
Mobile web, app and desktop · Arabic / English
Overview
Two very different shoppers
Professional painters reorder products they know. Everyday customers are unsure what to buy and how much.
Every screen backed by evidence
Each redesign started with an audit of the live store and a benchmark of leading retailers, before any new design.
Main designer, end to end
I designed the flows and UI in Arabic and English, for mobile web, app and desktop, working with a PM and another UX/UI designer over about two months.
The process at a glance
The engagement covered fifteen screens and flows across the store. Each one went through the same four steps, so every change can be traced back to something we found.
Walk through the live screen and list what blocks the user.
Study how the best stores handle the same task, end to end.
New flow and UI in Arabic and English, on shared components.
Refine with the PM and the client until it holds up.
Two users, two journeys
The store served professional painters and everyday customers with the same screens. I separated the two journeys and designed the product card around the difference, instead of averaging the two.
- Needs
- Speed and reorders
- Path
- Search, pick a variant, add to cart
- Risk
- Extra steps slow down repeat buying
- Needs
- Confidence before buying
- Path
- Learn, estimate quantity, then buy
- Risk
- Buying the wrong product or amount
The quantity calculator
Estimating paint is the most common point of doubt. The calculator opens from the home page or from a product page, so the flow adapts to what is already known. After a review with the PM, I restructured it into a shorter journey.
The new flow from the home page: pick the job, enter the space, choose the product's finish and colour, then get the exact quantity as a ready cart.
One calculator, three jobs. Interior paint, exterior paint and floor tile adhesive each run their own calculation, so the inputs change with the job: walls, doors and windows for interiors, facade condition and texture for exteriors, and floor area and tile size for adhesive.
My Orders
I started with an audit of the current screen and a study of how leading retailers handle order lists, details, filters and pickup. Mapping what an order holds came before any layout.
Each version tried a different way to group shipments, status and actions on a small screen.
Refined with the client's comments until one primary action per order remained.
On mobile, orders are grouped by stage: active orders lead with a clear status and one primary action, and past orders keep each shipment and its delivery method visible.
Order details: each shipment is tracked on its own, with the summary, payment and options on the side.
The rest of the store
The same audit-first approach, scaled to what each screen needed.
A return request flow, plus a place to follow each request after it is sent.
Where refunds land. Audited the live page and leading wallets, then redesigned it.
Benchmarked the full saved-items flow on two leading marketplaces before redesigning.
FAQs and Contact Us, once separate pages, merged under one Help page.
Light-touch: only the enhancements that mattered most, not a full redesign.
A short guided request: describe the job, then date, time and location in one step.
Browsing, cart and checkout
The store is mobile first, so I designed the buying path for the phone, then scaled it up to desktop. Delivery speed, store pickup and loyalty points affect every step, so each screen shows them where the decision is made.
On desktop, the same steps get more room.
Products: filters on the side, categories as chips, and delivery badges on every card, so speed is clear before anything goes in the cart.
Cart: items split by delivery speed, with stock and delivery warnings on each line and the order summary always in view.
Checkout: every shipment keeps its own delivery speed, then points, wallet balance and saved cards sit in one payment list.
My Account, in Arabic: one overview page with wallet, points and favourites up front, active orders next, and settings grouped below, mirrored right to left.
Outcome
The biggest lesson was to design for the difference between users instead of the average: one calculator and one card system, each adapting to who is using it.
