Sunthetics Campaign Redesign Mockup
NOTE: This first page is just an explanation of the redesign mockup. The platform should not have a page like this.
1 Purpose
This Quarto website serves as a guide for the reorganization of the Sunthetics campaign dashboard. As new features were added over time, the dashboard became harder to navigate. Data, modeling, SHAP, and optimization workflows often blended together, making it challenging to add new components in a clear and structured way.
As a result, some users struggled to find existing features. This highlighted the need for a stronger organizational foundation and terminology that reflects how users think about their work.
The redesign addresses these challenges by streamlining the user experience. Features are grouped into logical sections, with consistent labels and workflows. This improves usability today and creates a more scalable structure for future growth.
Lastly, the redesign is meant to be the first step prior to modularization of Sunthetics and before the automated report release which follows the new design principles.
2 Design Principles
The redesign follows five key principles to ensure the product is intuitive, professional, and adaptable to user needs:
| Goal | Supporting Strategies |
|---|---|
| User Friendly | Clear, action-driven labels and logical structure. Top-level categories use nouns; sub-levels use actions. |
| Professional | Balanced tone that works for both technical and business audiences. |
| Modular | Easy to add new sections, each representing an individual workflow. |
| Concise | Short, specific labels and focus questions that chemists can understand at a glance. |
| User-Centric | Terms align with users’ mental models, not internal developer jargon. |
3 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 Predictions | 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 | 🧠 Interpret 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) |
4 📘 Plot & Table Title Guidelines
To ensure consistency, clarity, and accessibility across the platform, every plot and table should follow a four-level hierarchy:
🔑 1️⃣ Title (Plain Language)
- Use short, noun-based titles that communicate the content clearly.
- Titles should be scannable and specific, so users know at a glance what the visualization shows.
- Switch to verb-based titles only when the user is actively interacting (e.g., sliders, what-if tools).
Examples:
- Noun-based: “Prediction Error”, “Variable Importance”, “Objective Trade-offs”
- Verb-based (interactive tools): “Simulate Process Changes”, “Compare Candidate Experiments”
🔑 2️⃣ Subtitle (Method, Plot Type, or User Action)
- Provide a compact technical tag to orient users.
- Subtitles typically indicate the method, visualization type, or supported action.
- Keep to ≤ 6 words, preferably in parentheses.
Examples:
- (SHAP bar plot)
- (Residuals vs predicted)
- (Partial dependence matrix)
- (Multi-objective Pareto front)
🔑 3️⃣ Caption (What & Why)
- Use 1–2 sentences to explain:
1. What the user is looking at.
2. Why it matters for decision-making.
- Avoid repeating the subtitle; instead expand on the message/insight.
Examples:
- “Scatter plot of residuals vs predictions, showing whether errors are systematic or unbiased.”
- “Heatmap of correlations to reveal redundant variables before modeling.”
🔑 4️⃣ Interpretation (How to Use It)
- Provide structured, actionable guidance for plots (and complex tables if needed).
- Break down into four elements:
- what_it_is → a plain one-sentence definition.
- how_to_use → 1–3 bullets on user actions or checks.
- why_it_matters → 1–3 bullets on insights or implications.
- limitations → 1–3 bullets on caveats or common misinterpretations.
Examples:
- Residual Distribution:
- what_it_is: “A kernel density estimate of residuals showing error distribution.”
- how_to_use:
- “Check peak location: near 0 means unbiased.”
- “Assess spread: wider = higher error variance.”
- why_it_matters:
- “Reveals whether predictions are systematically biased.”
- limitations:
- “Does not show where in input space errors occur.”
4.1 ✨ General Guidelines
✅ Consistency: Always follow the 4-part hierarchy.
✅ Avoid jargon in titles; keep technical details in subtitles.
✅ Scannability: Titles should be 3–6 words.
✅ Action-oriented only when needed: Use verbs sparingly.
✅ User-centric: Use phrasing chemists/engineers already understand.
✅ No redundancy: Each field plays a unique role — don’t repeat the same content across title, subtitle, caption, and interpretation.