10 Cent Tom

byAditya Pratap

Design a complete 26-page web and mobile operations platform called "10 Cent Tom Operations" for a Gold Coast disability social enterprise and container recycling charity. Reference brand: 10centtom.com.au — warm, green, community-driven, charity feel. Two portals: Admin (desktop 1440px, left sidebar) and Employee (mobile 390px, bottom tab bar). Design System: Primary green #2E7D32, action green #4CAF50, light green bg #E8F5E9, amber #F9A825, red alert #E53935, off-white bg #F5F5F5. Font: Nunito or DM Sans, rounded, friendly. Admin sidebar items: Dashboard, Routes, Clients, Payroll, Leads, Employees, Scheduling, Reports, Voice Calls, Notifications, Settings. Employee tabs: My Route, Clock In/Out, My Hours, My Points, Profile. Status badges: Draft=grey, Published=blue, In Progress=green, Completed=dark green, Flagged=amber, Rejected=red. Service tier badges: Blue, Double Blue, Silver, Gold, Platinum. P-01 Login: Centered card, coin logo, email + password, green login button, forgot password link, role-based redirect (Admin→Dashboard, Employee→My Route), error state. P-02 Forgot/Reset Password: Request reset via email, reset form with password strength indicator, success confirmation, back to login. P-03 Admin Dashboard: Metric cards (bins today, bins this week, active drivers, waste flags). Live driver progress panel. General waste alert panel. Contract renewal amber banner. New leads count. Points leaderboard top 3. Inbound calls panel. Exception flags. Quick actions: Publish Routes, Approve Hours, View Leads. P-04 Route Manager — Shift List: Date picker, Auto-Generate Week button, Bulk Publish button. Shift cards showing name, day, type, driver, stop count, status badge. Edit/Publish/View actions. P-05 Route Manager — Route Builder: Drag-and-drop stop list (stop number, client, address, bin count). Add stop search, driver assignment, multi-trip depot-return toggle, shift type selector, Publish and Print PDF buttons. P-06 Route Manager — History: Filter by date, driver, shift type. Table with completion rate, waste flags per route. Row expand for stop-by-stop detail. Export CSV. P-07 Client List: Search and filters. Table: name, suburb, collection day, tier badge, contract expiry, payment status, active/inactive. Amber row for renewals due, red for non-payers. Bulk deactivate. Export CSV. P-08 Client Detail: Profile card (name, address, bins, tier). Contract dates + renewal countdown + manual reminder buttons (60-day, 30-day). Payment status. Communication history timeline. Pickup history table. Generate Annual Impact Report PDF button. P-09 Payroll — Hours Review: Week picker. Employee × day table with hours. Amber cells for threshold breaches (standard >5hrs, full day >9hrs, double-Friday >15hrs). Red for missing clock-outs. Approve, Reject, Edit per row. Approve All button. Audit trail panel. P-10 Payroll — Xero Push: Last push status card. Push to Xero button. Error log with retry. Push history table with per-employee breakdown. P-11 Lead Manager: Kanban pipeline (New, Contacted, Converted, Lost). Lead cards with drag between stages. Slide-in detail panel with admin notes, automated sequence status, Convert to Client button. List view toggle. P-12 Employee & Volunteer Manager: Two tabs (Employees / Volunteers). Table with name, role, status, points, Star Employee badge. Add forms for each type. Side panel with notes split into Financial tab (admin only) and General tab (both). P-13 Scheduling: Weekly calendar, drivers as rows, Mon–Fri columns. Colour-coded shift blocks. Click to create, drag to reassign. Conflict warning if double-booked. Driver availability indicators. P-14 Reports: Tabs for Daily, Weekly, Monthly, Driver Performance, Route Efficiency, Annual Impact, Grant Export, Payroll. Each with date filters, summary cards, data table or chart, export button. P-15 Voice Agent (Addon): Inbound call log — priority pinned top, classification badges, transcript snippets, acknowledgment status. Outbound log with outcomes. Filters and search. P-16 Staging & Go-Live (Internal): Server status, deployment checklist, integration test results, UAT feedback form, open issues list, go-live readiness checklist, sign-off button. P-17 My Route (Employee Mobile): Shift header + progress bar. Numbered stop cards (client, address, bin count). Tap to complete → inline form (bins/bags count, general waste YES/NO toggle, notes). Completed stops collapse with green checkmark. Real-time update banner. Print run sheet button. P-18 Sign In / Sign Out (Mobile): Large Clock In/Out button with live elapsed time counter. Today's hours summary. Week history with approval status badges per day. P-19 My Hours (Mobile): Weekly daily breakdown with approval badges. Tap flagged entry to see admin note. Previous weeks via scroll. P-20 My Payroll (Mobile): Pay period selector. Hours logged, approved, pending summary card. Week-by-week breakdown. Own data only. Export button. P-21 My Points & Leaderboard (Mobile): Points hero card with monthly total and Star Employee badge. Per-run points history. Monthly bar chart. Team leaderboard (if admin enabled) — rank, name, points, current user highlighted. P-22 My Profile (Mobile): View-only personal info. Change password form. General notes tab only (Financial hidden). Notification preference toggles. P-23 My Notifications (Mobile): Notification list with icons, timestamps, unread dots. Tap to navigate. Mark as read / mark all read. Unread count on tab bar. P-24 Admin Notifications: Same as P-23 but admin alert types — route exceptions, missing clock-outs, renewals, new leads, Xero push results. Category filter tabs. P-25 Account Settings (Shared): Edit profile, change password with strength bar, role badge read-only, notification preference toggles. P-26 Platform Settings (Admin only): Collapsible sections — company profile, integrations (Xero, Messenger, GHL, Email/SMS each with status + re-auth), notification email templates, voice agent settings, gamification (points per stop, Star Employee threshold, leaderboard toggle), payroll thresholds, timesheet approval roles, annual report trigger month. All 26 screens must share one consistent design system. Admin screens desktop 1440px. Employee screens P-17 to P-23 mobile 390px. Export ready for Figma.

LoginClientsLeadsPayrollForgotPasswordAccountSettingsMyRouteMyNotificationsMyHoursClockInOutMyPointsVoiceCalls
Login

Comments (0)

No comments yet. Be the first!

MyRoute design preview
Login: Sign In
Dashboard: View Metrics
Dashboard: Monitor Alerts
Routes: View Shift List
Routes: Build Route
Routes: Reroute Existing
Routes: View History
Clients: Browse List
ClientDetail: View Profile
ClientDetail: Manage Contract
Payroll: Review Hours
Payroll: Push to Xero
Leads: Manage Pipeline
Employees: Manage Staff
Scheduling: Assign Shifts
Reports: Generate Export
VoiceCalls: View Call Log
Notifications: View Alerts
Settings: Configure Platform
AccountSettings: Update Profile