STRUDEL Design System
A set of high level templates for designing and implementing user interfaces for scientific software.
Background
The STRUDEL design system emerged from the realization that across different science domains, scientists often want to use UIs to perform similar tasks. For example, many scientific users have a need to search through and filter tabular data, setup and configure computational codes, and monitor real time experimental data. Many of these UIs are developed as bespoke software, but I felt that there was an opportunity to create reusable and customizable templates that could encapsulate these common tasks and serve as starting points for new UI projects. I wrote up my thoughts on a design system for science in a white paper for a DOE workshop, which caught the attention of the Sloan Foundation. Through their generous grant, the STRUDEL project was formed and team assembled.
Developing the Design System
To develop the design system, we first gathered screenshots from several projects across multiple domains within LBNL (focusing on LBNL for scoping purposes). We then interviewed the associated software teams to gather additional context. Using these artifacts, we clustered similar UIs and quickly identified common task types. From there, we designed templates that removed domain-specific elements so they could be applied more broadly across different scientific areas. These templates are published on the STRUDEL website as Figma files, and several have since been implemented as React components.
STRUDEL Task Flows
Design systems can address different levels of detail — from what a button should look like to how a data table should behave. We chose to focus on a higher-level layer: the workflows that users follow to accomplish their tasks, which we call Task Flows. In our experience, this is the level where scientific users often need the most guidance — understanding how to structure their interfaces so that others can effectively complete a task using a web UI.
Our Run Computation task flow, which shows a workflow for how a user can configure, run, and view results of compututational methods.
Empowering our users with AI to form a community of practice
Our overarching goal with the design system was to empower scientists to create their own UIs without needing extensive frontend skills. However, even after simplifying setup with configuration files and command line tools, we realized we were still falling short — the skill gap remained too wide for many of our users. This realization led us to experiment with AI agents as a way to help bridge that gap.
In October, we hosted a workshop on using AI with STRUDEL to develop scientific UIs. With more than 30 in-person participants, we were thrilled to see how much users could accomplish in a single day — including those who had never written a line of code or used the command line.
The elephant in the room in the era of AI is whether design systems like STRUDEL are even necessary, given that generative AI can now produce interfaces nearly on its own. Based on feedback from the workshop, at least for now, users valued the sense of control and transparency that starting with a trusted resource provided. It acted as a form of guardrails — rather than relying entirely on AI to generate the end product, participants felt more comfortable beginning with a baseline and using the AI agent as a partner to iteratively move toward their goals.
A surprising and heartening development was the sense of community and camaraderie that emerged as we all grappled with how to best integrate these new technologies into our work and lives. Participants helped each other, shared advice and experiences, and expressed interest in continuing to be part of a learning community. Several said they wanted to join future workshops, attend ongoing meetings with like-minded peers (such as the US-RSE UX working group), and contribute back to the STRUDEL project.
Thoughts & Talks
- Talk Learn more about the STRUDEL Design System in my webinar "How to Build a Science UI: Getting Started with the STRUDEL Design System"