Redesigning Instagram: Wat product designers kunnen leren van comedians

De inspiratie voor Spalter’s design visie komt uit een onverwachte hoek: de wereld van comedians.  Want ook het ontwikkelen van een grap is een iteratief proces van testen en verbeteren.

Mijn glazen zie ik graag half vol. Ook als de omstandigheden veel van me vergen. Nu ik onverwacht mijn vrije tijd binnenshuis moet doorbrengen, ben ik eindelijk voor de buis gaan zitten om het tweede seizoen van Abstract: The Art of Design te bingen! Ken je Abstract nog niet? Dan is het een uitstekend moment om kennis te maken met deze toffe Netflix serie die in elke aflevering een wereldberoemde designer aan het woord laat over hun vakgebied en visie op design.

Waar ik persoonlijk erg naar uitkeek was de aflevering met Ian Spalter, een design grootheid in Sillicon Valley en – inmiddels voormalig – head of design van Instagram. Spalter was verantwoordelijk voor het huidige logo en de look en feel van de populaire app zoals we die nu kennen. Want Instagram zag er in het begin een beetje anders uit. Weet je niet meer hoe Instagram 1.0. eruitzag? We zullen je zometeen een reminder geven, want het redesign van deze app vormt de rode draad door de aflevering over Spalter. Deze top designer is overigens nog steeds werkzaam voor Instagram, tegenwoordig als head of Instagram Japan.

Product design als iteratief proces

Volgens Spalter begint ieder design proces met een nauwkeurige definitie van het probleem. Waarom maken we dit? Welk probleem willen we oplossen? Aan welke behoefte willen we voldoen? Waar product design processen soms zwaar leunen op data, geeft Spalter de voorkeur aan context en iteratie. Inspiratie voor Spalter’s design visie komt uit een onverwachte hoek: de wereld van comedians. Hij ziet overlap tussen de wijze waarop een comedian zijn grappen ontwikkelt en het proces van product ontwikkeling. Beide zijn iteratief, want ook het ontwikkelen van een grap is een proces van testen en verbeteren. Een comedian test en perfectioneert zijn grap door hem avond na avond het publiek in te gooien.  En de reactie af te wachten. Als de punchline niet gelijk aanslaat brengt hij hem de volgende keer net weer anders.  Totdat het werkt. Of wordt geschrapt. In onderstaande 99U Talk uit 2018 legt Ian Spalter goed uit waarom hij vindt dat designers als comedians zouden moeten werken.

 

 

Net als de punchlines van comedians, worden sommige prototypes echte producten, terwijl andere roemloos worden vergeten.

Hoe vertaalt Spalter de aanpak van een comedian dan naar product design? Door net als een comedian de prototypes (grappen) die tijdens het ontwerpproces worden ontwikkeld, constant te blijven testen bij zijn doelgroep. Dus niet blijven leunen op data, maar in gesprek blijven met gebruikers. Door met gebruikers te praten kan het design team beter grip krijgen op de wijze waarop mensen omgaan met de betreffende technologie, product of dienst. Door prototypes direct onder gebruikers te testen, krijgt het ontwerpteam al tijdens de ontwerpfase inzichten en feedback. Dat helpt om de prototypes verder te perfectioneren. En net als de punchlines van comedians, zullen sommige prototypes echte producten worden, terwijl andere roemloos worden vergeten.
Een belangrijk aspect hierbij is ook de context. Met name culturele contexten, want tussen verschillende landen en culturen kunnen grote verschillen in gebruik van eenzelfde product bestaan. Zo gebruiken Europeanen hun smartphones bijvoorbeeld vaak voor het maken van selfies, terwijl in Japan selfies veel minder in zwang zijn. Dit gegeven kan bijvoorbeeld invloed hebben op de ontwikkeling van de user interface van smartphone camera’s of apps voor lokaal gebruik. Dit onderstreept des te meer waarom het volgens Spalter belangrijk is om constant in gesprek te blijven met de gebruiker.

Redesign van Instagram

Logo ontwerp: van retro naar rainbow

In de aflevering van Abstract: The Art of Design zien we hoe dit iteratieve, door comedienes geïnspireerde, ontwerp proces er uit zag tijdens de redesign van Instagram in 2016. De ontwerpopdracht voor Spalter en zijn team bestond uit twee delen: ten eerste moest er nieuw logo worden ontworpen en ten tweede moest de layout op de schop. Eerst werd het logo aangepakt. Zelf waren we het oude logo alweer een beetje vergeten, dus frissen we jullie geheugen ook eerst even op. Hieronder zie je het oude en het nieuwe logo naast elkaar.

instagram oude vs nieuwe logoDe oorspronkelijke bruine polaroidcamera met regenboogdetail was een geliefd logo bij Instagram fans. Tegen 2016 was het ontwerp echter sterk verouderd. Strak en vlak ontwerp was de nieuwe norm als het om logo’s van sociale netwerksites ging. Hetzelfde gold voor gebruikersinterfaces. En Instagram kon niet langer achterblijven. Samen met een team product/UI designers trok Ian Spalter drie maanden uit om dit ontwerpklusje te klaren. In de eerste fase werd het huidige logo ontleed. Om achter te halen wat de essentiële onderdelen van het oude logo zijn, werd aan een grote groep ontwerpers gevraagd belangrijkste elementen uit het bestaande logo uit het geheugen na te tekenen. Dit resulteerde in veel verschillende logo’s waar een aantal duidelijke rode lijnen uit sprongen. Met name het regenboogdetail en de zoomlens kwamen vaak terug.

