Design System Samples

A few examples and documentation from my work on the StrongDM Design System

01. Option Groups

The opposite of consistency is chaos

The settings pages of StrongDM featured many groups of options, but there was little consistency when implementing these styles.

At this point, the StrongDM design system featured an option component for the type of option (radio, checkbox, switch) and an option input component that paired an option with meaningful label. Some examples are below:

Evolving a Design System

OptionGroups Documentation in Figma (scrollable)

Redesigning the option group

I spent time gathering instances of option groups in the StrongDM platform. Then, I looked at how other companies styled and structured these components. Adobe Spectrum & IBM Carbon served as exemplars.

The process of redesigning was standard:

  1. Sketching and ideation: how might we best organize the parts so the whole group is understandable?

  2. Wireframe ideas. Host design jam with critique to get design team feedback

  3. Increase fidelity. Host design review with frontend engineer to gain implementation insights.

  4. Build component options & variants in Figma.

  5. Write documentation in Figma.

  6. Make a ticket for FE implementation.

  7. Support implementation.

Evolving a Design System

New component in action

Here's an example of the redesigned component.

  • The group label is now aligned to other input label styles.

  • There is a space for description text. This area may include an external link, if necessary, but a link cannot be used on its own without description text.

  • Spacing between the option label and the option description text has been reduced which should increase the perception of togetherness (proximity principle).

  • Selected option becomes bold and its description text becomes darker.

New: Option Group Panel

During discovery, I found that the StrongDM system needed a way to select an option and complete any fields associated with that option. The new design must also allow for unique fields within each option in the group.

Below is an example of the Option Group Panel in the live product:

Improving the UI & experience

I edited design system elements to modernize the UI across our products.

Evolving a Design System

Chip documentation in Figma (scrollable)

02. Redesigning the chip

Chips may contain long strings of text and, currently, may end up truncated. Users have complained that they need to see the full string. Additionally, our existing chip is being confused with the button component.

The new chip design allowed for:

  • Showing all text, with rules about word and character wrapping & breaking

  • Adding a cap the number of chips shown initially. Plus, adding a "show # more" button for showing all chips

  • Increasing border radius to curve edges

Evolving a Design System

Element group documentation in Figma (scrollable)

03. Creating an element group

The purpose of the element group is to provide consistent spacing when using multiples of the same component together (like a group of buttons or a group of chips).

Spacing between elements depended on their size. For example, if two medium-sized buttons are used together, there should be 8px between them.

Evolving a Design System

Text field documentation in Figma (scrollable)

04. Updating text fields

Now that the chip was updated and we had clear guidelines on how to use multiple chips together, the text field component could be updated.

This robust component handled basic text inputs, but in some cases, the text input became a chip (e.g. adding a new tag to a database). Redesigning this component involved working through a variety of states like active and error to ensure we covered the range of user experiences.

Want to see more?
Explore my portfolio & learn more about my creative process