OVER STAATSLOTERIJ

Een staatslot kopen, het checken van de uitslag, het bewaren van je loten; het kan tegenwoordig allemaal digitaal. Nu heeft Staatsloterij ook een app waarin dit snel en makkelijk gedaan kan worden. Dit geldt niet alleen voor online gekochte loten, maar ook voor loten die men gewoon in hun oude vertrouwde winkel kopen. Deze kunnen vervolgens worden gescand in de app. In de praktijk blijkt dit echter niet de meest voor de hand liggende manier.

HET PROJECT

MIJN ROL

Tijdlijn

12 - 19 juli 2021

Device

mobiele app

Het team

zelfstandig

Als onderdeel van een assessment werd mij de opdracht gegeven voor een bestaand probleem in de app van de Staatsloterij. Hierbij heb ik stapsgewijs een passende oplossing uitgewerkt tot een design waarin de gebruikerservaring centraal staat.

Tools

HET PROCES

Het proces waarmee ik dit project heb uitgevoerd ziet er als volgt uit:

ANALYSEREN

functies van de app

Uit data van de app blijkt dat er relatief weinig gebruik wordt gemaakt van deze scanfunctie. Voor gebruikers is het niet duidelijk genoeg dat dit een mogelijkheid is. Daarnaast is er de behoefte om meerdere loten snel achter elkaar te kunnen scannen. Met deze informatie ben ik aan de slag gegaan om de app, en met name de scanfunctie, verder te analyseren.

De eerste stap tijdens mijn analyse was natuurlijk het downloaden van de Staatsloterij app. Vervolgens ben ik de app gaan bekijken en een beetje uitproberen om er een eerste indruk van te krijgen. Al gauw richtte ik mijn aandacht op de pagina waar het om draaide: 'Mijn loten'. Ik keek naar de lay out, het gebruik en de plaatsing van copy, iconen en knoppen. Hier zie ik ook de scanfunctie staan. Hoewel ik de scanfunctie meteen kon openen, werd ik verder niet veel wijzer van de manier waarop deze werkte omdat ik simpelweg geen lot had om te scannen. Omdat ik wel graag wilde weten hoe de scanfunctie nou exact in zijn werk gaat, moest ik in de huid van de gebruiker kruipen. De logische volgende stap was dus naar de winkel gaan om een staatslot te kopen.

Eenmaal mijn staatslot bemachtigd, zag ik daarop inderdaad de QR-code staan. Ik opende opnieuw de app, ging naar 'Mijn loten', startte de scanfunctie en scande mijn lot. Nu had ik als gebruiker de gehele user flow doorlopen voor het scannen van een winkellot. Wat ik daar allemaal tegenkwam? Dat zette ik uiteen tijdens mijn brainstormsessie.

overzicht van mijn loten

lot scannen

BRAINSTORMEN

problemen en oplossingen

Tijdens mijn brainstormsessie schreef ik alles op wat me aan gedachten en ideeën te binnen schoten. Ik definieerde de problemen die ik tegenkwam, bedacht allerlei oplossingen voor deze problemen en kwam zo steeds dichter bij de beste manier om de scanfunctie te verbeteren. Om overzicht in mijn aanpak te houden zette ik de problemen en oplossingen op een rijtje.

PROBLEMEN

OPLOSSINGEN

SCAN-KNOP

Zowel het design als de plaatsing van de scan-knop zijn niet correct uitgevoerd. Er is gebruikgemaakt van een QR-icoon zonder label, waardoor de gebruiker dus maar moet weten wat dit icoon precies inhoudt. Daarnaast is de knop ver van de tekst "of scan een lot"  geplaatst (rechts onderin). Samen maakt dit de scan-knop onduidelijk en moeilijk te vinden.

Ik heb de scan-knop duidelijker en beter in zicht gemaakt door het design en de plaatsing van de knop aan te passen: een blauwe rechthoekige knop met een witte tekst "Scan" (zoals de login-knop) direct onder de tekst "of scan een lot" en naast de login-knop.

DOORSCANNEN

Om meerdere loten achter elkaar door te scannen zijn relatief veel handelingen vereist: lot scannen; gescand lot bekijken; op knop "scan nog een winkellot" drukken. Dit zorgt voor een onnodige vertraging van het proces om veel loten tegelijk te scannen.

Om het proces van het scannen van meerdere loten te vereenvoudigen en te versnellen, heb ik de interface zo aangepast dat de gebruiker in de scanfunctie blijft totdat hij zelf aangeeft dat hij klaar is.

SCHERM GESCANDE LOTEN

Na elk gescand lot verschijnt er een nieuw scherm met informatie over dat gescand lot. Door dit extra scherm wordt het proces voor het scannen van meerdere loten vertraagd.

Het tussenscherm na het scannen van een lot heb ik verwijderd. De gebruiker krijgt nu  inzicht in het aantal gescande loten tijdens het scannen.

TREKKINGEN-KNOP

Ook de knop links onderin het scherm heeft enkel een icoon zonder label. Omdat ik zelf niet meteen wist wat deze knop inhield, ben ik dit gaan verifiëren bij andere gebruikers. Ikzelf en de andere 4 gebruikers verwachtte dat de knop naar een lijst van loten zou leiden. Dit is echter niet het geval, het leidt namelijk tot een lijst van alle trekkingen. Gezien de verkeerde verwachting van de knop bij meerdere gebruikers, concludeerde ik dat de trekkingen-knop onduidelijk is.

