Hire a designer

The Evolution from GLUE to Encore

The shift from GLUE to Encore represented a major change in Spotify's design strategy. GLUE combined several design systems that often functioned independently, resulting in a disjointed user experience. By moving away from GLUE, Spotify took an important step toward developing a more cohesive design philosophy. Encore was created to address the challenges that came with rapid expansion and a growing array of use cases. Its goal was to harmonize the design language while still allowing teams to keep their distinct cultural identities. This transformation went beyond mere rebranding; it reflected a genuine commitment to enhancing how design could better meet the needs of users across all platforms.

As Encore evolved, it became evident that the design system needed to focus not just on technical elements, but also on the human side of things. Teams needed tools that would enhance collaboration and promote feedback, which in turn led to improved design results. This transformation wasn't just about building a new system; it was about rethinking the way design decisions are made and making sure that everyone in the organization has the opportunity to share their perspective.

Why Encore is a Family of Design Systems

Encore is often described as a "family of design systems," and this term encapsulates its essence perfectly. Instead of presenting a one-size-fits-all solution, Encore embraces diversity by allowing different teams to adapt the core principles to fit their unique needs. This approach not only respects the varied experiences of the design teams but also fosters a sense of ownership among them. Each team can draw from a shared foundation while customizing their components to align with their specific requirements.

This family structure fosters knowledge sharing and the exchange of ideas. Designers from different platforms can work together, learn from one another and improve the overall quality of their designs. The goal is to build a strong ecosystem where various systems can coexist and flourish under a shared vision. By encouraging independence within a structured framework, Spotify seeks to find the right balance between standardization and innovation, ensuring the design system stays relevant as the company continues to evolve.

Cross-Platform Challenges and Opportunities

While the ambition behind Encore is admirable, managing a design system that spans 45 platforms comes with its own set of challenges. One of the primary hurdles is maintaining consistency across different devices while still catering to the unique characteristics of each platform. As teams work to create cross-platform components, they often encounter complexities that require careful coordination and communication. It's a balancing act between creating cohesive experiences and respecting platform-specific nuances.

Despite these challenges, there are also tremendous opportunities that arise from this cross-platform focus. By fostering a collaborative environment, Spotify can harness the diverse perspectives of its design teams to innovate in ways that might not have been possible in a more isolated setting. The goal is to create a seamless experience for users, regardless of the device they're using. This ambition drives Spotify's commitment to evolving Encore into a design system that not only meets the needs of today but is also adaptable for future developments.

Reinforcing Design Goals Over Organizational Models

One of the biggest changes Spotify is making is putting design goals ahead of its current organizational structures. When Encore was first launched, it was designed to reflect the company’s culture of autonomy, allowing different teams to operate relatively independently. However, this approach unintentionally created silos that hindered collaboration and cross-platform design. By evolving Encore to prioritize experience-driven design instead of sticking strictly to the existing hierarchy, Spotify aims to promote a more cohesive approach. This change encourages teams to work together, share insights and create better, more integrated user experiences across all platforms.

Tracking Success with Data-Driven Metrics

Data is a powerful tool and Spotify is harnessing it in innovative ways to track the success of its design system. Initially, the adoption of Encore was monitored manually, which proved to be a cumbersome process. Now, automated dashboards are in place that query code repositories daily, providing real-time insights into token and component usage. This evolution allows Spotify to identify missed opportunities and assess how well teams are embracing the design system. Understanding usage patterns not only helps in measuring satisfaction but also pinpoints areas where additional support or resources may be needed.

Balancing Flexibility and Reusability in Components

In the early days of Encore, the focus was on being flexible, especially when it came to mobile design, which sometimes meant that reusability took a backseat. But as more mobile teams began to see the advantages of using reusable components, Spotify recognized the need to strike a better balance. By forming a dedicated team to develop reusable mobile components, they've made a noticeable impact. This initiative aims to ensure that mobile components are in sync with those used on the web, allowing every platform to benefit from the same high-quality, reusable designs. By fostering a culture that values both flexibility and reusability, Spotify is working on a design system that can easily adapt to various needs while still upholding a high standard of quality.

Integrating Semantic Design Tokens for Better Maintenance

One of the challenges Spotify faced was the use of non-semantic tokens, which made it difficult to maintain and evolve the design system effectively. These tokens often lacked context, leading to confusion and inefficiencies. To address this, Spotify is investing in semantic token layers that provide clarity and context around design elements. By understanding how these tokens are used within different contexts, teams can safely evolve design tokens without disrupting existing workflows. This thoughtful approach not only simplifies maintenance but also enhances the overall user experience.

Automating Design System Synchronization with Tools

Automation has become a fundamental part of Spotify’s design system approach. Tools like the Figgy bot have revolutionized how design tokens are synchronized across different platforms. This bot can update design tokens from code to thousands of Figma files in just minutes, significantly cutting down the time and effort needed for updates. Besides just speeding things up, automation ensures consistency across platforms, allowing designers to spend more time on creative tasks instead of manual work. As Spotify continues to innovate with new algorithms for layout and spacing themes, automation will be essential for keeping the design workflow running smoothly.

