Used Discomfort and Friction to Build EmpathyUtilisé l’inconfort et la friction pour créer de l’empathie

Non-conformism and accessibility design do not go together. Every non-conformist concept felt disrespectful to the audience we were designing for. Every inclusive direction felt like it missed the brief entirely. We spent the first part of the week trying to satisfy both constraints at once, for the same audience, and it was not working.

Non-conformisme et design accessible sont contradictoires. Chaque concept non-conformiste auquel on pensait semblait irrespectueux envers le public visé. Chaque direction inclusive semblait passer entièrement à côté du brief. Nous avons passé la première partie de la semaine à essayer de satisfaire les deux contraintes à la fois, sans succès.

Instead of making people with visual impairments the target of our non-conformism, we switched the brief to make non-conformism the way to experience what our actual target, visually impaired people, experience every day.

Au lieu de faire des personnes malvoyantes la cible de notre non-conformisme, nous avons retourné le brief : le non-conformisme est devenu le moyen de faire vivre ce que notre véritable cible, les personnes malvoyantes, vivent au quotidien.

To meet the non-conformist criteria, we made a virtual art exhibition that appears normal at first. In reality, each gallery room simulates a distinct visual condition. Visitors arrive on the website expecting to learn more about Street Art, but they face street artworks the way people with visual impairments would see them, and there is no way they can see the website properly.

Pour répondre au critère non-conformiste, nous avons créé une exposition d’art virtuelle qui paraît normale au premier abord. En réalité, chaque salle simule un handicap visuel différent. Les visiteurs arrivent sur le site en pensant en apprendre plus sur le street art, mais découvrent les œuvres telles que les personnes malvoyantes les percevraient, sans aucun moyen de bien voir le site.

We conducted documentary research on visual conditions and selected 3 to simulate in our website: hemianopia (loss of vision in half the visual field), scotomas (blind spots interrupting the visual field unpredictably), and dyschromatopsia (color perception disorder)

Nous avons mené une recherche documentaire sur les troubles visuels et en avons sélectionné 3 à simuler sur le site : l’hémianopsie (perte de vision sur la moitié du champ de vision), les scotomes (taches noires obstruant le champ de vision), et la dyschromatopsie (trouble de la perception des couleurs).

As we did not have enough time to make extended interviews, we asked everyone at the hackathon if anyone had any visual impairment.. The goal of this move was both to learn more from someone who actually experiences impairment, and also to test our website on their particular impairment. Out of 80 people, one person was able to help us.

N’ayant pas le temps de mener des entretiens approfondis, nous avons demandé à tous les participants du hackathon si quelqu’un avait un trouble visuel. L’objectif était à la fois d’en apprendre plus grâce à une personne concernée et de tester notre site sur son trouble spécifique. Sur 80 personnes, une personne a pu nous aider.

We designed the website to be punk-inspired, with collage typography and high contrast yellow, red and blue. This aesthetic was chosen to reflect both street art culture and the non-conformist brief.

Nous avons conçu le site avec une inspiration punk : typographie en collage, éléments jaunes, rouges, bleus très contrastés. Cette esthétique a été choisie pour refléter à la fois la culture street art et le brief non-conformiste.

Across three exhibition pages, we implemented the three visual impairments mentioned earlier. The goal was to frustrate non-disabled users and leave them confused as to why these impairments were on the website.

→ We designed an edge case for when users click too many times on a visual impairment: a pop-up appears, explaining that the website has encountered a problem and that the page needs to be refreshed. In reality, refreshing the page leads to the final page of the exhibition, which reveals the purpose of the exhibition.

Sur trois pages d’exposition, nous avons implémenté les trois troubles visuels mentionnés plus tôt. L’objectif était de frustrer les utilisateurs valides et les rendre confus quant à la raison de ces troubles sur le site.

→ Nous avons designé un edge case pour lorsque les utilisateurs cliquent trop de fois sur un trouble visuel : un pop-up apparait, expliquant que le site a rencontré un problème et que la page doit être rafraichie. En réalité, rafraichir la page renvoie à la page finale de l’exposition, qui révèle le but de l’exposition.

We handed off a fully interactive Figma prototype: three gallery rooms, each simulating a distinct visual condition, with a reveal page that reframes the entire experience once the user has gone through it.

Nous avons créé un prototype Figma entièrement interactif composé de trois pages, chacune simulant un trouble visuel distinct, avec une page de révélation qui recontextualise l’expérience entière une fois le parcours terminé.

During the end of workshop presentation, we asked a volunteer to come experience the website in front of everyone. The experience worked as expected: people were confused, some even thought there was a bug in our website.

Lors de la présentation finale, nous avons demandé à un volontaire de venir vivre l’expérience devant tout le monde. L’expérience a fonctionné comme prévu : les gens étaient déconcertés, certains ont même cru à un bug du site.

UX design defaults toward removing discomfort. This project was an exercise in designing it deliberately, with a reason. Without friction, our project would not have worked.

Le design UX vise par défaut à supprimer l’inconfort. Ce projet a été un exercice intéressant montrant qu’on peut concevoir de la friction délibérément. Sans friction, notre projet n’aurait pas fonctionné.

Such a project deserves to exist beyond a design file, and to be hosted as a real website for everyone to experience. It could be interesting to expand the range of conditions covered in the website and explore a VR version for deeper sensory immersion.

Un tel projet mérite d’exister au-delà d’un fichier de design, et d’être hébergé comme un vrai site accessible à tous. Il serait intéressant d’élargir la gamme de troubles simulés et d’explorer une version VR pour une immersion sensorielle plus profonde.