Gent gaat aan de slag met prototype

Lokaal bestuur: Gent

Methode: prototype

Het project

Rebranding van de bestaande website voor het stads museum "De wereld van Kina". We gaven samen met de verantwoordelijke dienst en hun graficus een nieuwe look en feel aan de website gelinkt aan hun rebranding oefening.

Waarom deze methode?

Het digitaal ontwerpvoorstel van de graficus stond nog niet op punt. Door de UX/UI designer in samenspraak met de graficus een webcompatibel high-fidelity prototype te laten uittekenen in Figma was het voor de ontwikkelaar duidelijk wat er moest gebeuren en konden we struikelblokken in ontwikkeling tijdig spotten en oplossen. Bovendien was dit prototype handig als visuele kopie van wat er ontwikkeld zal worden waardoor er eenvoudig kan worden gecommuniceerd over ontwerp keuzes met de dienst en haalbaarheid met de ontwikkelaar. Hierdoor is er geen discussie na ontwikkeling en is het eenvoudig om WCAG en toegankelijkhiedsprincipes te kaderen en te controleren voor implementatie.

Hoe ging je te werk?

We starten met een briefing waarbij de dienst en graficus de wensen qua ontwerp voorstelt aan de hand van een mock-up van enkele pagina's . Hierna schreven we eerst een sitemap uit zodat iedereen duidelijk wist weke pagina's behouden beven en welke nieuw waren. Met deze input ging de UX/UI designer aan de slag om een high-fidelity prototype op te maken in Figma. Er werd een desktop en mobile vatiant ontworpen van iedere pagina en alle nodige componenten werden volgens de regels van het atomic design klaar gezet, zodat de ontwikkelaar deze eenvoudig kon implementeren. Tussendoor was er ook geregeld een aftoetsmoment met de ontwikkelaar en projectmanager om na te gaan of bepaalde designkeuzes realistisch waren binnen timing en budget. Zo niet, dan werd er gezocht naar een alternatief of moest de dienst op de hoogte worden gebracht dat het ontwerp enigszins zou afwijken. Tussentijdse afstemming met de dienst en graficus was nodig om designkeuzes te staven en extra uitleg te geven rond WCAG toegankelijkheid en webcompatibiliteit.

Eenmaal het prototype goedgekeurd was door de dienst kon de ontwikkelaar hiermee aan de slag. Na ontwikkeling werden alle pagina's door een tester getest qua functionaliteit en werd er nagekeken of het design correct was overgenomen. Indien er issues waren werd er aan de hand van een ticketsysteem verder feedback gegeven aan de ontwikkelaar en UX/UI designer. Na verwerking van alle feedback gaf de ontwikkelaar een demo aan de dienst en werden er ook enkele aanbevelingen gedaan qua invulling van de inhoud zodat de dienst zelf verder aan de slag kon met hun website.

Wat was het resultaat?

Een mooie website rebranding waar iedereen tevreden van is gerealiseerd binnen vooropgestelde timing en budget. Optimalisaties qua gebruiksvriendelijkheid en toegankelijkheid.

Wat heb je geleerd?

Het is belangrijk om op voorhand duidelijk te maken aan de dienst waar je mee samenwerkt dat grafische wensen soms niet zullen kunnen worden geraliseerd wegens technische, budgettaire of toegankelijkheidsredenen. Geef steeds technische en puur objectieve redenen waarom iets anders wordt getekend in het prototype en stem dit steeds af met de dienst, ontwikkelaar en projectmanager.

Een gouden tip

Als je vast hangt aan een krap budget of een krappe timing is het van groot belang je ontwikkelaar zo snel mogelijk te betrekken. Bespreek geregeld de haalbaarheid en blijf flexibel om eventueel andere oplossingen te bedenken of prioriteiten te verleggen.