

Mobiele Website Kunstmuseum
Rollen:
UX-Designer/ UX-Researcher/ UI-Designer/ Interaction Designer
Afgerond:
Maart 2026
Over het project
Deze mobiele website was het eerste project als onderdeel van de Google UX-Designeropleiding. Ik doorliep deze opleiding van november 2025 tot april 2026.
Doelstelling
Het ontwikkelen van een mobiele website voor een openbaar kunstmuseum waarmee bezoekers snel en gemakkelijk informatie over tentoonstellingen en evenementen kunnen vinden, een bezoek kunnen plannen en online tickets kunnen boeken in hun voorkeurstaal.
Project in het Engels
Omdat Engels de voertaal van de Google UX-Designeropleiding en van mijn mede-studenten is, die onder andere het werk hebben beoordeeld, is standaardtaal van de website in het Engels. Ook onderdelen zoals persona's en het affinity diagram zijn om die reden in het Engels.

Persona's
Voor de ontwikkeling van dit project zijn persona's Sophie Janssen en Carlos Rodríguez tot stand gekomen.
Belangrijkste uitdagingen
Geef gebruikers de mogelijkheid om een andere taal te selecteren tijdens het ticketboekingproces.
Maak het eenvoudig om online tickets te kopen.
Welke stappen zijn er te nemen tijdens het boeken van een ticket en in welke volgorde?
Wat is de beste manier om de tentoonstellingen te presenteren?

Concurrentie onderzoek
Ik heb concurrentieonderzoek uitgevoerd op 4 websites van kunstmusea om uit te vinden hoe zij de belangrijkste uitdagingen hebben aangepakt.
Resultaten onderzoek

Taalkeuze
Gebruik een drop down keuzemenu voor de taalselectie tijdens het boeken van de tickets.

Tickets
Bied meerdere manieren (klikpaden) om tickets te kopen.
Snel en eenvoudig tickets selecteren.
Vraag alleen noodzakelijke informatie.
Verdeel het aankoopproces in behapbare stukken.

Exhibitions
Toon de tentoonstellingen op de homepage, direct onder de header.

Low Fidelity Prototype Versie 1
Het aantal pagina's is uitgebreid en er zijn interacties toegevoegd. Dit prototype maakt het mogleijk om tijdens het boekingsproces een taal te kiezen. Ik ben ambitieus begonnen met 8 talen om uit te kiezen.
Klik op onderstaande afbeeldingen om ze in groot formaat te bekijken.

Low Fidelity Prototype Versie 1.1
Omdat ik ontdekte dat pagina's beter op het telefoonscherm passen als er boven- en ondermarges worden toegevoegd, heb ik de ontwerpen daarop aangepast. Ook heb ik voor het ticketboekingsproces pagina's in het Spaans, Nederlands en Duits toegevoegd, zodat gebruikers die geen moedertaalspreker van het Engels zijn, de gebruikerservaring werkelijk kunnen uittesten.
Door het toevoegen van pagina's in elke taal wordt het aantal pagina's exponentieel vermeerderd, waardoor het project behoorlijk omvangrijk werd voor een eerste project. Daarom heb ik het aantal talen van acht teruggebracht tot vier.
Klik op onderstaande afbeeldingen om ze in groot formaat te bekijken:
Gebruikersonderzoek voor Lo-Fi Prototype V1.1
Het prototype is getest door middel van een un-moderated usability study. Bij een un-moderated usability study voert de gebruiker de opdrachten geheel zelfstandig uit; er niemand aanwezig om eventuele aanvullende vragen te beantwoorden.
Tijdens dit onderzoek werd aan 8 deelnemers gevraagd zelfstandig taken uit te voeren in het low-fidelity prototype en vragen te beantwoorden over hun gebruikerservaring.
Onderzoeksvragen:

Ticketaankoop
Hoeveel mensen voltooien het ticketboekingsproces?
Hoe ervaren mensen het dat ze bij aankoop van een ticket een andere taal dan Engels kunnen kiezen?
Hoe gemakkelijk of moeilijk wat het om de ticketaankoop af te ronden?

Exhibitions
Kunnen gebruikers informatie over een tentoonstelling vinden?
Resultaten Gebruikersonderzoek
De feedback van de deelnemers werd verzameld in een spreadsheet en overgezet op digitale post-its. Vervolgens werden de briefjes gegroepeerd om thema's te identificeren met behulp van een affinitydiagram.

Thema 1: Ticketaankoop
Resultaten
Alle acht deelnemers hebben het ticketboekingsproces succesvol afgerond.
De helft van de deelnemers ervaarde wat verwarring rondom de bevestigingspagina.
Drie van de acht deelnemers gaven commentaar op de volgorde van het aankoopproces.
Twee van de acht deelnemers ondervonden problemen bij het terugkeren naar de homepage nadat ze de bevestigingspagina hadden bereikt.
Quote deelnemer:
"Ik was er niet zeker van of ik de "betaling" wel echt had gedaan, totdat ik de optie zag om de tickets te downloaden."

