Connect Design System

UX / UI / UX Writing

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 on 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, I have refined the components, added variations, judiciously created new components, and occasionally deprecated elements that no longer served their purpose.

› 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!