TicketTrigger
Je tickets bij de hand. Weten waar je aan toe bent.
Een ticketapp voor clubs zonder eigen app, ook beschikbaar als SDK. Ik vertaalde technische eisen en businessdoelen naar flows en schermen: van een ticket met toegang tot een geverifieerd clubaccount.
Ticketgemak en identificatie in één product.
Voor een supporter draait de app om tickets die snel te vinden en te gebruiken zijn. Voor de business was identificatie het verdienmodel. Die belangen moesten samenkomen in een technisch haalbare flow, met genoeg uitleg om vertrouwen te ondersteunen. Ik vertaalde de eisen naar de stappen die de supporter daarvoor moest doorlopen.
Eerst de flow intern uitdenken
De Head of Product leverde de technische eisen en businessdoelen, gekaderd met CEO en CTO. Op basis daarvan werkte ik intern de eerste flow uit. De ticketlogica kon uit Tymes4 komen. Hoe identificatie precies zou werken, stond nog open: de partij voor de ID scan was nog niet gekozen.
De eerste opzet verbindt de clubkoppeling, tickets en identificatie. Voor de identificatiestappen waren we afhankelijk van de leverancierskeuze.
Klik op afbeelding voor grote versie
Ticketgemak en identificatie in één product.
Voor een supporter draait de app om tickets die snel te vinden en te gebruiken zijn. Voor de business was identificatie het verdienmodel. Die belangen moesten samenkomen in een technisch haalbare flow, met genoeg uitleg om vertrouwen te ondersteunen. Ik vertaalde de eisen naar de stappen die de supporter daarvoor moest doorlopen.
Eerst de flow intern uitdenken
De Head of Product leverde de technische eisen en businessdoelen, gekaderd met CEO en CTO. Op basis daarvan werkte ik intern de eerste flow uit. De ticketlogica kon uit Tymes4 komen. Hoe identificatie precies zou werken, stond nog open: de partij voor de ID scan was nog niet gekozen.
01 / Clubaccount koppelen
De koppeling uit de flow kreeg hier uitleg en een scherm om je account te verbinden. Zodoende de flow te testen is.
02 / Wedstrijd lijst
Na het koppelen zie je de wedstrijden waarvoor je tickets hebt. De status laat zien of je nog iets moet doen, zoals identificeren of tickets toewijzen. Dit is herkenbaar van Tymes4.
03 / Wedstrijd tickets
Benodigde acties om tickets te ontgrendelen getoont dmv status pills, herkenbaar zoals Tymes4. Dat wekt vertrouwen.
04 / Digitaal paspoort
Het “Digitale paspoort”. Zodra een identiteit gelinked is, moest er een layout tonen wat er prcies
Samenwerking met Aquadis
Met de bevindingen uit het prototype en de keuze voor de ID-partij bespraken we de flow verder. Ik redeneerde vanuit de supporter: hoe voldoe je aan de eisen en kom je zo makkelijk mogelijk bij je tickets? Aquadis keek naar de technische haalbaarheid en de Head of Product bracht de product- en businessbelangen in. De gezamenlijke afwegingen verwerkte ik in de definitieve flow.
De eerste opzet verbindt de clubkoppeling, tickets en identificatie. Voor de identificatiestappen waren we afhankelijk van de leverancierskeuze.
Klik op afbeelding voor grote versie
De vertrouwde basis van Tymes4
De defintieve flow is de basis voor het hi-fi prototype. De ticketlayout, statuspills en vormgeving komen grotendeels uit Tymes4 IBT. Ik werkte de schermen en interacties verder uit binnen die bestaande opbouw. Dat gaf een vertrouwde basis voor een app die zelf geen clubhuisstijl kreeg.
De SDK ondersteund wel een eigen huisstijl.
Lo-fi: Ticketview
Welke informatie heeft de supporter nodig en wat kan hij nu doen?
Hi-fi: Ticketview
“Identificatie vereist” staat bij het ticket, met een directe vervolgstap.
Herkenning als basis
De bestaande layout, typografie en roze-donkerblauwe huisstijl boden continuïteit met Tymes4. Ik gebruikte die basis om de hiërarchie en acties consistent te houden.
Voorbereid op de wedstrijddag
Ik pleitte voor tijdige herinneringen: eerder openen maakt het mogelijk beschikbare tickets vooraf op te halen en lokaal te bewaren. Een ticket moet daarvoor eerst met verbinding geladen zijn.
Vertrouwen wekken vóór de eerste handeling
Tijdens de interne tests riep de eerste stap, meteen je apparaat koppelen, argwaan op: “Wat ga ik linken?” en “Is dit veilig?” Gebruikers kregen direct een handeling voorgeschoteld, terwijl nog niet duidelijk was waar de app voor diende en wat er gekoppeld werd.
Daarom kozen we voor een onboardingwizard die eerst het doel van TicketTrigger uitlegt. Ik bouwde de uitleg op vanuit ticketgemak, gevolgd door het koppelen van je clubaccount en identificatie. De korte stappen, vriendelijke toon en vertrouwde Tymes4-vormgeving moesten duidelijkheid geven en vertrouwen in de app ondersteunen.
01 / Wat is dit voor app?
Tickets bij de hand. De uitleg begint bij een herkenbare behoefte van de supporter.
02 / Zachte landing
Uitleggen wanneer identificatie nodig kan zijn en dat gegevens met de club worden gedeeld. Extra aandacht voor taalgebruik om het als QoL te vertellen ipv een verplichting.
03 / Lets go
De wizard eindigt met een concrete volgende stap: koppelen via QR-code of koppelcode.
Het koppelen van app en account
Een nieuwe gebruiker heeft nog geen clubaccount aan de app gekoppeld. Daarom ontwierp ik een aparte verbindingsroute. De supporter gebruikt de QR-code of koppelcode uit zijn bestaande ticketshopaccount. De app maakt duidelijk hoe hij die koppeling start en bevestigt vervolgens met welke club hij verbonden is.
Voor het linken vanaf telefoon bestaat er een directe koppelknop. Deze doet in weze dezelfde handelingen, maar zonder dat de gebruiker die handmatig hoeft te doen.
01 / Kies hoe je koppelt
QR scannen of een code invoeren. De uitleg staat bij de handeling.
02 / QR Code
QR Scannen spreekt voor zich. Om vanaf telefoon te linken
03 / Bevestig de verbinding
Naam en club geven terugkoppeling over de gemaakte koppeling. Deze terugkoppeling is ook direct verificatie voor de gebruiker.
Identificatie status en accountgegevens per club.
Accountkoppeling is niet hetzelfde als identiteitsverificatie. De koppeling haalt het bestaande clubaccount naar de app; identificatie vergelijkt later documentgegevens met dat account. Voor supporters met meerdere clubs volgt de inhoud steeds de gekozen club, zodat tickets en accountgegevens niet door elkaar lopen.
Waarom dit gebeurt is omdat ik een account kan hebben bij Feyenoord; Chris Holstein en bij een andere club: Christiaan Holstein. Ik ben dezelfde persoon maar heb bij de ene club mijn roepnaam gebruikt. Door deze data opzet is het niet mogelijk om een enkele entiteit te gebruiken.
Transformeren van Tymes4 naar app
Na het koppelen komt de supporter bij de wedstrijden waarvoor hij tickets heeft, met de eerstvolgende bovenaan. Vanuit die lijst gaat hij naar zijn tickets voor één wedstrijd. Ik behield de bekende ticketopbouw en statuspills van Tymes4 IBT en vertaalde de ticketvoorwaarden naar passende acties.
01 / Wedstrijdlijst
Datum, teams, locatie, aantal tickets en gereedheid maken de lijst bruikbaar als startpunt. Dezelfde data als in Tymes4, geoptimaliseerd voor app.
02 / Toewijzing vereist
De primaire actie is altijd roze. Deze actie verandert altijd op basis van de status. Zo leidt de knop naar identificatie wanneer dat vereist is, of kun je je ticket openen als er geen actie vereist is.
03 / Ticket gereed voor gebruik
Layout wijzigt op basis van interactie mogelijkheden. Herkenbare layout van Tymes4 helpt gebruikers.
Overdragen
De documentatie specificeert niet alleen de schermen, maar ook hun gedrag: maximaal drie actieknoppen, een vaste volgorde en breedtes die meebewegen met het aantal acties. De laatste verversing is zichtbaar. Zo werkte ik de businesslogica door tot in de interface, zonder dat de supporter die regels zelf hoeft te kennen.
Van documentgegevens naar een geverifieerd clubaccount
In de afgestemde flow zijn documentscan en accountvergelijking twee aparte stappen. De scan levert identiteitsgegevens; daarna worden die vergeleken met het clubaccount. Ik ontwierp de begeleiding vóór en ná de scan. Alleen de scaninterface van de externe leverancier viel buiten mijn ontwerpscope.
Transparantie als een harde producteis
Vanuit de business lag veel nadruk op uitleg en afzonderlijke bevestigingen: gebruikers moesten begrijpen wat er met hun gegevens gebeurde. Daarom kreeg elke stap nadrukkelijk een eigen scherm.
Ontwerpscope
Uitleg en akkoord → voorbereiding → externe documentscan → scanbevestiging → vergelijking → uitkomst.
De scaninterface zelf viel buiten mijn invloed.
01 / Uitleg en voorwaarden
Vooraf staat uitgelegd waarom identificatie nodig is en wat er met de gegevens gebeurt. De supporter kan de voorwaarden bekijken voordat hij verdergaat.
02 / Voorbereiden op de scan
Het scherm toont welk clubaccount wordt vergeleken en welk identiteitsbewijs nodig is. Zo kan de supporter vóór de scan controleren of hij met het juiste account verdergaat.
03 / Betalen voor de scan
De betaalstap is vóór documentscan.
04 / Het document scannen
Regula begeleidt het scannen en uitlezen van het document.
05 / De gescande gegevens
Na de scan worden de uitgelezen gegevens getoond. De supporter moet de vergelijking met het clubaccount zelf starten.
06 / Vergelijken met de club
Boven staan de gegevens uit het identiteitsbewijs, onder de gegevens van het clubaccount. Bewegende pijlen laten zien dat de vergelijking bezig is. Indicatief dat er nog iets bezig is
03 / Betalen voor de scan
Eerdere versie had geen bevestiging scherm, en ging direct naar het de pagina die de identiteit van de gebruiker toont. Dit werd als verwarrend ervaren, ookal werd de data gepresenteerd dat het account compleet was.
Vanuit de business was veel nadruk gelegd op expliciete uitleg en bevestiging van gegevensgebruik. Die randvoorwaarde verklaart de afzonderlijke schermen. De latere feedback liet zien dat een technisch duidelijke tussenstap niet automatisch duidelijk is als onderdeel van de volledige gebruikerstaak.
Van ontwerp naar gebruik
Aquadis bouwde de app op basis van de uitgewerkte schermen, het klikprototype en de beschrijvingen van het gedrag. Na livegang konden supporters hun clubaccount koppelen en hun tickets gebruiken. Via clubs kregen we vervolgens feedback over de identificatie in de praktijk.
Van losse stappen naar een doorlopende flow
Via clubs kwam terug dat fans na ‘Scan succesvol’ stopten met identificeren. Het groene vinkje gaf het gevoel dat ze klaar waren, terwijl de vergelijking met het clubaccount nog moest beginnen. In het nieuwe ontwerp gaat de scan daarom vanzelf over in de vergelijking. De eindbevestiging volgt pas als die gelukt is.
01 / Uitleg en voorbereiding
Voorwaarden, uitleg en het clubaccount staan op één scherm. De supporter ziet wat er gaat gebeuren en welk document nodig is.
02 / Betalen voor de scan
De betaalstap blijft vóór de documentscan staan. Na het afronden van de betaling kan de supporter verder met het scannen.
03 / Het document scannen
De externe ID-partij begeleidt het scannen en uitlezen. Deze interface viel buiten mijn invloed; de stappen ervoor en erna werkte ik uit.
04 / Direct vergelijken
Na de scan start de vergelijking vanzelf. De gegevens blijven zichtbaar, de pasfoto krijgt minder nadruk en de melding vraagt de app open te houden.
05 / Identificatie afgerond
Pas na een geslaagde vergelijking volgt een eindbevestiging. Daarmee wordt duidelijk dat de documentgegevens en het clubaccount overeenkomen en het proces is afgerond.
De tussenstap toonde de gescande data en voorkwam destijds dubbel betalen voor een scan. Toen die betaalvoorwaarde veranderde, kon de extra handeling vervallen. Betalen en scannen blijven in deze flow zichtbaar; de gescande data wordt tijdens de vergelijking getoond. Voor het nieuwe ontwerp zijn nog geen gemeten resultaten beschikbaar.