Samen fotoboeken maken bij Belmondofoto.nl

Problemen

  • Ongebruiksvriendelijk programma waar basisfuncties ontbreken.
  • Ontbreken van een plan van aanpak voor de toekomst van het programma.
  • Belmondo onderscheidt zich niet duidelijk van de concurrentie.

Doelen

  • Bied mensen een programma aan waar ze online een fotoboek in kunnen maken en kunnen laten printen.
  • Verhoog de conversie van ±0,9% naar 2,0%.
  • Stroomlijn de ervaring van een fotoboek maken.

Resultaten

  • Fotoboeken kunnen on-the-go op een mobiel gemaakt worden.
  • Nieuwe huisstijl voor website en programma neergezet.
  • Verbetering gebruiksvriendelijkheid van het fotoboekenprogramma.

Over Belmondofoto

Bij Belmondofoto kunnen mensen een fotoboek laten printen. Belmondofoto is anders dan anderen omdat bij Belmondofoto ook samen een fotoboek gemaakt kan worden. De beheerder van het boek kan deelnemers uitnodigen om direct mee te doen met het fotoboek. Zo hoeft niet één persoon alle foto’s en teksten te verzamelen van anderen om daarna alleen een boek te bouwen.

 

Het programma van Belmondofoto werkt volledig in de browser. Alle grote browsers worden ondersteund: Chrome, Firefox, Safari, Edge, Internet Explorer en Samsung Android Internet. Voorheen werkte het programma met Flash maar Belmondofoto is overgestapt op HTML5. Deze keuze hebben zij gemaakt omdat Flash niet meer ondersteund wordt en het een veiligheidsrisico’s is.

 

Belmondofoto is onderdeel van Belmondo. Belmondo heeft ook een app die zij aanbieden aan de zakelijke markt. De app helpt werknemers met onboarden binnen een bedrijf en versterkt de communicatie tussen werknemers en werkgevers. De werknemers hebben een overzicht van het nieuws in het bedrijf en de werkgevers kunnen de feedback van hun werknemers bekijken om een duidelijker beeld te krijgen van de sfeer op de werkvloer.

Het probleem

Belmondofoto biedt een onlineprogramma aan die lijkt op programma’s zoals die van Albelli en HEMA. Belmondofoto’s team is klein, het budget is klein. Hierdoor verliepen de ontwikkelingen aan het programma traag. Het programma mistte veel functies om mee te doen met de giganten in de industrie. Verder had het programma geen planning voor doorontwikkelingen. Er was onduidelijkheid over hoe ze het programma verder moesten ontwikkelen. 

 

Ze wilden het samen maken van een fotoboek gebruiken als een unique selling point, maar het kwam niet terug op de website of in het programma. De functies voor het programma waren jaren geleden ontworpen en daarna zijn er geen revisies meer geweest.

 

Dit probleem kwam naar boven toen Belmondofoto overstapte naar een nieuwe manier van contact opnemen. Ze hadden een chatfuncties geïmplementeerd op de website. Meer mensen namen daarna contact op met Belmondofoto. In de chats uitten ze vaak hun frustraties dat het programma niet makkelijk is om mee te werken.

De gebruiker

Eén van Belmondofoto’s USPs is dat het programma de mogelijkheid biedt om samen een fotoboek te maken met familie, vrienden of collega’s. Op deze doelgroep wil Belmondofoto zich nog meer gaan focussen. De gebruikers van Belmondofoto willen dus graag samen een fotoboek maken.

Mijn rol

Ik was de projectmanager en UX/UI designer van het project. Dit ging om mijn afstudeerproject en mocht niet in teamverband gemaakt worden. Ik heb vanaf het begin tot het afleveren bij de developers aan het project gewerkt. Dit betekent dat ik erbij was toen de probleemsituatie werd geschetst. Ik heb onderzoek verricht, concepten bedacht, ontwerpen gemaakt, testen uitgevoerd, feedback verwerkt en de overdracht met developers afgehandeld.

 

