Noodle.ai

Quality Flow

Role

Lead product designer

Primary Tool

Figma

Year

2020-2022

An enterprise application using AI/ML to enable manufacturing operators to identify root causes of product defects — and prevent them from happening.

AI/ML

b2b

SaaS

Product Design

Data Viz

Manufacturing

Data Analyis

Background

Manufacturers loose $1 Trillion each year to the production of defective units. My team at Noodle had an ambitious goal to harness AI/ML to uncover hidden patterns in the production process and identify the root causes of defects. But large questions remained as far as how to turn this capability into a usable application.

My Role

In my role as the lead product designer, I played a pivotal role in the project's inception, working on the 0 to 1 phase. I conducted user research, mapped out essential workflows, mocked up high-fidelity screens as part of an interface that effectively conveying intricate data science in a straight forward visual language tailored to machine operators. I did this while fostering a close collaboration with both product and engineering teams to launch and release an impactful web app.

As part of the 0 to 1 phase, I conducted user research, mapped out workflows, and fostered close collaboration with product and engineering teams

Solution

A workflow that puts AI/ML at the fingertips of machine operators to identify previously hidden patterns and the proper levers to fix them.

Workflow

Rather than going in chronological order of my process, I'm showing finished screens at the top because, well, that's what a lot of you are here for. Please keep scrolling if you are interested in process :)

Screens

Using our Noodle UI library and user experience and visual design principles, I mocked up Quality Flow screens as part of my hand-off to our front-end engineers.

Rather than going in chronological order of my process, I'm showing finished screens at the top because, well, that's what a lot of you are here for. Please keep scrolling if you are interested in process :)

The first step in the user flow is to set the parameters for the model run. The user specifies what type of defect they would like to diagnose, and what subset of products to examine.

The Defect Type selection screen gives supporting metrics to support the user’s decision making pre-model run.

There are several more parameters to set before running the model. On this screen they select the time frame. A step bar on the left helps the user track where they are in the process.

Once the model has run, the user views a “Diagnosis” of the defect with different tabs revealing different ways of visualizing the data. Here, two production parameters are shown, indicating at what intersection defects are more likely to occur in the product.

In another view within the Diagnosis screen, AI defined parameters are shown visually.

Once patterns are established, the application’s monitor function allows the user to spot when those patterns are at risk of occurring.

Watchlists are evaluated over time to see if they align with defective products

Head to head comparisons allow for the user to see the predicted results of on-the-fly process adjustments.

Research
User research

I did field studies at steel mills and got a better understanding of the environment where operators worked. I asked them about their use case, and viewed the environment in which our application would be used.

Results

Quality Flow dramatically reduces the Total Cost of Quality  across a diverse set of industries — from candy to steel. 25-35% reduction in Total Cost of Quality, 15-35% decrease in quality variability, over 25% reduction in defect rate, 15-20% increase in (First Pass) Yield. Over 60% decrease in inspection and RCA time. Substantial reduction in scrap and rework. The application brings in $5M ARR and continues to build traction.

Google

Sampi

A powerful analytics tool that enables Google's email marketing managers to gain valuable insights from their email data

Email Marketing

Product Design

Data Viz

Internal Tool

Let's go

Colophon

Inter is a versatile sans-serif typeface designed by Rasmus Andersson in 2016. Created for screen readability, it features clean lines, excellent kerning, and optimized legibility at small sizes. Widely used in digital interfaces, Inter has become a favorite for its modern, approachable design and extensive language support. You can contribute to it at github.com/rsms/inter.

Space Grotesk is a proportional sans-serif typeface variant based on Colophon Foundry's fixed-width Space Mono family (2016). Originally designed by Florian Karsten in 2018, Space Grotesk retains the monospace's idiosyncratic details while optimizing for improved readability at non-display sizes. You can contribute to it at github.com/floriankarsten/space-grotesk

This site was designed in Figma and built using Framer. It was made by Jordan Rothe in Oakland, California in 2023, and updated in 2024 and 2025.

Colophon

Inter is a versatile sans-serif typeface designed by Rasmus Andersson in 2016. Created for screen readability, it features clean lines, excellent kerning, and optimized legibility at small sizes. Widely used in digital interfaces, Inter has become a favorite for its modern, approachable design and extensive language support. You can contribute to it at github.com/rsms/inter.

Space Grotesk is a proportional sans-serif typeface variant based on Colophon Foundry's fixed-width Space Mono family (2016). Originally designed by Florian Karsten in 2018, Space Grotesk retains the monospace's idiosyncratic details while optimizing for improved readability at non-display sizes. You can contribute to it at github.com/floriankarsten/space-grotesk

This site was designed in Figma and built using Framer. It was made by Jordan Rothe in Oakland, California in 2023, and updated in 2024 and 2025.

Colophon

Inter is a versatile sans-serif typeface designed by Rasmus Andersson in 2016. Created for screen readability, it features clean lines, excellent kerning, and optimized legibility at small sizes. Widely used in digital interfaces, Inter has become a favorite for its modern, approachable design and extensive language support. You can contribute to it at github.com/rsms/inter.

Space Grotesk is a proportional sans-serif typeface variant based on Colophon Foundry's fixed-width Space Mono family (2016). Originally designed by Florian Karsten in 2018, Space Grotesk retains the monospace's idiosyncratic details while optimizing for improved readability at non-display sizes. You can contribute to it at github.com/floriankarsten/space-grotesk

This site was designed in Figma and built using Framer. It was made by Jordan Rothe in Oakland, California in 2023, and updated in 2024 and 2025.