WhatDeficit Mobile — Layout Directions

2026-04-22 · 10 Matrix layouts + 10 Calendar layouts · one palette, layout only varies

All 20 share the same color theme (the live app's warm-neutral palette). Differences are purely in how things are arranged and navigated. Tap any tile to open.

Navigation Model · Pick One

Tab Bar (Peer Tabs)

All 4 views are peers. Tap a tab, that view fills the screen — Matrix disappears.

┌─Matrix─┐ ┌─Cal───┐ │ hero │ │ grid │ │ tiles │→ │ band │ │────────│ │───────│ │[M C c s]│ │[m C c s]

Single Page + Overlays

Matrix is always home. Calendar/Chat/Settings open as full-screen overlays with back button.

┌Matrix [⊞🧠⚙]┐ ┌← Calendar ✕┐ │ hero │ │ grid │ │ tiles │→│ band │ │ │ │ │ │ (no tabs) │ │ (no tabs) │

Hybrid — Sheets over Matrix

Tab bar stays, but Calendar/Chat raise AS SHEETS over Matrix. Matrix never goes away.

┌─Matrix─┐ ┌─Matrix (dim)─┐ │ hero │ ├──═ sheet ═───┤ │ tiles │→ │ Calendar │ │────────│ │ grid+band │ │[M C c s]│ │[m C c s]

Matrix Tab · Hybrid (New)

Hero + Live 2×2 Tiles

Focus Hero pinned top + all 4 quadrant tiles live below. Tap any tile to expand its full list.

┌─FOCUS NOW─┐ │ Call TX │ │ [ Start ] │ └───────────┘ ┌Q1·7┬Q2·12┐ │─tsk│─tsk │ │+5 │+10 │ ├Q3·3┼Q4·2─┤ └────┴─────┘

L11 · Expanded

Hero + Expanded Quadrant

What happens after you tap a tile: quadrant grows to show all tasks; others collapse to jump-rail.

┌─FOCUS NOW─┐ │ Call TX │ │ [ Start ] │ └───────────┘ ▼ Do Now · 7 ✕ ─ task ─ task ─ task ↕ [Q2][Q3][Q4]

Matrix Tab · 10 Layouts

Pinned 2×2 + Expanded

Mini 2×2 pinned at top (never scrolls), active quadrant's list below.

┌──┬──┐ │Q1│Q2│ ← pinned ├──┼──┤ │Q3│Q4│ └──┴──┘ ▓ Focus Now ─ task ─ task ↓

Swipe Between Quadrants

One quadrant full-screen. Horizontal swipe to change. Tiny 4-dot indicator.

· ● · · Do Now ‹ ─task─ › ‹ ─task─ › ‹ ─task─ ›

2×2 as Segmented Tabs

Mini-grid IS the tab control. One quadrant's full list below, nothing else.

[Q1][Q2] [Q3][Q4] ────── Do Now · 7 ─ task ─ task ↓

Fixed Split 35 / 65

Hard split: top 35% is 2×2 grid (locked), bottom 65% scrollable task list.

┌──┬──┐ 35% │Q1│Q2│ ├──┼──┤ │Q3│Q4│ ╌╌╌╌╌╌ 65% ─ task ↕

Horizontal Kanban

4 vertical columns Q1→Q4 side-by-side. Horizontal swipe between.

Q1 Q2› ─task ─tas ─task ─tas ─task ↔ ─task

Accordion Quadrants

4 stacked collapsible sections. Multiple can open at once. No 2×2.

▼ Do Now·7 ─ task ─ task ─ task ▶ Schedule·12 ▶ Delegate·3 ▶ Drop·2

Focus Hero + Chips

Top half = big "What's next" hero. Bottom half = 4 quadrant chips.

┌─FOCUS NOW─┐ │ Call TX │ │ [ Start ] │ └───────────┘ [Q1·7][Q2·12] [Q3·3][Q4·2]

Full 2×2 Live Tiles

All 4 quadrants visible simultaneously, each tile scrolls independently.

┌────┬────┐ │Q1 │Q2 │ │─tsk│─tsk│ │─tsk│─tsk│ ├────┼────┤ │Q3 │Q4 │ └────┴────┘

Stacked Sections

Long scroll: Q1 list, Q2 list, Q3, Q4 with sticky section headers.

▬ Do Now·7 ▬ ─ task ─ task ▬ Schedule ▬ ─ task ▬ Delegate ▬ ↓

Priority Feed + Filter

Mixed list priority-sorted. Quadrants are a filter, not primary IA.

Today · [⊞] ⚠ Overdue·3 ─ task [Q1] ─ task [Q3] ─ task [Q1] ─ task [Q2]

Calendar Tab · 10 Layouts

Month Grid + Bottom Sheet

Full month grid; tap a day, sheet slides up from bottom. Classic baseline.

Apr 2026 S M T W T F S · · · 1 2 3 4 ... ═══ sheet ═══ Wed Apr 22·7

Week Strip + Agenda

Week strip at top, chronological agenda below. Pull down for month.

S M T W T F S 19 20 21•22•23 24 25 ───────────── Today · Wed ─ task Thu Apr 23 ─ task

Agenda-Only List

No grid. Infinite scroll of date sections. Calendar icon → overlay.

Upcoming [⊞] ⚠ Overdue ─ task Today Wed 22 ─ task Thu Apr 23 ─ task ↓

Split Month + Detail

Top 40% compact month, bottom 60% scrolling day detail.

April 2026 · · · 1 2 3 4 ...19 20 21●22 ╌╌╌╌╌╌╌╌╌ Wed Apr 22 ─ task ↕

Yesterday · Today · Tomorrow in 3 columns, swipe forward/back.

Tue 21 │ Wed 22│ Thu 23 ─ overdue │ ─ task │ ─ task ─ overdue │ ─ task │ ─ task │ ─ task │ ‹ · · · ● · · ›

Today-First + Month Toggle

Today, Tomorrow, Day-after stacked. Month is overlay icon.

Up next [⊞] TODAY Wed 22 ─ task ─ task TOMORROW Thu ─ task

Time-Blocked Day

Google Calendar-style: vertical timeline with slots. Month = toggle.

[Day|Wk|Mo] 9 ───── 10 ───── ─NOW 2:14 ... 19 ▓Psych Anytime·6

Heat-Map + Row Expand

Density-filled month grid. Tap a day; its row grows taller in place.

· · · ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ╔═ 19 20 21 ● ║ detail ║ ─ task ╚═══════════ ░ ░ ░ ░ ░ · ·

Two-Pane Persistent

Tiny month pinned top + persistent day detail below. Always both visible.

month · small 19 20 21●22 23 ───────────── Wed Apr 22 Do Now·4 ─ task ↕ Schedule·2

Grid + Inline Band

Full month; tap a day and a band appears just below that row.

12 13 14 15 16... 19 20 21●22 23... ▼ ├─ Wed 22 · 7 ─┤ │ ─ task │ │ ─ task │ 26 27 28 29 30...