Artikel

Hoe Spotify werk met Design Systems

Download pagina als PDF

Tijdens ons onderzoek voor The Ultimate Guide to Design Systems hebben we een bekende naam bestudeerd: Spotify. In november introduceerde Spotify een nieuwe lijn van design systems onder de naam "Encore". Encore is uniek en valt vooral op omdat het, in plaats van een solo, bestaat uit een familie van design systems, gecontroleerd en gemonitord door verschillende teams. Deze post werpt licht op de belangrijkste reden die heeft geleid tot de opkomst van Encore, de structuur en het vermogen om zich te onderscheiden van andere design systems die Spotify eerder heeft geprobeerd. 

Spotify's Journey in a Timeline

Spotify heeft veel vragen gekregen over haar aanpak van design systems. Het bedrijf heeft meerdere malen geprobeerd een antwoord te geven op deze vraag door gebruik te maken van verschillende technieken zoals: het bedenken van een eenmalig schema, het integreren van een briljant ontwerpteam, en vele andere zaken. In de beginperiode had Spotify geen design system. Ze bouwden alles uit het niets.

2009: Een beperkt collectief van patronen en normen

2009: Een beperkt collectief van patronen en normen

Toen Spotify in 2009 haar mobiele app voor het eerst lanceerde, waren er beperkte collectieve patronen en normen. Geleidelijk aan werd de ervaring van de app vooral inconsistent.

2013: Schilder het zwart

Deze harde patch ging door tot 2013 totdat Spotify uiteindelijk zijn eerste echte poging deed om het visuele ontwerp over vele platformen uit te lijnen. Na een aanzienlijke inspanning presenteerde Spotify de kenmerkende duistere ervaring genaamd "Paint it Black". Al snel begon de website en de applicatie eruit te zien als hoe mensen er vandaag de dag mee vertrouwd zijn. 

GLUE, het eerste Design System met een fulltime team.

2014-2015: Wereldwijde taalunie (GLUE)

In de aanloop naar de jaren 2014-2015 bracht het Brand and Creative team van Spotify een drastische verandering in de merkidentiteit teweeg. Uiteindelijk werd een volwaardig team opgericht om het designsysteem van Spotify te creëren. De veranderingen omvatten de introductie van een nieuw lettertype (cirkelvormig), nieuwe kleurenschema's en verschillende grafische updates die in hun applicaties moesten worden geïntegreerd. Dit ontwerpsysteem kreeg de naam GLUE, ook wel bekend als Global Language Unified Experience (Meer informatie over GLUE).

GLUE was het allereerste systeem van Spotify dat een compleet, voltijds ontwerpteam omvatte. Het bleek in vele opzichten succesvol. Het uiterlijk van Spotify werd volledig veranderd. Het merendeel van de desktop- en mobiele componenten werd gestandaardiseerd en al snel ging Spotify van een handvol mensen naar een toegewijd team van meer dan 30 full-time ontwerpers en technici. 

Het enige probleem met GLUE was dat het slechts een enkel en gecentraliseerd team was. Een gecentraliseerd systeem wordt ideaal geacht om de consistentie te behouden, maar het bleek een belemmering te zijn voor Spotify. De redenen daarvoor waren overduidelijk. In principe richt Spotify zich op het concept van "uitgelijnde autonomie" en stimuleert het teams om beslissingsbevoegdheden te hebben. Later realiseert men zich dat een gecentraliseerd ontwerpsysteem niet in staat is om met deze mentaliteit om te gaan. 

Hoe zou uw product er op een koelkast uitzien?

2018: Toegankelijk worden voor luisteraars overal en altijd

2018 was een keerpunt voor Spotify, en het bleef in een snel tempo groeien. Ze hadden nu een team van 2000 ingenieurs, 200 ontwerpers en 45 unieke platforms. Het concept van desktop- en mobiele ontwerpen was bijna uitgestorven. Spotify begon met het lanceren van ontwerpen voor luidsprekers, smartwatches, auto's en slimme koelkasten. Dit was vooral mogelijk omdat "ubiquity" de nieuwe bedrijfsstrategie was. 

