Create that UX

Cardan

Digitale toegankelijkheid specialist

Cardan is een bedrijf dat zich inzet om andere organisaties digitaal beter bereikbaar te maken en hen te ondersteunen bij het voldoen aan de eisen van de nieuwe Europese wetgeving: de European Accessibility Act. Dit doen zij momenteel via een fysiek ervaringsplein, maar ze willen dit uitbreiden naar een digitale omgeving.

Wij zijn als projectgroep gestart met het opstellen van een projectplan. Hierin heb ik gewerkt aan de onderdelen: Over Cardan, kernwaarden, het probleem, de wensen, ons doel, deliverables en non-deliverables. Nadat iedereen zijn deel had uitgewerkt, hebben we het plan als groep besproken en samen de onderzoeksvraag, deelvragen en de weekplanning opgesteld.

We hebben ervoor gekozen om ons te richten op verschillende visuele beperkingen, zodat we ons kunnen verdiepen in een kleiner, concreet onderwerp en zo beter kunnen laten zien wat we kunnen betekenen. Coco en ik zijn samen verantwoordelijk voor het onderdeel kleurenblindheid. Hiervoor heb ik onderzoek gedaan naar de verschillende vormen van kleurenblindheid, hoe deze zich uiten en welke richtlijnen je kunt toepassen om een website toegankelijker te maken voor mensen met deze beperking.

Iedere groepsgenoot heeft vervolgens zijn of haar ideeën uitgewerkt in de vorm van Figma-designs. Deze hebben we gezamenlijk besproken en verwerkt in een PowerPoint voor het eerste presentatiemoment met Cardan. Na de feedback van onze externe stakeholder zijn we aan de slag gegaan met het verbeteren van onze ontwerpen. Ik heb mijn design aangepast om het realistischer te maken als prototype van een echte website. Mijn concept was een online bloemenwinkel, waarin het voor mensen met kleurenblindheid niet goed zichtbaar was welke kleuren de bloemen hadden. Dit heb ik aangepast om het toegankelijker te maken.

Tot slot zijn we weer samen gekomen om de eindpresentatie voor te bereiden en onze inzichten te presenteren aan Cardan.

Projectplan

Samen met mijn projectgroep hebben wij een projectplan opgesteld. Hierin staat beschreven wie Cardan is, welk probleem zij ervaren, welke wensen zij hebben, onze onderzoeksmethoden, de doelen die wij voor Cardan willen bereiken, de planning en de onderlinge werkafspraken.

Het projectplan dient als richtlijn voor ons als groep. Het zorgt ervoor dat duidelijk is voor wie we werken, waaraan we moeten werken, binnen welk tijdsbestek dit moet gebeuren, welke taken prioriteit hebben, hoe we deze taken plannen en aan welke afspraken we ons als groep dienen te houden.

Onderzoek visuele beperkingen

Om een beter beeld te krijgen van de verschillende visuele beperkingen, hebben wij als groep onderzoek gedaan. Samen met Coco heb ik mij verdiept in kleurenblindheid: wat het precies inhoudt, hoe het anatomisch verschilt van een normaal functionerend gezichtsvermogen en hoe het zich fysiologisch uit. We hebben onderzocht hoe mensen met kleurenblindheid de wereld ervaren.

Daarnaast heb ik specifiek gekeken naar hoe je websites toegankelijker kunt maken voor mensen met een vorm van kleurenblindheid. Dit onderzoek was niet alleen leerzaam voor mij persoonlijk, maar vormt ook belangrijk naslagwerk voor het ontwikkelen van een simulatie in Cardan’s ervaringsplein. In deze simulatie willen we laten zien wat er gebeurt wanneer toegankelijkheid niet goed wordt toegepast.

Wireframe

Figma wireframes

Cardan wil hun fysieke ervaringsplein uitbreiden naar een digitale omgeving. Om dit visueel vorm te geven, ben ik begonnen met het maken van wireframes. Als eerste heb ik een wireframe ontworpen voor het keuzemenu van het digitale ervaringsplein, waarin gebruikers kunnen kiezen welke simulatie zij willen ervaren.

Vervolgens heb ik vier verschillende simulaties uitgewerkt in wireframes. Deze heb ik gedeeld en besproken met mijn groepsgenoten. Uit deze bespreking bleek dat het idee van een groepsgenoot beter aansloot bij de wensen van Cardan. We hebben daarom besloten dat ontwerp als uitgangspunt te nemen.

Daarna heb ik een wireframe ontworpen voor de weergave van de plant in onze simulatie. Hiervoor heb ik twee varianten getest met behulp van een A/B-test. De focus lag op esthetiek en hoe goed de box de pagina opvulde. Uit de test bleek dat de variant met een kolomindeling (column) visueel sterker was en beter paste binnen de lay-out.

Keuzemenu cardan simulatie

Ik heb een keuzepagina ontworpen waarmee de gebruiker zelf kan bepalen door welke simulatie hij of zij zich wil laten beperken.

Box plant

Ik heb een A/B-test uitgevoerd om te onderzoeken welke weergave beter overkomt. Uit de test bleek dat de rechtervariant als overzichtelijker en makkelijker leesbaar werd ervaren.

Design

Figma Designs

Simulatie site

Het idee voor mijn eerste simulatiewebsite was om een online shop te maken waarin je artikelen zoals specifieke kleuren M&M’s kunt kopen. In de simulatie wordt eerst een kleurenblind-onvriendelijke versie van de website getoond, gevolgd door een verbeterd voorbeeld dat wél gebruiksvriendelijk is voor mensen met kleurenblindheid.

