We recently updated our design system and thought this would be a good time to share more about what goes into it, since it’s an often overlooked part of software development.

In this interview, Peaxy Head of Design David Hjortsberg shares some of the finer points of Peaxy’s comprehensive design system. It’s worth a read over a coffee!

What exactly is a design system?

A design system is a set of guidelines, principles and even code that brings a consistent approach to product design. The system includes visual design rules such as fonts, colors, iconography, and even spacing, all with a view to generating a clear and consistent user experience for our customers.

One benefit of a well thought-out design system is that the modular components and specifications can easily be shared across the entire team. This eliminates any guesswork in designing and creating our products and ensures there is no re-work of common reusable components.

 

The Peaxy design system offers a comprehensive definition of a number of design elements, making it easier for developers to create new functionality and for customers to enjoy a consistent user experience.

How would you describe Peaxy’s approach to design in a nutshell? What makes it effective in representing the brand?

Peaxy is an empathy driven and user-centric company. We create products that create, collect, store, monitor, and analyze data, but our focus is always on the people that use these products to solve their daily challenges. We are a family of colleagues and we always strive to include the people who use our software in this family.

To what extent does accessibility play a role?

Accessibility is about inclusivity. One of our main goals is to provide equal opportunities for all our users. Empathy plays a big role here, as accessibility not only addresses some disabilities, such as color blindness, but also the context in which the user is using our products. The work environment might be loud, busy or dark, and we need to make sure our interface is always clear and never distracting.

How would you say Peaxy’s design language has evolved? What has primarily driven these changes?

Our design language changes and grows when it needs to. In the early phases, the primary focus of the design language was to convey ideas and concepts quickly, and to show how these could be turned into products. The workflow was more geared towards creating prototypes rapidly and trying out different ideas.

As our products evolved and matured, so did the design language. Requirements become clearer, new challenges arise, and the design language needs to be able to grow and expand accordingly. With a more established design language come opportunities to increase the adoption rate in the engineering team. We need to clearly explain how and why they should use it and how it makes their work easier on a day-to-day basis.

The Machine Learning Runner module, part of Peaxy Lifecycle Intelligence, allows you to more easily spot trends and outliers with a graphical representation of your data from algorithms defined within Machine Learning Manager.

When dealing with large datasets, it’s often difficult to see potential red flags or anomalies. What are some strategies that can be used to easily drill down into a vast amount of data?

The ability to drill down into the data is crucial, not only because trends may be difficult to identify and remedy at a macro level, but also due to the practical limitations of presenting large amounts of data on a screen. It’s important to be able to drill down at a variety of levels, all of which map to real-life battery configurations. Notice one block is discharging faster than others? You can easily zoom in on that block and see the relevant details instantly. Notice one of the block’s strings is under voltage? Zoom in on that string for a full view of what’s happening. At every level in the battery grid configuration, dynamic charts let you synchronize any number of attributes to the same live timeline, so that discrepancies between subcomponents or correlations between attributes jump out at you.

Drill-down capability allows you to view summarized data at different levels, in this example at the battery block level.

What are your top 5 considerations when making changes to the Peaxy design system?

The design system serves several audiences: our customers, and internally our design, engineering and marketing teams. All of them need to be considered when making changes.

For every change to the system we ask ourselves does this change make the design system:

  1. More accessible?
  2. More consistent and predictable?
  3. Easier to understand?
  4. Easier to use?
  5. Feel more delightful?

Changes that can answer these questions with a Yes will make the design system better for both our customers and the people that build our software. The benefits are a quicker turnaround and higher quality product, not to mention a more productive and pleasant work environment!