# Mobile App Product and UX Design Plan

Project: Mobile companion for the POS/ERP platform  
Audience: Product designer, UX researcher, mobile engineers, backend engineers and QA  
Primary users: Admin, Accountant and Staff  
Platforms: Android first, iOS-ready responsive design

## 1. Product vision

Create one secure role-aware mobile application from which a business owner and authorized employees can perform their daily work without using the desktop system.

The app must not create three separate products. It should have one design system and one navigation framework, while dynamically showing actions, records and reports according to the signed-in user's permissions, assigned locations, selling-price groups, contacts and subscribed modules.

The desired outcome is:

- **Staff** quickly performs assigned operational work: create sales/invoices, manage customers, check stock, transfer or adjust stock, collect authorized payments, record expenses, follow leads and clock in/out.
- **Accountant** can do everything permitted to Staff plus manage receivables/payables, accounts, ledgers, expenses, payments, tax and financial reports.
- **Admin** has complete business control: sales, estimates, purchases, stock, customers, suppliers, leads/CRM, staff/HRMS, accounts, settings, approvals, reports and audit activity.

Actual access must come from backend permissions—not merely from the label Staff, Accountant or Admin.

## 2. Product principles

1. **Task-first, not module-first.** The home screen should answer “What needs my attention?” rather than reproduce the desktop sidebar.
2. **Permission-driven.** Hide inaccessible modules and block unauthorized API requests. A user should never see an action they cannot complete.
3. **Fast transaction entry.** Invoice, expense, payment and stock flows should take minimal taps and support barcode scanning.
4. **Location-aware.** The active location is always visible. Changing it must refresh stock, register, price and document defaults.
5. **Financial clarity.** Money, payment status and due state must be visually distinct but never communicated by color alone.
6. **Progressive disclosure.** Show common fields first and place tax, shipping, custom fields and advanced controls under expandable sections.
7. **Safe actions.** Destructive, financial and stock-changing actions require confirmation, an audit trail and—where configured—approval.
8. **Mobile-native.** Use bottom navigation, searchable lists, scan/camera actions, sticky totals, native sharing and push notifications.
9. **Reliable under weak connectivity.** Read caches and drafts may work offline, but final stock/financial posting must be conflict-aware.

## 3. Role and permission model

### Role profiles

| Capability | Staff | Accountant | Admin |
|---|---:|---:|---:|
| Personal dashboard and tasks | Yes | Yes | Yes |
| Create sale/invoice | If permitted | Yes | Yes |
| Create estimate/quotation | If permitted | Yes | Yes |
| View/edit/delete all sales | Usually own/assigned only | Yes, based on permission | Yes |
| Print/share invoices | If permitted | Yes | Yes |
| Receive customer payments | If permitted | Yes | Yes |
| Product and stock lookup | Assigned locations | All assigned locations | All locations |
| Stock transfer/adjustment | If assigned | Yes | Yes |
| Purchases/receiving | If assigned | Yes | Yes |
| Expenses | Own/create | Full expense access | Full access |
| Accounts and ledgers | No by default | Yes | Yes |
| Financial/tax reports | No by default | Yes | Yes |
| Leads and follow-ups | Own/assigned | View if required | Full CRM control |
| HRMS self-service | Attendance/profile | Self-service + payroll access if granted | Full staff/HRMS management |
| User, role and location management | No | No by default | Yes |
| Business/app settings | No | Accounting settings if delegated | Yes |
| Approvals and audit log | Own requests | Financial approvals if delegated | All |

### Enforcement layers

Every page and action must evaluate:

1. authenticated business/tenant;
2. active subscription and enabled module;
3. role permission;
4. assigned location(s);
5. own/all record scope;
6. allowed selling-price group;
7. selected-contact restriction;
8. record status (for example, a finalized invoice may require a special edit permission).

The mobile app should download a `capabilities` object after login and render from it. Do not hard-code that every Accountant or Staff user has identical access.

## 4. App information architecture

### Primary navigation

Use five bottom-navigation destinations. Their contents change with permissions.

1. **Home** — dashboard, alerts, assigned tasks and quick actions.
2. **Sales** — invoices, estimates/quotations, sales orders, returns and payments.
3. **Inventory** — products, stock, transfers, adjustments, purchases and receiving.
4. **Contacts / Work** — customers, suppliers, leads and follow-ups. Label it “CRM” for CRM-heavy businesses.
5. **More** — expenses, accounts, reports, HRMS, approvals, settings and utilities.

