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:

Permission Level group label uses section heading styles. Also, a "Learn more" button takes the user to the documentation website.
Group label is in all capital letters and the selected option's label is bold
Too many options in a tight space, may be difficult for a user (with mouse) to select an option, difficult to read without clear hierarchy. Also, why are there two groupings?
These look a bit better with hierarchy, but the clickable areas around the radio inputs is still a bit tight. Also, there is an "information" icon after the last option group.
Features increased spacing between the group label and the options, the selected option's label is bolder

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 chips
Increasing 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.

Want to see more?

Explore my portfolio & learn more about my creative process