Product Designer
Based in San Francisco Bay Area
Product designer with a passion for user centered design, AI, and data visualization; currently working to improve supply chains.
Case Study 1
Noodle.ai
Inventory Flow
Role
Lead product designer
Primary Tool
Figma
Year
2022-2023
A SaaS product using AI to enable distribution managers to anticipate and address supply chain problems before they arise
AI/ML
b2b
SaaS
Product Design
Data Viz
Supply Chain
Background
The global supply chain is hugely volatile, and when products aren’t available on the shelves when consumers want them, companies loose money. Inventory Flow was built to mitigate these risks, however, the app was suffering from a bloated, unintuitive interface, and we discovered that our customers were not using the existing UI.
My Role
I was brought in to fix a UI that had become overly complex and unintuitive. I was the lead product designer on the product, and while I worked closely with our product and engineering teams, I drove the redesign.
I was brought in to fix a UI that had become overly complex and didn’t fit our users needs.
Solution
Screens
A new interface redesigned from root to branch consolidates screens, gives more clear way finding cues, and illustrates the interconnectedness between transit hubs.
Rather than going in chronological order of my process, I'm showing final work at the top. Please keep scrolling if you are interested in process.
In the redesign, all interactions and information occur within the same “space”.This allows the user to remain oriented while drilling up and down through different hierarchies of information.
This screen shows “small multiples” of bar charts, showing how great supply shortages are at all hubs over a 13 weeks horizon.
I designed the hub starburst to be a clickable element, which opens the detail panel on the right. Now, all the details that were previously shown at a top level are shown in a drill down.
The new design includes a "compare plans" view that allows the user to see side-by-side views of different distribution plans and assess which plan is best for the given situation.
I utilized panels and tiered drill-downs within a single-page app to resolve an issue users were having of getting lost within the information architecture
Each arrow represents an "edge", or space between two hubs. I designed these to use width to indicate volume being transferred, and each edge is a clickable element which opens a panel showing all shipments made in the user specified time window.
Research
Lots of research led up to the screens you see above. What needed to be changed? How processes were our users taking within the application? I employed a handful of research types.
Heuristic evaluation of existing application
For starters, I did a heuristic evaluation of the app. What issues did I see that would impact the apps usability or cause our users unnecessary cognitive load?
Stakeholder interviews
In order find the roots of this problem I had to better understand what the issues were. I met with Stakeholders within Noodle — from the product team to better understand the strategic direction of the app, as well as Enterprise Services who were closer to our customers and had an excellent understanding of their needs. Additionally, I met with and researched our potential users, Distribution Planners at Enterprise companies in charge of local, regional, and global supply networks. I compiled the results of my research and narrowed it to the following list. While many other issues came to light in my research, these were the recurring items, and a small enough list that I could get the team behind it:
Enterprise Services
Product Leadership
Engineering
User research
I needed to find out more about how planners were currently using our application, and I knew user research would be key. The question was what type of research would be most beneficial to this project. I landed on remote moderated testing, in which I selected a handful of existing users and had them walk me through how they would go about accomplishing some key tasks in the application.
—Distribution Planner
Task & workflow analysis
I charted each step of our users process for some key tasks including “Accepting an AI-generated recommendation” and “Create task list for manual distribution changes”. The Task Analysis shows a wholistic view of a single users steps between the Noodle application and other applications, while the Workflow Analysis shows a process with steps shared between a team of different roles and archetypes.
The Task Analysis shows a wholistic view of a single users steps between the Noodle application and other applications
The Task Analysis shows a wholistic view of a single users steps between the Noodle application and other applications
I compiled the results of my research and narrowed it to the following list. While many other issues came to light in my research, these were the recurring items, and a small enough list that I could get the team behind it:
Research Conclusions
Can't zoom out to see interdependence of nodes
Can’t compare various distribution plans or do scenario analysis
No consistent underlying navigation
Too many clicks
Accepting and rejecting individual stock transfers is far too slow
Results
While this was a recent update, the initial reaction from our users has been quite positive. This is still very much in process and additional user testing will allow Noodle.ai to further improve on the application.
Case Study 2
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
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.
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
Case Study 2
Noodle.ai
Quality Flow
Agency
Epsilon
Role
Art Director — UI/UX
Primary Tool
Photoshop
Year
2015
A powerful analytics tool that enables Google's email marketing managers to gain valuable insights from their email data
Background
Email marketing managers for the Adwords product at Google were running reports to measure the success of all of their many email campaigns. Google came to Epsilon to create a tool to speed up and improve their data analysis capailities.
My Role
I was an art director doing UX and UI for Epsilon. I worked in a small group to deliver this product to Google.
Agency
Product Design
Data Viz
Email Marketing
An internal tool that allowed users to see success metrics at a global level all the way down to individual A/B side-by-side comparisons.
Solution
An internal tool that allowed its users to explore data pertaining to their email marketing campaigns that allowed them to see which email blasts were doing well and which were falling behind, and to zoom out to the global level, or zoom all the way in to A/B tests of a single email blast. They could do this across major success criteria including Open Rate, Click Rate, and Bounce Rate.
Screens
All pertinent success metrics for email campaigns is shown across a time dimension.
Dashboard View
The Dashboard is the initial view for the user in Sampi. It provides a quick overview of the most pertinent data. Filters on the left allow the user to refine their search by product, program, message name, and other factors.
Calendar
In the calendar section, the user can see a visual heat map to see trends that occur over the course of the month. By using the metric drop-down, the user can heat map any of the five main metrics.
Deployment Detail
When the user clicks on an individual deployment card, she is taken to deployment report, which provides a creative view and more details on the deployment. From here, the user can Export the HTML in all languages, download a PDF, or share the report via email.
Results
Sampi was a huge success within Google. Numerous product beyond Adwords adopted it, and it helped build a relationship between Google and Epsilon.