LiveDesign Lab

Mobile — round 2 (variants)

Preview

Variants for what you flagged: the peek (too busy), the control row (looks weird), the drag bar, plus new mobile ideas. Mobile chrome only — globe untouched. Tell me the winners and I'll ship them.

#2 peek

Bottom-sheet peek — calmer variants

You found the shipped peek (Briefing button + a right-aligned DEFCON / sync / events / on-watch stack) too busy. These keep the same information but reduce the visual noise. Each shows the collapsed peek sitting at the screen bottom.

A · one status linemy pick
ELEVATED·240·◍ 6

Briefing stays the only button. Everything else becomes ONE quiet line of dot-separated chips — no stacked right column. Threat is a colored dot, not a shouty label. Calmest option; scans left-to-right.

B · full-width briefing
DEFCON elevated · 240 events · sync 4m · ◍ 6 on watch

Briefing becomes a confident full-width bar tinted by threat level (amber here). A single tiny meta line under it. Strong primary action, clear hierarchy; costs ~12px more height.

C · threat-led
● DEFCON elevated240 events
◍ 6 on watch

Lead with a slim DEFCON ribbon (the most glanceable signal), Briefing + a compact 'on watch' below. Good if threat level is the thing you most want surfaced. Briefing is secondary.

#3 control row

The control strip at the bottom of the open sheet

Today (shown first) it crams a briefing-mode dropdown, a voice picker, an OPERATOR READY status, a last-sync timestamp and a PULL FEEDS button into one cramped horizontal row — five unrelated things competing. The variants regroup them by job: one primary action, settings tucked away, status kept quiet.

NOW (the weird one)
BRIEF: Full ▾VOICE: Ops lead● READY
last sync 19:49:17 UTCPULL FEEDS

Five competing controls on one line. No hierarchy; the timestamp and status text fight the buttons.

A · action + quiet metamy pick
● operator ready · synced 2m ago · Ops-lead voice

One job per tier. PULL FEEDS is the clear primary (full-width, refresh glyph + relative time baked in). Brief-mode + voice collapse behind a single ⚙ that opens the existing Settings. Status becomes a one-line whisper. Reads as a tool, not a dashboard.

B · segmented toolbar
synced 2m ago

A single tidy toolbar: refresh, voice, brief-mode as equal-weight icon segments, with the status dot at the left edge. Compact and symmetrical. Slightly less obvious which is the primary action than A.

drag bar

Opening the sheet — beyond a bare grab handle

The thin grab handle works but isn't obviously interactive, and drag is the ONLY way up. These add an explicit, tappable affordance so people who don't think to swipe can still get there. (The drag gesture stays in all of them — this is additive.)

A · grabber + chevronmy pick
Briefingfeed: peek

A wider grabber with a chevron that TAPS through peek → half → full (and back down at the top). Swipe still works; the chevron just makes 'there's more' obvious. Try the toggle:

B · labelled pull-tab
swipe up for feed
Briefing240 events

The handle carries a tiny rotating label ('▲ swipe up for feed' → '▼ swipe down'). Zero ambiguity about what it does; very slightly noisier than a bare bar.

C · feed FAB
BriefingDEFCON elevated

Drop the drag entirely: a floating 'Feed' button on the globe opens the list as a full sheet; the peek shrinks to just Briefing + threat. Most discoverable, biggest departure from today's design language.

ideas

More mobile ideas

A grab-bag of smaller concepts worth considering — each is a sketch, not a spec. Say which are interesting and I'll prototype them properly.

discovery

Category filter chips

A horizontal scroll of Conflict / Political / Economic / … chips pinned above the feed list, so filtering is one tap instead of opening the drawer. Mirrors the globe's beacon colors.

gesture

Pull-to-refresh the feed

The native mobile gesture for 'get me the latest' — overscroll the feed to fire the same Pull Feeds call. Pairs well with shrinking the control row (#3).

continuity

Tap a globe pin → same detail sheet

Reuse the #5 detail sheet for globe-pin taps too, so tapping a beacon and tapping a feed card lead to the exact same surface. One mental model.

reachability

Filters within thumb reach

Filters live top-left (hard to reach one-handed on a big phone). A small filter button in the peek row — or the drawer edge-swipe from the bottom-left — brings it into the thumb zone.

feedback

Threat-level ambient tint

When DEFCON is CRITICAL, give the peek a subtle red top-edge glow that the whole shell shares — peripheral awareness without another label.

orientation

Landscape = split view

In landscape, put the globe left and the feed right (no sheet) — the bottom-sheet model wastes a wide-but-short viewport. Low priority, but cheap with the existing components.

What I’ll do once you pick

  • #2 / #3 / drag — tell me a letter for each (my picks are tagged my pick); I build + 4-gate + ship + verify live, same as #1/#4.
  • ideas— name the interesting ones and I’ll prototype them here first.
  • #5 detail sheet — already approved; building it next as its own pass regardless.
These pages are isolated experiments — nothing here is wired into the shipping dashboard until you adopt it.All experiments →