Place a prominent central **Create** action above or inside the bottom bar. Opening it displays only permitted actions:

- Invoice / POS sale
- Estimate / quotation
- Sales order
- Customer or lead
- Payment
- Purchase
- Stock transfer
- Stock adjustment
- Expense
- Follow-up

### Global app bar

- Left: business logo or back button.
- Centre: page title; on Home, business name.
- Right: active location selector, search and notifications.
- If the user has only one location, show it as a non-interactive label.
- Use a persistent offline/sync indicator below the app bar when necessary.

### Global search

Search products/SKUs/barcodes, invoices, estimates, contacts, leads, purchase references and staff. Results must be permission-filtered and grouped by type. Barcode scan is available from search and product-selection pages.

## 5. Complete screen inventory and role mapping

Legend: **S** Staff, **A** Accountant, **AD** Admin. “Permission” means it is available only when the backend capability is granted.

### A. Authentication and setup

| Screen | Purpose | Users |
|---|---|---|
| Splash / tenant resolution | Load branding, custom domain/business and minimum app version | S, A, AD |
| Sign in | Username/email/mobile and password; optional biometric re-entry | S, A, AD |
| Forgot password / OTP | Account recovery | S, A, AD |
| Business selection | Only if one identity belongs to multiple businesses | S, A, AD |
| Location selection | Choose active permitted location | S, A, AD |
| Device permissions | Explain camera, notifications, location and storage use | S, A, AD |
| First-use walkthrough | Role-specific introduction and quick actions | S, A, AD |
| Session expired / access removed | Safe reauthentication or contact-admin state | S, A, AD |

### B. Home and work queue

| Screen/widget | Staff | Accountant | Admin |
|---|---:|---:|---:|
| Today’s sales and invoice count | Own/location | Location/business | Business/all locations |
| Amount collected / cash register | Own register | Reconciliation view | Consolidated view |
| Due invoices and follow-ups | Assigned | Receivables/payables | All overdue items |
| Low-stock and expiry alerts | Assigned location | View | All locations |
| Pending transfers/receipts | Assigned | View | Approve/manage |
| Leads/follow-ups/tasks | Own | Optional | Team-wide |
| Attendance state | Self | Self | Team exceptions |
| Profit/loss and cash position | Hidden by default | Visible | Visible |
| Approval inbox | Own requests | Financial approvals | All approvals |
| Quick create grid | Permission-based | Expanded | All permitted actions |

Keep Home concise: four KPI cards maximum above the fold, followed by “Needs attention,” then recent activity. Users can personalize widget order, but sensitive financial widgets remain permission-controlled.

### C. Sales and invoicing

Required screens:

1. **Sales hub** — segmented tabs for Invoices, Estimates, Sales Orders, Drafts and Returns.
2. **Invoice list** — search, date/location/customer/salesperson/payment-status filters; statuses Paid, Partial, Due, Overdue, Draft and Voided.
3. **Invoice detail** — customer, items, taxes, discount, payments, balance, shipping, audit timeline and attachments.
4. **Create/edit invoice** — a five-part guided form:
   - context: location, customer, date, invoice scheme and price group;
   - items: scan/search, quantity, unit, lot, price, discount, tax and note;
   - totals: subtotal, order discount, tax, shipping and round-off;
   - payment: one or multiple methods, account, received amount and due term;
   - review: validation, preview and final action.
5. **Estimate/quotation list and detail** — send, duplicate, edit, expire, accept/reject and convert to invoice or sales order.
6. **Sales order list/detail** — ordered/partial/completed status and conversion to invoice.
7. **Payment collection** — amount, method, payment account, reference, date, note, attachment and receipt.
8. **Sales return** — select invoice, eligible lines/quantity, reason, refund method and confirmation.
9. **Invoice preview** — exact server-rendered layout, PDF download, print, native share, email, WhatsApp and payment-link actions.
10. **Shipping update** — status, delivery person, tracking/address, proof image and notes.
11. **Recurring invoice detail** — recurrence summary and pause/resume for authorized users.

Design behavior:

