Design systems are the blueprint for consistency

Creating a strong design system streamlines implementation, reducing friction so that the entire team can work more efficiently and deliver higher-quality results

Like a chef follows a trusted recipe to ensure every dish is perfect, a design system provides the ingredients and instructions to create consistent, delightful user experiences every time.

When I started working on SongPop Party, I knew from the get-go that a consistent user experience would be essential. But, as the game grew, so did the challenges. With different designers working on various features, it was only a matter of time before our user interface started to feel fragmented. While players may not have always noticed, we needed things needed to change, and fast!

Enter the design system.

A design system is like the blueprint for a house — it ensures that every room, every wall, every door fits together seamlessly. Without one, you’re left with a patchwork of mismatched ideas. The SongPop Party project needed a system that would unify our design language, speed up our workflow, and make handoff between designers and developers as smooth as possible. Here’s how we built that system from scratch.

Why build a design system?

You know when you’re putting together IKEA furniture, and you realize halfway through that the pieces don’t quite fit? That’s what it’s like working without a design system. At first, it feels like you can manage, but as the project scales, all of those little inconsistencies become big ones.

In SongPop Party, we had these small but noticeable problems right from the jump: different buttons across screens, text that didn’t follow the same guidelines, and visual elements that just felt off. It became clear that we needed a single source of truth — a system that could govern the entire design process, and ensure that everything worked together smoothly.

The goal wasn’t just to make things look pretty. It was about creating a set of rules that would make it easier to iterate, improve collaboration, and make the user experience feel cohesive no matter who was working on what.

The building blocks: Design Tokens

The first step in building our design system was defining the core elements — what we in the design world call design tokens. These tokens are like the DNA of your design system. They dictate the fundamental elements of the UI, such as color, typography, and spacing. These tokens have a lot of power, as they help maintain consistency across the entire product.

For SongPop Party, we needed to be clear about:

Colors: Establishing a consistent color palette for everything from buttons to backgrounds.
Typography: Setting a strict hierarchy for headings, body text, and labels to keep text readable and easy to scan.
Spacing: Defining margins and padding rules so that layouts felt balanced across all devices.

The beauty of design tokens is that they make updating the system easy. If we needed to change the primary color, we could do it once, and it would automatically update everywhere. This saved us from the headache of manually adjusting individual components.

Building components that scale

Once the foundation was in place, it was time to create reusable components. Components are the Lego blocks of a design system — they’re pre-built pieces that you can use again and again in different contexts.

For SongPop Party, we focused on building:

Buttons: With different states (normal, hover, disabled) and variations (primary, secondary) to suit a range of contexts.
Navigation elements: Creating menus that worked just as well on a mobile phone as they did on a gaming console.
Modals and Cards: Flexible components that could adapt to different screen sizes and interaction methods.

By creating these reusable elements, we cut down on design time and reduced the risk of inconsistencies. Designers could just grab a button or form component, tweak it slightly if needed, and move on to the next task, rather than reinventing the wheel every time. Just like magic!

Designing for various platforms

Here’s where things got a little more complex. SongPop Party wasn’t just a mobile game — it also lived on consoles. That meant we had to think about how our design system would scale across different devices with very different user interaction methods.

Mobile devices are all about touch, while consoles rely on controllers. These differences required us to think carefully about how elements like buttons, navigation, and interactive states would behave across platforms. For example, a button that worked perfectly on a touchscreen might feel clunky when navigated with a joystick. So, we built our components to be flexible enough to adapt to different platforms, and we tested each variation thoroughly to ensure that it felt intuitive for every user, regardless of how they interacted with the game.

Collaboration and continuous improvement

A design system isn’t something you set and forget – it’s a living, breathing document that evolves as the product grows! Therefore, collaboration is essential to making sure it works for everyone involved. Throughout the process, I worked closely with developers, product managers, and other designers to make sure the system was meeting everyone’s needs. It took a lot of convincing the team that creating and utilizing a design system was worth the time and effort, but we did get there!

To strengthen the team's confidence in this new and unfamiliar approach, we held a kickoff session to introduce everyone to the design system and its inner workings. We also held regular review sessions to get feedback on what was working and what wasn’t. For example, after we pushed an update, we realized that some of the color contrast choices weren’t accessible enough. Based on that feedback, we went back and made adjustments to the design tokens, improving the experience for everyone.

The system continued to evolve, and that was the point — it was never meant to be static.

Documentation (AKA the design system user manual)

You can have the best design system in the world, but if people don’t know how to use it, it’s worthless. That’s why documentation is so important. I created detailed guidelines explaining how each component should be used, how to handle responsive behavior, and how to ensure everything worked across different platforms.

This documentation served as a cheat sheet for developers and other designers. They could refer to it whenever they had questions, making the handoff process much smoother. It saved time, reduced back-and-forth conversations, and ensured that everyone was aligned.

Lessons learned

Building the SongPop Party design system from scratch wasn’t just about solving the problem of inconsistent UI. It taught me the value of planning, collaboration, and iteration. Here are the key takeaways:

Start with the Fundamentals: Design tokens for color, typography, and spacing form the foundation of your design system. Get those right first.
Make Components Reusable: Build flexible, scalable components that can be reused across different parts of the product.
Design for Different Platforms: Keep in mind how users will interact with your product across various devices, and design accordingly.
Collaborate and Iterate: Your design system will evolve, so stay open to feedback and keep improving it as your product grows.
Document Everything: Good documentation ensures everyone’s on the same page, reducing confusion and speeding up the process.

In the end, the design system not only made our workflow more efficient, but it also created a more unified, enjoyable experience for our SongPop Party players (and us, too!). If you’re thinking about building a design system for your product, I hope these insights give you a good place to start ☺