Designing a system for scalable applications

Senior Product Designer @ Blackboard Insurance 2018 – 2020

Summary

Responsibilities

Establish a scalable design system and component library that would be used across multiple applications.
Designing the design elements, collaborating with engineers to implement and systematize the components in Storybook.js and then testing them out in their respective applications.
Using an atomic design approach with considerations to atoms, molecules, organisms and templates.

Problem

Blackboard's software tools were originally built without much consideration to scalability or sustainability. After about a year in, the software tools experienced major regressions, inconsistencies and lack of scalability. It was clear that we needed to take some steps to make the applications more scalable.

Solution

A scalable component library that would empower multiple applications, the engineers and designers working on them, and ultimately this led to higher productivity and faster applications.

Process Overview

"Break Apart the System!"

We needed to understand the anatomy of our apps by conducting an interface audit and breaking apart each element. This was to understand what component were used the most so that we could build the most useful library.

We decided to go through our apps and take of note of the elements that would benefit from being systematized. The image to the right shows the patterns and components we wanted to establish.

Atomic Design to the Rescue

Coined by Brad Frost, Atomic Design is an approach to systems design that breaks down the components of a system into atoms (the smallest parts), molecules (the clusters of atoms), organisms (the groups of molecules), and templates that consists of all of the above.

We decided to use Atomic Design both as a systems design method, but also as a shared language between designers and engineers.

Building Iteratively

After investigating the components needed for the library, we started building out the components. This process was intended to be super iterative to allow for close collaboration between the design and engineering team. The idea was to design a few components at a time, and then start building them out to test in Storybook.

This was to ensure ahealthy loop between design and development, where the front-end code would become more solid and stable with each iterative loop.

Results

Starting with the Atoms

We started building out the foundational building blocks that comprised all our applications. These atoms included basic HTML elements like form labels, inputs, buttons, and others that could not really be broken down any further without ceasing to be functional.

… Then the Molecules

Molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule. For us, this included filters, search fields, etc. The idea was that molecules should be made up of smaller atomic components already built.

… Then the Organisms

Organisms are made up of molecules. These are complete UI components and start to really form the backbone of the overall product design. For us, this included elements such as forms, cards, or modals.