- Keep a sticky bottom bar with item count and running total.
- Scan adds a unique product immediately; multiple matches open a variation/lot picker.
- Unit price and discount controls appear only when allowed.
- Warn about insufficient stock, credit-limit violation, expired lot and duplicate invoice number before submission.
- Saving as Draft may work offline; Finalize requires server validation.
- After finalization, show three primary actions: Share, Record payment and New invoice.

### D. Products and stock

| Screen | Key functions | Users |
|---|---|---|
| Inventory dashboard | Stock value if allowed, low stock, expiring stock, pending movements | S permission, A, AD |
| Product list | Search/scan, image, SKU, price, stock by location | S, A, AD |
| Product detail | Variations, stock, price groups, purchase cost if allowed, history, locations | Permission-based |
| Add/edit product | Single/variable product, unit, category, tax, price, stock controls, media | AD; delegated stock staff |
| Stock by location | Available/on-hand and lot/expiry breakdown | S assigned, A, AD |
| Stock history | Opening, purchase, sale, return, transfer, adjustment and production events | Permission-based |
| Transfer list/detail | Source, destination, lines, status and timeline | S permission, A, AD |
| Create transfer | Scan items, source/destination, quantity, note, review | S permission, A, AD |
| Receive transfer | Confirm quantities, discrepancies and proof | Assigned receiver, A, AD |
| Adjustment list/detail | Increase/decrease, reason and financial impact if allowed | Permission-based |
| Create adjustment | Scan, quantity, normal/abnormal reason, notes and evidence | S permission, A, AD |
| Stock count | Draft count session, scan/count, variance review, post adjustment | Planned; S assigned, AD |
| Lot/expiry screen | Lots, manufacture/expiry date, days remaining and remove-expired action | S permission, A, AD |

Stock transfer workflow should be: Draft → Submitted → Approved (optional) → In Transit → Received/Completed. The current web backend has transfer states but a consistent approval/partial-receipt API should be added for mobile.

### E. Purchases and suppliers

- Purchase hub: requisitions, purchase orders, purchases/receipts and purchase returns.
- Supplier list and supplier detail with balance and ledger shortcut.
- Create requisition: location, required date, items, quantity and purpose.
- Create/edit purchase order: supplier, delivery location/date, items, cost/tax/discount and terms.
- Receive purchase: PO selection, received quantities, lot/expiry, discrepancies, additional expenses and attachment.
- Purchase detail: status, payment status, line items, payments, linked PO/requisition and history.
- Supplier payment: method/account, reference, attachment and resulting balance.
- Purchase return: select receipt/items, quantity, reason and refund/credit status.
- Staff with `purchase.add_without_price` sees quantities, lot and expiry but no cost, tax, payment or total fields.

Roles: receiving staff gets scan/quantity screens; Accountant gets costs, payables and payments; Admin gets the entire flow and approval controls.

### F. Contacts and CRM

Required screens:

- Customer list, supplier list and unified contact search.
- Contact profile: identity, addresses, tax data, credit limit, outstanding balance, recent sales/purchases, ledger, notes and files.
- Add/edit contact with duplicate mobile/tax-ID validation.
- Contact statement/ledger preview and share.
- Lead pipeline board and list; stages should have clear counts and values.
- Lead detail: contact data, owner, source, requirements, timeline, notes, calls, follow-ups and related proposals.
- Create/edit lead; assign owner and life stage.
- Follow-up list/calendar and create/edit detail.
- Call log capture, including call outcome and next action.
- Convert lead to customer with duplicate detection.
- Campaign list/detail for Admin; mobile creation may be phase two.
- Proposal/estimate templates and proposal detail/share.

Staff sees own/assigned leads and contacts. Admin sees team pipeline, assignment, source/life-stage configuration and reports. Accountant normally sees customers/suppliers and financial history but not lead-management controls unless granted.

### G. Accounting and ledgers

These pages are primary for Accountant and Admin:

- Finance dashboard: cash/bank balances, receivables, payables, today’s collection, today’s expenses and tax summary.
- Payment accounts list/detail with current balance and transaction timeline.
- Add deposit and fund transfer.
- Account transaction edit/delete with confirmation and audit note.
- Receivables list, customer ledger and aging buckets.
- Payables list, supplier ledger and aging buckets.
- Sales payment and purchase payment registers.
- Expense list/detail/create/edit/refund.
- Cash-register list, open/close detail and denomination reconciliation.
- Profit and loss, balance sheet, trial balance and cash-flow reports.
- Tax/GST sales and purchase reports.
- Report filter sheet, chart/table toggle, export and share.

