Jellysmack is a company that helps creators grow bigger by expanding their audience, income, and reach across multiple social media channels. While their growth was a great thing to celebrate, it involved building products rapidly and without an overall design system and strategy.

During my early tenure at Jellysmack, I brought up to my manager the idea of bringing Jellysmack’s family of apps under one unified style. For us, it was clear that it was a problem, but we needed to gather support through the product team.

In order to provide a consistent style to Jellysmack’s verticals and apps, I was tasked with setting up a design system that would enable designers and developers to use a consistent design language to design and implement new features, apps, and experiences easily and quickly.

Although to many in the product team, the need for a design system was clear because of the inconsistencies that had developed between internal apps, in order to solicit buy in from the entire team, we created a presentation to essentially pitch the idea to the organization.

In addition to providing an overview of what a design system is (and isn’t), we also began auditing our apps to find out what components we should prioritize as well as to further bolster our case that the design system would unify our disparate group of apps.

We also talked with the members of the front end engineering team to determine what they would define as success, what frameworks they were using, and how they felt about using a shared component library.

Some of the findings we discovered were:

• Engineers were excited about the potential of having a shared component library.
• We were using two major javascript frameworks: React and Vue. It would be unrealistic to build out separate UI libraries for both frameworks based on the resources we had.

Based on the product and engineering team’s feedback, I began adapting our prioritized components from existing Figma projects. Within our weekly design crits, we began evaluating my progress as a team and iterating weekly on major components

Using a combination of base color variables and a simple plugin that allows a user to toggle between groups of colors within a Figma library, we were able to quickly build light and dark versions of our components.

Within the process of building the design system, we were in constant discussions with the front end engineering team to discuss how we wanted to build our Jellysmack web apps in the future. We discovered that developers were interested in building apps using a consistent starting point and remove the “bike shedding” aspect of choosing between frameworks and front end tools.

Prior to this process, apps were built using Vue, React, and other libraries without a consistent developer experience. After building the design system, through discussion that broke down silos between groups, we were able to decide on a specific development stack using React, Next, Tailwind, and Typescript.

We were able to achieve some major successes in adopting and rolling out Sonar.

• Created a Figma file to use and reference for the entire design team
• Introduced the design system into 4 of Jellysmack’s major apps with others along the way.
• Set up a recurring design system meeting where designers could voice their concerns, introduce new components, or share ideas.
• With the front end engineering team, helped establish a more standardized approach to building front end apps.