From starting point to shipped.
For each screen you can toggle between the starting point, the design I proposed, and what shipped. Because I was in the codebase, not handing a file over the fence, I made a series of in-flight calls as the design met real data and edge cases. The full design also proposed net-new surfaces sequenced for a later release; what's below is the flow that shipped.
Analysis list — empty preview
An empty state that guides instead of just labeling: an illustration, a clear heading, and one sentence telling the user what selecting a row will do.
Mockup → shipped: the mockup added a "welcome back" banner, a resume-last-analysis shortcut, shared-by metadata, and an entry into a new QC Explorer. Those needed session state, sharing, and a brand-new surface — beyond a restyle — so I sequenced them. In their place I added the Runs range filter, once I saw how researchers actually narrow a long list.
Analysis list — loaded preview
The loaded preview restructured into a scannable hierarchy — headline stats, a QC-warnings callout, sample breakdown, and configuration — so a reviewer reads the analysis at a glance instead of parsing a wall of pills and notes.
Mockup → shipped: the mockup led the preview with an "Open QC Explorer" button and collaboration metadata — both needing new infrastructure. Working with real uploads, I set those aside and added the Sample Breakdown (CSF / serum / plasma) the mockup hadn't anticipated, because matrix composition is the first thing researchers check.
New analysis
A sentence-case title, a labeled required field with a real-world example, and a helpful "nothing to preview yet" state guide first-time setup.
Mockup → shipped: the mockup reimagined this as a full-page flow that led with importing runs from the connected command center. That integration was real back-end work, so the release kept New Analysis as a modal — local upload first, command-center import as the second tab — the same two paths, scoped to what could ship now.
QC: Sample
The same dense boxplot and QC table, with consistent navigation, sentence-case labels, and a single-meaning color system for the status pills — so status reads clearly at a glance.
Mockup → shipped: this is where scope showed up most. The mockup proposed a guided three-step workflow — QC → Statistics → Report — plus a net-new AI assistant and a re-categorized sidebar. Re-routing the app's navigation was beyond the release, so the brief became "keep the sitemap, apply the new system inside it." Shipping the restyle now beat shipping the re-architecture never.
Statistics
The model-summary table and options panel cleaned up — a calmer header, sentence case, and clearer grouping of the fold-change and p-value controls.
Mockup → shipped: the mockup pictured a drag-and-drop model builder — drag covariates into the model, set reference groups and effect types, a distribution chart per covariate. That's a sizeable build, so the release restyled the existing model-summary and results tables instead — statistics on the new system now, with the builder captured in the roadmap.
Download report
The report builder reorganized around scope — a clear Report Scope control up top, three labeled export groups, and a single primary action instead of scattered options.
Mockup → shipped: the mockup folded reporting into the guided wizard as a final "Generate Report" step, with a model-completed status and a bundled ZIP. Held to the existing sitemap, it shipped as a standalone, restyled Download Report — the same scope control and grouped exports, without the wizard chrome that depended on the unshipped workflow.