Financial dashboards must hide values in the app switcher and support an optional “privacy eye” to mask balances. Export and detailed stock valuation require their own permissions.

### H. HRMS and staff management

The existing Connector API supports users, attendance clock-in/out and holidays, but a complete HRMS is not present. Treat the following as a planned module requiring backend work.

Employee self-service screens:

- My profile and employment information.
- Clock in/out with timestamp, permitted location and optional selfie/geofence.
- Attendance calendar and daily detail.
- Holiday calendar.
- Leave balance, leave request and request history.
- Payslip list/detail/download.
- Assigned tasks or visits.

Admin HR screens:

- Staff directory and employee detail.
- Add/invite/deactivate staff.
- Role, permissions and location assignment.
- Attendance overview, late/absent exceptions and corrections.
- Leave approval/rejection.
- Shift/roster management.
- Salary components, payroll run summary and payslip publication.
- Performance/targets only if included in project scope.

Accountant may receive payroll-processing and payout access without permission to modify roles or employment records.

### I. Reports and analytics

Create a searchable report catalogue grouped as Sales, Inventory, Purchases, Finance, Tax, Contacts, Staff and CRM. Frequently used reports can be pinned.

Every report should share the same structure:

1. title and last-refreshed time;
2. filter chips and location selector;
3. 2–4 summary KPIs;
4. one useful chart when appropriate;
5. sortable detail table/list;
6. export/share action when permitted;
7. tap-through to the underlying record.

Avoid recreating wide desktop tables. On mobile, show the primary value and status, then expose secondary columns in the row detail.

### J. Admin control centre

- User/staff list and invitations.
- Role templates and permission editor.
- Location management.
- Approval rules and approval inbox.
- Products, taxes, units, categories, price groups and invoice settings.
- Invoice schemes/layout selection. Complex invoice-layout editing can open a tablet/web-optimized editor in phase two; mobile must support choosing defaults.
- Notification templates and WhatsApp connection/log status.
- Module/subscription status and add-on request.
- Integration health for WooCommerce, IndiaMART, WhatsApp, email/SMS and payment gateways.
- Audit/activity log, signed-in devices and security settings.
- Business profile, currency, tax, POS and numbering settings.

For mobile, settings should use searchable grouped lists. Avoid placing dozens of toggles on one screen.

### K. Shared utility pages

- Notifications inbox grouped by Today/Earlier with filters and deep links.
- Approval inbox and approval detail.
- Universal search/results.
- Scan centre: product, invoice/reference and contact QR/barcode.
- Download centre for generated PDFs/exports.
- Sync centre showing queued drafts, failures and retry.
- Profile, password, biometric lock, language, theme and notification preferences.
- Help/support, app version, privacy policy and sign out.
- Standard empty, loading, offline, access-denied, expired-session and server-error states.

## 6. Visual design direction

### Recommended style

Use a modern, calm B2B design: high information density without looking like a compressed desktop application.

- Neutral white/light-gray surfaces with one configurable brand color.
- Semantic colors: green paid/success, amber partial/pending, red due/error, blue informational, purple draft/estimate. Always pair color with a label/icon.
- 8-point spacing system, 12–16 px rounded cards and restrained shadows.
- Minimum 44×44 pt tap targets; body text 15–16 px; monetary totals larger and tabular-number aligned.
- Use cards only for summaries. Operational lists should use compact rows to avoid excessive scrolling.
- Dark mode may be phase two, but components should be tokenized from the start.

### Core reusable components

- KPI card, status pill, amount-with-status, location chip and permission-aware action button.
- Product row with thumbnail/SKU/stock/price and scan state.
- Contact row with balance and type.
- Transaction row with number/customer/date/amount/payment state.
- Filter bottom sheet, date-range picker and saved filters.
- Sticky transaction total bar.
- Numeric quantity keypad and currency input.
- Timeline/audit component.
- Attachment picker with camera/gallery/file choices.
- Confirmation sheet with consequences and required reason.
- Skeleton loaders, empty-state illustration and inline retry.