Ik heb de trekkingen-knop duidelijker gemaakt door hetzelfde design te gebruiken als voor de andere knoppen: gekleurde knop, wit label en zonder icoon. Omdat de trekkingen-knop een andere toepassing heeft dan de login- en scan-knop, heb ik deze knop een andere kleur gegeven (oranje) en onder in het midden van het scherm geplaatst.

BARCODE ≠ QR-CODE

In de app wordt gebruikgemaakt van de term 'barcode' wanneer er eigenlijk gesproken wordt over de QR-code. Een barcode is een andere code dan de QR-code. Door niet de juiste benaming te gebruiken, kan het voor verwarring zorgen bij de gebruiker. 

Om te zorgen dat de gebruiker weet wat er van hem wordt gevraagd, heb ik consistent gebruik gemaakt van de term 'QR-code'.

UITLEG QR-CODE

Gezien de brede doelgroep van de Staatsloterij app, zal het niet voor iedereen even makkelijk zijn om de QR-code op een lot te scannen. Helaas wordt de gebruiker nergens in de app op weg geholpen bij het scannen van een winkellot. 

Ik heb ervoor gekozen om de gebruiker automatisch hulp te bieden wanneer het scannen van de QR-code niet lukt. De gebruiker wordt eerst de kans gegeven om zelf de QR-code te vinden en te scannen. Mocht dit proces langer duren dan nodig is (zo'n 10 seconden), dan verschijnt er binnen de scanfunctie een pop-up met een korte instructie voor het vinden van de QR-code.

HETZELFDE LOT SCANNEN

Tijdens het scannen van mijn eigen lot kwam ik erachter dat je hetzelfde lot meerdere keren kunt scannen. Dit kan de gebruiker onterecht de indruk geven dat het om een nieuw lot gaat die nog niet eerder gescand was, waardoor de gebruiker het overzicht van gescande en niet-gescande loten verliest.

Om frustratie bij de gebruiker te voorkomen, wordt de gebruiker feedback gegeven over zijn gescande loten. Wanneer de gebruiker een reeds toegevoegd lot nogmaals scant, verschijnt er een melding hierover. Zo is de gebruiker meteen geïnformeerd en behoudt hij het overzicht van zijn gescande en niet-gescande loten.

SCHETSEN

de eerste ideeën

Nu ik voor mezelf op een rijtje had gezet welke punten in de Staatsloterij app tot problemen leidden en hoe ik deze vervolgens het beste kon oplossen, ben ik met deze ideeën naar de tekentafel gegaan. Ouderwets met pen en papier ben ik aan de slag gegaan om mijn ideeën voor een nieuwe interface te schetsen.

STARTSCHERM

LOT SCANNEN

DOORSCANNEN

Op het startscherm 'Mijn loten' van de Staatsloterij app heb ik de scan-knop aangepast en verplaatst. Ook de trekkingen kop heb ik gewijzigd.

In de scanfunctie van de app heb ik de instructie bovenaan gezet en de term 'barcode' vervangen door 'QR-code'. Onderaan heb ik het aantal gescande loten toegevoegd en een knop om het scannen van loten te voltooien.

Na het scannen van een lot ontvangt de gebruiker een succesbericht en wordt er gevraagd of de gebruiker nog een lot wil toevoegen.

MELDINGEN

Tijdens het proces van het scannen van een winkellot in de app heb ik op twee momenten een melding toegevoegd.

Wanneer de gebruiker een langere tijd in de scanfunctie zit zonder een QR-code te scannen, verschijnt er een melding met een korte instructie voor het vinden van de QR-code.

Wanneer de gebruiker een lot scan die hij eerder al een keer heeft gescand, verschijnt er een melding waarin hij hierover wordt geïnformeerd.

WIREFRAMING

de verdere uitwerking

Met mijn grove papieren schetsen had ik een begin voor het ontwerp van een nieuwe interface. Deze schetsen heb ik vervolgens met behulp van InVision omgezet naar digitale low-fidelity wireframes. 

PROTOTYPING

het design

De laatste stap in het designproces was de oplossing te integreren in het design van de Staatsloterij app. Dit heb ik gedaan door de huisstijl van de app te gebruiken, zoals typografie en kleurgebruik, en bestaande elementen van de app terug te laten komen. Ook heb ik nog wat kleine aanpassingen doorgevoerd.  

Om het scanproces binnen de app nog sneller te laten verlopen, heb ik het scherm met de melding “Wil je nog een lot scannen?” weggelaten. In plaats daarvan verschijnt er kort in beeld een succesbericht dat het scannen van het lot gelukt is, waarna de gebruiker weer meteen verder kan met scannen zonder dat daar nog een actie voor moet worden uitgevoerd.

overzicht van mijn loten

een lot scannen

hulp bij het vinden van de QR-code

de QR-code scannen

scannen gelukt

nog een lot scannen

lot reeds toegevoegd

klaar met scannen

overzicht van mijn loten