Grok in the Timeline · Case Study
Product Design · IC · For xAI

Grok shouldn't be a tab. It should be a layer.

A pixel-level argument for treating Grok as ambient infrastructure inside the timeline — not a destination users have to walk to. Six surgical insertions, ordered by impact. One monochrome system. Zero new tabs.

Format
Spec doc + visual board
System
X Brand v1.0 · Helvetica Neue · Monochrome
00 · Live · Interactive

Try the prototype →

The working product. Click "Ask Grok" on any post, watch the answer stream in inline with sources. Co-write a draft. Tune your feed in plain language. The case study, made interactive.

Launch prototype
00 · Animated · Walkthrough

How it works →

An 8-step animated tour of the product in motion. Watch the six insertions fire in context. Each step pairs the interaction with its design rationale. System decision tree included.

Watch the walkthrough
01 · Visual Board

Screens

A Figma-style board of high-fidelity mocks — every Grok insertion, annotated with the design rationale behind each pixel decision. Resting and active states. Mobile and desktop.

Open screens
02 · Product Doc

Spec

The product thesis, audience, principles, six insertions, risks, metrics, and rollout. Built like a doc I'd hand a PM and an eng lead on day one of the project.

Read spec
03 · How it was made

Process

The short version of how I got here: the constraints I tightened on purpose, the directions I killed, and why the final shape is a layer and not a sidebar.

Read process
04 / System

Six principles, no exceptions

  1. 01

    Grok is a layer, not a destination

    Every Grok affordance lives inside the timeline, post detail, or compose. No new top-level tab. The destination model is the failure mode this whole spec is structured to avoid.

  2. 02

    One tap to invoke, zero to dismiss

    Grok answers expand inline below the post that prompted them. Scrolling away dismisses. No modals. No close buttons. No state to manage.

  3. 03

    Always cite. Always show confidence.

    Every Grok-rendered claim carries source chips and an explicit confidence indicator. Hidden uncertainty is dishonest. Showing it builds the calibration loop users need.

  4. 04

    Context, never verdict

    Grok surfaces underlying data. Users draw conclusions. Community Notes already does fact-checking with strong governance — that's the right tool for that job.

  5. 05

    Monochrome is the brand position

    One Grok mark, one inner-border treatment, one motion curve. No purple. No gradients. No "AI shimmer." The restraint is the point — X earns its severity, and Grok earns its place by respecting it.

  6. 06

    Latency is a feature, not a metric

    400ms first token. 1.5s full answer. If we can't hit budget on a surface, we don't ship that surface. Slower than scrolling is dead on arrival.

05 / Scope

Six insertions, ranked

01

Inline Ask-Grok

One-tap "what's this about" answer anchored to any post. The cell expands; the user never loses their place.

Impact: very high
Effort: medium
02

Thread Synthesizer

Consensus / disagreement / notable summary above any thread with ≥8 replies. Visibly generated, collapsible, sample-size disclosed.

Impact: very high
Effort: high
03

Claim-Context Chip

Quiet "context available" affordance on posts with checkable claims. Context, never verdict. Sources first.

Impact: high
Effort: medium
04

Compose Co-Writer

Private draft review — sharpen, steelman, check. The lurker → participant conversion lever.

Impact: very high
Effort: medium
05

Steerable For You

Adjust your algorithm in plain language. Diff before apply. The moat.

Impact: very high
Effort: high
06

Conversational Time-Scrub

Query X's history as a real timeline, filtered to your interest graph. Ship after 1–4 prove out.

Impact: medium
Effort: very high