Sunthetics Campaign Redesign
This Quarto website is meant to be a guide for the reorganization of the Sunthetics campaign dashboard. As features have been added over time, the dashboard has become cluttered and difficult to navigate. Elements from data, modeling, shap, and optimization workflows have also become highly mixed, making it difficult to intelligently add new components. Clients are getting lost and requesting features we already have because the organiation and vocabulary we use is not based on a sound conceptual and theoretical foundation.
This redesign aims to streamline the user experience by organizing features into logical sections and improving overall usability.
Design Principles
The platform redesign is guided by five key design principles that ensure the product is intuitive, professional, and adaptable to user needs:
| Goal | Supporting Strategies |
|---|---|
| User Friendly | Clear, action-driven labels, logical structure (Top level = noun based, sublevel = action based) |
| Professional | Balanced tone between approachable and technical for our two audiences |
| Modular | Easy to add new sections that are based on individual workflows. |
| Concise | Short labels and clear focus questions. Labels should not be vague. They should be specific enough for chemists to understand right away. |
| User-Centric | Use terms that align with users’ mental models, not necessarily what your dev team calls it. |
Redesign Layout
The following table is meant to be a guide for reorganizing and editing our current dashboard set up. It is divided by main sections and subsections, creating a hierarchy for both tab or sidebar design, as well as modularity for future separation.
| Main Section (Module) | Subsection | Focus | Example Questions | Key Tools |
|---|---|---|---|---|
| Data Overview | 🛠️ Review Campaign | What decisions and assumptions have I already made about my project? | How did I set my variable types? What were my optimization goals and constraints? | Summary text and tables, Description, Relevant Tags, Overall warning messages |
| Data Overview | 📊 Explore Data | What’s in my dataset, and how are my variables distributed, related, and missing? | Are any of my variables highly correlated? Where do I have missing data? How is my data distributed? | Correlation matrices, box plots, Histograms, Missing value map, Training data scatter plots, Time Profile, Untested regions map, Possible Transfer Learning (TBD) |
| Chemical Insights | 🧪 Explore Chemicals | How do my chemicals relate to others? | What alternative solvents could I use? What functional groups are my compounds in? | Cluster Analysis, Molecular and property tables, Health and Toxicity Warnings |
| Chemical Insights | 🧬 Predict Properties | What properties can I predict to better understand my chemical variables? | Can I predict boiling points, solubilities, or other missing properties? Which molecular features are most important for modeling? | Property Prediction Models, Alternative “green suggestions” |
| Model Insights | 📈 Evaluate Performance | How accurate and reliable are my model’s predictions? | How accurate is my model? How confident am I in its predictions? | Error metrics, Prediction Error Plot, Uncertainty Calibration Plots, Manual Prediction |
| Model Insights | 🔭 Explore Predictive Landscape | How does my model’s behavior change across different input conditions? | What happens to my predictions if I change one or more inputs? How do predictions change across the data space? | Manual Prediction, Prediction Data Scatter Plots, Response Surfaces, What-If Simulations |
| Model Insights | 🧠 Explain Variable Importance | How do different features—and their interactions—impact my model’s predictions? | Which variables influence my predictions the most? How do features rank in importance? | Shapley Values, Permutation Importance, Partial Dependence Plots |
| Model Insights | 🔗 Discover Causal Drivers | What factors are actually causing changes in my outputs? | Does changing temperature cause higher yield, or is it just correlated? What would happen if I changed this variable? | Causal Graphs, Treatment Effects, Counterfactual Predictions, Causal Discovery, DoWhy Operations |
| Experiment Planning | 🧪 Review Suggested Experiments | What experiments should I run next to optimize based on my goals. | What experiments should I run next to optimize my system? | Suggestions Table, Best-so-far Tracker, Acquisition Function Values, Time Profile |
| Experiment Planning | 🎯 Explore Trade-offs | How do my objectives balance against each other, and where are the best trade-offs? | What happens if I prioritize objective 2 more than before? What is the best trade-off between my goals? | Pareto Front, Pareto and Separately Optimized Table, Reduced Dimensionality Map (maybe) |
| Experiment Planning | 🔍 Monitor Progress | How much progress have I achieved throughout my optimization process? | By how much has my yield increased after three iterations? How has my hypervolume increased? | Input Distribution Over Time, Delta Improvements (yield, hypervolume, model error) |
Plot & Table Title Guidelines
To ensure consistency, clarity, and accessibility across the platform, all plots and tables should use a three-level hierarchy:
🔑 1️⃣ Title (Plain Language)
Use short noun-based titles that clearly communicate the content or topic of the visualization.
These titles should be scannable and specific, helping users identify what the plot or table shows at a glance.
Switch to verb-based titles only when the user is actively interacting with the visualization (e.g., sliders, what-if tools).
Examples:
- Noun-based: “Prediction Error”, “Variable Importance”, “Objective Trade-offs”
- Verb-based (for interactive tools): “Simulate Process Changes”, “Compare Candidate Experiments”
🔑 2️⃣ Subtitle (Method, Plot Type, or User Action)
Use subtitles to clarify the technical method, visualization type, or the user action the visualization supports.
Subtitles should be short and placed in parentheses or as a secondary label beneath the title.
They bridge the gap between plain-language titles and more technical or interactive context.
Examples:
- “(Bar Plot using SHAP Values)”
- “(Compare Error Metrics Across Outputs)”
- “(User Input: What-If Simulation Results)”
🔑 3️⃣ Tooltip/Info Icon
Tooltips are used to explain technical terms, provide brief guidance, and aid in interpretation.
These are ideal for helping new or non-technical users understand what the visualization represents.
Examples:
- SHAP Values: “Estimates how much each feature contributes to the model’s prediction.”
- Pareto Front: “Shows the best trade-offs between conflicting objectives.”
- SHAP Values: “Estimates how much each feature contributes to the model’s prediction.”
✨ General Guidelines for Table and Plot Naming
✅ Consistency: Use the same title/subtitle structure across all sections.
✅ Avoid Jargon in Titles: Place any complex terms in subtitles or tooltips.
✅ Scannability: Aim for 3–6 word titles that are easily readable.
✅ Action-Oriented Only When Needed: Use verbs only when users interact directly with the plot.
✅ User-Centric: Align phrasing with how chemists, engineers, and analysts actually describe their tasks.