UX Design · Interactive Education
An interactive educational website demonstrating the experience of a child with dyslexia — designed to make educators feel what their students feel.
As someone with dyslexia, I have always faced challenges in school, never fully understanding why I struggled while my classmates excelled. It wasn't until 10th grade that I was diagnosed. Motivated by my own experience, I wanted to raise awareness and ignite conversations about the difficulties dyslexic students face in education.
This interactive web project was created to educate school executives and educators about the struggles dyslexic children endure every day.
The objective of the site was to intentionally create frustration for users, making them spend the same amount of time and effort on tasks as a dyslexic student would. Through this, the goal was to not only educate, but also immerse users in the dyslexic experience, highlighting the perception challenges dyslexic students face.
The site features a linear progression of explanations and interactive exercises that demonstrate how a dyslexic mind works. Each exercise includes two versions side by side: one that represents the "normal" experience and another that illustrates the difficulty faced by dyslexic individuals through animation and interaction.
These exercises reveal why certain educational tasks are so challenging for dyslexics. By experiencing this firsthand, users gain an understanding of the frustration and helplessness that dyslexic students often feel, completing tasks at a slower pace.
The project emphasizes how the current education system neglects the needs of dyslexic students — who make up nearly 20% of the population — and how this oversight stifles potential. By failing to address the needs of dyslexic students, we are missing out on the brilliance that these individuals bring to society.
This process revealed how a dyslexic person's experience can vary widely, depending on both their education and personal perspective. Through this project, I challenge education executives with the question: "How can we improve the American education system to better support dyslexic students, and remedy the systemic neglect that impacts their future?"
Tools: Adobe InDesign, Adobe Illustrator, Adobe Photoshop, HTML, CSS, jQuery
My research began with TED Talks and articles about dyslexia, focusing on how it affects children throughout their educational journey. I also explored the cognitive mechanics of dyslexic perception.
The website is divided into three main sections: interactive exercises that simulate dyslexic perception; an exploration of the mechanics behind dyslexic perception; and the impact on a dyslexic child's future when neglected vs. empowered.
Color: I associate blue with education, particularly English class, and used it to color-code my notebooks and materials. Orange, which represents stress, contrasts and vibrates against blue, mimicking the visual strain dyslexic students often experience when reading.
Typography: The exercise sections use Varela Round, a rounded sans-serif typeface inspired by early educational materials. For the rest of the site, Lato was chosen for its sleek, modern feel while still maintaining a rounded design. This typographic pairing connects the playful, educational nature of Varela Round with the seriousness of the topic at hand.
I explored multiple layout options for organizing the interactive exercises, ensuring a smooth and intuitive user experience.
Once the design deck was finalized, I began building the site, continuously refining both the visuals and interactions to ensure the best possible user experience.