Spotify wilde haar plan om toegankelijk te worden voor luisteraars overal en altijd voortzetten. Terwijl Spotify zich in verschillende richtingen bewoog, nam de vraag naar nieuwe patronen, componenten, toolkits en diverse andere efficiëntieverhogende, tijdbesparende middelen die een ontwerpsysteem bood, toe. 

Tegen die tijd was het primaire probleem dat het GLUE ontwerp verspreid was, en niemand wilde het design systems naar de volgende stap brengen. Geleidelijk aan namen ingenieurs en ontwerpers de verantwoordelijkheid op zich om zelf design systems te creëren. Zo begon een groep in New York te werken aan een design systems dat bekend staat als "Tape". Een ander team in Stockholm creëerde een design systems gericht op ontworpen penningen. En zo begon de populaire fase van Spotify's design systems.

Al het harde werk heeft ongelooflijk veel moeite gekost, en de meeste van deze systeemonderdelen worden vandaag de dag nog steeds gebruikt. Deze gedecentraliseerde aanpak bleek echter niet werkbaar. Op een gegeven moment berekende Spotify een totaal van 22 unieke design systems die rondhingen, wat nogal verwarrend zou zijn. 

Spotify neemt de volgende stap 

Spotify had dringend behoefte aan een uniform en nuttig ontwerpsysteem, maar ze waren zich er terdege van bewust dat een gecentraliseerd team als GLUE niet zou werken. In 2018 hebben ze meer inspanningen geleverd om een nieuw ontwerpsysteem voor hun bedrijf te bouwen. 

Spotify wilde haar nieuwe ontwerpsysteem op dezelfde manier ontwerpen als een van haar productervaringen. Het bedrijf wilde haar bestaande middelen combineren en een ontwerpsysteem bouwen dat zij als samenwerkend, toegankelijk, eenduidig en gericht op een duidelijke visie beschouwden.

Het belangrijkste is dat Spotify wilde dat het nieuwe ontwerpsysteem feilloos zou passen bij zijn autonome cultuur. Het wilde een systeem dat kon uitblinken over meerdere platformen. Dit alles leidde uiteindelijk tot de opkomst van Encore. 

Presentatie van Encore

Encore is een uniek schema dat bestaat uit een familie van design systems, met alles wat ontwerpteams nodig hebben om mooie en toegankelijke Spotify-toepassingen te bouwen. Encore is in tegenstelling tot andere design systems omdat het niet één, maar een familie van design systems is. Het is een compleet raamwerk dat de huidige design systems van Spotify integreerde in één exclusief merk en een "systeem van systemen" werd.

Encore bestaat uit vele design systems, die elk door een andere groep mensen worden behandeld. Omdat deze teams de systemen beheren, kan iedereen die Spotify-producten maakt er deel van uitmaken. Encore is niet echt een nieuw design systems voor Spotify. Het framework is nieuw, maar het heeft vooral veel elementen uit de vorige design systems hergebruikt. Spotify heeft de belangrijke onderdelen van de nieuwe en verbeterde Encore-systemen opnieuw gemerkt of eruit gehaald. 

De diverse systemen blijven verbonden met design muntjes en maken deel uit van dezelfde website. Ze volgen allemaal hetzelfde raamwerk waarop Encore is gestructureerd. Voorheen waren er 22 ontkoppelde design systems, maar nu zijn verschillende systemen van Spotify onder één dak met elkaar verbonden.  

Design Systems binnen Encore

Hier is wat Spotify's nieuwste ontwerpsysteem, "Encore," lijkt.

Stichting Encore

De Encore Foundation staat centraal en omvat alle zaken zoals: type, kleur, beweging, stijlen, tussenruimte en richtlijnen voor toegankelijkheid en schrijven. Het is ook de plaats waar de ontwerp munten zich bevinden. Dit zijn de primaire zaken die bijna alle bedrijven in hun design systems zouden moeten opnemen. In feite is dit wat Spotify er zo doet uitzien. Alle Spotify producten zijn verplicht gebruik te maken van de Encore Foundation.

Encore Web

Encore Web biedt alle componenten die aanwezig zijn in een standaard webdesign-systeem, zoals formulierbesturingen, dialogen, knoppen, enz. Deze functies kunnen worden gebruikt voor alles wat via webtechnieken wordt gecreëerd, zoals websites, webapplicaties, hun desktop-clients en koelkastapps. 

