Chemical Screening App Design

A tool for manufacturers and suppliers to understand potential hazards as they are developing new materials.

Discovery Research / UX UI Design / Prototyping
Hero image for Chem forward

Background

ChemFORWARD is a science-based, non-profit, value chain collaboration that has created a trusted source for cost-effective, verified information on chemical hazards and safer alternatives. In partnership with industry, ChemFORWARD is helping to end toxic chemical exposure with broad access to verified, safer chemistry.

For this project, ChemFORWARD was developing a tool for the Materials Engineering Team of one of its industry partners (a Fortune 100 tech company). The goal was for Product Engineers to be able to enter the chemical ingredients of a product they were designing and see a simple pass/fail result based on extensive chemical hazard data from ChemFORWARD's shared repository. The solution required the tool to digest complex chemical hazard data and apply customized rules for the types of formulations being evaluated. The resulting "scorecard" allowed them to make informed decisions about which formulations to use (or not use) early in the design phase of their products.
Users and Use Cases
people icon
Primary Users
Materials teams who are deciding what chemical formulations to use in the manufacturing of their electronics products, with the goal of using safer formulations.
Core Use Case
people icon
Secondary Users
Environmental Compliance Teams that work for Industry Partners to ensure industry and corporate standards are being met from the product side.
Core Use Case

Our Challenge

ChemFORWARD brought in Purpose UX to design the interface specifically for their industry partner, but with flexibility to expand to other industries and classes of chemicals in the future. This project was also treated as a "proof of concept" to articulate ChemFORWARD's vision to other industry leaders as an example of a successful partnership to improve human and environmental outcomes.

Our Process

Discovery
(~2 weeks)
We met with the ChemFORWARD team to understand the goals of the project, the challenges involved in communicating chemical hazard information, and how this new interface would fit in with their existing platform.

We interviewed members of the Materials Engineering Team and other stakeholders to understand their current processes and what the requirements might be for this new tool.
Definition Workshop
In our workshop sessions, we established success criteria for the project and completed a high-level mapping activity for the key workflows. We also uncovered some areas that needed further research - there were some key differences in how the ChemFORWARD experts were presenting chemical hazard data and how the Materials Engineers wanted to consume it, as well as some challenges in understanding how Materials Engineers organized, searched, and stored their formulation data.
High-level journey showing key workflows and app architecture
Initial Design
The workshop had validated some of our initial thoughts and led to necessary refinements in others. We didn't have answers to every question, but we had enough to move forward with initial wireframes. We presented multiple concepts for how to best organize the formulation database, as well as for how to present the chemical hazard data. We took this initial design back to the ChemFORWARD and Materials Engineering Team for feedback and refinement.

We’re not looking to replace our materials management software tool, rather, we want a lightweight way to enter an SDS [Safety Data Sheet] and get actionable info back quickly.

Refinement Workshop
(~4 weeks)
We pasted the initial wireframes into a FigJam collaborative whiteboard and led a session where stakeholders could annotate directly on the designs, as well as give verbal feedback. Presenting a concrete design in the face of uncertain requirements can help sharpen focus and get better information as opposed to trying to get everything "figured out" before starting design.
Collaborative whiteboard showing notes on wireframes
Refinement + Prototyping
(~4 weeks)
Following review of the initial design, we worked to solve the remaining challenges around organizing and displaying data in the tool, updating the hazard assessment algorithm, and applying final visual design and interaction polish.

Solutions

Provide value and flexibility with data
The success of the tool is reliant on good data - some data comes from the ChemFORWARD platform or is available in public Safety Data Sheets (SDS), but other data around materials and formulations is proprietary to suppliers. A necessary feature for this application is the ability for suppliers to keep control of their proprietary information while still accurately reporting on the hazards of their products. An additional challenge is that there are often gaps in the data (e.g. a supplier may know some of the chemicals present in a proprietary mixture, but not all).
One way we addressed this in the interface was to allow for flexible data entry when building or editing a formula and chemical profile. We also didn’t want to make the ability to run a report dependent on data that wasn’t absolutely necessary - especially as we knew that a significant use case for the app was to be experimental and assess multiple formulas in an effort to get the best results possible.
Emphasized key data points & editable table fields where appropriate
allows users to provide value even when data points are missing or incomplete. The tool can still score the available data and communicate about where there are gaps.
Screenshot of Chem forward app with improvements
Actionable data at a glance
The main use case for the Formulation Ingredient Intelligence Report tool was to help teams make data-informed decisions about what formulations to use for their product coatings - but the teams responsible for this had zero capacity for interpreting all of the hazard data that was available.
Chemical hazards can be contextual based on what type of product they are used in, their level of concentration, as well as other factors. We spent a lot of design cycles creating a view of the results that was both simple enough for non-technical users to interpret, without hiding or removing more complex considerations.
The Reporting Logic
Information graphic for chem forward
High-level score addresses majority use cases, but users can dive deeper on "incomplete" or borderline results.
The Design Solution
A final design for Chem Forward
High-level score serves for many cases, but additional flags appear where appropriate or where extra nuance should be communicated.
Visualize product potential
Another goal of this project was to create a proof-of-concept to show how an app like this could Environmental Compliance Teams across industries.
We created additional data visualizations, flow diagrams, and other assets to support telling the story of the tool and its capabilities. We helped the team visually break down screening requirements, the meaning behind screening results, and how that data could be used to create actionable graphs and data tables that could support decision-making by industry partners.
Information graphic for chem forward

Final Takeaway

Solving real problems often means handling uncertainty. It takes collaboration with subject matter experts in different disciplines to make correct decisions around how to handle complex use cases, missing data, and other challenging situations. Only through collaboration, deep engagement with experts, and iterative design processes can designers deliver valuable solutions.