Connect Design System
Initially created as a part of the Connect product redesign project, the Connect design system has grown to codify the components, styles, and usage of elements across the product.
My role
I was the sole designer for this project.
How it came together
In the midst of overhauling the entire Hiya Connect product, it only made sense to create reusable design elements to save myself and others time in the future.
As I iterated on the pages and features across the Connect console, I tracked common elements as I used them and gradually created rules for their implementation. The goal was to provide myself and the engineering team with a toolbox of consistent, reliable elements and guidelines for their usage.
I created a “style guide” document in Figma that, moving forward, served as an ever-present resource for new designs. I created reusable Figma components and made them into a shared library that was accessible from any external document. Over time, components are refined, variations are added, and components are judiciously created or removed as needed.
The design system is a living document, but here’s a snapshot in time.
What’s in the box?
A full color palette with intended usage
Text styles – headlines, body copy, bulleted lists, supporting copy, and more
Buttons – primary, secondary, button pairs, button groups, and all of their various states
A variety of form elements with error states
Tables and data
Toast messaging – timed and persistent
Tooltips and modal windows
Data visualizations
Headers, footers, navigation
And more!
