AI Gate — Your AI Assistant

Native mobile app — kick-off review

Abu Dhabi Media Office

Step 0 of the prototype: the screen map and navigation model, and two style directions, each shown on Home and Task detail. Nothing else is designed yet. Use the switches to see every phone in English / Arabic (mirrored RTL) and light / dark.

Language Appearance Signed in as Emily Roberts · Manager · Thursday 12 November 2026

1 · Screen map five tabs, one always-reachable assistant

The web app is a chat panel over a dimmed workspace. On a phone the workspace becomes the home, and the assistant becomes a layer that is one tap away from every screen: it opens as a sheet (medium → large detent), answers with cards, and any card can open its full screen. Tasks and Inbox earn their own tabs because they are the daily, time-critical work; the remaining modules live under Workspace.

Home

Tab 1
  • Greeting + mood check-in
  • Today at a glance
    • tasks · to-dos · approvals · meetings · check-in
    • AI daily brief
  • Needs your attention
  • Notifications bar → Notification centre
  • Module grid with live counts
    • All · Favorites · Recently opened
    • Module search

Tasks

Tab 2 · deepest module
  • Overview (KPIs, attention, this week, groups)
  • My tasks
    • Received · Sent by me · Completed · Following
    • List · Board · Calendar · Timeline
    • Group / filter / sort · quick add · bulk · export
  • Task detail
    • Source card · subtasks · dependencies
    • Attachments + in-app viewer
    • In-place Details · pickers
    • Activity & comments
    • Life cycle sheets (extension, closure, return, reopen)
  • New / Edit task · templates · drafts
  • Insights (AI reports)
  • Workload
  • GroupsAdmin: system groups
  • Task inbox

Assistant

Centre action · sheet over any screen
  • Chat
    • Rich answer cards
    • Quick chips per module
    • @mention picker
    • Voice input
  • Drafts: email · meeting · task · Teams message
  • "Ask about this" (context from the current task, report, letter)
  • Card → full screen hand-off
  • History

Inbox

Tab 4 · approvals
  • Internal Services · TA · ADERP
  • Request detail
    • Attachments
    • Approve · Reject · Return · Transfer + remarks
  • Bulk review (TA)
  • Swipe actions on rows

Workspace

Tab 5 · everything else
  • Minutes of Meeting
    • List · editor · convert action → task · PDF
  • Email
    • List · read · AI reply · compose · Add to task
  • To-do · Meetings / calendar · Teams chats
  • Letters (CMS)
    • Info · Attachments · View · Send / Return / Archive · Convert to task
  • Services
    • Catalogue · multi-step forms · status
  • Reports
    • Department + AI Insights
    • Revenue Intelligence + Ask Revenue
    • Export · email · create task
    Manager: Reports Configuration
  • Attendance & leave · People directory · Policies

Entry

  • Splash
  • Sign-in (username + password)
  • Demo account picker (by role, searchable)
  • Language + theme switch

Account avatar, top of Home

  • Profile · change password
  • Language · theme · sign-out
  • Users & rolesAdmin

Shared sheets

  • People / group picker with search
  • Date picker with quick chips
  • File viewer (PDF, image)
  • "Create task from …" (email, letter, meeting, report, to-do)

System surfaces

  • Push: assigned, mention, extension / closure request, decision
  • Home-screen widget: Today at a glance
  • Live Activity: meeting in progress → minutes
  • States: loading, empty, error, offline

2 · Direction A — Sand Glass workspace-first, floating assistant orb

Warm sand ground with soft navy, teal and crimson light behind layered translucent cards. The assistant is a living orb in the centre of a floating glass tab bar.

Home
Task detail · assignee side

Why choose A

  • Feels like the newest iOS: glass cards, floating tab bar, large titles; maps directly to Material 3 Expressive tonal surfaces on Android.
  • Workspace is home. Counts and "needs your attention" are visible before any typing; the orb opens the chat sheet from any screen.
  • Warmer and more distinctive — the sand ground carries the Media Office identity without leaning on a big navy block.
Trade-offs
  • Translucency needs care for contrast; every glass surface gets a solid fallback under "Reduce transparency".
  • Blur is heavier on older Android devices.
Motion
  • Orb breathes slowly; expands into the chat sheet with a spring.
  • Task row → detail is a shared-element move of the title and status pill.

3 · Direction B — Navy Ledger assistant-first, docked ask bar

A deep navy header with a single crimson glow; content sits on a solid sheet with hairline dividers and tight, editorial typography. The assistant is a persistent "Ask AI Gate" bar above the tab bar.

Home
Task detail · assignee side

Why choose B

  • Most executive and calm: solid surfaces, strong hierarchy, numbers set like a ledger. Closest to the current web app, so the two feel like one product.
  • Assistant is the first thing you see. The AI brief leads; the ask bar invites typing or voice on every tab.
  • Dense and fast — more rows per screen, cheapest to build identically on iOS and Android.
Trade-offs
  • Less "futuristic" at first glance; the premium feel comes from type, spacing and motion rather than material.
  • The ask bar takes 52pt of every screen (it hides on scroll and in forms).
Motion
  • Header collapses into a compact title on scroll.
  • Ask bar lifts into a full-height chat with the keyboard.