Design System

Octopus

Story

Despite the numerous negative impacts of COVID, one positive outcome for us was the development of our own Design System. I took on the official responsibility for the project when the design team had already established the fundamentals. My initial task was to consolidate our components into a unified format. Following a successful implementation in Figma, the real work began: the code-side implementation with proper aligned processes between designers - developers - design system team.

download iconOpen in Figma

Library analytics

Teams using this library

10 teams

Total components

65

Total styles

42

Average activity a week

3.9k inserts

Concept

A well-functioning design system encompasses various aspects. It serves as a communication channel between design and development, expedites processes, and allows for increased iteration opportunities. Therefore, before we deep dived into the project, we needed to understand how the system operates between developers and designers:

  • How do designers approach new and existing tasks?

  • How do developers and designers maintain existing files?

  • Do developers consider only what they see in Figma or also take into account the code side?

  • How does communication function between designers and developers during sprints?

  • How is handoff executed at the conclusion of a sprint?

Solutions(?)

Design system as a channel

We aimed to channel the design and development processes as much as possible to prevent bypassing the design system and resorting to custom solutions. By preserving the integrity of the design, developers encounter fewer custom solutions.

Version tracking in Figma

We implemented a weekly update cycle, where DS-related designers work on a separate branch and synchronously refresh the main branch. This facilitates cyclic planning and allows the DS team to prepare everything for implementation.

Changelog for everything

Regardless of the scale of the innovation, providing a detailed description is essential. This lays a solid foundation for documentation, ensuring that even those who do not utilize every component are aware of any changes.

Requesting a new component
by the DS team

Design "lawlessness" has no place in the design system. When a designer requests a new component, filling out a form supplies us with all the necessary information, streamlining the implementation process.

Managing frequently changing content on GitHub

As the DS team is small, automation plays a crucial role. Therefore, we created a shared Git repository for icons, animations, and illustrations. By uploading these assets, only a new build on the code side with the updated content is required. This prevents developers from receiving custom components from designers, as it disrupts the code by introducing unique solutions. For designers we did a dedicated library for all of these resources.

Happy accident like Bob Ross

One of our most intriguing successes related to the design system occurred during a meeting when we brainstormed ideas for a Halloween-themed experience for our users. It reminded us of a previous incident where the marketing team had wanted to organize a similar event, but there was no suitable code solution that could be implemented within a week.

However, thanks to the design system, we had the flexibility to easily incorporate animations and illustrations into the project and publish them in a timely manner. We even ensured that the event automatically disappeared once its timeframe had passed. (We've all seen Christmas marketing campaigns lingering around well into January, right?)

We named the project "Seasonal Design," and it quickly gained momentum, becoming a noteworthy initiative that even caught the attention of our leadership.

Notably, the project attracted approximately 8% more new users compared to the same period in the previous year. Since then, we have successfully executed several other events, with many more on the horizon.

Challenges

While a design system offers numerous advantages, it can also present challenges. We recognized this and resolved most of them or encountered them only a few times. However, some persist to this day. Here are some of the issues we faced:

Continuous education is necessary to adopt a design system mentality, encouraging both the design and development teams to think in a "systematic" way. Merely sharing a library is insufficient; constant signaling is vital, as it is an inevitable stage in the development process.

Monitor custom solutions from the design side and raise concerns if the team deviates from the DS guidelines.

We cannot construct an plane while already flying. We need a stable foundation that may not cover everything, but what it does cover must be utilized and followed with unwavering commitment.

Designers need to move away from working in silos and considering only their own solutions. They should stay informed about other team's solutions and follow the global rules.

A dedicated team is required to maintain and adapt the design system to evolving needs. Once initial tasks are completed, ongoing attention is necessary.

Management may not initially grasp the necessity and benefits of a design system in terms of time and cost savings. In such cases, the design and development teams should provide support and present arguments to management, helping them understand its value.

It is crucial to understand that a design system is not an adversary that undermines designers' work or restricts creative solutions.

Design System

Octopus

Story

Despite the numerous negative impacts of COVID, one positive outcome for us was the development of our own Design System. I took on the official responsibility for the project when the design team had already established the fundamentals. My initial task was to consolidate our components into a unified format. Following a successful implementation in Figma, the real work began: the code-side implementation with proper aligned processes between designers - developers - design system team.

Solutions(?)

Design system as a channel

We aimed to channel the design and development processes as much as possible to prevent bypassing the design system and resorting to custom solutions. By preserving the integrity of the design, developers encounter fewer custom solutions.

Version tracking in Figma

We implemented a weekly update cycle, where DS-related designers work on a separate branch and synchronously refresh the main branch. This facilitates cyclic planning and allows the DS team to prepare everything for implementation.

Changelog for everything

Regardless of the scale of the innovation, providing a detailed description is essential. This lays a solid foundation for documentation, ensuring that even those who do not utilize every component are aware of any changes.

Requesting a new component
by the DS team

Design "lawlessness" has no place in the design system. When a designer requests a new component, filling out a form supplies us with all the necessary information, streamlining the implementation process.

Managing frequently changing content on GitHub

As the DS team is small, automation plays a crucial role. Therefore, we created a shared Git repository for icons, animations, and illustrations. By uploading these assets, only a new build on the code side with the updated content is required. This prevents developers from receiving custom components from designers, as it disrupts the code by introducing unique solutions. For designers we did a dedicated library for all of these resources.