pairing mind
Chosen direction: Storefront, on-brand Pattern tiles with PAIR tabs →

Three directions for a workspace people want to open

Each direction is a clickable prototype of the same two screens: the course home and the Class 1 page. Same content, same steps, same prompts. Only the experience changes. Pick one, or mix parts of them.

What stays fixed

The Pairing Mind mark and wordmark, Plus Jakarta Sans and Source Sans 3, carbon and the Pairing Mind blue. What's open: the colour range, imagery, layout and density. The three directions differ in how far they move from today's site.

What's wrong with the current site

  1. HighIt reads as a website, not an app. Nothing invites you to explore or come back. (Chad and Jeff, October 19)
  2. HighOne colour and no imagery. There is nothing to look at, so the work feels smaller than it is.
  3. MediumToo much empty space: clean, but sterile.
  4. MediumThe main action, copying a prompt into Claude, looks like a small text block instead of the main button.
  5. MediumThe ten classes are a list, not things you want to open.
A · Refine

Cinematic

Today's light look, made bold: full-width colour bands, oversized type and big numbers. Apple-style: clean, not sterile.

Message

Outcome first: "Today you build your first app."

Layout

Full-bleed bands: split hero, a strip of ten coloured class tiles, a dark band for projects.

UI

Very large copy buttons, numbered step panels, almost no empty space.

Visual

Light base. Each class gets its own saturated colour. Big numerals and filled icons do the work of imagery.

References

Apple iPhone pages · Kira Learning

Cost: the smallest rebuild (about a day). It is still a page you scroll, not an app you navigate, so it may not fully answer "feels like a website".
  • No gradients: solid colour fields only.
  • No stock photos standing in for imagery.
  • No centred wall of text in the hero.
Open prototype A →
B · Extend

Storefront

An app shell with a sidebar and rows of 16:9 thumbnails, like YouTube or a streaming app. Chad's thumbnail idea, built out.

Message

Choice and progress: "Here's what's on today, and everything coming up."

Layout

Sidebar app shell; a featured class, then scrolling rows: classes, prompts, projects. The class page is a watch page with a step playlist.

UI

Thumbnail cards with badges (Today · Live, 90 min), a playlist of steps, big copy buttons.

Visual

Neutral grey canvas so the coloured thumbnails carry the colour. Future classes look muted until they open.

References

YouTube home and watch page · MasterClass catalog · Apple TV app

Cost: about two days. Thumbnails are only as good as their art, so ten classes need ten designed covers. It can look like a video site with no videos.
  • No play buttons on things that aren't videos.
  • No fake view counts or ratings.
  • No auto-scrolling carousels.
Open prototype B →See 6 tile variations →
C · Push

Command center

A dark dashboard with game energy: today's mission, a ten-level course map, status chips and launch buttons.

Message

Action: "Today's mission: run your Context Interview."

Layout

Dashboard grid: status bar, mission panel, projects panel, level map. The class page is a mission briefing with objectives.

UI

Launch buttons in lime, level tiles L01–L10, tags in a monospace font.

Visual

Dark carbon base, Pairing Mind blue for the mission, one high-energy accent (lime).

References

Linear · Raycast Store · Duolingo learning path

Cost: the biggest rebuild (two to three days). Dark and "missions" may feel intimidating or childish to some professionals, and it clashes with light Circle and Claude. Contrast needs checking.
  • No glows or neon shadows on dark.
  • No made-up points, streaks or scores.
  • No pure black background.
Open prototype C →

How to give feedback

Open each prototype, click into Class 1 and press the copy buttons. Then tell Jeff which direction wins, or which parts to combine (for example, B's thumbnails with C's mission panel). The chosen direction becomes the design for the live workspace.

Prototype only: the student, projects and dates for Classes 3–10 are placeholders. Icons from Phosphor. References are linked, not reproduced. October 19, 2026.