In grote bedrijven, universiteiten en hogescholen moet je soms betalen met een speciale pas. Je laadt de pas op bij een apparaat in het gebouw en betaalt hier vervolgens je printje, lunch of snack mee. Dit is een gesloten betaalsysteem. Pecunda maakt de hardware voor de fysieke pin-, cash- en pasuitgifte apparaten voor dit gesloten betalingssysteem. De bediening van deze apparaten gaat via 1 touchscreen. Hier zijn onze ontwerpers mee aan de slag gegaan.
Één bedieningspaneel voor meerdere functies
Het Pecunda betaalsysteem bestaat uit verschillende modules. Zo zijn er modules voor pintransacties, cash betalingen en pasuitgifte. Elke samenstelling van modules heeft één bedieningsscherm. De gebruiker krijgt instructies en keuzeopties om de betaalkaart op te laden, te kopen en te beheren. Hoe zorg je ervoor dat dit voor zowel scholieren als fabrieksmedewerkers lekker werkt? En hoe maak je het geschikt voor verschillende module-samenstellingen?
Om deze doelstelling te behalen hebben we 3 uitgangspunten voor het ontwerp genomen:
- Schaalbare en flexibele structuur
- Multibrand stijlopties
- Meer animaties, minder tekst
1. Schaalbare en flexibele structuur
Bedrijven kunnen zelf kiezen welke Pecunda modules ze willen hebben. Zo kan het voorkomen dat bedrijf A kiest voor een combinatie van de pin-, cash- en pasuitgifte-module en het bedrijf B alleen een pin-module aanschaft. Daarnaast moet rekening gehouden worden met verschillende schermformaten en hebben we af moeten zien van de scroll functie, omdat die niet goed op het geselecteerde touchscreen werkt. Weer eens wat anders dan een website of portal!
We hebben er daarom voor gekozen om menupagina’s mee te laten schalen, afhankelijk van het aantal opties. Zo benut je het volledige scherm en voorkom je ‘leeg aanvoelende pagina’s’. Voor menu’s met een toptaak is er een extra variant. Door op de knoppen te drukken navigeer je eenvoudig door de stappen.
Daarnaast hebben het ontwerp zo ‘plat’ mogelijk gehouden; geen uitgebreid menu maar 1 optie om terug te kunnen naar het begin. Het aantal stappen in een taak hebben we zoveel mogelijk beperkt.
2. Multibrand stijlopties
Naast de modulaire functie, werd ons ook gevraagd een stijl te ontwikkelen die:
- Bij verschillende bedrijven gebruikt moet kunnen worden en dus neutraal is.
- Gepersonaliseerd kan worden voor een bedrijf, denk aan logo en kleuren.
Hier hebben we goed gekeken naar waar de focus op het scherm moet liggen. De primaire taak is het uitvoeren van acties, zoals opladen en een nieuwe pas aankopen., oftewel de knoppen. We hebben er daarom voor gekozen om witte knoppen op een donkerdere achtergrond te gebruiken, zo springen ze er lekker uit. De header mag daarentegen minder opvallen. Hier zorgt de donkere kleur voor.
In de neutrale versie hebben we 1 kleur gekozen en gewerkt met iconen in 1 kleur. Dit maakt het gemakkelijk om de kleuren aan te passen op die van het bedrijf waar het komt te hangen. De logica achter de kleuren zorgt ervoor dat de focus op de juiste elementen blijft liggen.
3. Ondersteunende animaties
Tot slot hebben we in de interface veel animaties toegepast om de gebruiker te begeleiden. Dit hebben we op 2 manieren ingezet:
- Om aan te sporen tot actie. Wanneer ze bijvoorbeeld hun oplaadbedrag hebben gekozen en over kunnen gaan tot pinnen.
- Om aandacht te trekken. Bijvoorbeeld op het moment dat de gebruiker moet wisselen van de pin module naar de module waar het pasje uitkomt.
Het resultaat
Met het ontwerp is er een schaalbare basis neergezet die het makkelijk maakt om in de toekomst nieuwe functies toe te voegen en onderdelen te personaliseren. Een flexibel ontwerp dat past bij elk bedrijf.
Pecunda is ontwikkeld door onze fin-tech partner Ximedes.