Product cards show rating, price, saving and a quick add
Component 01
Work / Case study 07 / E-commerce app
Automarto Spare parts, sorted
Automarto is an automotive e-commerce app for the UAE: spare parts and vehicles from many sellers in one store. I designed the buyer app end to end, from email sign-in to returns and reviews, plus a companion seller dashboard.
What I did
User researchInformation architectureSearch & filtersUI designDesign systemCheckoutPrototyping
A big parts catalogue that is easy to buy from
Automarto sells spare parts and vehicles from many stores in one app: maintenance parts, air conditioning, belts, bearings, lighting, wheels and more. Prices are in AED and delivery covers the UAE.
I designed the whole buyer journey and the seller dashboard as one product family, with one shared design system across both.
- Product
- Automarto
- Type
- Multi-seller e-commerce app
- Market
- United Arab Emirates
- Scope
- 32 buyer screens, seller dashboard, design system
- Tools
- Figma
- Behance
- View the full project
Design system
High contrast, built for scanning
Black does the heavy lifting: primary buttons, prices and the bottom bar. Green is kept for ratings and savings, and the brand red only appears in the logo, so nothing competes with the product photos.
Every card below is taken from the Figma file, as it appears in the app.
Colour black for action, green for savings
Component 02
The bag keeps quantity, saving and Save for later on each line
Component 03
Urbanist for prices, Plus Jakarta Sans for details
Component 04
Add to Cart sits next to the price and quantity
Component 05
Wallet shows balance and cashback
Component 06
Reviews start with five stars
Component 07
Refunds track in four steps
Component 08
Seller dashboard puts sales and orders first
Component 09
The problem
Thousands of parts, one small screen
A parts catalogue is huge and many items look alike: two tail lights or two sensors can differ only in the model they fit. Buyers want to narrow down fast, see the real price and saving, and know when the part will arrive.
After the order, the questions keep coming: where is it, how do I return it, and how do I get my money back. Those flows mattered as much as the store itself.
Who it is for
Two sides of one marketplace
BUYERS
Drivers and garages
They know the car, not always the part number. They need categories, filters and clear prices, and an easy way to reorder or return.
SELLERS
Parts stores
They need sales, payouts, orders and stock at a glance, without a desktop.
Information architecture
Shop, bag, account, and a seller side
The buyer app has four tabs: Home, Categories, Bag and Account. Browsing and the product page lead to one bag and one checkout, and everything after the order lives in Account.
AAutomarto app
Seen onceSign in2 screens
- Enter email
- 6-digit code
TabHome4 screens
- Category shortcuts
- Offer banner
- Top deals & discounts
- Shop by brand
TabCategories5 screens
- Spare parts · vehicles
- Category grid
- Search
- Filters + sort
- Product page
TabBag4 screens
- Bag
- Save for later
- Checkout
- Payment card
TabAccount6 screens
- Orders + tracking
- Returns + refunds
- Reviews
- Wallet
- Wishlist
- Addresses · cards
DashboardSeller4 screens
- Sales + payouts
- Orders
- Products
- Customer insights
Process
How the work came together
- 01Mapped the buyer journey from search to return
- 02Set the structure: four tabs, one bag, one checkout
- 03Designed search, filters and sort around the catalogue
- 04Built the design system: colour, type, cards and states
- 05Designed 32 buyer screens and the seller dashboard
- 06Prototyped the key flows and handed off to developers
Interface
Thirty-two screens, one shared library
Every screen is built from the same parts: product cards, filter rows, list rows, steppers and buttons. Below is a selection from across the app.
Key decisions
Choices that made buying faster
ONE SWITCH
Spare parts or vehicles
A two-way switch at the top changes the whole catalogue, so the same screens serve both without a second app.
FILTERS
Every filter in one list
Delivery mode, category, brand, price, deals, rating, new arrivals and colour sit in one list, with the live item count on the Apply button.
PRICE CLARITY
The saving is always visible
Every card shows the price in AED, the old price and the discount in green, so deals stand out without banners.
AFTER THE ORDER
Returns and refunds you can follow
Orders, tracking, returns and refunds each have a status timeline, and reviews for the seller, product and delivery are one tap away.
Beyond the store
Check out, track, return, review
The work after the order got the same care as the store: checkout with split shipments, delivery tracking, returns with a refund timeline, a wallet with cashback, and reviews for the seller, the product and the delivery.
Where it stands
A complete buyer app and a seller side
The Figma file covers the full buyer journey, sign in, home, categories, filters, product, bag, checkout, orders, tracking, returns, refunds, reviews, wallet, wishlist, addresses and cards, plus the seller dashboard.
Everything is built from one library, so new categories, offers or seller tools can be added without new patterns.
What I took away
- 01In a big catalogue, good filters matter more than a clever home screen.
- 02Showing the saving on every card does the work of a sale banner.
- 03Returns and refunds deserve the same design attention as checkout.
Keep exploring
Next: Voizzit App
Previous: ILLAM