Design Engine Dashboard

A 12-color data visualization system and visual language for an AI biotech startup—designed for scientists and investors alike.

TL;DR — An AI biotech startup needed their scientist-facing dashboard to be both usable for researchers and impressive for investors. I designed a 12-color data visualization system with multiple accessibility modes, built a visual language that could propagate across the product from a handful of critical views, and redesigned their website pro bono because a great product behind a mediocre website is a missed opportunity. The core insight: when you're designing for two audiences with conflicting needs (data density vs. clarity), the tension doesn't weaken the design — it strengthens it.

The Challenge

Ordaōs Bio uses generative AI to design novel therapeutic mini-proteins. Their Design Engine dashboard—where scientists run experiments and evaluate protein candidates—had never been designed with a human-centric approach. It was a developer-built product that needed to serve two audiences: scientists making complex decisions with multi-dimensional data, and investors evaluating the company's AI capabilities.

Mini-proteins (miniPRO™) = Therapeutic proteins ~20x smaller than traditional antibodies, designed entirely by AI. Scientists use the Design Engine to evaluate candidates for binding affinity, stability, solubility, and other drug-like properties.

Role & Scope

Design Consultant—sole designer brought in to bring human-centered design thinking to a deeply technical biotech product
Dashboard UX & Data Visualization—redesigned critical views, built a 12-color data system, designed core React components
Visual Language & Systems—created a systematic visual language designed to propagate across all product views
Website Redesign (pro bono)—redesigned the marketing website to match the product's new level of polish, supporting investor and partnership conversations

Approach & Methodology

I structured the engagement around two strategic design lanes and a tight three-month timeline:

Lane 1 — Data Visualization (for scientists): Redesigned complex data views for at-a-glance understanding. Built a 12-color system with consistent sequencing, plus monochrome, heat map, and contrast-intensity alternatives for accessibility and different contexts.
Lane 2 — Layout & Visual Polish (for investors): Elevated the overall visual language to communicate sophistication and production-readiness during demos and fundraising conversations.
Critical views + propagation strategy: Identified the highest-impact screens, designed those thoroughly, then extracted a visual language system the CPO could apply across remaining views independently.

Propagation strategy = Instead of redesigning every screen, you design the critical ones deeply and extract a systematic visual language (spacing, color, typography, component patterns) that can be applied to everything else. It's how you scale design impact in a tight timeline.

Key Design Decisions

12-color sequential system: Designed colors to combine in a fixed order for consistency across experiments. Scientists recognize patterns faster because the visual encoding is predictable.
Multiple color modes: Provided monochrome, heat map, and contrast-intensity alternatives—acknowledging that 12 simultaneous categories push the limits of human color perception.
Trade-off transparency: Presented multiple design options with honest trade-off analysis (data density vs. cognitive load, accessibility vs. visual richness) rather than prescribing a single solution.
Pro bono website redesign: Redesigned the marketing website outside project scope to complete the business story—a great product needs a matching front door.

Color encoding = Using color to represent different categories in data. The challenge with 12 categories is that human color perception can reliably distinguish far fewer—which is why alternative modes exist.

Outcomes

Redesigned dashboard shipped with systematic visual language, 12-color data system, and core React components
Visual language system designed for propagation—CPO continued applying it to remaining views post-engagement
Website redesign strengthened investor-facing communications and partner conversations
Iconography system and React-ready component specifications reduced future design-to-engineering translation time

Tools & Methods

Figma (component design, prototyping, data visualization exploration), React component specification, color system design with accessibility analysis, systematic visual language documentation, stakeholder presentation with trade-off frameworks, pro bono strategic design.

That Was Then, This Is Now

The philosophy holds—dual-audience design, critical views + propagation, trade-off transparency. But AI changes the timeline. I'd invest more in user research (using AI to analyze scientist interview transcripts), scaffold a Storybook component library from day one, and generate more data visualization alternatives in the divergent phase. Think slow, act fast—with AI making the "act fast" part dramatically faster.

Storybook = A tool for building UI components in isolation. Creates a browsable catalog of every component showing all its states. Like a visual dictionary of the interface.

Lessons Learned

Dual-audience design (scientists + investors) creates productive tension that makes the work stronger for both
12-category color systems require humility—provide alternative modes rather than pretending one palette works for everything
The highest-value consulting work is shaping the brief, not just executing it
For early-stage companies, coherence between product and marketing is worth more than either alone

Credits

Solo design engagement in direct collaboration with the CPO Tim Shelburne.