Webpage Redesign
Alzheimer’s Disease Resource Center
ui/ux • designing for accessibility
Overview
In summer 2023, I volunteered as a content designer for Alzheimer’s Disease Resource Center, Long Island, NY, which provides education and support for people living with Alzheimer’s and other dementias and their families.
In this project, I identified usability and accessibility problems of the homepage of the website.
Part 1: Identifying Usability & Accessibility Problems
Upon my initial visit to the home page, I immediately noticed ongoing efforts to enhance the website's accessibility. This was evident from the presence of an accessibility toolbar located at the top right corner of the webpage. I proceeded to conduct accessibility analysis using webAIM WAVE. Through this analysis, I discovered numerous positive elements, including the implementation of ARIA (Accessible Rich Internet Applications) and the incorporation of images with alternative text on the webpage.
Nevertheless, my analysis also unveiled certain issues pertaining to the usability and accessibility of the webpage.
Hierarchy & Organization
The menu button includes 7 headings, however some of the headings only have one subheading and could be potentially merged together for a simpler navigation.
Color Use
There are several color usage on the page (for instance the menu button) that does not align with the W3C WCAG Guidlines which require the images or text having a contrast ratio of at least 4.5:1.
A low contrast design can be confusing for people with moderately low visual acuity which happens more frequently among elder people.
Redundancy
It could be convenient to have information repeated, however it could also make the interface more confusing. For example, on the home page, the button “donate” appeared three times.
Greyscale Test
When color difference was the only way of communicating information, it can get tricky. For instance, the above left picture shows a link that is in color purple, so that people will know that an external link is embedded in the word. However when browsing in the greyscale mode, the colors appear to be almost the same. The user thus would not have known that there is a link.
Accessibility shouldn't be an option that users need to select; it should be the norm.
Aesthetics shouldn't have to be given up in order to enhance a page's accessibility, user-friendliness, and inclusivity!
So how might we design a visually appealing, user-friendly website interface with accessibility and inclusivity as a core principle, and not just optional feature?
Part 2: Visual Redesign
From the insights I found in Part 1, I first made a low-fidelity wireframe to envision how my redesign could address the issues with the original website.
Visual Redesign Style Guide
Using these prototypes, I condensed the interface interaction and visual element design into a more comprehensive style guide.
The Final Hi-Fi Design
Before
After
YOUR BRAND
YOUR BRAND
Learnings
The website accessibility redesign project provided valuable insights into prioritizing inclusive design, accommodating diverse user needs. Acquiring techniques to enhance usability, I will further to work on making my portfolio website more accessible as well.