Thema 2: Taalselectie
Resultaten
Vijf van de acht deelnemers gaven aan dat ze de mogelijkheid om een taal te kiezen bij het boeken van tickets nuttig zouden vinden.
Let op: Niet alle deenemers spraken naast Engels ook een andere taal.
Twee van de acht deelnemers gaven aan dat ze de voorkeurstaal liever al vanaf het begin zouden kiezen.
Quote deelnemer:
"Ik zou de taalfunctionaliteit waarschijnlijk graag willen toepassen op de beschrijvingen van de tentoonstellingen voordat ik een kaartje koop."

Thema 3: Exhibitions
Resultaten
Alle acht deelnemers konden de informatie over een tentoonstelling vinden.
Alle acht deelnemers gebruikten de "terug"-knop om terug te keren naar de homepage.
Quote deelnemer:
"Het was heel eenvoudig, want afgezien van het icoontje staat er ook een tekstlabel bij."
Inzichten naar aanleiding van het onderzoek


Bevestigings-pagina onduidelijk
Gebruikers hebben betere aanwijzingen nodig om duidelijk te maken dat ze de ticketaankoop succesvol is afgerond.

Volgorde van ticketaankoop
Gebruikers hebben meer begeleiding nodig tijdens het aankoopproces van tickets.

Terugkeren naar de homepage
Gebruikers hebben een alternatieve manier nodig om na het kopen van een ticket terug te keren naar de homepage.
Low Fidelity Prototype Versie 2
Op basis van de inzichten uit het gebruikersonderzoek voor de low-fidelity prototypeversie 1.1 zijn er wijzigingen aangebracht in versie 2.
Klik op onderstaande afbeeldingen om ze in groot formaat te bekijken:
Aanpassingen op basis van feedback en aanvullende wijzigingen
Bevestigingspagina
.png)
Taalkeuze en scroll to top
.png)
Drukte indicator
.png)

Gebruikersonderzoek voor Lo-Fi Prototype V2
Drie deelnemers werd gevraagd taken uit te voeren in het low-fidelity prototype en vragen te beantwoorden over hun gebruikerservaring.
Het prototype is getest in een un-moderated usability study.
Inzichten onderzoek

Knoppen
Er wordt een "Buy tickets"-knop gemist in de beschrijvingen van de tentoonstellingen.
Op sommige pagina's staat zowel een "Back"-knop als een "Previous"-knop.
Primaire en secundaire knoppen worden willekeurig gebruikt.
De "Scroll-to-top"-knop bedekt soms belangrijke informatie.

Afbeelding museum
De museumafbeelding bovenaan de pagina's in het ticketboekingproces neemt teveel ruimte in beslag.

Taalkeuze
Gebruikers vinden het onlogisch dat de taalkiezer alleen beschikbaar is tijdens het boeken van tickets en niet op andere pagina's.
High-Fidelity Prototype Versie 1
Voor het high-fidelity prototype zijn kleuren, afbeeldingen en typografie toegevoegd en alle feedback op het low-fidelity prototype is meegenomen.
Lees hieronder over een aantal van de aangebrachte wijzigingen.
Aanpassingen naar aanleiding van feedback
.png)
.png)
.png)
.png)
Hieronder worden alle pagina's getoond. Klik op de afbeeldingen om ze in groot formaat te bekijken:

Gebruikersonderzoek voor Hi-Fi Prototype Versie 1
Het prototype is getest in een un-moderated usability study.
9 Deelnemers werd gevraagd taken uit te voeren in het Hi-Fi-prototype en vragen te beantwoorden over hun gebruikerservaring.
Resultaten

Navigatie
De header neemt veel ruimte in beslag op een gemiddeld telefoonscherm.
Een overbodige "Back"-knop op homepage.
De ticketknop in de header wordt niet door iedereen herkend als knop.
Scroll-to-top knop zit enerzijds soms in de weg óf is moeilijk te zien.

Leesbaarheid en contrast
Het gebruik van hoofdletters in de kopteksten komt schreeuwerig over.
De tekst over de tentoonstellingsfoto's is soms moeilijk leesbaar.
De kleuren van de drukte indicator in de kalender maken de cijfers moeilijk leesbaar.

Kleurgebruik en uniformiteit
De tekst en kleur in het taalkeuzemenu verschillen van de rest van de pagina's.
Het gebruik van knoppen en pictogrammen is inconsistent. Zowel open- als gesloten pictogrammen worden gebruikt.
































































.png)
.png)