Introductie
Antwerpen staat bekend als een erg drukke stad met veel verkeer van inwoners, forenzen en toeristen.
Terwijl in andere Belgische steden de verkeersdrukte afgenomen is, blijft die in Antwerpen onverminderd hoog.
Evenementen en de vele wegenbouwprojecten leggen extra druk op de infrastructuur. Daarom wenste de Stad Antwerpen
een digitale oplossing om slim reizen binnen en rondom Antwerpen te stimuleren en om mensen te informeren over
betere transportmethoden.
Behoeftenonderzoek
Om een goed product op te zetten heb ik eerst bedoelingen, behoeften en wensen in kaart gebracht. Dit deed ik door
uitgebreid contact met stakeholders vanuit de gemeente. Maar ook op bassis van persona's en gesprekken met verschillende
inwoners van Antwerpen. De resultaten hiervan zijn bekend gemaakt aan de product owner en met zijn goedkeuring ben
ik het daadwerkelijke ontwerpproces begonnen.
Information Architecture
Om tot een gedegen informatie-architectuur te komen, heb ik verschillende testen uitgevoerd bij respondenten. Dit betreft
onder andere card sorting en tree testing. Ik probeerde inzicht te krijgen in de mogelijkheden en in welke structuren voor
het publiek begirjpelijk zouden zijn.
Om inzicht te krijgen in de ideeën die respondenten hadden bij een applicitie gericht op slimmer vervoer binnen Antwerpen,
zijn onder andere open card sorting testen uitgevoerd. Bij deze testen is natuurlijk een uitleg gegeven over de bedoeling
en daarbij is een set kaarten en categorieën aangeleverd. In het principe van open card sorting is het voor respondenten
mogelijk om zelf ook kaarten of categorieën te maken.
Mensen maakten zeer verschillende indelingen en kwamen met zeer uiteenlopende ideeën voor elementen of functies die
handig zouden kunnen zijn. Dit heeft mij zeker nieuwe inzichten en ideeën opgeleverd.
Naar aanleiding van de card sorting testen heb ik een basis ontwikkeld voor de informatie-architectuur.
De structuur is getest aan de hand van tree testing; een test waarbij de begrijpelijkheid van de ontwikkelde
structuur wordt getest bij respondenten. Hierbij heb ik respondenten de mogelijkheid gegeven om wijzigingen
aan te brengen in de structuur. Echter voelden slechts weinig respondenten de behoefte om de structuur anders
in te delen.
Om de ontwikkelde structuur verder aan te scherpen, heb ik een functieoverzicht ontwikkeld. Dit hielp mij
om beter inzicht te houden in de samenhang tussen verschillende functies en de indeling hiervan. Ook kon ik
hiermee een beter onderscheid maken tussen pagina's met specifieke functies en informatie die verspreid op
de applicatie vindbaar is.
Information Design
Een belangrijk aspect bij een dergelijke oplossing is goede informatie en een goede gebruiksvriendelijkheid.
Daarom heb ik structuur aangebracht in de functies en informatie en deze opgedeeld in samenhangende groepen.
Door korte stukjes tekst effectief in te zetten, wordt het inzicht van de gebruiker nog iets verbeterd.
Verder heb ik veel gebruik gemaakt van kleur als aandachttrekker, visualisatie en afbeeldingen.
Kaarten zijn essentieel in een routeplanner. Maar kaarten zijn ook perfect om inzicht te bieden in de drukte in de stad,
in de mobiliteit van (gecombineerde vormen van) vervoer. Ik bedacht de mobiliteitskaart als een functionaliteit waar mensen
alles kunnen vinden om hun plannen te optimaliseren. Denk aan bushaltes of parkeerplaatsen in de buurt van een adres.
Maar ook waar de lage-emissiezone ligt, welke parkeertarieven er zijn, waar wegwerken zijn en hoe de verkeerssituatie is.
De routeplanner neemt zaken zoals verkeersdrukte zelf mee in haar voorstel voor een route van A naar B.
Sitemap
Om de navigatie binnen de applicatie helder te krijgen, heb ik een sitemap ontwikkeld. Deze geeft heel eenvoudig weer
welke pagina's er bestaan en op welke wijze deze aan elkaar gekoppeld zijn, gezien vanuit de landingspagina. In feite is
dit een versimpeling van het functieoverzicht, omdat de specifieke functies en stukken informatie nu achterwege zijn gelaten.
Interface Design
Voor de verschillende pagina's in de app en op de website heb ik een uitgebreid interface ontwerp gemaakt.
Hiervoor baseerde ik mij op mijn onderzoek en het informatie-ontwerp. Voor desktop, tablet en mobiel heb ik
verschillende sets met wireframes gemaakt. Voor elke functionaliteit en voor elk stukje informatie zijn meerdere
varianten gemaakt, zodat ik kon bedenken wat beter zou werken. Ook geeft het werken aan nieuwe varianten weer ideeën
voor weer andere varianten.
Alle wireframes zijn ontwikkeld in Axure RP, een gedegen programma voor het ontwikkelen van wireframes en klikbare
prototypes. Tijdens de ontwikkeling van prototypes heb ik ook de navigatiestructuur iets verder weten te verbeteren.
Hieronder en hiernaast zijn een deel van de wireframes te zien die ik heb ontwikkeld voor desktop en mobiel.
Naar aanleiding van alle varianten die ontstonden voor specifieke functionaliteiten, heb ik verschillende
ontwerpen verwerkt in A/B-testen. Hierbij werd respondenten simpelweg gevraagd naar de voorkeur voor een
ontwerp A of een ontwerp B. Er zijn onder andere A/B-testen uitgevoerd voor verschillende weergaven van de landingspagina,
de functie waarmee men in de routeplanner uit opties voor vervoersmiddelen kan kiezen en de weergave van de mobiliteitskaart.
Daarnaast zijn er A/B-testen uitgevoerd om de indeling van de informatie op de pagina "Werken en Events" en de indeling
van de navigatiebalk. De testen bevestigden een groot deel van mijn vermoedens over de voorkeuren van mensen op basis
van psychologisch inzicht.
Op basis van de uitslag van de A/B-testen heb ik enkele aanpassingen gedaan aan de wireframes, op suggestie
van respondenten. Na een kleinere tweede A/B-test bleek dat respondenten nog enthousiaster reageerden op het ontwerp.
Visueel Design
Voor het visueel ontwerp heb ik mij gebaseerd op de huisstijl van de Gemeente Antwerpen. Zij schrijft voor dat
bepaalde kleuren, stijlen van foto's en bepaalde logo's gebruikt moeten worden op alle websites van de gemeente.
Dat vond ik niet jammer. Want ik vind de kleurrijke en moderne, maar toch rustige stijl mooi en professioneel
over komen.
Prototype
Op basis van de definitieve wireframes heb ik een prototype ontwikkeld dat interactief en klikbaar is.
Dit prototype is gebruikt om usability testen uit te voeren op respondenten. Deze testen gingen verassend goed.
De respondenten reageerden grotendeels zeer positief op het ontwikkelde prototype.
Hiernaast is het prototype gebruikt om het ontwerp als geheel te presenteren aan stakeholders en diende het als
een nuttige tool voor ontwikkelaars.
Oplossing
Het eindproduct, Slim naar Antwerpen, is een overzichtelijke, gebruiksvriendelijke website geworden voor desktop
en tablet. Voor mobiel is een bijhorende app ontwikkeld, welke een goede score ontving in de Android Appstore.
Gebruikers kunnen nu eenvoudig hun reis (binnen) Antwerpen plannen en hun reisgedrag optimaliseren op basis van
allerlei informatie over verkeer binnen Antwerpen. De Gemeente Antwerpen heeft laten weten zeer tevreden te zijn
over het eindresultaat.
Resultaat
Het project Slim naar Antwerpen werd een succes binnen de regio Antwerpen. De nieuwe applicatie draagt bij aan de
de verduurzaming van vervoer binnen de regio en vormt een van de succesverhalen van Vervoerregio Antwerpen.
Mede door het gebruik van de applicatie behaalde Antwerpen een modal split van 50/50. Dit houdt in dat nog maar
50% van de inwoners de auto gebruikte als primair vervoersmiddel. Uit evaluaties blijkt dat het gebruik van auto's
voor woon- en werkverkeer met 7% is gedaald. Het gebruik van fiets is juist weer gestegen met 6%.
De desktop-applicatie werd in het eerste half jaar al tienduizenden keren gebruikt. De mobiele app van Slim naar Antwerpen
telt zo'n 25.000 gebruikers en haalt een aardige score van 4,1 sterren (uit 5) in de App Store. In het kader van
doorontwikkeling zijn visuele verbeteringen toegepast in de applicatie en worden geregeld updates doorgevoerd om
de applicatie werkend en gezond te houden.