Ik heb verder hulp gehad van Murray en Thomas. Murray is een designer bij Belmondo. Hij had geen directe rol binnen het project maar was een mentor voor mij. Hij hielp mij als ik iemand nodig had om ideeën mee te bespreken en kon mij helpen met mijn aanpak als ik interviews of presentaties moest opzetten.

 

Thomas is de baas en eigenaar van Belmondo. Hij is ook de product owner van Belmondofoto. Ik heb vaak met hem vergaderd over wat zijn visie was voor het programma en of de vooruitgang die ik had gemaakt aansloot bij wat hij graag wilde zien. Soms botsten onze visies voor het programma, maar we konden het altijd met elkaar uitpraten en een weg kiezen of een compromis sluiten.

Onderzoek

Persona

De persona is gebaseerd op statistieken uit Google Analytics en door te kijken naar onze sociale mediakanalen. Google Analytics laat zien dat de gemiddelde gebruiker een vrouw tussen de 25 en 45 jaar oud is en in de Randstad woont. Ze is creatief en haar interesses liggen bij koken, reizen en winkelen. Dit zien wij terug op onze Facebook en ook bij onze concurrenten zoals Albelli, HEMA, Solentro, Pastbook en Vriendenboeken.nl.

Concurrentieanalyse

Om erachter te komen wat de concurrentie van Belmondofoto doet, heb ik een concurrentieanalyse opgesteld. Ik heb fotoboeken gemaakt bij tien concurrenten en gekeken naar wat hun programma’s aanbieden. In eerste instantie keek ik alleen naar de concurrentie in de niche waar Belmondofoto zit, het samen maken van fotoboeken. Later breidde ik dat uit naar de grootste concurrenten in de industrie. Zo kon ik beter kijken naar welke functionaliteiten Belmondofoto mist, kreeg ik inspiratie voor nieuwe vormgeving en had ik een beter beeld van wat de concurrentie wel en niet doet.

 

Resultaten:

  • Bij twee concurrenten kunnen fotoboeken zonder mobiele app gemaakt worden.
  • Zes concurrenten gebruiken paginalay-outs en cliparts.
  • Bij vijf concurrenten kunnen meerdere gebruikers aan één fotoboek werken.
  • Bij één van deze vijf concurrenten is het mogelijk om de pagina-opmaak eigen te maken.

Klantonderzoek

Belmondofoto heeft een eigen klantenserviceprogramma. Hierin verzamelen alle e-mails die klanten naar ons sturen en chats die zij met ons starten. Om een duidelijk beeld te krijgen van alle frustraties van de klanten zijn deze over de afgelopen paar maanden verzameld en in een overzicht geplaatst. 

 

Omdat het lastig is om op straat mensen te vinden die fotoboeken maken, heb ik twee enquêtes gemaakt. Eén enquête werd geplaatst op mijn persoonlijke Facebook en LinkedIn. In deze enquête werd gevraagd waarom mensen fotoboeken maken, hoe ze bij onze concurrenten kwamen, wat hun motivaties zijn, waar zij op letten voordat ze een keuze maken en of zij willen helpen met eventuele vragen en/of testen. De andere enquête werd verspreid via de kanalen van Belmondo. In deze enquête wilde ik weten hoe zij bij Belmondofoto kwamen, waarom zij een fotoboek wilden maken, of ze ooit samen hebben gewerkt aan een fotoboek en of zij nog vragen of opmerkingen hadden. Ook hier probeerde ik weer mensen te vragen of zij mij willen helpen.

 

Resultaten enquête #1:

  • 100% van de ondervraagden maakten een fotoboek om herinneringen fysiek vast te leggen en tastbaar te maken.
  • 50% heeft een fotoboek gemaakt om cadeau te geven.
  • Gebruiksvriendelijkheid van het programma vindt men het belangrijkst. Met kwaliteit en prijs op nummer twee en drie.

 

Resultaten enquête #2:

  • 66% heeft met andere mensen een fotoboek gemaakt bij Belmondofoto.
  • 75% heeft een fotoboek gemaakt om cadeau te geven.
  • 66% maakt exclusief fotoboeken voor andere mensen.
  • 50% van de gebruikers is tussen de 25 en 45 jaar.

