Helix — Mel Mencarelli

I initiated Helix, Opentrons' first unified multi-platform design system to create impact in two ways:

systemically update a disjointed look and feel across 8 products and platforms
align design and engineering workflows to increase efficiency and ensure consistency

Helix introduced a brand refresh, shared design tokens, reusable components, and cross-functional processes that connected Figma and production code. By embedding design system work into active feature development, we were able to incrementally unify the product ecosystem without requiring a dedicated platform rewrite.

Through the creation of Helix, we've positively shifted culture and collaboration between design<>dev. This has resulted in reduced discrepancies between Figma and production code, better quality code components and an increase in overall shipping speed.

Role

Lead Product Designer

Launch

Early 2023

New color system

Project Considerations

The components are the easy part. Influencing and educating cross-functionally on the benefits of design system work and building connective tissue between engineering and design through process was the tough part.

Questions I explored:

How can I communicate a shared mental model around how/why we build components?
Which contribution model is best for our team right now?
How can I upskill my team to help them feel comfortable in contributing to our design system?
How can I best advocate for this work through upcoming features on the roadmap?
What deliverables should we prioritize in the first 3 months, 6 months, year?
How can I best communicate the value of the design team to increase resources?
What Figma file structure best supports our needs as we scale our design system?

reduction in one-off component creation through increased dev<>eng collaboration

production components and shared tokens created

0>100%

Feature designer component contribution rate since the creation of Helix