In de prototypingfase werden met deze essentiële elementen in gedachten een aantal versimpelde vormen van het logo ontworpen. Met het regenboogdetail werd gespeeld door een kleurverloop in verschillende kleurencombinaties op het ontwerp los te laten. In deze fase kwam de comedien weer om de hoek kijken. Nieuwe ontwerpen werden telkens getest onder gebruikers. Op basis van hun reacties en feedback gingen de ontwerpers telkens weer terug naar de tekentafel. Totdat ze de perfecte punchline hadden. En dat is het huidige strakke roze-oranje-blauw logo van Instagram (zie bovenstaand plaatje).

Opvallend detail is dat het nieuwe logo in het begin zeer slecht werd ontvangen en zelfs afgekraakt door vakbladen zoals Adweek. In de aflevering vertelt de eigenaar van Instagram over de zelfverzekerde reactie van Spalter op de kritiek. Hij was er namelijk niet door uit het veld geslagen. Spalter begreep dat mensen met weerstand reageren op verandering, vooral als het een geliefd concept betreft. Echter, hij was er zeker van dat dit goed zou komen. Dit vertrouwen kwam voor een groot deel door het iteratieve ontwerpproces, waarin nauw geluisterd is naar de wensen van de gebruikers. Om de metafoor van de comedien nog even aan te halen: Spalter was er zeker van dat, als de storm een beetje is gaan liggen, iedereen hartelijk zou lachen om deze grap. Hij had de punchline immers al meermaals getest onder het publiek. En dat was ook zo, want het nieuwe logo werd uiteindelijk omarmd.

Een ‘clean’ layout met nadruk op afbeeldingen

De volgende stap in dit grote ontwerp project was de redesign van de layout, de user interface. Het oude Instagram logo kunnen jullie je na enig nadenken wellicht nog voor de geest halen, maar de oude layout mogelijk niet meer. Hieronder een opfrissertje. Wat zag het er anders hé!

Oude Instagram layout

Oude Instagram layout. Bron: Instagram.

Aan de redesign van de layout en gebruikers interface is veel aandacht besteed. In de schoenen van de comedien stappen en ideeën op gebruikers testen was zelfs nog belangrijker dan bij het ontwerpen van het nieuwe logo. Spalter en zijn team brachten veel tijd door met praten met de doelgroep en begrijpen hoe zij de verschillende features gebruiken. Het Instagram profiel is een belangrijke uiting van iemands identiteit. De emotie erachter is sterk. Zo bleek bijvoorbeeld de prominentie van de regel waarin het aantal volgers en gevolgden wordt weergegeven, een belangrijk aspect te zijn op het profiel. Heb je weinig volgers, dan wil je niet dat het snel opvalt. Heb je er veel, dan wil je er juist mee pronken. Grootte en plaats van deze regel waren dus een belangrijk aspect. In de eerste fase van het proces werden dit soort individuele componenten van het profiel, teller met volgers, bio, filters in nauwe wisselwerking met de doelgroep nader onderzocht.

Op basis van deze bevindingen werden verschillende prototypes gemaakt, ieder prototype een concept met een eigen naam. Deze prototypes werden wederom in constante wisselwerking met de gebruikers verder getest, totdat er én als de beste uit de bus kwam. De perfecte grap waar de meerderheid hartelijk om kon lachen.

En hoe Als je een fervent Instagram gebruiker bent, dan weet je al dat de nieuwe layout een wereld van verschil is vergeleken met wat ons in het begin werd voorgeschoteld. Het nieuwe ontwerp is bewust ‘clean’ gehouden om zo de focus meer te leggen op de afbeeldingen. Witte achtergrond, met dunne lijntjes getekende navigatie icoontjes, eenvoudige buttons. En de content in de kijker. Met de komst van nieuwe features, zoals Instagram stories en IDtv wordt het ontwerp telkens weer onder de loep genomen. De huidige layout is in de kern nog steeds trouw aan de eerste versie uit 2016, met enkele aanpassingen op de profielpagina zoals ruimte voor highlights en een andere plek voor de profielfoto.

Wat uit de Instagram case duidelijk is geworden is dat de iteratieve, of de comedien aanpak, tijd kost. Die tijd is nodig om je gebruiker te leren kennen, een conversatie en uitwisseling van informatie op gang te krijgen. Daarom trok Spalter drie maanden uit om alleen een nieuw logo te ontwerpen en nog meer tijd om de layout te perfectioneren. Het idee is dat deze tijd zich uiteindelijk terugbetaalt in tevreden gebruikers.

Kijk voor meer designers insights naar The Art of Design

Heeft bovenstaande je interesse gewekt, dan raden we je aan om de hele aflevering, sterker nog, de hele serie lekker te gaan bingen. Behalve Ian Spalter komen in Abstract: The Art of Design namelijk ook andere bekende ontwerpers aan het woord, zoals Olafur Eliasson, Ruth Carter en Paula Scher. De serie bestaat uit twee seizoenen van in totaal 14 afleveringen. Houdt je wel even bezig dus. Veel kijkplezier!

Online leren bij Versdenkers

Vanaf half april kun je bij Versdenkers de trainingen Conceptontwikkeling, Visuele Communicatie & Contentcreatie en Brand Storytelling & Contentstrategie online volgen. Houd onze website, nieuwsbrief en sociale media in de gaten voor het laatste nieuws.

Auteur: Dzenita Camo
Omslagfoto: Freepik

Nu is iedereen een designer. Opdrachtgeverschap en samenwerken anno 2018.

Hoe zet je Instagram Stories strategisch in voor jouw merk: negen tips

Neem contact op

We komen zo snel mogelijk bij je terug

Not readable? Change text. captcha txt
omslagfoto-online-leren