Design Systems are resources to enable effective, efficient, and reliable user interface implementation. Science Design Systems like STRUDEL can help your software development.

This is the fourth article in a series about User Experience (UX) in the scientific software lifecycle from members of the UX team in the Scientific Data Division at Lawrence Berkeley National Laboratory. The first piece introduced UX work and UX Research, the second UX Design and Writing, and the third UX Engineering as part of scientific software lifecycles. This piece focuses on the utility of Design Systems as part of developing user interfaces in scientific software lifecycles.

What are Design Systems?

How do companies create consistent, usable experiences across a range of products or services? They regularly have UX practitioners leveraging Design Systems.

Design Systems are resources that enable teams to design and build consistently usable, scalable experiences with common components, patterns, and guidelines. Design Systems are the latest elaboration of longstanding concepts around establishing guidelines for visual and interaction design practices, advancing the concepts through code templates and resources to be more rapidly applied by software teams.

How are they helpful to scientific software development?

Scientific software teams often have too few resources for the amount of user needs they are tasked with addressing. For teams without UX Designers or Engineers, leveraging an existing Design System is a way to build their own interfaces upon a resource that was created with solid UX backing developed through UX research work and design principles.

What are some examples from commercial environments?

Commercial software design and development has readily embraced design systems over the last decade. Google’s Material Design is the core system and language for their breadth of products (and the parent of many derivative design systems for sub-products such as Google Cloud Platform). Material receives significant research and design investment to assess usability, accessibility, and so on. Other major corporate design systems include IBM’s Carbon and Lightning from Salesforce. Each of these systems provides guidelines on crafting visual style, extensive code-based component libraries for building products, and tutorials and case studies to provide insights on how to effectively apply different elements for different types of solutions.

What science oriented Design Systems exist?

Design Systems for government or scientific software are also available and growing. Examples range from federal government website standards, biology oriented solutions, and the STRUDEL general-purpose science Design System. The U.S. Web Design System (USWDS) focuses on enabling effective communication and information access for U.S. federal agencies. The Chan Zuckerberg Initiative has developed a Science Design System for their organization’s work on bioinformatics software. This solution, created with strong biology analogies, offers varied types of elements (Bases, Genes, and DNA) for crafting pieces of web interfaces along with full page templates (Chromosomes) and some example flows between types of pages (Cells).

STRUDEL, in contrast, is a product of our UX team at Berkeley Lab to build resources applicable to a broad range of data-intensive scientific software. The STRUDEL Design System was built around our notion of Task Flows and includes design templates with guidance for adaptation to particular use cases, a code library to provide a starting point for implementing a web-based user interface, and documentation offering guidance on implementation options and opportunities. STRUDEL Task Flows are abstractions of common activities that users work through by progressing through different screens of a user interface. Examples range from flows for implementing data exploration, contribution, and comparison features to those for monitoring processes (e.g., jobs submitted on a high-performance computer). STRUDEL is open source and encourages contributions from the scientific community. Have a question or idea you would like to see in STRUDEL? Join the conversation on the community’s GitHub, linked below.

Conclusion

Design Systems are resources that can enable scientific software developers to implement usable, consistent user interfaces without the support of a full UX team. Offerings from commercial software environments provide a range of examples and resources, while science oriented Design Systems can be tools to help amplify the work of nimble scientific software teams.

Confused and want a clarification? Curious to learn more? Reach out or explore the further information links!

Further information

• This article is part of a series about UX for scientific software. The other articles are linked below as they are published.
  • Framing User Experience (UX) Across the Scientific Software Lifecycle
  • User Experience Design (UXD) in the Lifecycle of Scientific Software
  • User Experience Engineering in the Lifecycle of Scientific Software
  • Design Systems To Help Amplify Development of Usable Scientific Software Interfaces (this article))
  • Growing Communities of Practice in Scientific Software: Experiences from User Experience (to be published)
• Interested in joining communities of practice for UX in science?
  • The US-RSE community and its User Experience working group offer the opportunity to engage with others about UX or identify resources to help your own software team. https://us-rse.org/wg/ux/
  • The Consortium for the Advancement of Scientific Software (CASS) User-Developer Experience (UDX) working group offers bimonthly talks and conversations open to all. https://cass.community/working-groups/user-developer-experience.html
• Curious about Design Systems, explore:
  • STRUDEL
  • Chan Zuckerberg Initiative Science Design System
  • U.S. Web Design System (USWDS)
  • Google Material Design
  • Salesforce Lightning Design System (SLDS)
  • IBM Carbon Design System
  • The Figma design tool’s
  • Nielsen Norman Group’s Introduction to Design Systems

Author bio

Drew Paine is a User Experience Researcher in the Scientific Data Division at Lawrence Berkeley National Laboratory. He contributes to a range of UX projects (https://ux.lbl.gov), including STRUDEL and the DOE High Performance Data Facility (HPDF). Drew has over a decade of qualitative user research experience in scientific software and commercial cloud environments. He holds a PhD in Human Centered Design & Engineering from the University of Washington and a BS in Software Engineering from Rose-Hulman Institute of Technology.