← Selected work

Research decision workspace

Driftline

Driftline gives research teams a shared view of signals, evaluations, programs, and field operations—then routes attention to the decisions that will move the work forward.

Role
Product strategy · Interaction design · Design system · Engineering
When
2026
Built with
Next.js · React · TypeScript
Driftline dashboard showing portfolio flow across signals, evaluations, programs, and field operations
01

The premise

Research portfolios rarely stall because nobody is working. They stall between stages: a promising signal waits to be sorted, an evaluation finishes without a decision, a program loses its owner, or a field operation reports a blocker that nobody has answered. Those handoffs are difficult to see when evidence, ownership, and status live in separate tools.

02

The product

Driftline is a fictional decision workspace for Aster Bay Institute. It connects signals, evaluations, programs, and operations in one visible lifecycle, then surfaces the few decisions most likely to restore momentum. A searchable portfolio, people view, and four role-specific lenses let research leaders, program stewards, expedition leads, and specialists see the same work from their own responsibility boundary.

03

Explainable attention routing

The product does not hide urgency behind an opaque score. Every surfaced item shows the operating rule that triggered it, the evidence on record, elapsed time, current owner, what will clear the condition, and one concrete next action. The interface routes attention; people still decide, delegate, and support.

04

The system

  • A shared record grammar carries research work through signal, evaluation, program, and operation stages.
  • Deterministic rules identify stalled reviews, missing ownership, quiet programs, and unanswered field blockers.
  • Role lenses reorganize one portfolio around four explicit responsibility boundaries.
  • Local demo data makes the complete product flow explorable without an account or external service.
  • Light, dark, reduced-motion, forced-color, and responsive states are encoded into the interface contract.
05

The design direction

The visual language combines the calm of a research archive with the precision of an instrument panel. Deep ocean fields, pale working surfaces, semantic stage colors, compact Geist typography, and restrained motion make a dense operating model feel deliberate rather than administrative.

06

What I owned

I shaped the product premise, lifecycle and responsibility model, explainable routing rules, interaction architecture, visual system, responsive behavior, accessibility constraints, fictional research dataset, and working implementation.

Design system Living · Contract 1.0.0

The system behind the work

Driftline

A portable product method expressed as a precise ocean-research instrument: calm enough to scan, explicit enough to act.

Explore the system specimen ↗
  1. Make flow visible

    Movement and blockage appear before secondary metrics so the state of the portfolio is immediately legible.

  2. Explain the prompt

    Every intervention names its rule, evidence, age, owner, and the condition that will clear it.

  3. Preserve human judgment

    The system routes attention while people retain responsibility for deciding, delegating, and offering support.

  4. Earn the density

    Compact operational information stays readable, structured, keyboard-accessible, and resilient at smaller viewports.

Visual fingerprint

Identity, components, and proof.

A curated view of the system’s real foundations and state coverage—not a second documentation site.

01

Foundation

Semantic color

  • Deep ocean#0b2427

    Navigation and instrument field

  • Paper#f2f5f2

    Application canvas

  • Card#fbfcfa

    Raised decisions and controls

  • Mint#7dd3c7

    Healthy movement and primary action

  • Amber#e8a84e

    Threshold approaching

  • Critical#c76051

    Intervention required

  • Blue#6f9ee8

    Program-stage distinction

  • Rule#cbd7d2

    Boundaries and quiet structure

02

Foundation

Typography roles

  • Interface and display Geist

    A compact sans serif carries dense operational hierarchy without making the workspace feel administrative.

  • Instrument and metadata Geist Mono

    Rules, identifiers, stages, timestamps, and system status read like a precise research instrument.

03

Inventory

Representative components

  • Flow stage

    A lifecycle node combines volume, stall count, median age, and filter state without hiding the underlying records.

    • Moving
    • Bottleneck
    • Selected
    • Keyboard focus
  • Attention card

    A decision unit exposes severity, reason, owner, elapsed time, evidence, and one contextual next action.

    • Watch
    • Critical
    • Selected
    • Resolved
  • Role lens

    The same portfolio reorganizes around four explicit responsibility boundaries without changing the underlying work.

    • Director
    • Steward
    • Expedition lead
    • Research specialist
  • Portfolio record

    Signals, evaluations, programs, and operations share one searchable record grammar while retaining stage-specific evidence.

    • Signal
    • Evaluation
    • Program
    • Operation
04

In the product

System at work

Driftline portfolio workspace showing stage totals, filters, and research records in the viewer's system theme

Decision propagation

The handoff becomes the interface

Lifecycle flow, attention queues, and role lenses connect portfolio state to a specific person, explanation, and next action.

Accessibility and resilience Operational density remains navigable

Native controls, visible labels, pressed states, 44px targets, reduced motion, forced-color support, and 200% reflow are treated as system constraints.

Next project Synchronic Studio