Arc Design System
I worked on a design system for Axis Group that could be used to quickly design and build dashboards. A design system consists of reusable components and standard guidelines on how to use those components. On the design side, we would be able to design and prototype apps quicker by having a set of components with the styling and interactions already defined. On the development side, apps could be built quicker by using a set of existing components.
I worked on this project with a team of UX designers and developers. I was responsible for outlining the different components needed and also specifying the styling and interactions for some of the chart and UI components.
You can find a link to the design system website here. The website was quickly put together by the developers to get an initial version out.
We reviewed existing design systems to understand what components were included, get for ideas for color palaettes and typography, and to understand how they addressed interactions. Some examples we looked at are Material Design by Google, Carbon by IBM, Atalassian design system etc. These existing design systems have UI components like radio buttons, drop down menu etc but had very limited data viz components which would be essential for us. A lot of our dashboards run on the Qlik engine so we also needed to outline how the components integrated with it.
Outlining the components needed
We outlined major categories we would need in our design system
1. Style guidelines including color, typography, layout
2. UI components like buttons, tiles, dropdowns etc.
3. Data viz components including different chart types
4. Qlik components
Once we outlined the basic categories, we listed all the possible components under each category and then identified the ones we would target for the first release. We used Trello to track progress.
We used material design to come up with color palettes for our design system. We had to think about colors from a data viz perspective including sequential scales, categorical scales, postive and negative colors. We were careful not to use the actual color names but named them after different arcs. This way the colors could be switched out at any point. We followed a similar approach for typography. We also came up with a standard layout that would work for most of our dashboards. The dashboard has tiles within that can be setup as 2,3,6 or 12 columns.
UI Components (E.g. Radio Button)
We came up with four broad categories for our specs: when to use, composition, configuration and styles. We then wrote down specs and created examples of each component. The example below is for a radio button.
When to use
Used to select a single state among multiple options. All choices are visible to user which can facilitate the comparison of choice. So, when you want to use radio buttons, the number of options should be limited.
A radio button group consists of a radio group name (text) and multiple radio button options
A radio button option consists of a radio icon and a text description
A radio group can have a horizontal layout, or a vertical layout
Selected vs Unselected
Enabled vs Disabled
When hover on enabled options: pointer
When hover on disabled options: not-allowed
Chart Components (E.g. Bar Chart)
The process for listing specs for charts components was similar to the UI Components. The example below is for a bar chart.
When to use
Bar charts are generally used to compare categorical data
They use length as a method of encoding data
You don't always have to use absolute values. You can use percentages on the x/y axis to show contribution to the whole.
A bar chart consists of the following
A bar chart can be either horizontal or vertical.
Use horizontal bar charts when the axis labels are long
Horizontal bar charts can also be useful for long scrolling charts
Vertical bar charts can be used for a continuous scale like time
In a bar chart, gridlines, x-axis, y-axis, data direct labels can be turned on and off as needed.
Dimensions (sunday through saturday, alphabetically)
Measures (ascending or descending)
Other logical order (by other dimensions/measures)
Bar width vs height - Maintain a 10:1 ratio between length of longest bar and width.
Muted vs highlighted bar - One or more of the bars in a bar chart can be highlighted to draw attention. This can be based on hover/ brushing / anomalies/ most recent data points etc.
Style includes color, typography and spacing. Color and typography is very similar to the UI component specs.
Consistency is key
Everything in our design system has to be consistent and part of the same brand right from the styling to the interactions. We had to define standard rules that would apply across multiple components. This took us a long time to do but paid off in the long run as it was easier for developers to understand and implement.