Encore Web omvat de gecombineerde middelen van haar web-gebaseerde platformen en bevat alle dingen van Encore Foundation. De onderdelen zijn gemaakt met design tokens en volgen dezelfde richtlijnen en patronen die in de Foundation staan vermeld. Vandaar dat deze systemen met elkaar verbonden zijn.

Encore Mobiel

De Encore Mobile moet nog worden gedefinieerd. Net als Encore Web is dit het platform voor gemeenschappelijke onderdelen dat veel mobiele apps delen.

Lokale Design Systems

De volgende laag bestaat uit "lokale design systems". Lokale design systems worden gebruikt om ontwerp elementen op te slaan die zijn aangepast aan specifieke doelgroepen en producten. Deze componenten moeten worden gedeeld, maar niet over de gehele Spotify.

Enkele web onderdelen worden alleen gebruikt in evenementen voor podcasters of kunstenaars (de Spotify for Artists applicatie kan bijvoorbeeld vragen om een unieke tafelindeling of een uniek navigatiepatroon). Met de Encore-structuur kunnen deze op maat gemaakte ontwerp kenmerken worden opgeslagen in lokale design systems. Op deze manier kan het worden gedeeld door alle groepen die aan Spotify for Artists app werken. 

Het idee is hetzelfde op mobiel. Veel teams werken aan de belangrijkste Spotify app, dus er is een enorme behoefte aan gemeenschappelijke mobiele patronen en functies. Deze ontwerpcomponenten zitten in het lokale systeem, aangepast aan de lay-out (Android of iOS) en het publiek (dat naar podcasts en muziek luistert). 

Op dit moment heeft Spotify 2 lokale systemen, maar dit is waarschijnlijk niet de definitieve set. Met Encore kunnen ze andere lokale systemen inbrengen als dat nodig is. In de komende jaren zullen bijvoorbeeld stand-alone apps zoals Stations en Spotify Kids misschien vragen om lokale systemen. Het doel is dat ze verbonden blijven en onder één dak beschikbaar zijn (de Encore-website). 

Kortom, een volwaardig ontwerpsysteem is dat:

  1. Biedt ontwerpmiddelen, documentatie en code aan.
  2. Teelt op de andere systemen.
  3. Wordt actief gemanaged en gecontroleerd door een toegewijd team.
  4. Heeft een coherente interface waarmee ingenieurs kunnen werken. 

Dit definitieve kader was cruciaal om het hele Encore-programma tot een succes te maken. Elke ingenieur, schrijver of ontwerper bij Spotify moet eerst het Encore-ontwerpsysteem kiezen dat voor hen geschikt is en vervolgens toegang hebben tot gedeelde bronnen. 

Conclusie Gedachten

We waren er getuige van dat naarmate de productstrategie en de grafische taal van Spotify verder ontwikkelde, ook hun design systems veranderingen ondergingen. Het is duidelijk dat een design systems niet one-size-fits-all kan zijn. In plaats daarvan moeten ze worden aangepast aan de behoeften van het bedrijf.

Een belangrijke les in dit alles is dat het belangrijk is om de cultuur van het bedrijf te begrijpen en zich daaraan aan te passen. Het is essentieel om de eigenaardigheden en kenmerken van het bedrijf te accepteren om ervoor te zorgen dat een ontwerpsysteem werkt. 

Voor Spotify betekende het erkenning van de belangrijke productomgeving waarin het zich bevindt en het besef dat hun teams onafhankelijk werken. In plaats van één team of systeem, vond Spotify het beter om een familie van design systems op te nemen, beheerd en gecontroleerd door verschillende verspreide teams. Dit is nog maar het begin, en de tijd zal leren of ze de smaak te pakken hebben van het creëren van een "systeem van systemen".

Verwante berichten

Plan vandaag nog uw gratis Digitale Innovatiesessie

Tijdens uw gratis telefonische consultatie bespreekt een van onze experts de strategie, de innovatiedoelstellingen en legt hij onze methodologie uit.

Nu plannen →