0-1 Design system

I built the foundation of a design system for a startup managing numerous contractors across their Engineering team.

The cover screen of Creator Deck's design system.

Product Designer at Creator Deck, 2022 - Current. I built a design system for Creator Deck’s influencer campaign management tool, established core design principles, and increased design hand-off efficiency between teams.

In brief

  • I established Creator Deck’s design system and guidelines.
  • I collaborated with the engineering team on systemizing our design patterns to improve our development efficiency.
  • Strategized a method for measuring the impact of building a system.

Background

Creator Deck has a new SaaS tool to help marketing managers run influencer marketing campaigns from start to finish.

The company was in the typical start-up situation. They needed to rapidly scale up their platform’s capabilities while maintaining feature quality. A difficult objective that some might call impossible.

Goals

Make designs easier to deliver to internal team engineers and contractors, so we can ship product features with velocity without sacrificing quality.

Build a scalable system with components that have at least an 80% chance of meeting future usage needs.

Research

Section summary: I collaborated with the engineering and product teams and identified we weren't managing our component library similarly. I conducted an audit to explain the harmful effects of this misalignment to get stakeholder buy-in to build a more robust system.

Finding the problem

While onboarding at the company, I noticed most of the tool's built components had duplicate versions with slightly different colors, spacing, and shadows. It was clear that multiple people had their hands on the software and were building in silos. That's when I partnered with engineers to identify and align our objectives.

Through conversations with stakeholders, product teams, and the engineering team, I found there were high expectations and minimal resources, and we were using different design styles and languages, resulting in unintentional component variants and slower development. To showcase this, I conducted an audit to capture all variants and how this impacted the user experience and the company's bottom line.

Screenshot of a colors UX/UI audit.
This is a screenshot of a slide from the UI audit findings presentation detailing the colors being used and how to fix them.
Screenshot of an icon UX/UI audit
This is a screenshot of a slide from the UI audit findings presentation detailing the icon buttons being used and how to fix them.
Screenshot of a button UX/UI audit
This is a screenshot of a slide from the UI audit findings presentation detailing the buttons being used and how to fix them.

After identifying the issue, we pushed for stakeholder support to build a more robust, complete system of guidelines and components.

Ideation

Section summary: While navigating branding restrictions, I created a system that supported team workflows and scalable components.

Getting things in order

Before jumping in, I brainstormed our documentation needs, component naming conventions, and the clean-up process with the engineering team. We also worked to establish a release process for updating and adding new components. As a general rule of thumb, our source of truth is in the code. So, any changes would have to be documented and ticketed in Jira, and once the changes were pushed through, the Figma file could be updated.

Additionally, I collaborated with stakeholders on branding guidelines and which areas can and cannot have their boundaries pushed. I designed the sizing of our typography, expanded our colors to be more accessible, and designed all of our other components.

I looked across platform conventions that aligned with our product, like Material Design and Vibe.

The tricky part of system rework is observing the current design patterns, thinking about future potential patterns, and iterating on how colors, sizes, and spacing can work together to create clean and scalable solutions that address the current usability problems.

Result

We used Figma to house the system temporarily. Thanks to Figma's branching and code-producing features, communicating and documenting designs didn't require significant effort. However, as the system grew and contractors came and went, we moved the system to a new home to improve the onboarding experience.