Freebee UI/UX analysis and restructure plan

The product works end to end, but the three web surfaces still look like an engineer's admin panel: a top bar, flat lists, grey text, no sense of where you are or what to do next. The plan below moves the advertiser portal and the ops portal onto one app shell (sidebar, greeting header, KPI cards with change versus last period, schedule and timeline widgets) in the soft-palette style of the four reference dashboards, and reshapes the marketing site to match.

Where it stands today

All three surfaces are functionally complete but visually flat. Scored against what the four references do well (Shopeers, the finance dashboard, Crextio, Hipoka), the gaps are the same on every page: no persistent navigation, no greeting or context header, numbers without comparison, and a single grey-on-white card style.

The inventory also found 10 concrete inconsistencies that any redesign has to clear first: two identical shells (AdvertiserShell, DashboardShell), muted text written four ways, eight arbitrary letter-spacing values, hand-rolled accent buttons on six pages, raw inputs and selects outside the shared components on seven pages, and a Tailwind class built at runtime in the filters grid that never renders (lg:grid-cols-N).

Navigation map

Every page can be reached, but the paths are linear lists: Dashboard to Campaigns tab to report, Screens to screen detail. Four pages are dead ends. The advertiser's per-screen view is only reachable from the Live now tiles and the campaign report never links to it. The "Booked" page ends the wizard with no next step. Ops Wallet is a stub of four counts. Pair device is a utility that sits in the main nav as if it were a daily task. Neither role has a true home: ops land on a health table, advertisers on six empty stat cards.

What the references do that we do not

The four references share one skeleton: a left sidebar, a header that greets the person and sets the date range, a row of KPI cards with change versus the previous period, then two or three wide widgets (trend, schedule, list). Everything is on a soft tinted background with white cards, 16 to 20 px radius, and one bright accent used sparingly.

New information architecture

Both portals move to one app shell: a 240 px sidebar on the left, a header with greeting, date and global range, and the page in a card grid. Each role gets a real home page that answers "how is it going and what should I do now" before anything else.

Advertiser sidebar (top to bottom): Home, Campaigns, Creatives, Book a screen (primary button style), then a divider, Reports, Billing, Help, and the account card at the bottom with company name and sign-out.

Ops sidebar: Today, Screens, Bookings, Approvals (with a count badge), Footage, then a divider, Wallet, Devices (was Pair device), Settings, and the account card.

The landing page after login becomes Home or Today. The old /ops/fleet, /ops/metrics and /dashboard?tab=campaigns links keep redirecting so nothing bookmarked breaks.

Design system changes

The token file already has the right bones (one accent, four data colours, a 6-step type scale, 16 px cards). What changes is the surface: a tinted page background, white cards without hard borders, pastel tints for categories, and a sidebar. Everything below lands in packages/shared/design-tokens/tokens.json and tailwind.config.ts so every page picks it up.

The device surfaces (wall, kiosk, phone) keep their dark theme and are not touched in this cycle.

Page by page redesign

Each page below is described as the reader sees it top to bottom. The data behind every widget already exists in the API; nothing here needs a new backend endpoint except the two marked.

Advertiser Home

1. Header: "Good morning, {first name}", today's date, range picker (default last 7 days), primary button "Book a screen".
2. KPI row, four cards: Watchers, Plays, Attention rate (as a gauge), Spend booked. Each shows the delta versus the previous range and a sparkline from by_day.
3. Two-column band: left "Watchers by day" trend (two thirds), right "Live right now" list of screens with a green pulse, the creative playing and a link to the screen view.
4. "Your week" schedule: one row per booked screen, hour axis 10:00 to 22:00, your windows as coloured spans, other advertisers' windows greyed. Needs one new endpoint: bookings for my screens this week (new).
5. New accounts only: an onboarding checklist card (upload a creative, get it approved, book a screen, see your first report) with ticks driven by real state.
6. "Recent campaigns" as three cards with status pill, watchers and a "View report" link; "See all" to Campaigns.

Campaign report

1. Header: campaign name, status pill, the creative thumbnail, range picker; actions (Update the ad, Change dates, Rebook, Cancel) move into a right rail so the top stays calm.
2. KPI row with deltas versus the previous range, then the game funnel and the attention funnel side by side.
3. Full-width watchers-by-day chart; hour heatmap and gender/age splits in a three-column row.
4. By-screen and by-creative tables in two columns, each row linking to the screen view (fixes the dead end).
5. Export links (CSV, QR scans, cricket) grouped in the rail under "Downloads".