Building Advocates Through Community and Embedding

A thriving design system is about more than just tools and processes; it’s also about the people who use it. Spotify’s embed program has been instrumental in building a community around Encore. By allowing contributors to join Encore teams temporarily, Spotify fosters a sense of ownership and advocacy. Participants from diverse backgrounds bring fresh perspectives, enriching the design process and strengthening collaboration. Regular interactions and shared goals help cultivate an inclusive environment where everyone feels empowered to contribute to the design system's success. This community-focused approach not only improves onboarding and documentation but also enhances remote collaboration, making the design system a shared asset for all.

Conducting Collaborative Research Across Platforms

When Spotify set out to innovate their design system, they recognized the value of conducting collaborative research that spans multiple platforms. This approach allows teams to understand the specific needs and behaviors of users on different devices. Whether it's mobile, web or desktop, the insights gathered from each platform can inform the design process, ensuring that the components built are not just functional but also resonate with users.

By organizing workshops and brainstorming sessions with cross-disciplinary teams, Spotify can leverage a rich pool of knowledge and experience. This kind of collaborative atmosphere sparks creativity and enhances problem-solving, leading to improved design outcomes. The goal is to create a space where team members feel at ease sharing their ideas, challenges and successes, which opens the door to innovative solutions that benefit everyone involved.

Designing Unified Yet Platform-Specific Components

One of the major challenges in creating a cross-platform design system is finding the right balance between consistency and uniqueness. Spotify’s design teams have discovered that while it’s important to keep branding and user experiences aligned, each platform has its own distinct features that need to be acknowledged. This insight has led them to create components that are cohesive in their fundamental functions but customized for the specific needs of each platform.

For example, while a button might look similar on both mobile and web platforms, the ways users interact with it and the visual cues can vary quite a bit to improve usability. By creating components tailored to each platform, Spotify not only boosts user satisfaction but also enables their teams to craft experiences that feel right at home on each device. This adaptability is important because it encourages innovation while still following the main design principles laid out in the Encore framework.

Managing Complexity and Dependencies Effectively

As a design system grows, so does its complexity. Spotify has had to navigate this complexity carefully, especially as more use cases and platforms emerge. Effective management of dependencies is vital to ensure that changes made to one component do not inadvertently affect others. This requires robust documentation and a clear understanding of how components interact within the larger system.

By employing a systematic approach to manage these dependencies, Spotify can minimize risks and maintain the integrity of their design system. Regular audits and updates help identify potential issues early on, allowing teams to address them before they escalate. This proactive stance not only preserves the quality of the design system but also fosters a culture of accountability and ownership among team members.

Fostering Cross-Functional Collaboration for Cohesion

At the heart of Spotify's design system innovation is a commitment to cross-functional collaboration. Designers, engineers, product managers and other stakeholders must work together cohesively to ensure that the design system meets the needs of all users. This collaboration goes beyond mere communication; it involves actively involving different perspectives in the design process.

By creating cross-functional teams that include members from various disciplines, Spotify can leverage the strengths and insights of each role. This not only enhances the quality of the design system but also fosters a sense of shared ownership among team members. When everyone feels invested in the outcome, the result is a more cohesive and effective design system that can adapt to the evolving landscape of user needs and technological advancements.

Providing Multiple Layers of Abstraction for Flexibility

Picture yourself in a bustling kitchen, surrounded by a wide array of ingredients. Some are all set to go, while others require a bit more attention. This is much like how Spotify’s design system operates. It provides a mix of components that vary in complexity and readiness. For instance, a designer aiming to whip up a quick prototype can effortlessly grab some appealing and functional pre-made elements. Meanwhile, another team might take the opportunity to explore the system more thoroughly, crafting custom components tailored to their unique design needs.

This flexibility doesn’t just enhance productivity; it also fosters a collaborative spirit. As designers and developers interact with these layers, they can experiment and iterate more freely. The team can share insights and learn from each other’s work, leading to a richer design culture at Spotify. With multiple abstraction levels, the design system becomes less about enforcing rules and more about empowering creativity.

Balancing Customization and Configuration in APIs

APIs are the backbone of Spotify's design system and finding the right balance between customization and configuration is essential. Think of it this way: you want your API to be powerful enough to allow customization, but not so complex that it becomes overwhelming. Spotify has managed to strike that balance beautifully. The design system allows developers to tweak and configure components, enabling them to create experiences that feel unique to their product while still adhering to the overarching Spotify brand.

The key is to provide enough freedom for teams to explore their ideas without losing sight of the brand’s identity. By offering configurable options within the API, teams can make adjustments that suit their specific needs, whether they’re crafting a new feature or optimizing an existing one. This approach not only maintains consistency across the platform but also encourages teams to innovate, knowing they have the tools to express their creativity within the established framework.

In the end, it’s this delicate balance that helps Spotify remain at the forefront of design innovation, continually refining its approach while fostering an environment where creativity can thrive.