Access required
This case study is password protected. To view it, please enter the password below.
To request access, please contact claremnguyen@gmail.com
Crafting Components for the Haven Design System
The Haven Design System (HDS) was a comprehensive set of styles, components, and patterns that aim to make design and front-end development at Haven Tech simpler and more consistent.
Every feature of the system was held to high standards of usability, accessibility, and aesthetics.
Haven Technologies
Clare Nguyen, HDS Team
Product designer
Design systems, Figma, UI design
March 2023 - September 2023
Background
I was asked to join and contribute to the Haven Design System (HDS) Team in March 2023. HDS helped us:
Reduce design and technical debt. A design system compiles past design patterns for easy reference, making it less likely that a design will create a one-off solution to a current problem. It also gives us a place to document why those patterns were made in the first place, so we can review which patterns still make sense and which should be rethought.
Eliminate inconsistencies. Having only one version of a component reduces the chance that visual irregularities will accrue across our product suite, and centralizes the effort to make that component usable and accessible.
Save time. With a robust set of components to mix and match, creating new experiences becomes more of a plug-and-play process.
Results
Vertical tabs extended an existing component rather than creating a new one, giving teams a consistent way to organize forms, settings, and dashboards without building one-off solutions.
Overflow shadows replaced browser scrollbars, creating a cleaner, consistent scrolling experience across both tab styles and orientations.
Updated Option color tokens made selected and active states distinguishable in both Light and Dark themes, meeting WCAG 2.1 AA contrast requirements for text and icons.
Vertical tabs
Tabs are used to organize related content. They allow the user to navigate between groups of information that appear within the same context.
Use tabs to group related information into different categories, helping to reduce cognitive load.
Tabs can be used to organize content such as forms, settings, and dashboards so a user does not have to navigate away from their workflow to complete their task.
Horizontal tabs were already supported, but there was a request for them to be supported vertically, too. After conducting research with another designer, I began building the subcomponents. I set the following requirements:
Vertical orientation is only available for the accent style
Vertical tabs only have a “Start” alignment
Vertical tabs can have “Subtext,” which is optional and can be treated like a secondary label
Vertical tabs still support icons and number counts
Overflow tabs
When the tab list contains more tabs than can displayed in the current viewport, the tab list becomes scrollable.
Rather than displaying a scrollbar, which can clutter the UI and result in differing experiences across browsers, overflow shadows are displayed to indicate an overflow and the direction the user can scroll within the tab list.
If a tab list does not overflow, resulting in a scroll area, overflow shadows will not appear. I set the following requirements:
Overflow shadows appear for both accent and folder style tabs
Overflow shadows appear for both horizontal and vertical oriented tabs
For horizontal tabs, there are left & right overflow shadows
For vertical tabs, there are top & bottom overflow shadows
Updating selected Option color tokens
When using Combobox/Dropdown options, users were noticing that the Option background colors for Active and Selected were the exact same. This meant that it was difficult for them to differentiate what was currently selected or what they had hovered over.
My goal was to apply new colors to the Option selected color tokens to differentiate an option’s selected state from its active state. This needed to be done for both Light & Dark Themes. I wanted to make sure that:
Background of options in a selected state passed 4.5:1 contrast with all option text and 3:1 contrast with all option icons
Secondary text within Listbox and Menu options passed 4.5:1 contrast with option backgrounds
Icons within Listbox and Menu options in a selected state passed 3:1 contrast with option backgrounds
Conclusion
Building complex components to contribute to the Haven Design System library has been an incredibly rewarding experience. The visual aspect is only a small portion of what goes into building components and design systems.
A lot of thought needs to go into how properties are layered, whether or not those properties should be applied to all styles or only a specific few, and more. After all, the components you build will be used by other designers and you want to make sure that you are designing and building with them and their experiences in mind.