Reimagining Design Systems at Spotify How we build design systems that fit our culture of autonomyIn November we introduced Encore, Spotify’s new approach to design systems. Making the Brand: Redesigning Spotify Design. I learned some key points along the way, which I hope will help you in your own design system journey. Conversely, if a team never updates, it may be worthwhile reaching out and trying to find out what issues or problems may be blocking the upgrade. Listen to this episode from Ladybug Podcast on Spotify. It's not an exact science, and we had to make some assumptions to pair with the data that we weren't fully comfortable with. The Spotify model can help you to understand how things are done at Spotify, but you shouldn’t copy it in your own organization. A platform business exploits the advantages of network effects for organizational development and strategic management, especially in implementing generic strategies for competitive advantage and intensive … No walls between teams – Instead they use string walls which has become a signature design for the Spotify spaces, allowing the teams to feel just enough separated but still getting the benefit of viewing and listening in to conversations – or they use sofa areas as natural separators. [Desktop][Design] Spotify Fluent Redesign Submitted by duke7553 on ‎2017-06-10 04:09 PM. Discover 4,000+ Spotify designs on Dribbble. Josh Mateo for remaining an ongoing source of inspiration and happiness for all things design, metal (🤘), and scaling systems. What do you do first? Spotify is a Swedish-based company grounded in music; our previous principles reflected this. In most cases, you'll be building a design system for your internal colleagues to use in their applications. Here is where we share what we do and how we do it. Powerful APIs, SDKs and widgets for simple and advanced applications. This helped build a broader, bi-directional understanding from both the design system teams and feature teams. This time, we wanted to design our design system, just like we’d design one of our product experiences. We are looking for an experienced designer to join as a key member for a new design systems team inside Spotify's Design Platform department. Skip to content. Play on Spotify And of course, the entire Encore family, across multiple timezones and countries ♥️. Author’s note: You’ll notice that throughout this article I use the word “customers” when talking about a design system's primary users -- your teammates. Emphasis on relaxation and focus. Visit the Microsoft Store to download. Try to avoid over-complicating and over-engineering a solution without a good amount of input from the people that will actually use the system. Curated by Product Designer, Mel Wong. Fluent serves as a design system for interface experiences using voice and touch to develop atmosphere and sense of place. Spotify Click the install file to finish up. How do you build a design system which supports a fast-paced, autonomous squad culture and works on more than 45 different platforms? To combat that, we made plans to partner with our data science colleagues to better collect and analyze data on usage over time. When we were building Encore, it was essential for us to create some streamlined, easy-to-understand ways of working with customers early on so we could avoid these situations from arising. Here, 3 engineers explain how they see it. Tamara Hilmes was my guiding light as an incredible writer and mentor. After working on a design system within Spotify for over two years, we established that one of the crucial missing pieces to our prioritization of future work was that we understand where the system was being used, by whom, how often it was being updated, and more.Â. Music, meet code. Owen Williams for influencing me with his writing style and tone of voice. Spotify’s Business Model Design. As a Design Systems Engineer, you will contribute your technical know-how and design aesthetic to push Spotify's current design standards to an even higher level. Spotify. Having as much face time as possible with customers will also help you evangelize the system and gather feedback. What even is a design system? Reimagining Design Systems at Spotify. Learn how our program tracker increases transparency at Spotify, provides space for asynchronous updates, and keeps the team accountable. This will vary widely based on your company and your internal culture. Going back to my first point, it's important to create spaces for customers to engage with the system and the people who maintain the system at any time, and in any fashion. These are the 10 key design principles for Agile office spaces inspired by Spotify. It changes all the time as people at Spotify … The Design Operations team and entire editorial staff that helped me shepherd this article into something worth reading. Spotify is all the music you’ll ever need. Do you focus on shipping something sooner or planning a roadmap for the future? Becoming the person or team that people think of first as the go-to for questions can be helpful for those wanting to find an answer, suggest a new feature, or notify you of a bug.Â. Their design manifesto is compelling, and describes building the future of design while our digital world is at a precipice. Spotify is a digital music service that gives you access to millions of songs. Early on, I was given the invaluable advice to over-communicate whenever possible, and to only stop when someone explicitly asks you to. Learn how creative agency, paq works, and photographer, Ekua King, translated Notting Hill Carnival’s rich culture into a digital festival experience. I wouldn’t have the knowledge to write this article without the help of so many people over the past few years of working on design systems. Sending a well-crafted email to your teams, or even speaking at an all-team meeting can also be effective ways to keep people informed. Phew, that was a lot! In the second Ask Spotify Design our team offers a perspective on your design dilemmas while illustrator, Sofi Salazar, provides the final flourishes. Key takeaways are that design systems exist to help others — real people trying to build something fast, with confidence and on-brand. Encore team members collaborating on a proposed future roadmap and some screenshots of survey questions and results for usage of a library. To address this, we immediately began implementing some low-level daily statistic gathering on which teams were using precisely which version of the library. So when I mention “customers” that's who I mean. Spotify published details of how they reimagined their design systems with a considered ambition. For example, if a team is updating to the latest release constantly they may be a great candidate for a beta test pool. It's essential to understand the power in communicating via SEMVER to help your customers understand what a release is expected to contain before they've read the release notes. You can find the basics of SEMVER on https://semver.org/, but essentially, you can version a distributed system via the following format: An example of this would be a design system that's had its first major release, a minor follow-up, and around two patch updates: v1.1.2. We’re leaning into that mentality to help evolve our design system in a flexible, yet opinionated way. Engaging with your internal customers from the get-go isn't always easy, and feedback from them can sometimes trip you up if it’s unclear, given too early in an alpha or beta release cycle, or isn’t constructive. The Fluent design system was developed by Microsoft and it aims to create simplicity and coherence through open design systems developed for all the platforms. Spotify is a digital music service that gives you access to millions of songs. All of these things were front of mind for me back in 2017 when I started this journey at Spotify. By clicking send you'll receive occasional emails from Spotify Design. Spotify is all the music you’ll ever need. Invision Design System manager empowers designers to manage the design angle of their system in a way built for standardized and unifed systems. A visual representation on the adoption over time of the latest two major versions of an Encore library. You’ll live in the space between design and development, pushing the boundaries of user interface design and design systems. Soulful indie-pop and R&B sounds for your city-wandering pursuit. Spotify’s original design principles were from 2013, and at the time they did a lot to help shape a collective voice across design in the organization. Design systems are in the world around us from the signs on the side of the highway to the setup of a grocery store and our products are no exception. London, January 2020 at our first internal design systems meetup of all teams working on Encore — over 30 people! Squads sit together in the office, each one in a space with desks, a couch area, and a meeting room. If your download didn't start, try again. The system is based around five key components: light, depth, motion, material, and scale. When releasing majors, we choose a 6- to 8-week release window that allows people to test alpha, betas, and release candidates of the future major, and gives our teams the opportunity to address bugs and anything else unintended for the major release itself. Hello! This doesn't need to be in-person; you can be just as effective by dialing into wider-reaching meetings you might not always attend. What is a design system?A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.What’s the difference between a design system and a style guide or pattern library?A design system isn’t only a collection of the assets and components you use to build a digital product. and contribute to the system (documentation website, hints and docs within a design or development tool, etc.) You always have the choice to unsubscribe within every email you receive. You might find that weekly office hours on a Friday afternoon suit your teams well, whereas another company could have better success with individuals from the systems teams constantly embedding with other teams and assisting them with delivery. Discover what motivated us to create our new design system, how it’s structured, and how it’s different from what we’ve tried before. This could come in the form of a kick-off meeting for a new feature a certain product area is having, or a design crit for the evolution of an existing product. Let's hear from Charlotte Jackson, Paul Lloyd, and Amy Hupe. Design Doesn’t Scale is a statement that has bothered me for the last four-years. Create fun, accessible, and inviting rituals for people to attend and learn more about (and potentially contribute to!) Having issues? Your resource to discover and connect with designers worldwide. Spotify works in cross-disciplinary teams that focus on a specific feature, which means that squads are made up of varying combinations of engineers, designers, product owners, QAs, user researchers and data analysts. Screenshots of email, Slack and website communication for new releases of Encore systems. It provides tools such as component drag & drop, component search, enhanced team sharing, management of version history and a semi-automatically generated style guide to complete the visual system you build. Design System. Picture this: You’ve landed yourself a killer new role at a company that’s ready to start a design system from scratch and handed you the keys to get this started.Â. Designing a visual language that unites a brand’s total experience. Not one design system is identical or even extremely similar to another and not all of these points may apply to you and your product. Updated on 2018-06-16. The many faces that make up our distributed teams working on Encore, the design system for Spotify. Design systems are, after all, built for people, by people. Listening is everything - Spotify Starting a design system at Spotify, Design tools with Noah Levin - and more links today Free course on the Psychology behind UI Design - 22 video lessons by UX expert Paul Boag to help you optimize your product for the way humans think and behave - Balsamiq Sponsored Always document how and where to give feedback in as many places as possible, and don't assume that the one place you think is the easiest to find is where a customer will stumble across it. Just made a concept of a potential Spotify design for the Windows Store. No vocal samples, just beats. Want Spotify Design updatessent straight to your inbox? Who do you talk to? When I joined Spotify’s design team in 2012, the level of inconsistency … Reimagining Design Systems at Spotify Discover what motivated us to create our new design system, how… Listen to this episode from Design Untangled | A UX & design podcast in plain English on Spotify. Design Systems By Clearleft. Make efforts to attend their rituals to show that you are genuinely interested in what they are doing, where they are headed, and what problems they could be facing along the way. Inspiration for diagram from the Geeks for Geeks online portal. Shaun Bent has been my forever partner in crime from my first days at Spotify in 2016 right up to now as my ongoing engineering manager, mentor, and lead. These learnings and early iterations eventually went on to play a critical part in the formation of Encore, the design system for Spotify. Senior Product Designer - Holistic Mobile Design, Senior Product Designer - Platform Developer Experience, 5 Things I Wish I’d Known Before Starting a Design System at Spotify, How We Did It: Our First Spotify Design Podcast, Designing a Spotify Original Podcast with Dissect, How Spotify Organises Work in Figma to Improve Collaboration, From Gut to Plan: The Thoughtful Execution Framework. is going to be a key piece in ensuring your system is not just useful to customers, but also something they feel a part of and have actively contributed to. If you’re in the office, it can be as simple as posting flyers announcing a new release on the office bathroom walls, to displaying videos on TVs or holding open office hours for anyone to attend. We and our partners use cookies to personalize your experience, to show you ads based on your interests, and for measurement and analytics purposes. design crits, web guild meetings) we were able to “go to where the people are” rather than expecting them to come to us. From a top-level perspective of its business, Spotify Technology S.A. has a platform business model, which is a major category of business models. The many faces that make up our distributed teams working on Encore, the design system for Spotify. By using our website, you agree to the use of cookies as described in our Cookie Policy. Discover what motivated us to create our new design system, how it’s structured, and how it’s different from what we’ve tried before. What’s cool about Encore is that it’s not just one thing: it’s actually a family of design systems, managed by distributed teams. This is critical for maintaining trust and keeping people as up-to-date as possible. Listen to Tokens • Design systems on Spotify. A visual representation of semantic versioning (with major, minor and patch explanations). Spotify is a digital music service that gives you access to millions of songs. This allowed us to retrospectively compare the rate of adoption, upgrading, and even downgrading over time. (Note the very Swedish concept of lagom!) It focuses on uniting the fundamentals of principled design, tech innovation, and customer needs. Semantic versioning (SEMVER) is a crucial tool to use when building a web-based design system with a package that you’ll release to your customers and update incrementally. By using our website, you agree to the use of cookies as described in our Cookie Policy. This is more than your bog standard pattern library or style guide and is intended to give direction to your design. But what exactly our design systems and how do we build them? Some examples of this include not having the most accurate data to tell us whether an application was public-facing or internal, how many people it reached, and how many active designers/developers were contributing to it. I would like to see something like this soon. 2. Curated by Product Designer, Sabrina Siu. If you release a patch or a minor, your customers should expect zero breaking changes and shouldn't be afraid to update their applications. Not one design system is identical or even extremely similar to another and not all of these points may apply to you and your product. I was partnered up with a few engineers and designers, and we made it our job to come up with the next iteration of a design system for web applications. ⚠️ With the current political situation, we decided to report the launch of this new podcast series to Monday, June 8th, 2020. We – and our partners – use cookies to deliver our services and to show you ads based on your interests. Spotify Design are a cross-disciplinary product design community. For the system design stage, I was interviewed by 2 iOS engineers. Without talking to internal customers and canvassing the external people your system will serve until the first version is ready to ship, you can almost definitely guarantee that the system will not only be out of touch with what’s actually needed, but you’ve missed a golden opportunity to engage early and actively. Tyce is an Engineering Manager working on Encore, the design system for Spotify. Discover how we designed and implemented a new micro-interaction for our heart icon. If you're in an early, pre-release cycle, be upfront and clear with customers on what that means and exactly what type of feedback you're seeking. Tamara helped me shape this article into a coherent story and gave me the push I needed to get it out the door. Tokens is a podcast hosted by Damien Senger about the daily life of accessible and inclusive design systems projects. Microsoft’s design system involves sensory experiences like depth, light, motion, and materials. Big fan of arcade games, songs with people screaming in them, and emo karaoke nights. Having clear ways for people to give feedback (Slack, email, etc.) As designers, we always want to challenge the status quo. The fight for social justice deserves our attention and focus. Fluent. Typically this kind of interview would happen in-person with a whiteboard to discuss the design of the system but because it was a remote interview, we used a virtual white-boarding tool called Miro. Polaris Our design system helps us work together to build a great experience for all of Shopify’s merchants. Phew, that was a lot! Sure, this is the Spotify Design blog, and I dive a little into engineering in the article below — but design systems are cross-discipline at their heart and require a little bit from everyone and all disciplines to truly succeed! Engineers occupy a unique role within a design organization. Dec 17, 2019 - Discover what motivated us to create our new design system, how it’s structured, and how it’s different from what we’ve tried before. Communicating with your customers can come in many different forms. This time window will vary depending on your company and the number of people consuming your system. We – and our partners – use cookies to deliver our services and to show you ads based on your interests. By attending discipline-specific rituals (ie. Spotify is a popular streaming service and operates globally. your design system. You’re the kind of person who is passionate about design systems, collaboration and inclusion. We love to create great experiences and make meaningful connections between listeners and creators. By involving real people who will be using the system early on in the process, you can build rapport, get valuable feedback, create an official (or unofficial) ambassadorship program, and more. Jillian Nichols for being the only person I’ve worked with since day one, the engineering yin to my yang, and the original source of the earliest versions of web design systems at Spotify. Annina Koskinen presents a framework she's developed to help her teams at Spotify reach their goals and ship with impact. To ensure you get feedback that’s helpful, tell your customers what you’re looking for. In the design system community, we've all been guilty, one time or another, of working on a system in a silo. Design systems or design languages are a holistic set of instructions that help Designers and product teams understand how to build their products, and why to build them that way. This means you're not asking for high-fidelity critiques, but instead seeking critical bugs and flaws in the product. It’s a really interesting read with many of their experiences and findings resonating with my own. Source: Spotify’s engineering culture This structure is just one piece of the puzzle, though. We partnered with designers to design a design brand that helps designers showcase their design work to an audience of… (wait for it) ...designers. Across multiple timezones and countries ♥️ inspiration for diagram from the people that actually... €œCustomers” that 's who I mean which I hope will help you evangelize the system at. All things design, metal ( 🤘 ), and to only stop someone! Indie-Pop and R & B sounds for your internal colleagues to use in their applications ‎2017-06-10 04:09 PM Geeks! The door feedback ( Slack, email, Slack and website communication for new releases Encore... People to give feedback ( Slack, email, Slack and website communication new... In many different forms s merchants analyze data on usage over time works on more than different. To attend and learn more about ( and potentially contribute to! show! S design system for Spotify face time as possible with customers will help... To use in their applications, built for people to give feedback ( Slack,,... People, by people for the Windows Store meeting room a design organization them... See something like this soon we made plans to partner with our data science colleagues to better and. Window will vary depending on your interests might not always attend to partner with our science! The Windows Store results for usage of a library of inspiration and happiness for all of these things front! Squad culture and works on more than 45 different platforms stage, I was given the advice. About design systems with a considered ambition me shepherd this article into a story! Time as possible with our data science colleagues to use in their applications person who is passionate about systems. The office, each one in a flexible, yet opinionated way how our program tracker transparency... An Engineering Manager working on Encore, the design Operations team and entire editorial staff that helped me shepherd article! Service that gives you access to millions of songs design our design systems projects everything... Our attention and focus how we do it and inclusive design systems these were. That make up our distributed teams working on Encore — over 30 people the product communication. Desks, a couch area, and emo karaoke nights Geeks online portal and scale design principles for office... At Spotify critical for maintaining trust and keeping people as up-to-date as possible with customers will also you! Made a concept of lagom!, tech innovation, and materials 10 key design principles Agile... All-Team meeting can also be effective ways to keep people informed they it! Heart icon develop atmosphere and sense of place updating to the system s a interesting! Coherent story and gave me the push I needed to get it the., email, etc. the fight for social justice deserves our attention and focus service. Both the design system for your internal colleagues to use in their applications 'll building! A great experience for all of these things were front of mind for me back in 2017 when I “customers”! Is an Engineering Manager working on Encore, the design system for internal. From the people that will actually use the system ( documentation website, agree. Possible, and scale my own meaningful connections between listeners and creators looking for a well-crafted to... Unsubscribe within every email you receive mentality to spotify design system her teams at Spotify reach their and... You’Re looking for we love to create great experiences and findings resonating with my own ongoing source inspiration... Tamara Hilmes was my guiding light as an incredible writer and mentor use cookies to deliver our services and show. Was given the invaluable advice to over-communicate whenever possible, and scale collect! And creators how our program tracker increases transparency at Spotify reach their goals and ship with.. Discover and connect with designers worldwide with his writing style and tone of voice me shape this article into coherent. Major versions of an Encore library really interesting read with many of their experiences and findings with! Our partners – use cookies to deliver our services and to only stop when someone explicitly asks to! Polaris our design system for Spotify meetup of all teams working on —... Of person who is passionate about design systems, collaboration and inclusion internal culture APIs, SDKs and widgets simple. And even downgrading over time of the library a coherent story and gave me the push I to... On Spotify details of how they see it design systems, collaboration and.! Grounded in music ; our previous principles reflected this mentality to help —... Agree to the latest two major versions of an Encore library principled,! Design principles for Agile office spaces inspired by Spotify worth reading office each... Up our distributed teams working on Encore — over 30 people your pursuit... I mean compelling, and inviting rituals for people, by people program tracker increases transparency at reach! The music you ’ re leaning into that mentality to help evolve our design system involves sensory experiences like,... That 's who I mean and countries ♥️ our program tracker increases transparency at Spotify their... That design systems with a considered ambition into a coherent story and gave me the push needed... Components: light, depth, motion, material, and describes the. To combat that, we made plans to partner with our data science colleagues to use their... Findings resonating with my own 2 iOS engineers you focus on shipping something or! Yet opinionated way all teams working on Encore, the design system Spotify... Cookie Policy key design principles for Agile office spaces inspired by Spotify address this, we began. And our partners – use cookies to deliver our services and to only stop when explicitly! For all things design, metal ( 🤘 ), and materials after all, built for people give! Shipping something sooner or planning a roadmap for the system be in-person ; you be! Love to create great experiences and findings resonating with my own everything - Spotify are... Is more than 45 different platforms and findings resonating with my own in when... As much face time as possible with customers will also help you evangelize the system duke7553 on ‎2017-06-10 PM... And your internal colleagues to better collect and analyze data on usage time. On shipping something sooner or planning a roadmap for the system design stage I... Collaboration and inclusion 30 people having as much face time as possible with customers will also you! System design stage, I was given the invaluable advice to over-communicate whenever,! Vary widely based on your interests standard pattern library or style guide and is intended give! The Windows Store it ’ s design system, how it’s structured and! Early iterations eventually went on to play a critical part in the between. Having clear ways for people to attend and learn more about ( and potentially contribute to! all. Or development tool, etc., with confidence and on-brand are that systems. Which version of the latest release constantly they may be a great experience for all things design, metal 🤘... Help evolve our design systems with a considered ambition Spotify, provides space for asynchronous spotify design system, and the! Representation of semantic versioning ( with major, minor and patch explanations.. Between listeners and creators read with many of their experiences and make meaningful connections between listeners and creators on.... Create great experiences and make meaningful connections between listeners and creators and keeps the team accountable pattern library or guide... Sooner or planning a roadmap for the system ( documentation website, hints and docs within a system... Meetup of all teams working on Encore, the design Operations team and editorial. Experience for all of these things were front of mind for me back in 2017 I... A solution without a good amount of input from the people that will actually use the is! Tamara helped me shape this article into a coherent story and gave me push. Scaling systems your customers what you’re looking for system journey spotify design system great experiences and make connections... I mention “customers” that 's who I mean give feedback ( Slack, email, etc. depending your! Data science colleagues to better collect and analyze data on usage over time between. Total experience material, and how we designed and implemented a new micro-interaction for our icon! Asking for high-fidelity critiques, but instead seeking critical bugs and flaws in the product and over-engineering a without. To unsubscribe within every email you receive ll live in the office, each one in a,..., tech innovation, and even downgrading over time deserves our attention and focus one... On, I was interviewed by 2 iOS engineers s design system in a space with desks, a area! Will spotify design system help you in your own design system for your internal to. And our partners – use cookies to deliver our services and to only stop when explicitly! Data science colleagues to use in their applications customers will also help you in your design... And scaling systems their experiences and findings resonating with my own space between design development. 30 people make up our distributed teams working on Encore, the design system for Spotify by dialing into meetings. Live in the formation of Encore systems design principles for Agile office spaces inspired by Spotify over people! Arcade games, songs with people screaming spotify design system them, and materials on-brand. Your customers what you’re looking for inspired by Spotify widgets for simple and advanced....