Chad Behnke

Page describing syste usage of Input components
Page describing syste usage of Input components

One of the largest projects that I oversaw in my time at Vibes was the development and introduction of a design systems approach to its UI. Although our team made many incremental improvements to the UI over time, the platform was filled with legacy UI. It had several different kinds of patterns for solving the same problems, an intimidating CSS stack, and several teams with varying degrees of front-end ability. I handled the visual and interaction design of multiple iterations of this system, and also managed the pipeline and development of new components and concepts.

Initial component library: Buttons
Initial component library: Buttons
Initial component library: Form elements
Initial component library: Form elements
Initial component library: List elements
Initial component library: List elements

It started with the first version of a component library.

This version maintained the platform’s brand colors while we updated the interaction and visual design, and worked with engineering as they got acclimated to using React. I partnered with a UX designer, who managed the requirements of the components within the platform, while I worked on visual language and interaction design.

Framer X Design System components
Framer X Design System components

Meanwhile, the company was going through a rebrand, and I gained access to the resulting identity, typography, and color choices. It was at this point that I worked with the product and marketing teams to deprecate the branding for the platform itself, and use the updated company brand, bringing that execution in line with the way many other large SaaS companies approach the presentation of their software. In addition to this, I also implemented a version of this design system in Framer X, learning much more about React along the way.

An example component-based index page composition
An example component-based index page composition

With this fresh strategy and updated branding in place, I stepped back into the design system, this time doing more product management in addition to the implementation. I rolled out a large visual update that changed the design system to utilize the new branding styles. After that, I started rethinking much of the documentation that currently described our components, adding more design guidelines and best practices to help engineers implement the components with the platform’s design ideals in mind. I interviewed with the engineers to refine the content and further push it to better serve the design system.

Custom icon library built for the Vibes design system
Custom icon library built for the Vibes design system
System documentation outlining Typography usage
System documentation outlining Typography usage