{"id":4970,"date":"2016-12-12T12:22:49","date_gmt":"2016-12-12T12:22:49","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4970"},"modified":"2016-12-12T12:22:49","modified_gmt":"2016-12-12T12:22:49","slug":"scaling-design-at-spotify","status":"publish","type":"post","link":"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/","title":{"rendered":"Scaling Design at Spotify"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design Doesn\u2019t Scale is a statement that has bothered me for the last four-years. When I joined Spotify\u2019s design team in 2012, the level of inconsistency and fragmentation shocked me. Up-close, the treatment of type, colour, imagery, layout, IA, and interactions just didn\u2019t seem to align anywhere. And when I started talking about it, I realised the whole team was frustrated too. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We concluded that the fragmentation in the product was just reflecting the fragmentation in the team, that designers spread across so many different projects, timezones and competing timetables, just didn\u2019t stand a chance. And, after all, weren\u2019t these factors inherent in all modern tech companies anyway? It was then that I first heard myself say, \u201cDesign Doesn\u2019t Scale\u201d.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"We concluded that the fragmentation in the product was just reflecting the fragmentation in the team.\"<\/p><\/span><\/blockquote>\n<div id='gallery-1' class='gallery galleryid-4970 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Design-2012.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Design-2012.jpeg\" class=\"attachment-full size-full\" alt=\"spotify-design-2012\" srcset=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Design-2012.jpeg 1920w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Design-2012-600x338.jpeg 600w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Design-2012-768x432.jpeg 768w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Design-2012-1500x844.jpeg 1500w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">But while this issue unsettled me, I tried my best not to engage with it\u200a\u2014\u200adismissing it as a lost cause\u200a\u2014\u200aand focussing on a redesign instead. It didn\u2019t work. No matter how happy I was with a design, it was always dulled when seen alongside several conflicting design-directions. A year after I joined I finally became so frustrated with this issue that I decided to make it my personal mission to find a solution. Surely crossing the arms and accepting that design doesn\u2019t scale couldn\u2019t be the only answer.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Crossing arms and accepting that design doesn\u2019t scale couldn\u2019t be the only answer.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And so the premise for my quest was Design Doesn\u2019t Scale or: How does a team of distributed designers, spread across different time-zones, projects and competing objectives ever find a way to work together so they can create one coherent experience? Here\u2019s what we discovered.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Principles<\/h2>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"We decided to write some principles to turn this group of individuals into a team with a shared point-of-view.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It was during a weekly design critique that it became clear we had nothing to align on. Our feedback was nothing more than personal opinions based on some new design fad. This led to frustration for the designer presenting, and left the team with a feeling of uncertainty once the session was over. So in 2013, we decided to write some principles to turn this group of individuals into a team with a shared point-of-view.<\/p>\n<div id='gallery-2' class='gallery galleryid-4970 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Principles.png'><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Principles.png\" class=\"attachment-full size-full\" alt=\"design-principles\" aria-describedby=\"gallery-2-4972\" srcset=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Principles.png 1920w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Principles-600x338.png 600w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Principles-768x432.png 768w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Principles-1500x844.png 1500w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-4972'>\n\t\t\t\t(1) Content First (2) Be Alive (3) Get Familiar (4) Do Less (5) Stay Authentic (6) Lagom\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We\u2019ve since used these principles to align our design critiques, shape a collective voice across design in the organisation, and as the foundation for the visual realignment we shipped in 2014\u200a\u2014\u200aa project that held many learnings and worthy of its own article.<\/p>\n<div id='gallery-3' class='gallery galleryid-4970 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Project-Cat.png'><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1124\" src=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Project-Cat.png\" class=\"attachment-full size-full\" alt=\"spotify-project-cat\" aria-describedby=\"gallery-3-4973\" srcset=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Project-Cat.png 2000w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Project-Cat-600x337.png 600w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Project-Cat-768x432.png 768w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Project-Cat-1500x843.png 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-4973'>\n\t\t\t\tSpotify 2014 (Project Cat)\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What really made the principles work, was that we tailored them to our domain (music) and tied them back to our business goals, in terms that would resonate with non-designers.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since launching them we\u2019ve been exploring ways to make them stickier, for example, reducing them to three and making them more inclusive as Experience Principles in collaboration with our Marketing team.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Guidelines<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After the visual realignment, it soon became clear that the hardest part would be maintaining this new found consistency. So in 2014, we created Spotify\u2019s Design Language System, GLUE (a Global Language for a Unified Experience), which documented our styles, components, and patterns, on a website that was accessible to everyone in the company.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Guidelines encouraged consistency, increased efficiency & created a shared vocabulary for designers & developers\"<\/p><\/span><\/blockquote>\n<div id='gallery-4' class='gallery galleryid-4970 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Guidelines-Version-1.png'><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1277\" src=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Guidelines-Version-1.png\" class=\"attachment-full size-full\" alt=\"design-guidelines-version-1\" aria-describedby=\"gallery-4-4974\" srcset=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Guidelines-Version-1.png 2000w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Guidelines-Version-1-600x383.png 600w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Guidelines-Version-1-768x490.png 768w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-Guidelines-Version-1-1500x958.png 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-4974'>\n\t\t\t\tVersion 1 of Spotify\u2019s Guidelines\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For the first time we had a shared definition of our interfaces that we could use to coordinate its evolution. This not only encouraged consistency and increased efficiency, but also created a shared vocabulary between designers and developers, so that the label for a colour or type-style could be understood across design-specs and code.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Along with the guidelines, we created UI toolkits for our design tools that reflected the same styles and components. This was great for kickstarting projects, while also highlighting what didn\u2019t exist and might need to be added to the toolkit later. It also forced us to choose which applications (Photoshop or Illustrator or Sketch, etc.) we\u2019d support and how we\u2019d share files with one another.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Modularising design in this way has revealed the relationships and dependencies that make up our experience, and ultimately makes it easier for us to collaborate with one another.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Glue<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We soon realised that maintaining guidelines and toolkits is a constant effort. So after some convincing, GLUE became a dedicated team in 2015, made up of designers and engineers.<\/p>\n<div id='gallery-5' class='gallery galleryid-4970 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Team-Glue.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1150\" src=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Team-Glue.jpeg\" class=\"attachment-full size-full\" alt=\"team-glue\" aria-describedby=\"gallery-5-4975\" srcset=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Team-Glue.jpeg 2000w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Team-Glue-600x345.jpeg 600w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Team-Glue-768x442.jpeg 768w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Team-Glue-1500x863.jpeg 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-4975'>\n\t\t\t\tTeam GLUE doing a mashup of a T-rex and a Superman pose.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Being a centralised team, GLUE can support our distributed designers by facilitating collaboration across teams and providing frameworks to evolve the different design needs in the company. The engineers on the team extend this work by codifying the core building blocks from the guidelines across iOS, Android and Desktop. Providing a technical implementation for front-end developers across the organisation.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Guild<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A common challenge with a central group is maintaining context, as it\u2019s easy to fall out of touch with the current needs of the organisation and find that the solutions you\u2019re providing aren\u2019t relevant anymore. To solve this we setup the Design Guild.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Every week, for 1-hour, two-designers from each product mission and the GLUE team, meet to share context on whatever they\u2019re working on that will have consequence for the others. GLUE might share updates on guidelines, while a feature designer might want to align on a new design they\u2019re working on. Often these updates will result in a friendly-nod to acknowledge we\u2019re aligned, or a workshop to resolve any conflicts in the design direction. This meeting has helped break down silos, encourage collaboration, and amplify a shared sense of ownership for the overall experience.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Design QA<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Despite all this alignment and coordination, sometimes design bugs still get through. To fix this we recently set-up our first Global Design QA. It required designers from all our offices (Stockholm, Gothenburg, London, New York, and San Francisco) to come together and re-calibrate what our shared definition of quality is, including the practices we need to ensure they are upheld. We invited members of QA (Quality Assurance) to make sure designers were clear on how best to use tools like Jira (a bug ticketing system) and how to test their designs on all supported devices. This triggered many discussions, highlighting concerns from what kind of design bugs should be captured to how to prioritise them.<\/p>\n<div id='gallery-6' class='gallery galleryid-4970 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-QA-workshop.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1127\" src=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-QA-workshop.jpeg\" class=\"attachment-full size-full\" alt=\"design-qa-workshop\" aria-describedby=\"gallery-6-4976\" srcset=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-QA-workshop.jpeg 2000w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-QA-workshop-600x338.jpeg 600w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-QA-workshop-768x433.jpeg 768w, https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Design-QA-workshop-1500x845.jpeg 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-4976'>\n\t\t\t\tSnapshot from a recent Design QA workshop.\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">But perhaps the most fundamental topic we addressed was how we define design quality. Which up until then had been pretty much \u201cyou know it when you see it\u201d. We decided to try a checklist instead. In it we stated that quality means following our guidelines and principles, and supporting our core metrics. And that when you need to deviate from either you take accountability for updating any affected teams or frameworks.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"We stated that quality means following our guidelines and principles, and supporting our core metrics.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Looking for more ways to define quality, we recently began asking if a design is \u201cin <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">TUNE<\/strong>\u201d, an acronym to measure all parts of the experience, including how it <em>feels<\/em> to use Spotify. This is helping to shape a strong narrative around the emotive aspects of our experience, and be mindful that the interface is the brand.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">T<\/strong>one. Are we using the right kind of tone of voice for our brand?<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">U<\/strong>sable. Is it accessible to everyone?<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">N<\/strong>ecessary. Is that functionality really needed?<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">E<\/strong>motive. Does it feel good to use? Feel like somebody cares?<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After the summer, we will trial the Global Design QA process as a key step for any designer preparing to ship something in a release. Making sure that not only will we Design QA our individual work, but all the work that is going live to our customers.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And this brings me back to today.<\/strong> Taking stock of the learnings the last few years have given me and writing this partial account of all the things that have worked for us. And even though I\u2019m aware that this is not a complete journey, that many new challenges will arise, and some solutions might become obsolete, I am happy to put this personal design demon to rest, knowing that when you invest in aligning and co-ordinating designers, design does scale.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"When you invest in aligning and co-ordinating designers, design does scale.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you\u2019re a designer, product owner or manager, and face any of these challenges, I encourage you to try the methods above and see if they can help. And you can always reach out to me on twitter if you\u2019d like more info or support.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@hellostanley\/design-doesnt-scale-4d81e12cbc3e#.6giaeccu9\" target=\"_blank\">Stanley's Medium profile<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design Doesn\u2019t Scale is a statement that has bothered me for the last four-years. When I joined Spotify\u2019s design team in 2012, the level of inconsistency and fragmentation shocked me. Up-close, the treatment of type, colour, imagery, layout, IA, and interactions just didn\u2019t seem to align anywhere. And when I started talking about it, I realised the whole team was&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":72,"featured_media":4971,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4970","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"How the design team at Spotify confronted challenges across their designs and produced guidelines and processes for scaling design efficiently.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What I Learned Scaling Design at Spotify\" \/>\n<meta property=\"og:description\" content=\"How the design team at Spotify confronted challenges across their designs and produced guidelines and processes for scaling design efficiently.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-12T12:22:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Design-2012.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#website\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.marvelapp.net\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2016\/12\/Spotify-Design-2012.jpeg\",\"width\":1920,\"height\":1080,\"caption\":\"spotify-design-2012\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/#webpage\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/\",\"name\":\"What I Learned Scaling Design at Spotify\",\"isPartOf\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/#primaryimage\"},\"datePublished\":\"2016-12-12T12:22:49+00:00\",\"dateModified\":\"2016-12-12T12:22:49+00:00\",\"description\":\"How the design team at Spotify confronted challenges across their designs and produced guidelines and processes for scaling design efficiently.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#\/schema\/person\/3960a42e762702106a4a1a161d656a2d\"},\"headline\":\"Scaling Design at Spotify\",\"datePublished\":\"2016-12-12T12:22:49+00:00\",\"dateModified\":\"2016-12-12T12:22:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.marvelapp.net\/blog\/scaling-design-at-spotify\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#\/schema\/person\/3960a42e762702106a4a1a161d656a2d\",\"name\":\"Stanley Wood\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8f7e18c1a4971eeaa61909acf1fb9ecd24a22d807fd92c09bcf8146e2d984c6a?s=96&d=mm&r=g\",\"caption\":\"Stanley Wood\"},\"description\":\"British Designer living in Stockholm. Design Director @Spotify. Follow me on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts\/4970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/comments?post=4970"}],"version-history":[{"count":0,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts\/4970\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/media\/4971"}],"wp:attachment":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/media?parent=4970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/categories?post=4970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/tags?post=4970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}