Glaucoma
Human-Computer Interaction Project
As part of my Human-Computer Interaction Design (HCID) coursework, I worked on a web design project to create an accessible and educational platform for individuals interested in glaucoma.
The website is designed to provide an informative and engaging environment where users can
Donate to glaucoma-related causes
Gain a deeper understanding of the medical aspects of the disease
Learn about the condition
Throughout this project, I focused on creating a user-friendly interface that balances clarity and depth of information. I researched accessible web design, consulted medical resources, and integrated user feedback to ensure the platform was educational and intuitive for diverse audiences. The project emphasized designing for inclusivity, ensuring the site remains functional and engaging for users of all backgrounds.
Context
📋 Overview
This project focuses on creating a glaucoma awareness website that provides detailed information about the condition, including its types, treatments, and ongoing research.
The website offers educational resources, patient testimonies, and interactive features like a "Card Challenge" that simulates the experience of living with glaucoma. Designed with accessibility in mind, the site also includes support services and a donation platform to aid research efforts, ensuring an inclusive and informative user experience.
👩💻 Stakeholders
Throughout the project, I worked closely with various stakeholders to ensure accuracy and functionality. Regular feedback was sought from my course instructor and peers during design critiques to refine the user interface and overall experience. I collaborated with a web developer, to address technical challenges, such as implementing accessibility features and interactive elements.
Problem
⚡️ The Challenge: How to illustrate all the information types in one website?
⚡️ The Challenge: How to represent Glaucoma appropriately?
⚡️ The Challenge: How to make the site accessible for everyone?
Design Process
📚 Research
By conducting research about glaucoma websites, and collecting data.
The differences noticed are the following insights:
Most websites are charity-based (77%)
Only a few websites including the NHS inform in detail regarding the condition. (24%)
No website shows the point of view of users with glaucoma. (0%)
Accessibility
D E S I G N
Accessibility Bar of Glaucoma Website
Further research found that users with glaucoma benefit from high colour contrast and muted tones. In response, the site was updated to include a feature allowing users to adjust the website's colour scheme and enlarge text for improved readability.
D E S I G N
HI-FI Design
The colour pattern chosen was researched based on the goal of the website.
The palette suggests trust and medical advice. The constant is measured with the W3C guidelines.
D E S I G N
Logo
The logo design is based on the name of the site, Glaucoma.
The ‘O’ is replaced with an eye. The shorter version of the logo is just the eye.
The colour pattern follows the website colour contrast.
PROGRAMS
Adobe PhotoShop
Procreate
Logo and colour design of Glaucoma Website
D E S I G N
Wireframe
High-fidelity wireframes were created using Figma, providing a clear and concrete vision of the website's structure.
This approach ensured a seamless user experience and smooth navigation between pages, all while maintaining a strong focus on accessibility as a top priority.
High Affinity Wireframe of Glaucoma Website via Figma
Gif of Design Information Collection of Website (Mobile Vs)
D E S I G N
Information
1 Gathering important information in one space.
Creating a streamlined information experience allows users to have all information in one space.
My design allows users to find data easily through a menu but also buttons that guide the user to relevant information creating a user flow.
‘Card Game’
D E S I G N
Create the perspective of the condition and bring further awareness to the matter.
The card game uses the basic rule of matching colour to finish the match with the twist of adding different types of glaucoma vision.
Gif of Card Game of Website (Desk Vs)
Accessibility Bar
D E S I G N
The two features of this sidebar allow users to change the contrast/colour and font size of the whole site.
The design gives accessibility-friendly opportunities for more users.
Gif of Accessability bar of Website (Mobile Vs)
Final Desktop Design of Glaucoma Website
Outcomes
The project successfully delivered a comprehensive and accessible website that raises awareness about glaucoma.
User-friendly design that educates visitors on the condition, treatments, and research while offering support through patient testimonies and helplines. The accessibility features, such as adjustable colour schemes and text size, made the site more inclusive for users with visual impairments.
😊User-friendly
👁️Visual Experience
Additionally, the interactive "Card Challenge" provided a unique way for users to experience glaucoma from a patient's perspective. Despite some technical challenges, the website achieved its goals of informing, supporting, and engaging users in glaucoma awareness and research efforts.
Takeaways
✨Adapting To One
After researching the Glaucoma condition and the web process for accessibility I've learned how difficult it is to create a space to include every type of user but also at the same time make sure that images and buttons are labelled with an alt text can make a difference. This project inspires me to carry on with similar projects and make a potential difference