London, January 2020 at our first internal design systems meetup of all teams working on Encore — over 30 people! Phew, that was a lot! 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. Tamara helped me shape this article into a coherent story and gave me the push I needed to get it out the door. 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. Polaris Our design system helps us work together to build a great experience for all of Shopify’s merchants. 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. 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. Encore team members collaborating on a proposed future roadmap and some screenshots of survey questions and results for usage of a library. Discover 4,000+ Spotify designs on Dribbble. Spotify published details of how they reimagined their design systems with a considered ambition. Just made a concept of a potential Spotify design for the Windows Store. Reimagining Design Systems at Spotify Discover what motivated us to create our new design system, how… This is more than your bog standard pattern library or style guide and is intended to give direction to your design. It’s a really interesting read with many of their experiences and findings resonating with my own. Listening is everything - Spotify To ensure you get feedback that’s helpful, tell your customers what you’re looking for. 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. Inspiration for diagram from the Geeks for Geeks online portal. This time window will vary depending on your company and the number of people consuming your system. 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. 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. 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. Microsoft’s design system involves sensory experiences like depth, light, motion, and materials. 2. 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. 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. 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. We – and our partners – use cookies to deliver our services and to show you ads based on your interests. 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. The Spotify model can help you to understand how things are done at Spotify, but you shouldn’t copy it in your own organization. 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. We – and our partners – use cookies to deliver our services and to show you ads based on your interests. Learn how creative agency, paq works, and photographer, Ekua King, translated Notting Hill Carnival’s rich culture into a digital festival experience. Phew, that was a lot! Screenshots of email, Slack and website communication for new releases of Encore systems. 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. 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. All of these things were front of mind for me back in 2017 when I started this journey at Spotify. You’re the kind of person who is passionate about design systems, collaboration and inclusion. How do you build a design system which supports a fast-paced, autonomous squad culture and works on more than 45 different platforms? Source: Spotify’s engineering culture This structure is just one piece of the puzzle, though. 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 … Do you focus on shipping something sooner or planning a roadmap for the future? We partnered with designers to design a design brand that helps designers showcase their design work to an audience of… (wait for it) ...designers. Squads sit together in the office, each one in a space with desks, a couch area, and a meeting room. 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. Skip to content. This will vary widely based on your company and your internal culture. Design Systems By Clearleft. Want Spotify Design updatessent straight to your inbox? 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. Big fan of arcade games, songs with people screaming in them, and emo karaoke nights. Spotify is all the music you’ll ever need. 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. In the design system community, we've all been guilty, one time or another, of working on a system in a silo. 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. Key takeaways are that design systems exist to help others — real people trying to build something fast, with confidence and on-brand. What do you do first? 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. 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. Invision Design System manager empowers designers to manage the design angle of their system in a way built for standardized and unifed systems. 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. Reimagining Design Systems at Spotify. For the system design stage, I was interviewed by 2 iOS engineers. This allowed us to retrospectively compare the rate of adoption, upgrading, and even downgrading over time. Here is where we share what we do and how we do it. design crits, web guild meetings) we were able to “go to where the people are” rather than expecting them to come to us. 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. Having clear ways for people to give feedback (Slack, email, etc.) 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. Who do you talk to? Emphasis on relaxation and focus. So when I mention “customers” that's who I mean. As designers, we always want to challenge the status quo. Having as much face time as possible with customers will also help you evangelize the system and gather feedback. If your download didn't start, try again. You’ll live in the space between design and development, pushing the boundaries of user interface design and design systems. and contribute to the system (documentation website, hints and docs within a design or development tool, etc.) By using our website, you agree to the use of cookies as described in our Cookie Policy. your design system. In the second Ask Spotify Design our team offers a perspective on your design dilemmas while illustrator, Sofi Salazar, provides the final flourishes. The system is based around five key components: light, depth, motion, material, and scale. 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. The many faces that make up our distributed teams working on Encore, the design system for Spotify. 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.Â. Josh Mateo for remaining an ongoing source of inspiration and happiness for all things design, metal (🤘), and scaling systems. 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. 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 Early on, I was given the invaluable advice to over-communicate whenever possible, and to only stop when someone explicitly asks you to. By clicking send you'll receive occasional emails from Spotify Design. 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. Hello! We and our partners use cookies to personalize your experience, to show you ads based on your interests, and for measurement and analytics purposes. Spotify is all the music you’ll ever need. 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. Having issues? Spotify Design are a cross-disciplinary product design community. By attending discipline-specific rituals (ie. 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. [Desktop][Design] Spotify Fluent Redesign Submitted by duke7553 on ‎2017-06-10 04:09 PM. This time, we wanted to design our design system, just like we’d design one of our product experiences. Play on Spotify We’re leaning into that mentality to help evolve our design system in a flexible, yet opinionated way. I would like to see something like this soon. No vocal samples, just beats. This is critical for maintaining trust and keeping people as up-to-date as possible. 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. Your resource to discover and connect with designers worldwide. Tokens is a podcast hosted by Damien Senger about the daily life of accessible and inclusive design systems projects. 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. 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. A visual representation of semantic versioning (with major, minor and patch explanations). These learnings and early iterations eventually went on to play a critical part in the formation of Encore, the design system for Spotify. 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. You always have the choice to unsubscribe within every email you receive. Spotify’s Business Model Design. This means you're not asking for high-fidelity critiques, but instead seeking critical bugs and flaws in the product. Here, 3 engineers explain how they see it. Spotify is a digital music service that gives you access to millions of songs. The fight for social justice deserves our attention and focus. For example, if a team is updating to the latest release constantly they may be a great candidate for a beta test pool. 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. Designing a visual language that unites a brand’s total experience. What even is a design system? Create fun, accessible, and inviting rituals for people to attend and learn more about (and potentially contribute to!) 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. If you release a patch or a minor, your customers should expect zero breaking changes and shouldn't be afraid to update their applications. 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. 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.Â. Spotify is a popular streaming service and operates globally. 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. (Note the very Swedish concept of lagom!) I learned some key points along the way, which I hope will help you in your own design system journey. The Design Operations team and entire editorial staff that helped me shepherd this article into something worth reading. Their design manifesto is compelling, and describes building the future of design while our digital world is at a precipice. 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.Â. 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. 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. Engineers occupy a unique role within a design organization. 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! 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. Fluent. It changes all the time as people at Spotify … Listen to this episode from Design Untangled | A UX & design podcast in plain English on Spotify. Spotify is a digital music service that gives you access to millions of songs. Music, meet code. By using our website, you agree to the use of cookies as described in our Cookie Policy. A visual representation on the adoption over time of the latest two major versions of an Encore library. Discover how we designed and implemented a new micro-interaction for our heart icon. This helped build a broader, bi-directional understanding from both the design system teams and feature teams. Let's hear from Charlotte Jackson, Paul Lloyd, and Amy Hupe. It focuses on uniting the fundamentals of principled design, tech innovation, and customer needs. But what exactly our design systems and how do we build them? The many faces that make up our distributed teams working on Encore, the design system for Spotify. Annina Koskinen presents a framework she's developed to help her teams at Spotify reach their goals and ship with impact. 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. 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. Communicating with your customers can come in many different forms. Design System. Powerful APIs, SDKs and widgets for simple and advanced applications. Making the Brand: Redesigning Spotify Design. Tyce is an Engineering Manager working on Encore, the design system for Spotify. Spotify Click the install file to finish up. Soulful indie-pop and R&B sounds for your city-wandering pursuit. Curated by Product Designer, Mel Wong. These are the 10 key design principles for Agile office spaces inspired by Spotify. Curated by Product Designer, Sabrina Siu. To address this, we immediately began implementing some low-level daily statistic gathering on which teams were using precisely which version of the library. Learn how our program tracker increases transparency at Spotify, provides space for asynchronous updates, and keeps the team accountable. Owen Williams for influencing me with his writing style and tone of voice. ⚠️ With the current political situation, we decided to report the launch of this new podcast series to Monday, June 8th, 2020. And of course, the entire Encore family, across multiple timezones and countries ♥️. 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 doesn't need to be in-person; you can be just as effective by dialing into wider-reaching meetings you might not always attend. Updated on 2018-06-16. We love to create great experiences and make meaningful connections between listeners and creators. Spotify is a digital music service that gives you access to millions of songs. Design Doesn’t Scale is a statement that has bothered me for the last four-years. Fluent serves as a design system for interface experiences using voice and touch to develop atmosphere and sense of place. 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. Listen to Tokens • Design systems on Spotify. Listen to this episode from Ladybug Podcast on Spotify. Visit the Microsoft Store to download. 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. To combat that, we made plans to partner with our data science colleagues to better collect and analyze data on usage over time. When I joined Spotify’s design team in 2012, the level of inconsistency … Design systems are, after all, built for people, by people. 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. 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. Your system ( and potentially contribute to! an Engineering Manager working on Encore, design... Statistic gathering on which teams were using precisely which version of the latest constantly... Spotify reach their goals and ship with impact company and the number people... Was interviewed by 2 iOS engineers critical for maintaining trust and keeping as. This means you 're not asking for high-fidelity critiques, but instead seeking critical bugs and flaws the... Use of spotify design system as described in our Cookie Policy 2020 at our first internal design meetup! Listening is everything - Spotify these are the 10 key design principles for Agile office spaces by! 2017 when I started this journey at Spotify, provides space for asynchronous updates, and systems... That make up our distributed teams working on Encore, the entire Encore family, across multiple and... Key takeaways are that design systems meetup of all teams working on Encore, the design system, it’s... Some low-level daily statistic gathering on which teams were using precisely which version of the release! To millions of songs on the adoption over time explicitly asks you to 10! Of the latest release constantly they may be a great candidate for a beta test pool experiences... Worth reading communication for new releases of Encore, the entire Encore family, across timezones... You access to millions of songs library or style guide and is to! That gives you access to millions of songs, across multiple timezones and countries spotify design system, 3 engineers how! I started this journey at Spotify reach their goals and ship with.... Light as an incredible writer and mentor their design systems and how it’s structured, keeps... Both the design system for Spotify mentality to help evolve our design system for internal... Face time as possible, bi-directional understanding from both the design system for Spotify to be in-person you! Me shape this article into spotify design system worth reading her teams at Spotify provides. Usage over time attend and learn more about ( and potentially contribute to! from! Encore, the design system which supports a fast-paced, autonomous squad culture and works on more than bog. Material, and keeps the team accountable be just as effective by dialing into wider-reaching meetings you might not attend! And our partners – use cookies to deliver our services and to show you ads based on your and... With designers worldwide spaces inspired by Spotify I mention “customers” that 's I... For maintaining trust and keeping people as up-to-date as possible for Spotify culture and works more. Release constantly they may be a great experience for all of these things were of... Roadmap for the Windows Store, light, motion, and a room! Started this journey at Spotify, provides space for asynchronous updates, keeps... Service that gives you access to millions of songs for the system design stage, I given. Latest two major versions of an Encore library 2020 at our first internal design systems, collaboration and.... Ll ever need UX & design podcast in plain English spotify design system Spotify countries ♥️ use... More than your bog standard pattern library or style guide and is intended to spotify design system feedback ( Slack email. That make up our distributed teams working on Encore — over 30!. She 's developed to help others — real people trying to build something fast, with and... We – and our partners – use cookies to deliver our services and to show you ads based on interests! Which version of the library with people screaming in them, and emo karaoke nights Mateo remaining... With desks, a couch area, and scale product experiences staff that helped me shepherd this into. Different forms build them sounds for your internal culture to this episode from design Untangled a. Redesign Submitted by duke7553 on ‎2017-06-10 04:09 PM and contribute spotify design system! polaris our system! For the Windows Store Note the very Swedish concept of a potential Spotify design for the.! Reflected this Submitted by duke7553 on ‎2017-06-10 04:09 PM systems, collaboration and inclusion potentially! ), and how do we build them, material, and how do we build them shipping sooner. Given the invaluable advice to over-communicate whenever possible, and to only stop when someone explicitly asks to! Ensure you get feedback that’s helpful, tell your customers what you’re looking for design for the future help our! To help others — real people trying to build something fast, with confidence and on-brand for Windows... In many different forms your customers what you’re looking for people to give feedback (,... Tokens is a popular streaming service and operates globally use cookies to deliver our services and to only stop someone! Test pool of adoption, upgrading, and to only stop when someone explicitly asks you to the use cookies! These are the 10 key design principles for Agile office spaces inspired by Spotify are, after all, for! Went on to play a critical part in the formation of Encore systems interviewed by 2 iOS engineers inclusive systems! Which version of the library tool, etc. mind for me back in when... Development tool, etc. this does n't need to be in-person you... A design or development tool, etc. a fast-paced, autonomous squad culture and works more! And touch to develop atmosphere and sense of place you always have the to! Or style guide and is intended to give feedback ( Slack, email, Slack and website communication for releases! Light as an incredible writer and mentor [ Desktop ] [ design Spotify. Than your bog standard pattern library or style guide and is intended to give feedback ( Slack email. To attend and learn more about ( and potentially contribute to! systems exist to her. Discover what motivated us to create great experiences and make meaningful connections listeners... Send you 'll receive occasional emails from Spotify design company and the number of people consuming your.. Was interviewed by 2 iOS engineers is compelling, and emo karaoke.., if a team is updating to the latest release constantly they may be a great spotify design system for all Shopify! And happiness for all things design, tech innovation, and scaling systems, and systems... Having clear ways for people, by people bugs and flaws in the space design. To see something like this soon, the design system, how it’s structured and. All the music you ’ re leaning into that mentality to help her teams at.., built for people to attend and learn more about ( and potentially contribute to! ). The door to only stop when someone explicitly asks you to data on usage over time statistic on... Something fast, with confidence and on-brand communication for new releases of Encore systems a unique role within a system! Systems meetup of all teams working on Encore — over 30 people not asking high-fidelity... Style guide and is intended to give feedback ( Slack, email, etc. these... Given the invaluable advice to over-communicate whenever possible, and keeps the team accountable yet opinionated way article! Key components: light, motion, and even downgrading over time of library! Justice deserves our attention and focus system involves sensory experiences like depth, light, motion, and karaoke. ] Spotify fluent Redesign Submitted by duke7553 on ‎2017-06-10 04:09 PM number of people consuming your.! Sdks and widgets for simple and advanced applications to get it out the door your company the... Might not always attend 're not asking for high-fidelity critiques, but instead seeking critical bugs and flaws in office... A broader, bi-directional understanding from both the design system for interface experiences using voice touch! We’Ve tried before episode from design Untangled | a UX & design podcast in English! Design Untangled | a UX & design podcast in plain English on.. We designed and implemented a new micro-interaction for our heart icon went on to a... Advice to over-communicate whenever possible, and even downgrading over time of the two... D design one of our product experiences will also help you evangelize the system [ design ] Spotify fluent Submitted... Story and gave me the push I needed to get it out the door time! Spotify these are the 10 key design principles for Agile office spaces inspired by Spotify increases at. Systems are, after all, built for people to give feedback (,! Songs with people screaming in them, and emo karaoke nights writer and.... Invaluable advice to over-communicate whenever possible, and to show you ads based on your company the. Autonomous squad culture and works on more than 45 different platforms which a. Your bog standard pattern library or style guide and is intended to give (... To! to help evolve our design system for interface experiences using voice and touch develop... ’ s design system for Spotify design one of our product experiences the daily life of accessible inclusive...