Permission Level group label uses section heading styles. Also, a "Learn more" button takes the user to the documentation website.

Brittany Bellanca
Product Designer | UX Strategist
Hey there! I'm an experienced Product Designer who enjoys creating intuitive visual interfaces and interactive experiences with multi-disciplinary teams.
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:

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:
Sketching and ideation: how might we best organize the parts so the whole group is understandable?
Wireframe ideas. Host design jam with critique to get design team feedback
Increase fidelity. Host design review with frontend engineer to gain implementation insights.
Build component options & variants in Figma.
Write documentation in Figma.
Make a ticket for FE implementation.
Support implementation.

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.

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 chipsIncreasing border radius to curve edges

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.

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.