Tijdsbesteding

Aan de hand van mijn enquêtes kwam ik in contact met een enthousiaste hobbyfotograaf. Zij maakt van bijna alles een fotoboek, een weekendje weg is al een reden om achter de computer te kruipen en er een te maken. Een boek van 24 pagina’s, een vastgesteld minimum in veel programma’s, kost haar minstens anderhalf uur. Hierdoor ben ik bij mezelf af gaan vragen hoeveel tijd onze gebruikers gemiddeld kwijt zijn bij het maken van een boek.

 

Wij zagen in onze Google Analytics dat de gemiddelde tijd in het programma hoog is. De gemiddelde tijd in het programma ligt op 25 minuten. Ook zijn er twee tot vijf paginaweergaven voor iedere unieke paginaweergave. Een gemiddelde deelnemer moet één tot vier pagina’s invullen en heeft daar één tot tweeëneenhalf uur voor nodig. Dat is te lang.

 

Hotjar laat hetzelfde zien. Er zijn dagelijks meerdere opnames van mensen die 20 minuten of langer aan een boek werken met twee uitschieters van anderhalf uur. Deze mensen proberen hun deelnemerspagina’s in te vullen.

Brainstorm

Nu het probleem duidelijk was, kon ik aan de slag met de oplossing. Ik wilde het team van Belmondofoto er graag bij betrekken met het creëren van ideeën. Het was een goed moment om mijn bevindingen tentoon te stellen en input van de rest te ontvangen. 

 

De vraag tijdens de brainstorm was “Wat heb jij nodig om zo snel mogelijk een digitaal fotoboek te maken met anderen?” Uit de brainstorm kwam het idee om extreem gelimiteerd te werken. De klant moest vrijwel géén keuzes hebben. Zo konden zij snel het boek invullen en afmaken. De personalisatie zit hem dan vooral in de foto’s en teksten die zijn toegevoegd, niet in de opmaak of de cliparts die ernaast zijn geplaatst.

 

De brainstorm heb ik gebruikt om mijn concepten te bedenken. Het eerste concept volgde sterk de resultaten van de brainstorm, houd alles gelimiteerd. Het tweede concept was daarin wat soepeler. Houd het wel gelimiteerd maar geef de gebruikers hier en daar nog wel mogelijkheden tot personalisatie.

Programma van Eisen

Aan de hand van de gesprekken met klanten en met Belmondo is er een Programma van Eisen opgesteld. Dit Programma van Eisen is vervolgens de MoSCoW-methode ingedeeld om de prioriteiten te bepalen voor het nieuwe programma. Zo is een foto plaatsen in het fotoboek een must-have, maar een foto importeren vanuit Google Drive of Dropbox een could-have. Foto’s toevoegen voor een fotoboek is essentieel maar een koppeling met Dropbox is niet vereist om het programma te gebruiken.

Unique selling points

  • Maak samen met jouw familie, vrienden en collega’s een fotoboek.
  • Een fotoboek maken doe je al in een paar minuten.
  • Vanaf je mobiel in te vullen, zonder iets te downloaden.

User stories

Om voor iedereen duidelijk te maken waarom sommige functies in het programma moeten komen, heb ik 15 user story’s geschreven.

  • Als beheerder wil ik mensen met een e-mail kunnen uitnodigen zodat mensen zonder WhatsApp of sociale media ook mee kunnen doen aan het fotoboek.
  • Als beheerder wil ik een overzicht van de deelnemers in het boek zodat ik de mensen die niet in het boek zitten (opnieuw) een uitnodiging kan sturen.
  • Als gebruiker wil ik ongebruikte foto’s uit mijn overzicht kunnen verwijderen zodat mijn foto-overzicht overzichtelijk blijft.
  • Als gebruiker wil ik ongebruikte foto’s uit mijn overzicht kunnen verwijderen zodat mijn foto-overzicht overzichtelijk blijft.

User flow diagram