### Responsive behavior

- Phone: bottom navigation, single column and bottom sheets.
- Tablet: navigation rail, two-pane master/detail, persistent invoice cart/totals and wider report tables.
- Landscape POS mode: catalogue left, invoice cart right, payment as a full-height panel.

## 7. Critical workflows

### Create and share invoice

Home/Create → Invoice → choose location/customer → scan/add items → apply authorized price/discount → review totals → collect payment or set terms → finalize → server assigns invoice number and stock → invoice preview → share/print.

### Create estimate and convert

Create → Estimate → customer/items/validity/terms → save/send → customer accepts → Convert → Invoice or Sales Order → reconfirm stock, price and tax → finalize.

### Transfer stock

Inventory → Transfers → New → source/destination → scan items/quantities → submit → optional approval → dispatch → destination receives/counts → resolve variance → complete.

### Record payment

Invoice/Contact → Record payment → amount/method/account/reference → optionally attach proof → review balance → post → share receipt.

### Lead follow-up

Work → My leads → Lead detail → call/message/log activity → schedule follow-up → update stage → convert to customer → create estimate.

### Staff attendance

Home attendance card → Clock in → validate location/geofence/selfie if enabled → working timer → break/field visit → Clock out → confirmation.

## 8. Notifications and approvals

Push notifications should deep-link to the relevant record. Categories:

- invoice due/overdue and payment received;
- low stock, out of stock and approaching expiry;
- transfer submitted/dispatched/received/discrepancy;
- purchase or expense awaiting approval;
- lead assigned and follow-up due;
- leave request and attendance exception;
- integration failure or synchronization issue;
- subscription/module status for Admin only.

Users need category-level preferences, but compliance/security alerts cannot be disabled. Notifications must respect permissions even if a user’s role changes after the push is sent.

## 9. Offline, synchronization and conflict behavior

Recommended offline scope:

- Cache permitted product, customer, price and tax reference data.
- Allow offline invoice/estimate/expense/stock-count drafts.
- Allow scanning into a draft without connectivity.
- Do not promise a final invoice number, payment posting or stock mutation until the server confirms.
- Encrypt local storage and erase business data at logout or remote session revocation.

When reconnecting:

1. validate session and permissions;
2. refresh reference data changed since the last sync;
3. validate prices, tax, stock, credit and numbering;
4. show conflicts to the user rather than silently overwriting;
5. post once with an idempotency key;
6. return the definitive document number and balances.

## 10. Security and audit requirements

- OAuth/short-lived access token with secure refresh-token rotation.
- Store secrets only in Keychain/Keystore; never plain local storage.
- Optional biometric app lock and reauthentication for refunds, deletions, high discounts, role changes and bank transfers.
- Server-side permission checks on every endpoint.
- Tenant and location scoping on every query.
- Device/session management and remote logout.
- Audit actor, timestamp, device, location and before/after values for financial, stock and permission changes.
- Configurable approval thresholds for discount, refund, expense, stock adjustment and purchase.
- Screenshot/app-switcher privacy for financial screens where the platform supports it.
- Root/jailbreak warning and certificate pinning considered after threat modelling.

## 11. Backend/API readiness and gaps

The existing Connector API already covers:

- locations, contacts and contact payments;
- units, categories, brands, products, variations, price groups and taxes;
- users, logged-in profile and password flows;
- sales CRUD, sales returns and shipping-status updates;
- expenses, refunds and expense categories;
- cash registers, payment methods and payment accounts;
- business details, profit/loss, product stock and notifications;
- attendance clock-in/out/history and holidays;
- CRM leads/follow-ups/call logs and field-force visits.

Major APIs still required for the proposed full app:

- invoice PDF/share/payment-link and invoice scheme/layout selection;
- estimates/quotations, drafts, sales orders and recurring invoices;
- purchase requisitions, purchase orders, purchases/receiving and purchase returns;
- stock transfer lifecycle, stock adjustments, lot/expiry and complete stock history;
- account ledgers, receivables/payables, deposits, fund transfer, balance sheet, trial balance, cash flow, tax and detailed reports;
- product create/update and complete price-group administration;
- users/roles/permissions/location assignment and staff activation;
- CRM pipeline configuration, proposals, conversion and campaign administration;
- full HRMS leave, shifts, payroll and payslips;
- approvals, audit log, files/media, exports and integration-health endpoints;
- mobile capability manifest, incremental sync and idempotent mutation support.

