Building the Uptake Design System

Creating an industrial Design System for a fast-scaling IoT AI/ML startup powering real-time, safety-critical industrial software.

My Roles

UI Design

UX Design

Design Discovery

The Uptake Design System was built for both internal and external teams. At its heart, acts as a product for products—something people would actually want to use. Because if no one’s excited to use it… it’s not much of a system.

The Uptake Design System was built for both internal and external teams. At its heart, acts as a product for products—something people would actually want to use. Because if no one’s excited to use it… it’s not much of a system.

Challenges

We Need a Hero

Uptake was a rapidly growing industrial AI/ML startup serving an extremely diverse user base—from analysts working in office environments to technicians servicing industrial machinery on-site. As the platform evolved, we faced the challenge of presenting highly complex data outputs in a clear and intuitive way.


Engineering teams were relying on their own homegrown UI kits and patterns to keep pace with demand, while UX was working quickly to scale. We needed to support theming, accessibility, and long-term scalability. In short, we needed a design system—and we needed it fast.

Objectives

A Source of Truth

Create a scalable system that keeps products cohesive and trusted across complex workflows and diverse use cases. Reduce technical debt. Accelerate client partnerships. Speed up deployment. Unite product teams across verticals. All while weaving in brand expression and moments of visual delight.

Outcomes

How Did We Do?

Over three years, the Uptake Design System grew from a simple UI kit and sticker sheet into a robust, living ecosystem. It expanded into a comprehensive documentation site and cross-functional effort uniting code, interaction patterns, UI components, guidelines, and visual standards. Designed to evolve with the product suite, the system supported continuous iteration and integration across teams.


A C H I E V E M E N T S


  • Scalable branded UI: Consistent design across light/dark themes and multiple products

  • Supportive Community: Fostered a flexible and friendly team that integrated feedback and contributions from the entire company

  • Faster product delivery: Front-loaded foundational UI patterns to free teams for higher-impact work

  • Accelerated sales cycles: Mature, consistent UI increased customer confidence and adoption

  • Lowering stress: Even if components weren't built, there was an emerging unifying language for teams


  • Cross-industry adoption: Successfully deployed across rail, wind, construction, and mining products

  • Industrial data visualization patterns: Time-series charts, threshold bands, status badges, histograms, sparklines

  • Design tokens & theming: Systemized color, spacing, ornamentation, and typography 

  • Accessibility standards: WCAG-compliant patterns tailored for severity/safety/state industrial environments

  • Clear documentation for building: Visual consistency, usage guidelines, content patterns, RFCs, and versioning workflows for Design and Product

H U R D L E S


  • Real-world testing reveals the truth. Applying the system to real scenarios exposed gaps and helped embed industry expertise into UX and data science.

  • Designing for diverse roles is challenging. We built flexible experiences that support users ranging from executives to field technicians.

  • Accessible design takes iteration. Balancing clarity, usability, and accessibility requires careful design.

  • Make measured steps. It is very easy to become overwhelmed when you need to design everything.


  • Real-world testing reveals the truth. Applying the system to real scenarios exposed gaps and helped embed industry expertise into UX and data science.

  • Designing for diverse roles is challenging. We built flexible experiences that support users ranging from executives to field technicians.

  • Accessible design takes iteration. Balancing clarity, usability, and accessibility requires careful design.

  • Make measured steps. It is very easy to become overwhelmed when you need to design everything.


  • AI needs transparency to build trust. Adoption improved when recommendations were contextual and explainable.

  • Early UX involvement matters. Engaging UX from sales through deployment improved adoption and implementation success.

  • Design for the real environment. Our software is sometimes used on an iPad, outside, in bright sunlight—so field conditions and safety constraints had to shape the design.

Customer Personas

I N T E R N A L

Interaction Designers

Todd is an interaction Designer who is new to the Design System. His current project requires batch actions on a large data table. He would like to quickly access documentation and visuals for what the capabilities and patterns are for the current Analytic Data Table.

E X T E R N A L

My Role

Visual Design from Pixel One

I was an early member of the Design System team, helping shape the initial vision for both the system and its documentation process. As a Staff Visual Designer, my work spanned research and discovery, defining component patterns, crafting pixel-precise UI, and conducting visual QA to ensure consistency and usability across the system.

As the team evolved, I expanded into a more product-oriented role, helping guide priorities, influence roadmap decisions, and define the long-term strategy for adoption and external contributions.


The Initial Team

Discovery & Foundations

Once we had buy-in from the broader organization, we began by interviewing different engineering and product teams to understand which foundational “parts” would most immediately ease their day-to-day challenges. The insights from those conversations helped shape our early roadmap.


At the same time, we moved quickly to establish the system’s visual language, processes, primitives, and tokens. Like many early design system efforts, the process was messy, iterative, occasionally political, and often easy to overthink—but it was also where the foundation began to take shape.

Tokens for Theming

Expansion

As we started building the most fundamental components—buttons, inputs, icons, alerts, and more—we began to notice patterns emerging in our workflow. Those patterns helped us better estimate the time and effort required for future work and gave the team a clearer sense of momentum.



At one point, the roadmap had grown so extensive that the team ultimately tripled in size to help accelerate the system’s output and adoption.


Working on an evolving design system has been incredibly fulfilling. Watching the team scale, tackle new challenges, and learn from how components were used over time deepened my appreciation for the power and elegance of systems thinking. If you'd like to see more, check out my case study for the Documentation Site.


Working on an evolving design system has been incredibly fulfilling. Watching the team scale, tackle new challenges, and learn from how components were used over time deepened my appreciation for the power and elegance of systems thinking.

Examples of it all coming together

Below are a few examples of the work I contributed while on The Uptake Design System

Below are a few examples of the work I contributed while on The Uptake Design System