Om een duidelijk overzicht te krijgen waar alle functies komen die zijn genoemd in het Programma van Eisen, heb ik een gebruikersstroomdiagram gemaakt. Hierdoor was goed te zien wat de flow binnen het programma zou zijn, welke pagina’s mogelijk te druk zouden worden en waar er problemen kunnen ontstaan.

Schetsen

In deze fase heb ik concepten geschetst. Zo heb ik gekeken naar het invullen van het boek via een formulier, het boek in delen opmaken, aanpassingsopties tonen alleen als een element geselecteerd is, aanpassingsopties in het hamburgermenu plaatsen en aanpassingsopties aan de linkerkant van het scherm laten zien. Deze concepten hadden ieder zo zijn problemen.

 

Uiteindelijk zijn de opties onderaan het scherm gekomen, net zoals in het oude programma, maar compact gemaakt zodat alles op een telefoon te zien is. Extra zaken zoals een uitleg, veelgestelde vragen en een prijslijst kunnen dan in de hamburgermenu geplaatst worden. Deze informatie is handig om te weten maar niet essentieel om een fotoboek te maken.

 

Uit onderzoek van Hoober in 2013 en 2017 blijkt dat mensen in het midden van hun scherm beginnen. Daar moet de primaire functie komen. Daar hebben wij het fotoboek dat aangepast moet worden geplaatst. De secundaire functies zijn de opties om het fotoboek aan te passen. Deze zijn onderaan het scherm geplaatst zodat mensen er met hun duim bij kunnen. Tertiaire functies zoals mensen uitnodigen of het fotoboek afronden en kopen zijn bovenaan de pagina geplaatst. Deze functies zijn belangrijk maar worden minder vaak gebruikt dan de primaire en secundaire functies.

Greyscales

Ik ben snel overgestapt naar Sketch om greyscales te ontwerpen. Ik schets schermen vaak te klein en de onderdelen in de schermen te groot. Ik schets wel de eerste schermen om een idee te krijgen van welke kant ik op wil gaan maar zodra ik dat weet werk ik liever met Sketch, Figma of Illustrator om de echte schermen te maken.

 

De eerste schermen zijn vertalingen van mijn eerdere schetsen. Dit was om te zien of mijn ideeën zouden passen op het scherm. Dat deden ze. Daarna ben ik meer gaan experimenteren. Ik ben functies gaan uitwerken om te zien wat wel en niet werkt. Zo zou bij de eerste iteratie om tekstkleuren aan te passen 40% van het scherm bedekt worden. Ook zou de werking ervan niet consistent zijn met andere opties. Ik heb tijdens het experimenteren heel erg gelet op gebruiksvriendelijkheid en consistentie van de opties.

Testen

Hierna ben ik gaan testen. Ik wilde meten of mijn ideeën in de praktijk zouden werken. Ik heb getest op mensen binnen de doelgroep. Ik heb getest door opdrachten te geven die uitgevoerd moesten worden. Als mijn jonge doelgroep de opdrachten niet konden uitvoeren, zou het oudere gebruikers ook niet lukken was mijn insteek. De resultaten van de testen heb ik meegenomen in de compleet uitgewerkte schermen.

 

Resultaten:

  • Icoontjes voor de paginalay-outs en achtergronden waren niet duidelijk.
  • Inzoomen in het fotoboek werd ook vaak geprobeerd door simpelweg twee vingers uit elkaar te schuiven in plaats van de knop bovenaan te gebruiken.
  • Een foto inzoomen is lastig. De meeste bewerkopties staan onderaan, behalve een foto inzoomen, dit moet vervolgens via de zoomhandeling gedaan worden. Dat bleek voor verwarring te zorgen.

Huisstijl

 Voordat ik de schermen compleet ging opmaken, heb ik de huisstijl een update gegeven. Voorheen werden rood en oranje als primaire en secundaire kleur gebruikt. Dit vloekte met elkaar en strijde om de aandacht van de gebruiker. Ik heb er toen voor gekozen om rood als enige kleur te gebruiken. Rood wordt vaak gezien als actiekleur, zo kan de gebruiker gestuurd worden. 

 

