Case study:
Slim naar Antwerpen
Probleemstelling
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. Daarnaast leggen de vele
wegenbouwprojecten en evenementen extra druk op de infrastructuur.
Binnen Antwerpen, maar vooral erbuiten onder forenzen, bestaat veel onwetendheid over het goede netwerk van openbaar vervoer binnen de Stad. Dit geldt ook voor het alternatieve vervoer binnen de stad Antwerpen.
Daarom wenst de Stad Antwerpen een digitale oplossing om slim reizen binnen en rondom Antwerpen te stimuleren en om mensen te informeren over betere transportmethoden.
Binnen Antwerpen, maar vooral erbuiten onder forenzen, bestaat veel onwetendheid over het goede netwerk van openbaar vervoer binnen de Stad. Dit geldt ook voor het alternatieve vervoer binnen de stad Antwerpen.
Daarom wenst de Stad Antwerpen een digitale oplossing om slim reizen binnen en rondom Antwerpen te stimuleren en om mensen te informeren over betere transportmethoden.
Oplossing
Het eindproduct, Slim naar Antwerpen, is een overzichtelijke, gebruiksvriendelijke website geworden voor smartphone,
desktop en tablet. Op basis van de weergave voor smartphone is later door een andere designer een variant gemaakt die werd doorontwikkeld
tot een mobiele app. Deze app ontvangt goede score binnen de Android Appstore.
Gebruikers kunnen nu eenvoudig hun reis (binnen) Antwerpen plannen en hun reisgedrag optimaliseren op basis van allerlei informatie over routes, verkeersdrukte, opstoppingen, evenementen en wegwerken binnen Stad Antwerpen.
De Gemeente Antwerpen heeft laten weten zeer tevreden te zijn over het eindresultaat.
Gebruikers kunnen nu eenvoudig hun reis (binnen) Antwerpen plannen en hun reisgedrag optimaliseren op basis van allerlei informatie over routes, verkeersdrukte, opstoppingen, evenementen en wegwerken binnen Stad 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.
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.
Werkwijze
Voor dit project werkte ik binnen een Scaled Agile Setting samen met een team van Front-end developers, een
Back-end developer/ systeemarchitect, een tester, een productowner, een teamleider en een junior UX Designer.
Hierbij vonden dagelijkse stand-up’s plaats en werkten we vanaf de retrospective vanuit een backlog aan verschillende
taken. In overleg met de teamleider heb ik voor zowel mij als de junior UX Designer een bepaald aantal uren vooruit
gepland om te zien hoe de ontwerpfase en het begeleiden van de junior in te plannen waren.
De samenwerking met de junior UX Designer was erop gericht hem zo veel mogelijk te laten leren over UX en UI Design. Ik had de volledige vrijheid om het projectmanagement voor de UX en de UI zelf uit te voeren. Daarom nam ik de junior UX Designer mee in het ontwikkelen van een UX Road map voor de designkant van het project. Zodat hij dit ook eens kon ervaren.
De samenwerking met de junior UX Designer was erop gericht hem zo veel mogelijk te laten leren over UX en UI Design. Ik had de volledige vrijheid om het projectmanagement voor de UX en de UI zelf uit te voeren. Daarom nam ik de junior UX Designer mee in het ontwikkelen van een UX Road map voor de designkant van het project. Zodat hij dit ook eens kon ervaren.
Gedurende een half jaar heb ik een nauwe samenwerking gehad met stakeholders, het projectteam en vooral met de
junior UX Designer. Ik heb geprobeerd hem zoveel mogelijk vrij te laten in het opperen van ideeën en het ontwikkelen
van de onderdelen die in het proces zijn input vormden. Zoveel mogelijk activiteiten in onze samenwerking heb ik gestoeld
op een basis van gelijkwaardigheid, waar ik hem hier en daar iets nieuws kon leren.
Samen ontwikkelden we een Design System voor consistentie en een vastgelegd plan om latere discussie te voorkomen. Tegenover de rest van het team nam ik het voortouw op het gebied van Agile UX door hen mee te nemen in het Design Thinking met voorbeelden en stimulerende ontwerpsessies.
Samen ontwikkelden we een Design System voor consistentie en een vastgelegd plan om latere discussie te voorkomen. Tegenover de rest van het team nam ik het voortouw op het gebied van Agile UX door hen mee te nemen in het Design Thinking met voorbeelden en stimulerende ontwerpsessies.
Research
Dit project begon met een onderzoek naar de behoeften, eisen en wensen van de stakeholders. Dit deed ik samen met een
andere UX Designer door uitgebreide gesprekken met stakeholders vanuit de Stad Antwerpen.
Hierna is een uitgebreid gebruikersonderzoek gehouden onder inwoners en forenzen in Antwerpen. Dit gebeurde door middel van interviews, enquêtes en open gesprekken. Aan de hand hiervan zijn persona’s opgesteld. In samenwerking met de Universiteit Antwerpen is een uitgebreid databestand onstaan met informatie uit enquetes en interviews.
De conclusies hiervan zijn bekend gemaakt aan de product owner en de stakeholders en met hun goedkeuring zijn we het daadwerkelijke ontwerpproces begonnen.
Hierna is een uitgebreid gebruikersonderzoek gehouden onder inwoners en forenzen in Antwerpen. Dit gebeurde door middel van interviews, enquêtes en open gesprekken. Aan de hand hiervan zijn persona’s opgesteld. In samenwerking met de Universiteit Antwerpen is een uitgebreid databestand onstaan met informatie uit enquetes en interviews.
De conclusies hiervan zijn bekend gemaakt aan de product owner en de stakeholders en met hun goedkeuring zijn we het daadwerkelijke ontwerpproces begonnen.
Creatief Proces
Nadat we een goed inzicht hadden in potentiële gebruikers en de wensen, eisen en behoeften vanuit stakeholders,
zijn we een creatief proces in gegaan om allerlei ideeën te verzamelen en te onderzoeken. De hoofdvraag hierin was
hoe we slim reizen binnen en rondom Antwerpen konden stimuleren. Hiervoor hebben wij ook samen gewerkt met
vervoersexperts en een verkeerspsycholoog vanuit de Universiteit Antwerpen.
Hier kwam uit voort dat de twee belangrijkste pijlers van de applicatie moesten gaan draaien om informatievoorziening en het bieden van handige functionaliteiten. Zodoende kwamen we niet alleen op het idee voor een routeplanner, maar ook een mobiliteitskaart die inzicht biedt in drukte in de stad. Een belangrijk punt van de stakeholders was dat de lage emissiezone in Antwerpen ook duidelijk in beeld moest komen.
Binnen dit creatieve proces zijn we op een hoop ideeën gekomen die stuk voor stuk onderzocht zijn op draagvlak en mogelijke impact.
Hier kwam uit voort dat de twee belangrijkste pijlers van de applicatie moesten gaan draaien om informatievoorziening en het bieden van handige functionaliteiten. Zodoende kwamen we niet alleen op het idee voor een routeplanner, maar ook een mobiliteitskaart die inzicht biedt in drukte in de stad. Een belangrijk punt van de stakeholders was dat de lage emissiezone in Antwerpen ook duidelijk in beeld moest komen.
Binnen dit creatieve proces zijn we op een hoop ideeën gekomen die stuk voor stuk onderzocht zijn op draagvlak en mogelijke impact.
Information Architecture
In de aanloop naar een gedegen informatiearchitectuur zijn er verschillende testen uitgevoerd bij respondenten.
Om inzicht te krijgen in de ideeën die respondenten hadden bij een applicatie gericht op slimmer vervoer binnen Antwerpen,
zijn open card sorting testen uitgevoerd. En in een later stadium zijn gewone card sorting tests uitgevoerd om de opzet
van de structuur te testen.
Mensen maakten zeer verschillende indelingen bij de open card sorting tests en kwamen met zeer uiteenlopende ideeën voor elementen of functies die handig zouden kunnen zijn. Dit heeft ons zeker nieuwe inzichten en ideeën opgeleverd.
Mensen maakten zeer verschillende indelingen bij de open card sorting tests en kwamen met zeer uiteenlopende ideeën voor elementen of functies die handig zouden kunnen zijn. Dit heeft ons zeker nieuwe inzichten en ideeën opgeleverd.
Samen met een andere UX Designer heb ik een subtiele en eenvoudige architectuur ontwikkeld die de weer te geven
functionaliteiten en informatie op een overzichtelijke en snel te begrijpen wijze weer moet geven.
De structuur is getest aan de hand van tree testing; een test waarbij de begrijpelijkheid van de ontwikkelde structuur in de vorm van een sitemap 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.
De structuur is getest aan de hand van tree testing; een test waarbij de begrijpelijkheid van de ontwikkelde structuur in de vorm van een sitemap 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 ons om beter
inzicht te houden in de samenhang tussen verschillende functies en de indeling hiervan. Ook konden we 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.
Navigatie
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
Met alles wat in de voorgaande fasen verzameld en ontwikkeld is, had ik een goede basis voor het ontwerpen van een
concreet interface design. Ik heb ontwerpen gemaakt voor interfaces die responsief kunnen worden getoond op smartphone,
tablet en desktop.
Vrijwel alle onderdelen die in het interface design zijn ontwikkeld, zijn vastgelegd in een design system. Hierdoor is discussie over de stijl uitgesloten en hebben toekomstige ontwerpers een handvat om op voort te bouwen.
Door steeds verschillende versies te maken van specifieke functionaliteiten, pagina’s en stukjes informatie, kon ik een hoop creativiteit kwijt in het project. Veel varianten zijn voorgelegd aan een andere UX Designer om erover te sparren. Hier zijn enige kleine verbeteringen uit voortgekomen. Voor enkele lastige keuzes heb ik A/B-testen opgezet om te zien hoe verschillende versies van pagina’s of functionaliteiten overkwamen op respondenten.
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
Vrijwel alle onderdelen die in het interface design zijn ontwikkeld, zijn vastgelegd in een design system. Hierdoor is discussie over de stijl uitgesloten en hebben toekomstige ontwerpers een handvat om op voort te bouwen.
Door steeds verschillende versies te maken van specifieke functionaliteiten, pagina’s en stukjes informatie, kon ik een hoop creativiteit kwijt in het project. Veel varianten zijn voorgelegd aan een andere UX Designer om erover te sparren. Hier zijn enige kleine verbeteringen uit voortgekomen. Voor enkele lastige keuzes heb ik A/B-testen opgezet om te zien hoe verschillende versies van pagina’s of functionaliteiten overkwamen op respondenten.
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
Voor verschillende varianten van specifieke functionaliteiten en pagina’s, 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.
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.
De gemeente schrijft voor dat bepaalde kleuren moeten worden gebruikt, welke hiernaast te zien zijn.
Ook schrijft zij voor dat afbeeldingen en foto’s een bepaalde stijl moeten hebben en dat er bepaalde lettertypes
gebruikt moeten worden.
Zelf vind ik de kleurrijke en moderne, maar toch rustige stijl mooi en professioneel over komen.
Zelf vind ik 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 heb ik gedaan
in de software Axure RP.
Dit prototype is gebruikt om usability testen uit te voeren op respondenten. Het resultaat van deze testen was verassend goed. Wel zijn er nog enige kleine aanpassingen gedaan op iteratieve wijze. Deze wijzigingen zijn later weer getest op een kleinere groep respondenten zodat we alles uit konden sluiten. De respondenten reageerden grotendeels zeer positief op het ontwikkelde prototype.
Uiteindelijk is het prototype gebruikt tijdens een presentatie aan stakeholders. Zo konden zij exact zien hoe de applicatie in elkaar zou zitten en hoe men de applicatie kan gebruiken. Hiernaast is het prototype een nuttige tool voor ontwikkelaars. Deze kunnen eveneens precies zien hoe de applicatie eruit moet komen te zien en welke kleuren, afmetingen, eventuele links ed. er aan onderdelen toegewezen zijn.
Dit prototype is gebruikt om usability testen uit te voeren op respondenten. Het resultaat van deze testen was verassend goed. Wel zijn er nog enige kleine aanpassingen gedaan op iteratieve wijze. Deze wijzigingen zijn later weer getest op een kleinere groep respondenten zodat we alles uit konden sluiten. De respondenten reageerden grotendeels zeer positief op het ontwikkelde prototype.
Uiteindelijk is het prototype gebruikt tijdens een presentatie aan stakeholders. Zo konden zij exact zien hoe de applicatie in elkaar zou zitten en hoe men de applicatie kan gebruiken. Hiernaast is het prototype een nuttige tool voor ontwikkelaars. Deze kunnen eveneens precies zien hoe de applicatie eruit moet komen te zien en welke kleuren, afmetingen, eventuele links ed. er aan onderdelen toegewezen zijn.
Bekijk ook...
