8 april 2024
Overzicht
Belangrijkste kenmerken
- Responsive en toegankelijk design: Overzichtelijke, mobielvriendelijke layout die voldoet aan WCAG (bv. alt-tekst, toetsenbordnavigatie).
- Rolgebaseerd CMS met rechten: Afdelingen beheren hun eigen content veilig, zonder de merkconsistentie te breken.
- Portalen per doelgroep: Aparte secties voor studenten, docenten, alumni en donateurs (bv. inschrijvingstools, onderzoeksdatabanken).
- Geavanceerd zoeken en navigatie: Slim zoeken met filters plus duidelijke menu's en breadcrumbs, zodat content sneller te vinden is.
- Integratie van dynamische content: Realtime updates voor events, nieuws en cursuscatalogi via API's of CMS-plug-ins.
- Analytics en beveiliging: Gebruikersgedrag meten voor inzichten, plus GDPR-compliance en veilige betalingsverwerking.
Galerij
Gebruikte technologieën
- Figma: Voor het maken en beheren van designbestanden en prototypes, en om de bibliotheken en het design met het ontwikkelingsteam te delen.
- Adobe Illustrator: Voor het tekenen van vectorgraphics.
- Jira: Voor het toepassen van agile ontwikkelingstechnieken en het opvolgen van deadlines.
Uitdagingen
- Te veel content: Meer dan 300 pagina's beheren vraagt om grondige audits om overlapping weg te werken, verouderde content te actualiseren en de boodschap consistent te houden.
- Belangen afstemmen: De prioriteiten van verschillende afdelingen (bv. inschrijvingen, docenten, alumni) verzoenen met een eenduidige huisstijl.
- Teamsamenwerking: Communicatieteams (content, boodschap) en ontwikkelaars (techniek, UX) op één lijn krijgen rond workflows, deadlines en tools (bv. CMS, design systems).
- Technische complexiteit: Legacy-systemen (bv. cursusdatabanken, eventkalenders) integreren met nieuwe platformen, met aandacht voor responsive design, toegankelijkheid (WCAG) en snelheid.
- User experience (UX): Ontwerpen voor heel uiteenlopende doelgroepen (toekomstige studenten, docenten, alumni, donateurs) en tegelijk de navigatie vereenvoudigen en drempels wegwerken (bv. duidelijke CTA's, mobiele optimalisatie).
- Scope en timing: Vertragingen door eindeloze revisierondes, laattijdige content of technische hindernissen vermijden en tegelijk transparant blijven naar de stakeholders.
Leerpunten
- Contentstrategie: Prioriteren en hiërarchie aanbrengen in contentecosystemen van grote omvang.
- Cross-functionele samenwerking: Processen opzetten zodat designers, copywriters en ontwikkelaars vlot samenwerken (bv. agile workflows, gedeelde assetbibliotheken).
- Stakeholdermanagement: Consensus opbouwen via duidelijke communicatie, compromissen en korte feedbackloops.
- Technische best practices: Ervaring opdoen met CMS'en (bv. WordPress, Drupal), toegankelijkheidsstandaarden en performance-optimalisatie (bv. lazy loading, caching).
- User-centric design: Inzichten uit gebruikerstests en analytics toepassen om navigatie en contentlevering bij te sturen.
- Agile projectmanagement: Leren inspelen op wijzigingen in de scope zonder het project te laten ontsporen.
Meetbare resultaten
- Content teruggebracht van 300+ naar ongeveer 180 actieve pagina's na de audit, met dubbele en verouderde content verwijderd.
- Een herbruikbare componentbibliotheek met meer dan 40 componenten, gedeeld tussen de hoofdsite en de mobiele app. Elke nieuwe pagina op de site van de universiteit put uit die bibliotheek in plaats van de opmaak opnieuw te verzinnen.
- WCAG AA-conformiteit op alle primaire navigatie- en contentsjablonen (gecontroleerd met axe-core).
- Mobile-first redesign, zodat het grootste deel van het verkeer van de universiteit (toekomstige studenten op hun telefoon) op layouts landt die voor hen zijn ontworpen, niet op dichtgeknepen desktoplayouts.
- Een gedocumenteerde overdracht van design naar development die het interne WordPress/React-team blijft gebruiken voor nieuwe secties, zonder dat ik bij elke wijziging moet meekijken.