Booking wizard

1. Stays three steps, now inside the shell. A left summary rail fills in as the advertiser chooses: creative thumbnail, screens, date, slot, price. The rail is the confirm card on step 3.
2. The hour grid shows taken windows with the advertiser's own colour and a "next free window" hint when a day is full.
3. "Booked" becomes a success card with three next steps: open the report, book another screen, upload a preview.

Creatives

1. Card grid with the preview frame (the existing CreativePreviewTile), status pill, "used in N campaigns", and a kebab menu for rename, replace, delete.
2. The game editor opens as a full page with a sticky phone-sized preview on the right.

Ops Today (new)

1. Header: "Good morning, ops", date, range picker, primary button "Approve creatives (N)" when the queue is not empty.
2. Alerts strip: offline screens, creatives waiting over 24 h, bookings starting today without an approved creative, screens with no booking today. Each alert links to its page.
3. KPI row: Screens online of total (gauge), Plays today, Watchers today, Revenue booked this month, each with the delta.
4. Network schedule: one row per screen, hour axis, every window coloured by advertiser, now-line. Needs one new endpoint: all bookings for a date across screens (new, a thin wrapper over the existing ops bookings list).
5. Two-column band: approvals queue (five newest with preview thumbnails) and "Screens needing attention" (offline or stale with last seen).

Ops Screens, Bookings, Approvals, Footage

• Screens health table gains a 7-day plays sparkline and the metrics tab gains a horizontal bar chart comparing screens on the chosen metric.
• Screen detail adds the day timeline and a "Playing now" card with the creative and advertiser.
• Bookings keeps the grouped list and adds a week calendar toggle: columns per screen, rows per hour, a block per booking in the advertiser's colour.
• Approvals becomes a three-column board (waiting, approved, rejected) with the preview and reason form in a slide-over panel instead of a modal.
• Footage cards show a thumbnail frame of each clip and a "used by N creatives" count; per-creative and per-screen overrides are reached from the approval panel and the screen detail, as today.

Marketing site

The copy is already strong; the page is too long and too grey, and it never shows the thing that makes Freebee different: the game wall. Fourteen sections become seven, and the product is shown rather than described.

The landing nav keeps its anchors but uses the shared Button for Sign in and Book a screen, and the same wordmark as the app so the jump into the portal does not feel like a different product.

Rollout

Phases 1 and 2 shipped on 22 October 2026 (commit df692c4 on main, auto-deploying to Vercel): the sidebar shell, the soft canvas, the advertiser Home, the ops Today page, and the new Campaigns and Reports pages, verified in the browser at desktop and phone width. Phases 3 and 4 shipped the same day (commits 09b7230 to 720d2ce): the campaign report re-layout with KPI deltas and a sticky action rail, the ops approvals board with a slide-over, the bookings list and week calendar, the creatives card grid, the booking wizard stepper with a summary rail, a Playing now card plus day timeline on every screen page, screens-compared bars on the metrics tab, and the seven-section landing page. Left for later: Billing page, per-screen sparklines in the health table, the add-widget panel and AI assistant. The backend is untouched except for two thin read endpoints (my week's bookings, and the network schedule for a date).

Update Oct 23, 2026: what shipped since, and what is next

All four phases of this plan are live on main and on Vercel. Beyond the plan, three rounds of feedback changed the product: the metric cards became four colour-coded bands (Delivery, Audience, Engagement, Value) with plain-English definitions and sample numbers where nothing is measured yet; the game-ad editor became a guided five-step flow with live sample games; and every advertiser and ops string went through a plain-English pass with a glossary. The production database now has the demo advertiser, the four sample game ads and their bookings.

The end-to-end flows, the metrics list, booking and bidding rules, failure handling, OTP and coupons, upload rules, the AI pipeline, the native player and the advertiser messaging plan live in Freebee end-to-end flow. Its last section, "What is still missing", is the honest list of what blocks a paid launch: payments and invoices, secret rotation and launch switches, password reset and roles, WhatsApp and email messages, legal pages and the camera notice, a content policy, prize fulfilment, proof of play, the mall partner side, device reliability, support and incident handling, languages, backups.

Still open from this plan: the Billing page, per-screen sparklines in the health table, and the add-widget panel and AI assistant from the Shopeers reference.