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.

The Team

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.

Demo

Process

Literature Review

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.

Visual Guidelines

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.

Composition

  • 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

Configuration

Layout

A radio group can have a horizontal layout, or a vertical layout

States

Selected vs Unselected​

Enabled vs Disabled​

Cursor Property

  • When hover on enabled options: pointer

  • When hover on disabled options: not-allowed

Styles

Typography

Icons

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.

Component Composition

  • A bar chart consists of the following

    • x-axis

    • y-axis

    • Gridlines

    • Bars

    • Chart title

Component Configuration

Layout​

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

Show/hide subcomponents

In a bar chart, gridlines, x-axis, y-axis, data direct labels can be turned on and off as needed. 

Sorting

  • Dimensions (sunday through saturday, alphabetically)

  • Measures (ascending or descending)

  • Other logical order (by other dimensions/measures)

Bars

​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.

Interactions

Style

Style includes color, typography and spacing. Color and typography is very similar to the UI component specs.

Spacing

Takeaways

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.

lizageorge92@gmail.com​

 Tel: 404-820-1599