CMS - Gemeente Den Haag

Tijdlijn

• Juli 2024 – heden

Opdracht + doel

Vernieuwen interface CMS digitale muurkrant

De gemeente Den Haag gaf de opdracht om de interface van het CMS achter de digitale muurkrant te vernieuwen omdat die momenteel erg verouderd en lastig te besturen is. Het project had als doel de website gebruiksvriendelijker en moderner te maken, zonder daarbij de eenvoudige en toegankelijke opzet van het platform te verliezen. Het toepassen van gebruiksvriendelijke verbeteringen en een moderne vormgeving op het digitale muurkrant platform draagt bij aan een functioneler, aantrekkelijker en gebruiksvriendelijker CMS voor eindgebruikers.

Hiervoor werd eerst gebruikersonderzoek gedaan om te achterhalen hoe gebruikers de digitale muurkrant ervaren. Na het uitvoeren van dit onderzoek (surveys + interviews) werden de resultaten geanalyseerd en op basis daarvan verschillende web UX-ontwerpen ontwikkeld ter optimalisatie van de CMS-interface van het digitale muurkrant platform.

Meer weten over hoe de digitale muurkrant precies werkt? Zie mijn eerdere gebruikersonderzoek.

originele website

Welke veranderingen zijn nodig op de digitale muurkrantwebsite?

De gemeente Den Haag heeft aangegeven dat vier hoofdpagina’s van de digitale muurkrantwebsite prioriteit hebben voor vernieuwing, met name: ‘Berichten Muurkrant’, ‘Bericht Aanmaken’, ‘Bericht Overnemen’ en de ‘Foto- en Videobeheer’.

De pagina ‘Berichten Muurkrant’ is de startpagina van het platform en toont alle berichten van de eigen muurkrant van de gebruiker. Op dit moment bevat deze pagina veel overbodige informatie, wat de navigatie bemoeilijkt. Daarnaast oogt de vormgeving wat ouderwets.

De tweede pagina is ‘Bericht Aanmaken’. Hier kunnen gebruikers hun eigen content creëren voor het digitale muurkrantplatform. Ze hebben daarbij diverse mogelijkheden om de vormgeving van een bericht aan te passen, zoals het kiezen van een template en het toevoegen van een foto of video bij het bericht.

"De derde pagina is ‘Bericht Overnemen’. Op deze pagina kunnen gebruikers berichten van anderen overnemen en plaatsen op hun eigen muurkrant. Hoewel de gemeente het delen van berichten actief stimuleert, wordt deze functie nog weinig gebruikt, deels omdat veel gebruikers niet goed begrijpen hoe het delen precies werkt.

De vierde pagina is ‘Foto- en Videobeheer’. Deze pagina dient als persoonlijke mediabibliotheek waar gebruikers beeldmateriaal kunnen uploaden en selecteren voor het aanmaken van muurkrantberichten. Naast eigen foto's en video's is hier, mits toestemming, ook beeldmateriaal van andere gebruikers beschikbaar.

low-fidelity wIREFRAMES

Low-fidelity wireframes van vernieuwde CMS

Om een helder beeld te krijgen van het vernieuwde website ontwerp, heb ik eerst de wireframestructuur in Figma uitgewerkt. Daarbij heb ik inspiratie gehaald uit bestaande CMS-systemen zoals WordPress en mockup-websites zoals Bootstrap Themes. Op basis hiervan heb ik UX-ontwerpen gemaakt voor de wireframes van de vier hoofdpagina’s van de digitale muurkrantwebsite. Alles gebeurde in overleg met de webdevelopers en mijn opdrachtgever om zeker te weten dat we op één lijn zaten.

HIGH-fidelity wIREFRAMES

Final designs digitale muurkrant website

Het vernieuwde CMS van de digitale muurkrant maakt beter gebruik van de volledige schermbreedte. Er is gekozen voor een moderner kleurenpalet, een nieuw logo en een ander lettertype. Bij het ontwerp is steeds gelet op overzicht, helderheid en eenvoud, met tegelijkertijd een frisse en eigentijdse uitstraling. Dit draagt bij aan een duidelijkere structuur binnen het CMS. Daarnaast is veel overbodige informatie van de pagina’s verwijderd of ondergebracht achter een ‘informatie’-icoon. Gebruikers kunnen hierop klikken wanneer zij aanvullende uitleg nodig hebben, waardoor ze niet onnodig worden overspoeld met informatie.

De pagina ‘Berichten muurkrant’ is opgeschoond door berichten onder inklapbare rubrieken te plaatsen, zodat gebruikers gemakkelijker kunnen scrollen en navigeren.

Op de pagina ‘Bericht aanmaken’ is nu een preview toegevoegd naast het tekstveld, zodat gebruikers direct kunnen zien hoe hun bericht eruitziet. Daarnaast zijn de knoppen onderverdeeld in duidelijke rubrieken voor meer overzicht

Voor de pagina ‘Bericht Overnemen’ is de hoeveelheid tekst aan het begin verminderd en zijn duidelijke categorieën aangebracht, waardoor gebruikers sneller het overzicht behouden.

De pagina ‘Foto- en Videobeheer’ is omgevormd tot een pop-upvenster, wat het ontwerp onderscheidt van de andere pagina’s. De weergave van foto’s is vergroot en er is een previewpaneel toegevoegd om eenvoudiger beeldmateriaal te selecteren.

Voorbeeld van van Foto- en Videobeheer

Voorbeeld van van Bericht overnemen pagina

Conclusies en reflectie

Wat zou ik de volgende keer anders doen?

Ik ben momenteel bezig met het afronden van de laatste onderdelen van dit project. Zodra dit is voltooid, nemen de webdevelopers het over om het ontwerp te implementeren en daadwerkelijk te bouwen. Mijn reflectie betreft daarom de voortgang tot nu toe, en is nog niet gebaseerd op het volledig afgeronde eindresultaat.

• Vrijheid in ontwerp, maar geen team om op terug te vallen. Tijdens dit project droeg ik de eindverantwoordelijkheid voor het ontwerp van het vernieuwde CMS. Als enige creatieve in het team werkte ik nauw samen met de webdevelopers en mijn eindredacteur om ervoor te zorgen dat het ontwerp aansloot bij de wensen en eisen. Hoewel deze samenwerking goed verliep, miste ik soms een sparringpartner op creatief vlak. Bij keuzes rondom kleurgebruik, logo’s, knopplaatsing en algemene vormgeving vond ik het soms lastig om zelfstandig knopen door te hakken zonder een mentorfiguur of andere designer om ideeën mee af te stemmen.

  Dit was overigens niet negatief voor het eindresultaat, de vrijheid die ik kreeg stelde me in staat om het project volledig naar mijn visie uit te voeren. Toch zou ik in een volgend project graag samenwerken met meerdere (UX-)designers, zodat ik inhoudelijk meer kan overleggen en samen tot de beste keuzes kan komen.