<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=26304&amp;fmt=gif">
BitSight

Building Our UI Design System

Luke Sideris | May 7, 2018

As the BitSight front end team grows we are investing in our design infrastructure to enable faster development, better collaboration, and a more unified look and feel in our product.

Part of the strategy for building a better user interface is the implementation of a design system - an organized and documented set of components that can be reused across our products. Setting up this system required a lot of research and a lot of work invested in laying the foundations. Creating these components has let us create a more unified UI by predefining the correct usage of elements. We can also create pages and views faster and with less code complexity because the styling and behavior of components is already implemented. 

In this post I’m going to show how we developed our design system, how developers use it, and what’s next.

Branding and Color

Our first major effort was defining the basics: colors, fonts, and logo treatment. Defining the official colors and fonts helped to clean up minor differences between pages and make it very easy to decide which color to use for an element. The most important detail was the definitions for text, border, and background colors. Before we had these guidelines developers and designers would choose hex codes based on how light or dark they felt like an element should be, leading to a “50 shades of gray” problem. We also wrote simple guidelines on when to use different shades for information hierarchy, adding context and meaning to our color choices.color swatches and code definition

Color swatches and code definition

For UI development, we created a single JavaScript file that contains all valid color definitions. We use Webpack to read this file and automatically make all of the colors available as variables in CSS files. Finally we added a linting rule that throws an error if anyone uses a hex code instead of one of these variables, which enforces consistency and ensures that all the colors are defined in only one place. 

Reusable Components 

The concept is nothing new — creating a branded set of predefined elements that are fast and easy to implement. At BitSight we audited several existing component sets and identified the need to create our own set of components. This allows us to develop a unified look and optimize interactive elements to fit our needs and use cases.

reusable components
Some of our reusable components

We created all of these using React and publishing them to a private package repository. This allows our components to be tested and developed independently. We are able to manage updates using version numbers. Developing these components independently has several major advantages. Implementing one in a page is very fast and easy, and the component’s functions do not need additional testing. If there’s a bug in a component, we can fix it in one place, bump the version, and the bug will be fixed for every use case.

The Design System

The reusable components are very useful tools for building user interfaces, but as our team expanded we were having more and more problems with enforcing standard usage and keeping developers and designers synced up with what tools are available. The solution was to implement an online design system. We chose to use Storybook JS, a popular documentation system for user interface elements. 

5.7-Blog-3

The first release of our design system.

5.7-Blog-4

The key feature of this system is the ability to add easy to read usage guidelines for each element. We also have the ability to experiment with the different component properties and variants. Sample implementation code is automatically generated — a handy shortcut.

More importantly, our design system serves as a “source of truth” for the user interface elements and is used by both our front end developers as well as UX designers to refer to the correct way to use components. This helps prevent misuse of elements and enforce consistency between different pages.

The online design system is automatically kept up to date whenever changes are published.

What’s Next

For now we are continuing to document and develop reusable components in the design system. The more content we have, the more useful it will be. The design system is not publicly available online yet, but could be released in the future. Having this documentation in place will support our goal to continually improve our product’s UI as we grow, and we are always looking for ways to make design and development faster and easier.

Suggested Posts

Building Our UI Design System

As the BitSight front end team grows we are investing in our design infrastructure to enable faster development, better collaboration, and a more unified look and feel in our product.

READ MORE »

How BitSight Helps Drive Quick Risk Reduction Across Third Party Ecosystems

At a recent BitSight Roadshow, a customer with an advanced third party risk management program declared “assessments are not risk reduction.” The statement was not meant to convey that assessments are useless for third party risk; rather,...

READ MORE »

BitSight Hackathon 2017

For the second year in a row, BitSight gave its engineers, product managers, and data and research scientists the day off from normal work to make something cool. The hackathon day had all the typical stuff: awesome custom-designed...

READ MORE »

Subscribe to get security news and updates in your inbox.