Glaucoma Awareness Website
Redesigning how users learn about and experience glaucoma
Overview
For my HCID coursework, I created an accessible web platform to educate users about glaucoma. The goal was to centralize critical information, simulate the experience of living with glaucoma, and support awareness efforts through engaging user-friendly design.
Key features
Accessible Design: Adjustable contrast, colour schemes, and text size for visual impairments.
Educational Resources: Comprehensive details on glaucoma types, treatments, and patient testimonies.
Interactive Learning: A "Card Challenge" game that simulates the experience of glaucoma.
Problem Statement
How might we design a website that consolidates medical information, enhances accessibility, and raises awareness through engaging and inclusive features?
Research
Analyzed existing glaucoma websites:
77% charity-focused with minimal medical details.
No simulation or patient perspective insights.
Findings: Users with glaucoma benefit from high contrast, muted tones, and simplified navigation.
Target Users: Individuals seeking information about glaucoma, including patients, caregivers, and advocates.
Wireframes & Hi-Fi Prototypes: Developed using Figma with a focus on accessibility and visual hierarchy.
Design Process
Accessibility Bar: Features customizable contrast settings and text size adjustments, adhering to W3C guidelines.
Logo Design:
The logo reflects the website’s identity: the letter "O" in "Glaucoma" was replaced with an eye symbol, creating a visual connection to the site’s mission. A shortened version of the logo—a stylized eye—was also designed, following the website’s colour contrast standards.
Interactive Game: The "Card Challenge" allows users to experience glaucoma’s visual impact by matching cards through simulated vision impairments.
Information Architecture:
Streamlined navigation for intuitive access.
Structured menus and call-to-action buttons guide users through key resources.
Color Palette:
The color palette was chosen to evoke trust and reflect medical expertise. Colors were rigorously tested to meet W3C accessibility standards, ensuring clarity for users with visual impairments.
Delivered a website that:
Educates users with an accessible, visually engaging design.
Raises awareness through interactive simulations.
Supports inclusivity with accessibility-first features.
Impact: Users praised the visual clarity and accessibility enhancements, with the interactive game fostering empathy and deeper understanding of glaucoma.
Outcomes
Final Design of Glaucoma Website
This project taught me how accessibility-focused design can make digital spaces more inclusive. It inspired me to pursue further projects that prioritize usability and universal access.
Takeaways