Ook het lettertype heeft een update gekregen. Rubik is het nieuwe lettertype geworden. Het lettertype is niet te speels maar ook niet te serieus. Het lettertype gebruikt afgeronde hoeken, net zoals alle hoeken, iconen en buttons in het programma. 

Schermen op high-fidelity

Ik heb de feedback op de greyscales meegenomen naar het ontwerpen van deze schermen. De nieuwe huisstijl van Belmondofoto is ook toegepast. Het gebruik van rood werd ingezet om de aandacht van de gebruiker te pakken. Zo is een leeg fotokader rood om aan te geven dat er nog een foto geplaatst moet worden, of zijn waarschuwingen in het rood om duidelijk te maken dat iets geld kan kosten of niet terug te keren is.

 

Met hier en daar nog wat experimenteren en een wens vanuit de baas om de website eromheen een skelet te geven zijn er bijna 100 schermen ontworpen. Deze schermen zijn toen in een InVision-prototype aan elkaar gelinkt om verder te testen. Het prototype is hier te vinden.

Expert review

Een expert review wordt gehouden om de gebruikerservaring te controleren door een externe expert. Als designer kan je jezelf blindstaren op de ontwerpen die jij maakt. Een expert review verhelpt dit probleem.

 

Ik heb bij Story of AMS om een expert review gevraagd door een van hun UX/UI designers. Ook was dit een goed moment om te kijken wat de planning was voor de minimum viable product. De expert review is uitgevoerd door Jesse en werd bijgewoond door twee programmeurs van Story of AMS.

 

Uit de expert review kwam naar boven dat er goed is nagedacht over de gebruikerservaring van het programma. Het enige punt wat volgens de designer en programmeurs veranderd moest worden was op de overzichtspagina. Daar waren voorheen twee kolommen met pagina’s, dit is één kolom geworden. Met twee kolommen was er geen ruimte om naar beneden te scrollen omdat pagina’s gesleept kunnen worden om de volgorde te veranderen.

Testen prototype

Voordat het programma overgedragen zou worden aan Story of AMS om geprogrammeerd te worden, heb ik nog een laatste ronde met tests uitgevoerd. Deze tests werden op dezelfde manier uitgevoerd als de tests bij de greyscales. Ik heb getest bij de doelgroep en ik heb ze opdrachten laten uitvoeren. 

 

Resultaten:

  • Eerdere problemen zoals onduidelijke icoontjes, inzoomen van het fotoboek en foto’s inzoomen kwamen niet meer voor.
  • Scrollen om meer opties te zien was vanzelfsprekend en ging altijd goed.
  • De onboarding was fijn voor mensen met minder ervaring maar ook zonder de onboarding hadden mensen geen problemen met het gebruik van het programma.
  • Mensen hadden de verwachting dat ze deelnemers konden uitnodigen vanuit het hamburgermenu. 

Reflectie

Dit was een fantastisch project om uit te voeren. Voor een half jaar heb ik onderzoek mogen doen, ontwerpen mogen maken en testen mogen uitvoeren. Het nieuwe programma van Belmondofoto is echt mijn kindje geworden. Ik ben enorm trots op het eindresultaat. 

 

Wel had ik graag meer willen testen. Testen is niet echt een onderdeel bij Belmondo dus ik kon daar niet de begeleiding voor krijgen die ik nodig had. Het is niet geheel de schuld van Belmondo. Ik had graag elke twee weken willen testen met gebruikers maar dat is mij niet gelukt. Ik heb mij verkeken in hoe groot het project zou zijn.

 

Daarentegen ben ik ontzettend gegroeid in onderzoeken van het probleem en communicatie met de rest van het bedrijf. Ik had hiervoor nog nooit zo uitgebreid onderzoek gedaan naar een probleem. Ik heb hier veel zelfvertrouwen door gekregen. In het begin vonden mijn collega’s het lastig om te volgen wat ik deed. We hebben toen samengezeten en gepraat over de communicatie. Ik heb die feedback meegenomen en mijn communicatie verbeterd.

 

Als ik het opnieuw mocht doen had ik meer willen testen en had ik langer de tijd genomen om tot een huisstijl te komen. Rood schreeuwt heel erg, soms te veel.