Component Work: Ascent Design System
Overview: Design systems thrive on reliable, reusable components. While on the Ascent Design System team at Klaviyo, I contributed to the creation and refinement of UI elements such as color pickers, date range pickers, skeleton loaders, and progress bars. My focus was on ensuring accessibility, consistency, and scalability to support product teams building with the system. This page highlights a selection of those components and the details behind my contributions.
Programs Used: Figma, FigJam, Storybook, Google Docs, and Google Slides
Color Picker Refresh
Background: The previous Color Picker did not have a way to implement custom functionality, such as an eye dropper for picking other existing colors in the template. Furthermore, there are concerns with internationalization and accessibility within the existing ColorPicker framework.
Refactoring the current Color Picker component will help solve for some performance, usability and accessibility issues. It will also allow for added custom functionality. I collaborated with a Component Library Engineer to select a new library to utilize under the hood for this component, since the existing one at the time was. outdated. I lead the design of the updates to this component.
Previous
Update
Design Update Highlights:
A way to implement custom functionality
Addition of an eye dropper for picking other existing colors in the template
Ability to select different color palettes
Improved usability
Increased sizing and style of selection indicators
Ability to select between different color modes
Avatar Enhancement
Background: We were solving for a use case where a company may have multiple sub-brands and would like to distinguish each brand through different color avatars. A team working to improve the account switching experience, wanted a way to help with easier scan-ability.
At the time, the avatar component didn’t allow for custom colors to be passed through. A part of this work was also to aid in establishing color combinations that passed accessibility with appropriate color contrast ratios.
In the end of this work, we included preset color options for users to select within the monogram avatar component. We also made updates to the current component by including 2 letter initials.
Design Enhancement Highlights:
Flexibility of component
Ability to pass through various colors
Established accessible preset colors for teams to utilize (meeting AA accessibility standards)
Factoring two letter initials within the component that was not available previously
Visual updates to typography to fit better within all sizes of the component
Component Enhancement & Cross-collaboration
During this project, I collaborated with another product team to make improvements with the current account switching experience within the product. In return, updates to the existing avatar component within our design system also needed to be made.
The update would be apparent on the account menu (as shown on the left).
Colors
The previous avatar component did not allow for any other colors except gray. I helped establish preset colors that teams can use but helped open up flexibility for this component, so that other colors an be passed through in code.
Typography
Updated typography was established for each of the size variants.
The font size and letter spacing considered 2 letter initials within the avatar. The existing typography did not make room for 2 letter initials.
Another factor that was taken into account was characters for other languages.
Date Picker + Date Range Picker
Background: The previous date picker and date range picker needed to be improved further with accessibility standards, be i18n ready, and meet current design system standards. Some design tweaks and interactions for this component have been improved for better user experience.
The Date Picker was implemented by using an input field through our design system, which includes a text field and a calendar icon that triggers a pop-up calendar.
The guidelines created for these components can be viewed here.
Date Picker: Before and After
Date Range Picker: Before and After
Updated Colors and Impact of Interactive States
The previous design utilized black and grays which made it a bit difficult to distinguish between specific interactive states. There was user feedback about some of the grays appearing disabled.
I introduced the use of the color blue to distinguish between specific states when selecting a certain date or date range. I created a new pattern and token in our design system with this color usage that also helped with other components in our library.
updates to focus & eRROR states
Previous version of focus and error states. These states visually didn’t look cohesive within the input.
Update to focus and error states. Visual updates such as a colored ring around the entire input and a visual way to highlight the specific are of error or focus.