A product's identity, built on three fronts in one year: the name, the public face, and the system that ships it

Company

Boston Bioprocess

Role

Sole product designer

Product

Yanta, an MES/LIMS for bioprocess labs

Project details

Timeline: Oct 2025 – Oct 2026
Team (hover for details):
The problem

When I joined, the product was in stealth with no name or mark, and the company website didn't mention it. As it matured, it needed a brand and a launch.

The interface had a second problem. It was initially built on MUI, a strong library, but our customization overrides had become hard to maintain. The team agreed to migrate to shadcn/ui, which puts the component code in our hands and gives us full control over it. The cost of moving slowly was rework: until all new components landed, engineers kept building features with MUI.

Constraints
  • No pause in feature workWe were racing to launch the product and start generating revenue.
  • A fundraising deadlineThe website and brand had to be ready in time, on a fixed budget.
  • A compressed timelineA design system usually takes one to two months; this one had a much shorter window.
Approach

I ran three efforts in sequence, each fitted around full-time feature work and ordered by what the business needed first.

  1. WebsiteLiveView
  2. Product brandingShipped
  3. Design systemShipped

The website: one story for two businesses

The stakeholders had already tried a freelancer and weren't satisfied with the result. They asked me to take it on, with two weeks to deliver.

The harder work was the story, not the screens. I had to present a lab-services business and a software product side by side without reading as two companies. Client work had to stay anonymous, and the site had to serve all the three audiences.

Animation by Nikita Skopych
Animation by Nikita Skopych

The brand: a mark that tells the story

My first move was a rule, not a sketch: any direction not recognizable in a 0.5 cm square was out. A digital product meets its mark first as an app icon and a favicon.

The concept came from the product's purpose. Bioprocessing science is highly evolved, but the systems holding it together rarely are, so information fragments between the run and the result. Yanta is built to close that gap.

The mark carries that promise: three pillars — Execution, Data Management and Process Intelligence — bound by one continuous flow. Like a centrifuge resolving a mixture into its components, Yanta brings the layers of a process into clarity.

The Yanta mark, three columns of linked loops, beside the yanta logotype on a construction grid, above the brand palette of ten colours: teal, dark teal, brand green, dark green, white, light green, matt black, grey, light grey and light teal.
Brand collage: a halftone vial cut-out beside a scientist at a lab bench, on blocks of grey, teal and light green with molecule line drawings.Brand collage: the white Yanta mark and logotype on teal, beside a halftone photo of a scientist using a pipette, on blocks of green and teal with hand-drawn diagrams.

The design system: one source of truth

I started the foundations in Figma, but each component took significant time to build, stretching an already tight timeline. In parallel, I tested Claude Code and Cursor with the Figma MCP server, and my first attempt to build with AI failed. I began with a complex component, a SQL editor. After two 16-hour sessions nothing was shippable: without context, the AI kept generating its own hard-coded primitives and tokens instead of using ours.

What was missing was the system's context; access to the Figma design system file alone wasn't enough. So I rebuilt the workflow in three layers:

  1. Context. A design.md file that gives Claude the system's rules before it touches a layout.
  2. A build template. A reusable Claude Code prompt that enforces token discipline, reuse before recreation, showcase grids for review, and an audit that must report zero hard-coded fills.
  3. A component template. A second prompt that builds each component from shadcn/ui, using the system's own primitives and tokens.

With these in place, the picture changed completely. For example, a complete tooltip component, with every variant and state, took 26 minutes, first pass. That pace is what made the full component set possible in three weeks.

A tilted spread of Yanta design system components in use: a batch-record table, calendars, a parameter heatmap, a SQL editor, buttons in their default, hover, focus and disabled states, a run menu, status badges and chips, vessel cards and a fermentation chart.

What I'd carry forward

  • Context beats capability. The AI tools only became useful once they knew the system's rules. I now start with context and foundations, not the hardest component.
  • Judgment stays with me. AI does the volume work; I decide what should exist and what ships. Checks catch hard-coded values and recreated primitives, but only judgment catches a screen that passes every check and is still wrong for the task.
  • Prototype in the real system. With the design system in code, I skip wireframes, not exploration. Alternative directions are explored directly in high fidelity with real components, so what gets approved is what gets built.
  • Speed is a consistency decision. Every week of transition meant features built on two systems. Moving fast was how I protected quality.

Curious about the journey? Let’s dive deeper

This showcase is merely a glimpse; the true essence lies in the journey itself. If you're intrigued, let's chat—I’ll happily share insights, challenges, and even some juicy gossip from behind the scenes.

Copyright © 2025 Anamitra Jana