The backend team should publish an OpenAPI contract before final UI development. Each response should include permitted actions for the record, for example `can_edit`, `can_delete`, `can_refund` and `can_view_cost`.

## 12. Delivery roadmap

### Phase 0 — Discovery and foundation (2–3 weeks)

- Interview Admin, Accountant, Cashier/Sales and Warehouse users.
- Confirm the top 10 jobs and approval rules.
- Finalize role/capability contract and location behavior.
- Produce user flows, sitemap, low-fidelity prototype and API gap specification.
- Establish design tokens and component library.

### Phase 1 — Operational MVP (8–12 weeks)

- Authentication, business/location selection and capability-based navigation.
- Role-specific Home.
- Product/stock lookup and barcode scan.
- Customer list/create/detail.
- Invoice list/create/detail, payment and PDF/share.
- Estimate/quotation creation and conversion.
- Expense create/list.
- Notifications, profile, sync/error states and basic attendance.

Release goal: Staff can complete daily selling work; Admin can monitor and intervene.

### Phase 2 — Inventory, purchasing and accounting (8–12 weeks)

- Transfers, receipt confirmation, adjustments, lots/expiry and stock history.
- Requisitions, purchase orders, receiving, supplier payments and returns.
- Accounts, ledgers, receivables/payables, cash register and financial/tax reports.
- Approval inbox and stronger audit experience.

Release goal: Accountant and warehouse/purchase users can operate without the desktop for routine work.

### Phase 3 — CRM, Admin and HRMS (8–12 weeks)

- Lead pipeline, follow-ups, conversion and proposals.
- Staff directory, roles/location assignments and admin control centre.
- Leave, shifts, attendance corrections, payroll summary and payslips after backend HRMS work.
- Integration health and advanced settings.

Release goal: Admin can manage most business operations from mobile.

### Phase 4 — Advanced modules

- Restaurant/kitchen/table workflows.
- Manufacturing recipes and production.
- B2B portal monitoring, WooCommerce/IndiaMART operations and WhatsApp template/log tools.
- Offline enhancements, tablet POS, configurable dashboards and advanced analytics.

## 13. Designer deliverables

The app designer should hand off:

1. permission-aware sitemap and role matrix;
2. task flows for invoice, estimate, payment, transfer, receiving, expense, lead conversion and attendance;
3. low-fidelity wireframes for all screen families;
4. clickable prototype for the critical workflows;
5. design tokens and accessible light/dark-ready color system;
6. reusable component library with phone/tablet variants;
7. empty/loading/error/offline/permission-denied/approval states;
8. field validation, confirmation and success behavior annotations;
9. responsive specifications and developer redlines;
10. usability-test script and findings for at least one user from each primary role.

## 14. Acceptance criteria

- A new invoice can be created and shared in under two minutes for a known customer and product.
- No user sees data or actions beyond backend permissions and assigned locations.
- Accountant can reach receivables, payables, accounts and ledgers within two taps from Home or More.
- Admin can reach any major operational module within three taps.
- All stock and money mutations have confirmation, definitive server result and audit history.
- All lists support search, filtering, pagination and clear empty/error states.
- Core flows meet WCAG 2.2 AA contrast and mobile touch-target guidance.
- App remains understandable at 200% text scaling and on common low-width Android devices.
- Duplicate submissions are prevented during retries or poor connectivity.
- Analytics measure funnel completion, validation failures, sync failures and time-to-complete without collecting sensitive financial contents.

## 15. Product decisions to finalize before high-fidelity design

- Whether Accountant is a fixed system role or a customizable role template.
- Which actions require approval and their amount/discount thresholds.
- Whether final invoices may be created offline or only drafts.
- Whether mobile includes a full POS payment experience or a simplified invoice-first experience.
- Which HRMS features are in the initial commercial scope.
- Whether staff may see product selling price, purchase cost and stock valuation separately.
- Whether Admin settings are fully editable on phone or advanced configuration remains web/tablet-only.
- Required printers: Bluetooth, network/ESC-POS, AirPrint or share-to-system-print.
- Required languages, tax jurisdictions and payment gateways for launch.