Raad de kleur

Het idee achter deze simulatie is om gebruikers op een speelse manier te laten raden welke kleur een bepaald item heeft. Op deze manier ervaren zij zelf hoe misleidend kleurenblindheid kan zijn in het dagelijks leven. Door deze interactieve benadering wordt bewustwording gecreëerd over de obstakels die mensen met kleurenblindheid kunnen tegenkomen bij alledaagse handelingen zoals online winkelen.

Plantenwinkel

Geïnspireerd door een echt tuincentrum heb ik een kleurenblindheid-onvriendelijke variant van een webshop ontworpen. Over deze website zijn verschillende kleurfilters geplaatst om te laten zien hoe mensen met diverse vormen van kleurenblindheid de pagina ervaren. Zo wordt duidelijk hoe verwarrend of ontoegankelijk een niet-aangepast ontwerp kan zijn voor deze doelgroep.

Presentatie

PowerPoint tussentijdse presentatie

PowerPoint eind presentatie

Feedback eerste presentatie

Externe stakeholder

Het idee van een kleurenfilter of extensie werd als sterk ervaren.
Wel miste er een duidelijk doel: willen we alleen een ervaring bieden of ook iets bereiken?
Dit moet zo snel mogelijk helder zijn in de simulatie.
Het speelse element werd gewaardeerd, maar het doel ervan moet beter naar voren komen.
Wat goed werkte: het geven van subtiele hints. Mensen zijn sneller geneigd om verder te kijken als ze feedback krijgen op wat beter kan.

Anke

De filter is effectief en direct, vooral voor klanten, en maakt het concept tastbaar.
De gebruikerslijn en handelingen mogen nog duidelijker worden.
Extra aandachtspunten:
- Het mag confronterend zijn; beperkingen brengen frustraties met zich mee.
- Gebruik realistische elementen zoals echte M&M's of alledaagse foto's om het herkenbaar te houden.
Algemeen: de presentatie werd als prettig ervaren.

Verwerking van feedback

Op basis van de ontvangen feedback hebben wij als groep opnieuw gekeken naar wat wij precies willen overbrengen met de simulatie. We hebben gezamenlijk besloten dat we de gebruiker niet alleen een ervaring willen laten opdoen, maar ook willen confronteren met de praktische gevolgen van een visuele beperking.

We zijn verder gegaan met het idee van een kleurenfilter en hebben dit uitgewerkt in verschillende herkenbare dagelijkse situaties. Op deze manier proberen we op een toegankelijke en speelse manier bewustwording te creëren over hoe kleurenblindheid het dagelijks leven beïnvloedt, terwijl het doel van de simulatie beter en sneller duidelijk wordt.

Feedback eind presentatie

De presentatie werd als goed en duidelijk ervaren.
De introductie was prettig en koppelde het probleem en het ervaringsplein op een heldere manier aan elkaar.
Concept: Er werd geadviseerd om de simulatie een duidelijke naam te geven.
Design en flow: De grote groene knop werd positief ontvangen. Deze zou zelfs nog prominenter in beeld mogen komen als call to action.
Gemaakte websites: Het advies was om deze brutaler en confronterender te maken, met meer directe verwijzingen naar bestaande websites.
De huidige versie van "Maison" was nog wat onduidelijk in doel en gebruik; dit mocht logischer en concreter worden vormgegeven.

Verwerking feedback

Voor het development project ben ik in een nieuwe groep gestart. Samen hebben wij besloten een naam te geven aan de simulatie, zodat het concept duidelijker en herkenbaarder is.

In deze nieuwe groep hebben wij er bewust voor gekozen om ons niet te focussen op de call to action knop, waardoor deze in ons ontwerp ontbreekt. In plaats daarvan hebben wij ons gericht op het ontwikkelen van een realistische simulatie door een online verfwinkel na te bouwen. Deze winkel is gebaseerd op bestaande voorbeelden, zodat de gebruiker ervaart hoe visuele beperkingen – zoals kleurenblindheid – invloed kunnen hebben op dagelijkse, herkenbare situaties. Hiermee geven we een concreet en confronterend beeld van toegankelijkheidsproblemen in het digitale landschap.

Reflectie

Wij hebben als groep duidelijke werkafspraken opgesteld, zodat we direct kunnen handelen wanneer een groepslid zich niet goed aan deze afspraken houdt. Dit gaf mij ook het vertrouwen om sneller iets aan te kaarten als ik merkte dat iemand zich hier niet aan hield.

Zelf heb ik altijd duidelijk gecommuniceerd wanneer ik later zou zijn of afwezig was. Door persoonlijke omstandigheden kon ik niet altijd volledig aanwezig zijn, wat ervoor zorgde dat het voor mij soms lastig was om de planning te volgen en overzicht te houden in het proces. Elke keer wanneer ik terugkwam, heb ik actief gevraagd wat ik had gemist en waar ik mijn bijdrage kon leveren. Ik noteerde dit voor mezelf, zodat ik er direct mee aan de slag kon.

Door deze manier van werken hield ik vaak korte termijn planningen aan, die mij hielpen om gericht verder te kunnen. Tegelijkertijd maakte dit het lastig om het grotere geheel en de langetermijnplanning goed te overzien. Gelukkig hebben mijn groepsleden mij hierin goed ondersteund door duidelijk aan te geven wat er nog moest gebeuren en waar ik mee verder kon. Deze samenwerking zorgde ervoor dat ik ondanks de omstandigheden toch effectief kon bijdragen aan het project.