![\"\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/1iC8Yi2NW1ok7qyI68YZ8U\/50b1520f2cb419cb07a3571ec7f252d6\/hiclipart.com.png?w=60&h=60&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\nLast 12 months, a gaggle of us acquired collectively to dig into a difficult query: As Spotify continues to develop, how can we keep a excessive degree of design high quality within the experiences we create?\u00a0<\/p>\n
After some analysis, we recognized a key alternative: To bump up high quality, we’d like clear, helpful design rules. Why rules? For one, we felt that we could not assist groups assess in the event that they had been designing in “the Spotify means” until we outlined what the Spotify means even is\u2014we wanted some steerage. We additionally wished to assist designers converse the identical language when discussing design objectives and offering critique. An up to date set of rules might provide a few of this alignment.\u00a0<\/p>\n
Where we began<\/h3>\n
Spotify\u2019s authentic design rules<\/u><\/a> had been from 2013, and on the time they did rather a lot to assist form a collective voice throughout design within the group. Spotify is a Swedish-based firm grounded in music; our earlier rules mirrored this. (Note the very Swedish idea of lagom<\/u><\/a>!) <\/p>\n<\/div>\n Now, in 2020, Spotify has modified fairly a bit. We\u2019ve grown into an audio first firm<\/u><\/a> and doubled down on podcasts; we create merchandise for listeners, artists, and advertisers; and we went from a handful of designers to virtually 200.\u00a0<\/p>\n Looking on the current rules, we requested ourselves: Do they nonetheless really feel true to all the issues we design? Are designers at Spotify even conscious of them? The reply was…no.\u00a0<\/p>\n We recognized three drawback areas:\u00a0<\/p>\n In brief, the previous rules wanted a refresh.\u00a0<\/p>\n Last 12 months, the members of our working group\u2014a couple of dozen product designers and UX writers\u2014acquired collectively to deal with this in a collaborative workshop. The intention was to get contributions from everybody within the group, as an alternative of getting one individual articulate \u201cthis is what Spotify design should be.\u201d\u00a0<\/i><\/p>\n We used three guiding inquiries to hold us targeted:\u00a0<\/p>\n Why are we creating these design rules?<\/p>\n<\/li>\n Who are they for?<\/p>\n<\/li>\n How will they be used?<\/p>\n<\/li>\n<\/ol>\n After some energetic debate, we agreed that rules function a framework to create and consider work\u2014they will help product designers make design choices, and provides us a shared language for design critiques. The actual problem was defining what the new <\/i>rules must be. What sort of values and design attributes ought to we aspire to when designing? What ought to the product really feel like?\u00a0<\/p>\n<\/div>\n All the concepts went into a large matrix, and we dot-voted to assist us slim down.\u00a0Based on this, we got here up with a draft of the brand new rules, shared it with our design management crew, and did some fine-tuning.\u00a0<\/p>\n And voil\u00e0! Our new set of Spotify design rules had been born.<\/p>\n<\/div>\n Let\u2019s take a more in-depth look:<\/p>\n Spotify is made for you\u2014we would like it to really feel customized. To be related, we must be considerate about what we current, to whom, and in what context. In easier phrases, it\u2019s related once we current the appropriate information on the proper time. The reverse worth is that we don\u2019t need \u201cone-size-fits-all\u201d experiences.<\/p>\n<\/div>\n Yes, Spotify is rooted in expertise. But it\u2019s all about folks. Sometimes we dial up the emotion, and generally we follow logic\u2014similar to folks do. Spotify ought to really feel dynamic, like tradition itself. A option to see that is that human experiences are intuitive and conversational. It\u2019s not human when issues are overly intelligent, technical, or overly practical.\u00a0<\/p>\n<\/div>\n Everything we design seems to be and feels reassuringly Spotify. We intention for coherence throughout merchandise as a option to construct familiarity and belief. That\u2019s why we observe our design system\u2014we begin by reusing reasonably than reinventing. We need our experiences to reuse and adapt for consistency; no person must be reinventing the wheel.\u00a0<\/p>\n<\/div>\n It\u2019s one factor to simply write <\/i>rules…it\u2019s one other factor totally to get everybody on board. If we wished our new design rules to stay, we wanted a roll-out plan. Here\u2019s how we went about it.\u00a0<\/p>\n To begin, we did a trial run of a workshop with one design crew (sure, we love workshops). This allow us to spot any crimson flags, get a way of whether or not the rules are helpful, and undergo examples of fine (and not-so-good) execution within the context of actual work.<\/p>\n<\/li>\n<\/ul>\n Just a few months later, we adopted up with a sequence of workshops with all <\/i>design groups throughout Spotify. This means, each designer might observe placing the rules in motion throughout a design critique.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n Were these roll-out efforts an excessive amount of? Not sufficient? Based on what we\u2019ve executed up to now, two issues stand out:\u00a0<\/p>\n The extra examples, the higher\u00a0<\/strong><\/p>\n It\u2019s straightforward to say that Spotify ought to really feel \u201chuman\u201d and \u201crelevant\u201d, however what does that really appear like? The examples had been tremendous helpful, and we might have benefited from having much more.\u00a0<\/p>\n Don\u2019t neglect the swag<\/strong><\/p>\n Looking again, the rollout ought to have had extra swag, like posters, stickers, or different goodies. <\/strong>It takes time to internalize new concepts, and exterior reminders would have helped. In the absence of \u201cofficial\u201d swag, one designer made his personal wallpaper! It was successful. <\/p>\n<\/div>\n Remote work has made it tough to arrange bodily swag, however we\u2019ve began on concepts for posters and different enjoyable stuff, too. <\/p>\n<\/div>\n Now that we\u2019ve rolled out the rules, what\u2019s modified?\u00a0<\/p>\n Increased consciousness\u00a0<\/strong><\/p>\n![\"Previous](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/5vMLYaBlrhriV0KgQjkmrt\/6c862d242a46faecaaefb4672b372e10\/Previous_principles.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>Crafting new design rules\u00a0\u00a0<\/h3>\n
\n
![\"Process\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2BCNbg1dGKgeYF7edeGmcb\/cc510d50ca2d0ed5f796be3a892ba84b\/Process.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>![\"Principles\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/68Pa88hx8PMAfabMmmBAhw\/ffd813a7e3b4c03229ce24bb01e57bfb\/Principles.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>Relevant\u00a0<\/strong><\/h3>\n
It\u2019s about reflecting you as a person.\u00a0<\/strong><\/i><\/h3>\n
![\"Relevant\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/69bfE5WH1xlvADzhSgYC2P\/48ad5d34017ec4b1c33f9cb71efbb77f\/Relevant.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>Human<\/strong><\/h3>\n
It\u2019s about communication, expression, and human connection.<\/strong><\/i><\/h3>\n
![\"Human\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7yJPJ919QQRAuw3Xf9xvTi\/c53d80b2825fc4f9fc76ad13426ad0c0\/Human.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>Unified<\/strong><\/h3>\n
It\u2019s about how our model manifests throughout our options and apps.<\/strong><\/i><\/h3>\n
![\"Unified\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/4kmwDpUyhP88fXHkWkA1B\/d5e4c19e84ec99481da75e3f452579f9\/Unified.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>Rolling out the rules\u00a0\u00a0<\/h3>\n
\n
\n
![\"Workshop\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7li9zW6tgVetzA7YoXu7yy\/2b51d3e668fd1176af8fda1fa7608f5f\/Workshop.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>![\"Principles-wallpaper\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/30ZKcK1WHFLMaqmyRJWYP2\/163709c8383cc34309042c51bc5d332b\/Principles-wallpaper.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>![\"Virtual](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/5DeWiJK9XG3TUB5gKhkuTK\/52dc0a705c4709476863a84096d57f5d\/Virtual_Swag-posters.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>The end result up to now\u00a0<\/h3>\n