Design System

UI templates, Task Flows, & interactive components

STRUDEL Design System provides a set of reusable components and patterns along with guidelines for designing and implementing user interfaces for scientific software. This design system is distinct since it is organized around Task Flows, which are the stepwise flows a user takes to accomplish specified tasks.

Why STRUDEL Design System?

Designed for scientific software

Specifically designed for common patterns seen in scientific UIs that can be applied across different scientific domains.

Focuses on how the UI should function

It focuses on the series of steps taken as part of a larger workflow. This provides the big picture of user journeys & aid to improve user experience.

Good UX from experts in the sciences is baked in

Informed by over a decade of collective UX experience in the sciences and encapsulates good UX practices.

STRUDEL Products

Task Flows are visualized through step-by-step mockups (UI screens) documenting the process of completing a task and illustrating a user's journey through a GUI. They also have corresponding design & usage guidelines.

Task Flows have code templates implemented in our developer toolkit, STRUDEL Kit. STRUDEL Kit uses the React JavaScript framework and is based on the popular Material UI (MUI) Components library.

How to use the STRUDEL Design System

Scan the Task Flows list

Use summary description to identify which of the Task Flows may suit your software features & user interface.

Examine the Task Flow details

Examine the mockups, examples, and guidelines to decide if the Task Flow fits your software needs or further customizations are required.

Plan your customizations

Discuss with your team, research & evaluate user needs, and plan the changes to chosen Task Flows via rough sketches on paper, or using the Figma files.

Consult our code adaptation guide

Go through the implementation guide to install the STRUDEL UI Code Library to use with your software product.

Implement your design changes, data, APIs

Using the implementation guide make your customizations to downloaded templates and integrate the code with your software, data, and APIs.