Business Hub — a mobile-first management tool for small Ghanaian businesses
Product Designer | UI/UX & AI-Powered Digital Experiences. A self-initiated project: designing and building a working product that helps a shop owner track sales, stock, customers, expenses and profit from a phone.
Role
Product designer & builder
Type
Self-initiated concept project
Scope
UX, UI, design system, prototype
Tools
Figma-style wireframing, React, AI assistants
Overview
Business Hub is a concept product I designed and built end to end. It imagines what a small Ghanaian shop, salon or food business would use daily instead of a notebook and scattered mobile money messages: one place to record a sale, see what is running out, know who owes money and understand whether the month was actually profitable.
Everything shown in the prototype is demo data stored in the browser. No real business data, no clients and no usage statistics are involved — this is a design exercise made functional.
The problem
Most small businesses I have observed in Ghana record sales informally. Prices live in the owner's head, stock is checked by looking at the shelf, and profit is estimated at the end of the month by feel. Existing software is often desktop-first, priced in dollars, and asks for accounting knowledge the owner does not need.
- Sales are recorded on paper or not at all, so history is lost.
- Stock running out is discovered when a customer asks for it.
- Money taken on credit is easy to forget and hard to chase.
- Expenses are rarely subtracted, so 'sales' is mistaken for 'profit'.
Target users
- The owner-operator: serves customers and runs the books, mostly on a phone, often with one hand free.
- A trusted assistant: records sales during busy hours and should not be able to break anything.
- Low-bandwidth, mid-range Android reality: the interface must be light, legible and forgiving.
UX goals
- Record a sale in under 15 seconds, without training.
- Show profit, not just revenue — expenses are part of the core loop.
- Surface what needs attention (low stock, unpaid credit) before the user has to look for it.
- Design mobile-first: a real phone layout, not a shrunken desktop table.
Information architecture
The product is organised around the daily loop first, and the reflective loop second. Ten sections were grouped so the phone experience exposes only the four most frequent ones plus a "More" entry.
Business Hub
├── Dashboard (today, this month, alerts, quick actions)
├── Daily loop
│ ├── Sales / POS → receipt
│ ├── Customers → customer profile
│ ├── Products → product detail → stock adjust
│ └── Expenses
├── Control
│ ├── Inventory (movements, stock value)
│ └── Finance
└── Reflection
├── Reports (period summaries, best sellers)
├── Analytics (trends, payment mix)
├── Messages
└── SettingsUser flows
The primary flow — recording a sale — was designed to be linear and interruptible:
Tap product → adjust quantity → choose customer (or walk-in) → choose payment method (Cash / MoMo / Card / Credit) → review total & estimated profit → confirm → receipt Side effects: stock decreases, a stock movement is logged, customer history updates, credit sales raise "outstanding payments".
Secondary flows follow the same shape: a short form, an explicit review value, a confirmation toast, and a destructive action always behind a confirm dialog.
Wireframe concepts
Early layouts were sketched as low-fidelity blocks to settle hierarchy before visual design: a four-card metric row over a chart on desktop, and a single-column stack with a persistent bottom bar on mobile. The rule I set was that the primary action of every screen must sit within thumb reach on a phone.
- Dashboard: metrics → quick actions → chart → alerts.
- Sales: product grid left, running cart right; on mobile the cart becomes a sticky summary.
- Lists: table on desktop, card list on mobile — different components, same data.
Desktop UI
The desktop layout uses a fixed sidebar, a generous content column and data tables with right-aligned numerals so figures can be scanned vertically. Charts use a single accent colour and muted secondary series to keep attention on revenue and profit.
Mobile UI
The phone experience has its own navigation model: a bottom bar with Home, Sales, Customers, Products and More, 44px minimum touch targets, card-based lists instead of horizontal scrolling tables, and sticky totals so the amount is always visible while editing a sale.
Key design decisions
- Profit over revenue: the dashboard shows profit after expenses, because revenue alone misleads.
- Credit is a payment method, not a separate module — it matches how the money actually moves.
- Alerts are placed on the dashboard, not hidden in inventory.
- One design system: badges, empty states, tables and filters are shared components, so new screens stay consistent.
- Restraint in colour: navy and gold only, no decorative gradients competing with data.
Accessibility
- Semantic headings and one H1 per page.
- aria-current on active navigation, aria-pressed on filters, labelled icon-only buttons.
- Live regions for loading states and status messages.
- Colour is never the only signal — status badges carry text as well.
- Touch targets of at least 44px and text that reflows without horizontal scrolling.
Final product
The result is a working prototype you can use: add products, record sales, adjust stock, record expenses and watch the reports change. Data lives in your browser, so you can explore freely and reset at any time from Settings.
AI-assisted design & development
I used AI tools as assistants, not as the designer. They helped me draft copy variations, generate placeholder imagery, explore layout options quickly and speed up implementation of components I had already specified. Every information-architecture decision, flow, interaction rule and visual choice in this project is mine, and I reviewed and edited all generated output.
Learnings
- Designing the mobile layout separately — rather than adapting the desktop one — produced a genuinely better product.
- Building the prototype exposed states (empty, error, out-of-stock, credit) that static mockups let me ignore.
- A small design system paid for itself by the third screen.
- Honest scope matters: this is a concept project, and saying so is more credible than inventing research or metrics.
Have a product that needs this level of thinking?
I design and build digital products for businesses in Ghana and beyond.