01
Speed at the till
Large tap targets, one search field for names, barcodes and PLU codes, and a total that never leaves the screen.
Case study · Product design
FreshMart POS: one system, two speeds
A point of sale design for a supermarket, from the checkout lane to the back office, built as 32 screens on one design system.
- 32
- ScreensFrom checkout to reporting
- 14
- ModulesPOS terminal, inventory, CRM, analytics and more
- 4
- Payment methodsCash, card, UPI and split
- 3
- Form factorsDesktop, tablet and mobile
The challenge
A supermarket runs at two speeds
At the checkout lane, speed is everything: find the product, confirm the total, take payment, call the next customer. Behind the counter, the store needs a calmer view of stock, suppliers, staff, money and customers.
FreshMart POS is a design exercise in serving both with one system. The goal was a single visual language that feels fast at the till and clear in the back office, without the two halves feeling like different products.
Principles
Three rules behind every screen
02
Clarity behind the counter
Colour is reserved for meaning: one orange for action, and green, amber and red for status, so tables and dashboards can be scanned at a glance.
03
One system everywhere
The same shell, components and spacing run through all 32 screens, so a new module feels familiar before it is understood.
01 · Checkout
Built for the speed of a queue
The terminal is split in two: the catalogue on the left and the live order on the right. Everything a cashier needs sits within thumb reach.
- One search field for product names, barcodes and PLU codes
- Category chips for one-tap filtering
- Quantity steppers and remove actions on every order line
- Subtotal, discount, tax and total always visible
- Cash, card, UPI and split payment as large tap targets
- Hold order and print receipt within reach
02 · Decisions
Moments that need care get their own space
Payment, discounts and refunds happen in focused modals, so a cashier can finish one decision before returning to the sale.
- Process payment shows the amount due, method tabs, quick tender amounts and the change due
- Apply discount supports percentage or fixed amounts and asks for manager PIN authorization
- Process refund selects items, method and reason before confirming
- Receipt preview with print, email and WhatsApp options
03 · Dashboard
A dashboard that says what to do next
The manager’s home screen starts with the numbers that matter and ends with actions, not just charts.
- KPI cards with trend indicators
- Revenue overview with weekly, monthly and yearly toggle
- Recent transactions with status badges
- Inventory alerts with a one-click Reorder
- Staff performance and a live sales feed
04 · Inventory
Stock you can act on
Inventory is organised around risk: what is low, what is out, and what is already on order.
- KPI cards for total SKUs, in stock, low stock and out of stock
- Stock levels with progress bars and status badges
- Alerts with Reorder actions
- Recent stock movements and purchase orders in one view
05 · Analytics
Reports that suggest action
Beyond tables, the analytics view points at what to look at next: peak hours, customer cohorts and the products that perform.
- Revenue forecast with a projected range
- Sales heatmap for peak hours
- Customer cohorts and a product performance matrix
- Insight cards, each with a Take Action link
06 · Registers
Shifts start and end with the numbers
Opening and closing a register is a short, guided task with clear checks on cash.
- Starting cash with quick amounts
- Shift summary with sales split by payment type
- Expected cash against actual cash, with the difference called out
- Optional notes for opening and closing
07 · Forms
Long forms, kept calm
Adding a product touches pricing, stock, variants and suppliers. The form groups these into clear sections with guardrails built in.
- Sections for basic information, pricing and tax, inventory, variants and supplier details
- Live profit margin as prices change
- Toggles for tax-inclusive pricing, inventory tracking and visibility
- Drag-and-drop image upload and Save as Draft
08 · Responsive
The same system on smaller screens
On tablet the product grid and the order sit side by side. On mobile the dashboard becomes a single column with a bottom navigation bar.
Every state
Designing for the unhappy paths
Sign-in, empty lists, errors, missing permissions and loading are designed too, so nothing falls back to a default.
Design system
The rules behind the screens
Colours and components below are taken from the finished screens, so the system documents what is actually in the design.
Colour
Brand orange
#FF760CPrimary actions, active tabs and chipsNavy
#03162BSidebar and POS headerInk
#111827Headings and primary textSlate
#6B7280Secondary text and labelsCanvas
#F8FAFCApp backgroundSuccess
#10B981Completed, in stock, positive trendsWarning
#F59E0BPending and low stockDanger
#EF4444Refunded, errors and critical alertsSuccess tint
#E7F8F2Completed badge backgroundWarning tint
#FEF5E6Pending badge backgroundDanger tint
#FDECECRefunded badge backgroundNav active
#17283CSelected item in the sidebarLayout and patterns
- App shellA 240px navy sidebar, with a top bar for global search, the primary action, notifications and the profile.
- Data viewsKPI cards first, then charts and tables, with tabs and filters directly above each table.
- Status languagePill badges in green, amber and red, always paired with a text label.
- ActionsOne filled orange button per view for the main task, with outline buttons for the rest.
Components
The rest of the system
Every screen, one language
The remaining modules follow the same shell and components. Select a screen to open it full size.
Reflection
What this project shows
Designing 32 screens on one system meant deciding once and applying everywhere: a single shell, one colour logic and one set of components for tables, forms, modals and states.
It also covers the work that is easy to skip: empty, error, loading and permission states, a guided register flow, and tablet and mobile versions of the key screens.
Next steps
What I would do next
01
Test the checkout
Run the terminal with real cashiers and time a full sale, then adjust tap targets and order-panel density from what they find.
02
Replace the placeholders
Swap the placeholder product imagery for real grocery photography so the catalogue reads as a real store.
03
Audit accessibility
Check colour contrast, focus order and keyboard operation across the system before it is built.
04
Build it in code
Turn the components into a coded library with tokens, so design and development share one source of truth.
Work together
Building a product that needs design and frontend?
I design systems and build them. Tell me about your team and what you are working on.
Need something similar?
Related service
This project is an example of my ui/ux design and frontend development work.
More projects
Explore other curated work
Company project at Infinite Open Source Solutions LLP. Track time, manage projects, and boost productivity all in one place. Desklog gives teams clear insights to work smarter and move faster.
My role UI/UX design and frontend development
Company project at Infinite Open Source Solutions LLP. Manage your network, automate commissions, and scale your business with ease. IMS brings everything together in one powerful system built for growth.
My role UI/UX design and frontend development