Comment by Kirsten
The Client
ProRetina is the largest and oldest non-profit patient association for people with retinal diseases.
The Project
This project was part of my master’s degree program (HCD and UX Principles) which provided the students with hands-on experience in a real-world project environment. ProRetina needed support on redesigning their website to be ADA compliant.
The Challenge
The challenge of this course was to redesign the organization’s existing website navigation in order to make it more accessible and user-friendly, as it is often the first point of contact for people with visual disabilities.
1. Understand
Research
Before we started to redesign the website, we had to conduct an extensive research on the topics: Web Accessibility, Usability, Retinal Diseases and much more, to get an overview of the topic.
In-Depth Interviews / User Research
Before we started to redesign the website, we had to conduct an extensive research on the topics: Web Accessibility, Usability, Retinal Diseases and much more, to get an overview of the topic.
2. Define
Insight-Sorting
Following the UX research and in-depth interviews, we used the technique of insight sorting to categorize and group user insights based on patterns and themes. This helped us to better unterstand the needs and pain points of users.
Problem Definition
It became evident that the web navigation required immediate attention. The web navigation is a critical component of a website as it facilitates users in quickly and easily accessing the content they seek. This is especially crucial for ProRetina, given that their website serves as one of the primary sources of information for individuals with visual impairments who require rapid and seamless access to information. An effective web navigation system can enhance the user experience, boost engagement on the site, and promote easy access to vital information.
3. Rapid Prototyping
We conducted rapid prototyping to generate three new web navigation ideas:
Hexagon Pattern: This design organizes key topics in an engaging hexagonal layout. Users can hover over each section to access information seamlessly. The structure is designed for intuitive screen reader navigation, ensuring accessibility for all users.
Card Design: The site is divided into three primary categories, each represented as clickable cards. Users can easily explore subcategories within their chosen topic, creating a clear and focused navigation experience.
Interactive Fonts: Featuring bold and stylish typography, this concept offers an engaging and accessible experience. The fonts enlarge upon hover, making it easy for users with visual impairments to navigate while maintaining a modern and aesthetically pleasing design
4. Usability Testing
We presented three navigation concepts and allowed users to interact with them through our low-fidelity prototypes. This helped us quickly identify and eliminate two options that were not compatible with screen readers. The Card Design emerged as the clear favorite, receiving the most positive feedback.
In the next phase, we conducted A/B testing, showcasing two prototypes with subtle variations. Using insights gathered from user feedback, we applied the “Start, Stop, Continue” retrospective method to refine the design. This iterative process ensured the final navigation concept was both user-friendly and highly accessible.
3. Deliver
Success!
The client was thoroughly impressed with the outcome of our new navigation concept, and expressed their admiration for our team’s hard work and dedication. They were particularly impressed with the innovative ideas we brought to the table and they were eager to implement many of them into the new website. In fact, they offered both (my study colleague and me) a job, citing our exceptional UX/UI design skills and innovative thinking. Overall, the client was thrilled with the final result and grateful for our team’s contributions to the project.