HomeArtikelenOntwerpsystemen
Hoe Spotify Hefboomwerking Ontwerpsystemen

Hoe Spotify Hefboomwerking Ontwerpsystemen

Philip Wallage
op
24 september 2020
Hoe Spotify Hefboomwerking Ontwerpsystemen
HomeArtikelenOntwerpsystemen

Hoe Spotify Hefboomwerking Ontwerpsystemen

Philip Wallage
op
24 september 2020
HomeArtikelenOntwerpsystemen
Hoe Spotify Hefboomwerking Ontwerpsystemen

Hoe Spotify Hefboomwerking Ontwerpsystemen

Philip Wallage
op
24 september 2020

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 ontwerpsystemen onder de naam "Encore". Encore is uniek en valt vooral op omdat het, in plaats van een solo, bestaat uit een familie van ontwerpsystemen, 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 ontwerpsystemen die Spotify eerder heeft geprobeerd. 

Spotify's Journey in a Timeline

Spotify heeft veel vragen gekregen over haar aanpak van ontwerpsystemen. 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 ontwerpsysteem. 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 ontwerpsysteem naar de volgende stap brengen. Geleidelijk aan namen ingenieurs en ontwerpers de verantwoordelijkheid op zich om zelf ontwerpsystemen te creëren. Zo begon een groep in New York te werken aan een ontwerpsysteem dat bekend staat als "Tape". Een ander team in Stockholm creëerde een ontwerpsysteem gericht op ontworpen penningen. En zo begon de populaire fase van Spotify's ontwerpsystemen.

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 ontwerpsystemen 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 ontwerpsystemen, met alles wat ontwerpteams nodig hebben om mooie en toegankelijke Spotify-toepassingen te bouwen. Encore is in tegenstelling tot andere ontwerpsystemen omdat het niet één, maar een familie van ontwerpsystemen is. Het is een compleet raamwerk dat de huidige ontwerpsystemen van Spotify integreerde in één exclusief merk en een "systeem van systemen" werd.

Encore bestaat uit vele ontwerpsystemen, 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 ontwerpsysteem voor Spotify. Het framework is nieuw, maar het heeft vooral veel elementen uit de vorige ontwerpsystemen hergebruikt. Spotify heeft de belangrijke onderdelen van de nieuwe en verbeterde Encore-systemen opnieuw gemerkt of eruit gehaald. 

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

Ontwerpsystemen 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 ontwerpmunten zich bevinden. Dit zijn de primaire zaken die bijna alle bedrijven in hun ontwerpsystemen 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 ontwerpsystemen

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

Enkele webonderdelen 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 ontwerpkenmerken worden opgeslagen in lokale ontwerpsystemen. 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 ontwerpsystemen veranderingen ondergingen. Het is duidelijk dat een ontwerpsysteem 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 ontwerpsystemen 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".

Claim uw GRATIS digitale innovatiesessie