Noodle.ai
UI pattern library
Role
Lead product designer
Collaborator
Joe Golike,
Director of Design Technology
Year
2020
A UI Pattern Library to promote consistency across Noodle applications and streamline development
Design System
Atomic design
Component system
Data Viz
Atoms
Color
Noodle brought in Ueno, an outside branding agency to build us a new brand. We took the opportunity to update our UI Library as well.
Background
Ueno created created a brand that included a very striking color set — with a challenging set of colors. This posed a challenge for us. Noodle applications use visuals heavily to depict data. We needed a robust set of colors
Our UI color set had different requirements than the brand colors, but still had to exist harmoniously with it. There are some nuts and bolts requirements, like you would have in any application user interface — red, yellow, and green for statuses, red for alerts, etc. Additionally, we have a lot of data that needs to be visualized, and color is an important tool for doing this. To represent different data types, we would need a categorical color set, sequential color set, and divergent color set. And when the brand yellow appeared on the same screen, it all had to be harmonious together.
To represent different data types, we would need a categorical color set, a sequential color set, and a divergent color set.
When it comes to colors in data visualization, we are standing on the shoulders of giants. We took as a starting point the D3 Category10 color set because it has distinct, evenly distributed colors.
We wanted colors that could be used in a range of dark and light, and so we eliminated two of the colors that become too hard to distinguish form each other at various brightness levels.
We took this remaining set and, using the HSB color model, matched the Saturation level of the brand yellow at different color points across the hue spectrum, pinning our colors to nameable points. We also made sure that our colors fell at various brightness levels, to reinforce differences and make them more visible to people with color blindness.
Here is our resulting color set, Noodle Cat8:
Additionally, because our apps function in dark mode or light mode, depending on system settings, each color needs to be visible on a dark background as well.
We also had all these 33 grays.
Text
The branding agency selected two typefaces for Noodle, Aeonik, a geometric sans-serif similar to Helvetica, and Roboto, another geometric sans-serif.
We had some decisions to make in terms of how to use the typefaces. We decided to use Aeonik, our most distint font, as our main interface workhorse. In an effort to make designing with our systme as simple as possible, we opted to use only the one font in the UI.
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
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
