The redesign, explained
The previous page had the right brand — near-black ink, disciplined gold — but told its story statically: a changelog aimed at existing users, an invisible chart, one repeated CTA, and no motion. This rebuild keeps the identity and re-tells the story for a first-time university visitor.
Institutional dark luxury × editorial broadsheet — the gravitas of an endowment report with the precision of a data product. Everything on the page derives from that sentence: the three typographic voices, the gold-on-ink palette with one warm accent per section, generous negative space with asymmetric step offsets, and motion that demonstrates the product rather than decorates the page. No stock imagery — every visual is the product’s own geometry, drawn in CSS.
Before
Static stat cards next to the headline; the benchmark chart rendered almost invisibly (dark bars on a dark card).
After
A self-drafting schedule board: sections place themselves onto a week grid, a conflict flares and resolves, and the draft completes — a pure-CSS timeline.
Why: The product’s core promise (AI drafts, human decides) is shown in eight seconds instead of described. Motion carries the story; the final frame still works as a static image.
Before
One voice — everything set in the body font at similar weights. The Archivo display font was loaded but unused.
After
Three voices: Archivo (loaded weight, headlines), Instrument Serif italic (a single editorial accent per section), JetBrains Mono (data annotations, eyebrows, axis labels).
Why: Scale and voice contrast is what separates editorial design from a template. The mono voice also signals ‘data product’ without a single screenshot.
Before
A changelog written in past tense for existing users — meaningless to a first-time visitor.
After
“Inside the product”: a bento of four surfaces (Workspace, Stages, Conflict co-pilot, Benchmarks) with miniature CSS vignettes of each.
Why: First-time visitors need to see what the product is, not what shipped last sprint. Vignettes give product proof without maintaining screenshots.
Before
Four gray micro-text phrases in a strip; security never got its own section.
After
An animated commitments marquee, a dedicated Security section (FERPA, tenant isolation, opt-in, human sign-off), a five-question governance FAQ, and an honest stat band.
Why: Universities buy on governance. The questions a registrar will ask now have answers on the page instead of in a sales call.
Before
Bars at near-background contrast, no axis context, a vague gold panel reading “+ clear context”.
After
Visible bars that grow on scroll, a dashed “you” percentile marker, mono axis labels, and a rewritten decision-edge panel.
Why: The chart is the product’s signature visual — it has to read in one glance and survive a squint test.
Before
One CTA (“Start a schedule”) repeated three times; footer was two lines.
After
Primary CTA plus a lower-commitment secondary (“Explore the live demo”) at hero, mid-page, and close; a real footer with product, university, and guide navigation.
Why: Enterprise visitors rarely sign up on first touch. The demo path captures interest the signup button loses.
Full-page screenshots at desktop and mobile, reviewed against the design-quality checklist: hierarchy through scale contrast, varied section rhythm (no uniform padding), intentional hover/focus states, and no template patterns. Fixes from this pass: benchmark bar contrast, stat-band divider rhythm, hero glow balance, and step-card offsets.
A first-visitor walkthrough of the narrative: promise → proof → product → benchmark → governance → ask. Fixes from this pass: rewrote the changelog section into product storytelling, added the FAQ and secondary demo CTA, softened any claim the product can’t substantiate, and cut copy that spoke to existing users.
Rendered at 320, 375, 768, 1024, and 1440 px; keyboard-tabbed the full page; verified prefers-reduced-motion renders every animation’s final state; ran the production build and the page test suite. Fixes from this pass: marquee duplication marked aria-hidden, mobile stat grid, details/summary focus rings, and safe font fallbacks.
The same editorial language was then carried into every product surface — Workspace, the Schedule stages and subpanels, People & Rooms, and Analytics — by retheming the app’s design-token layer rather than repainting components: warm ink grounds in dark mode, warm ivory paper in light mode, the same disciplined gold. Because the dashboard is token-driven (and guarded by tests that forbid hardcoded palette colors), one token file restyled every panel in both themes at once. The remaining two dozen components that had hardcoded dark-only styling were converted to tokens — which also fixed them in light mode, where they had been rendering as dark cards on paper.
<details>.animation-delays, a conflict flare keyframe, a relocation transform, and a progress fill — one-shot, then it settles. prefers-reduced-motion override that renders its final frame — the board simply appears completed.