Stock alerts parts running low, with the price and what is left
Component 01
Work / Case study 10 / Dashboard
AutoMarto Seller Dashboard
The seller side of a car spare-parts marketplace: one workspace where sellers check sales, act on low stock and orders, and edit their products.
What I did
Dashboard UXInformation architectureData display
FormsDesign system
Show sellers what needs them today
AutoMarto is a marketplace for car spare parts. Buyers shop in the app; sellers run their shop from this dashboard. They list parts, watch stock, handle orders and follow their earnings.
I designed the seller workspace: the navigation, the dashboard home, order and stock views, and the product editor with categories and variations. It shares its colours and parts with the buyer app, so the brand feels like one product.
- Product
- AutoMarto seller dashboard
- Users
- Sellers of car spare parts
- Screens
- Dashboard, add product, edit product, categories
- Languages
- English and Arabic
- Tools
- Figma
Context
Busy sellers, not analysts
Sellers open the dashboard between other work. Every extra click on stock or orders costs them time and sales, and a page full of charts does not tell them what to do next.
Goal
Action first, data second
The home page answers "what needs me today?" before anything else: low stock, open orders and payouts. Detail stays one click away.
Challenges
Dense data, clear order
The home page holds six numbers, a sales report, order tables, stock lists and customers. I gave it a clear order: numbers on top, the report below, and short lists on the right, each with a "View all" link.
A car part has many details. The product editor splits them into tabs, from general details and price to shipping, compatibility and variations, so a seller only sees one group at a time.
Process
Tasks first, screens second
- 01Listed the daily tasks of a seller
- 02Grouped them into the side navigation
- 03Designed the stock and product flows
- 04Designed order management
- 05Designed the dashboard home and reports
- 06Finished the high-fidelity UI
Information architecture
Six groups in one side menu
The side menu groups every seller task into six areas. The dashboard home pulls the urgent items from each one, and the product area holds the longest flow: adding a part, step by step.
ASeller dashboard
HomeDashboard6 screens
- Overview performance
- Sales report
- Order status
- Stock alerts
- Trending stock
- Valuable customers
Key flowProducts7 screens
- Product listing
- Add a product
- Details · price
- Shipping · stock
- Categories
- Variations
- Edit product
MenuOrders5 screens
- Pending
- Processing
- Completed
- Refunded
- Order detail
MenuEarnings4 screens
- Earnings
- Transactions
- Payouts
- Payment details
MenuCustomers2 screens
- Customer list
- Reviews
MenuAccount3 screens
- Profile
- Support
- Settings
"Open the dashboard, see what needs you, act."
Design direction
Four rules for the whole dashboard
STOCK AT A GLANCE
Low stock comes to you
Stock alerts and trending parts sit on the home page, with price and stock left on every row.
EXCEPTIONS FIRST
Show what needs action
Pending orders open first, and colour badges show payment and status without reading.
CLEAR MONEY
Sales, payout and what is left
Earnings are split into total sales, payouts and remaining payout, each with its change.
ONE SYSTEM
Same parts as the buyer app
Shared colours, type and components keep the seller and buyer sides one brand.
Components
Built once, reused on every screen
The main dashboard parts are built once and reused: stat cards, lists, tables with status badges, form fields and charts. Every screen is made from them.
Colour one brand red, black and a light canvas
Component 02
Type Urbanist for numbers and labels, in English and Arabic
Component 03
Overview six numbers with the change, for a year, month, week or day
Component 04
Categories a tree of part types, ticked where the product belongs
Component 05
Order status tabs by stage, and colour badges for payment and status
Component 06
Product editor the fields a seller changes most, in one drawer
Component 07
Sales report monthly bars, the selected month in red
Component 08
Where it stands
One workspace for the whole shop
The design covers the dashboard home, product listing, adding and editing a product, categories and variations, in English and Arabic.
What I took away
- 01A dashboard should start with what needs action, not with charts.
- 02Dense tables work when the order and the colours are clear.
- 03Splitting a long form into tabs keeps every step short.
Keep exploring
Back to the start: Twamo
Previous: Cool Heads