This week marks the release of the all-new, overhauled ecoQuery. Alongside the many improvements to search, navigation, data display, and more that we’re launching with this update, this release also moves ecoQuery to follow our design system.

 

User interfaces, or UIs, are the parts of a product or application that users interact with. In short – it’s the visible and interactive portion of an app. Good UI is essential to building successful products.

What is a design system?

A design system is a toolkit for creating consistent and cohesive designs across a product or brand. It includes reusable components, guidelines, and standards that help teams build interfaces faster and more effectively.

 

Think of it as a recipe book: It defines the ingredients (like colors, typography, and icons) and the instructions (rules and patterns) for putting them together. This ensures that everything looks and works well, no matter who designs or writes the code to implement it.

 

The anatomy of a piece of UI. A design system codifies styles, color, spacing, and more to ensure a consistent user experience.

Why is this important? 

Environmental decisions depend on reliable and understandable data.

 

Our fundamental belief is that environmental data is complex. This is an inevitable consequence of trying to model all types of commercial and industrial activity in a cohesive, structured manner. Despite this, it’s both our challenge and goal to present the ecoinvent database in a transparent yet uncomplicated way. As our portfolio of apps grows, we need a standard set of components, guidelines, and rules to do that consistently. This is what motivated us to create the ecoinvent UI design system.

Getting the fundamentals right

We believe good design is based on a strong foundation of good practice and thoughtful, inclusive perspectives:

  • Accessibility: Everyone should be able to use and understand environmental data. Inclusive design ensures usability for diverse audiences, including those with both permanent and temporary disabilities.
  • Clarity and Transparency: Simplifying complexity makes data actionable. Clean visualizations and prioritized information help users focus on what matters most. Our design system prioritizes clarity of information over aesthetics, with a robust hierarchy and opinionated layout (that’s not to say we don’t think our apps are beautiful!).
  • Space: Everything benefits from room to breathe. Complex concepts and data can be broken down into more understandable pieces; cognitive load can be reduced, and locating specific values or items in a list can be easier – we believe that spacing is one of the most powerful tools we have to make our data more valuable to a broader audience.
Looking ahead

We first (quietly) introduced our design system in early 2024 with the release of our updated Accounts platform. Since then, we have rolled this out to other sites, including our Data Glossary, a comprehensive collection of the Master Data items that underpin the ecoinvent database.

 

With this overhaul of ecoQuery, our design system now powers all our user interfaces at ecoinvent and sets the standard for new apps in the future. We’ll continue to iterate on this system going forward, looking for better and better ways to provide a foundation for understanding environmental data through design.

About the author

Tom Norton is the Front-End Engineering & Design Lead at ecoinvent. He oversees and supports the design and implementation of ecoinvent’s user experiences. He brings almost a decade of experience in Engineering and Design functions in companies large and small to his role, along with a passion for sustainability and a drive to make complex things easy to understand.