YMCA
UX Audit for the YMCA website
Duration: 1 day
Role: UX Designer
Tools: Figma
Problem
As a YMCA member I have observed various issues using their website, that make it difficult for me to navigate and find needed information.
Goal
The goal of this audit is to have a deeper look at YMCA website problems and help to improve it's user-friendiness.
The Process
In this audit, I evaluated the following features and pages:
-
Navigation
-
Navbar
-
Consistency
-
Uppercase
-
-
Homepage
-
Slider
-
Interactive links
-
-
Accessibility
-
Target Size
-
​Contrast ratio
-
-
Inclusivity
-
Responsiveness
Navbar
​
YMCA website heavily relies on users' memory load. Navigating through the website is confusing and the user feels lost. This issue derives from poor design decisions:
​
-
Using an unconventional navigation model which includes putting the main menu and its submenu apart and making that difficult for the user to understand the relation between them.
-
The navigation does not give the user, control and freedom to undo a navigation process.
-
Main menus are not differentiated from submenus which increases confusion.
-
The structure of the side menu for first-level navigation is confusing and the user's cognitive load is high. The system status is not clear for users in selecting the first level of navigation in the side menu. Also, in this section and level, the menus switch immediately and are hard to follow.
Recommendations
​
Considering a mega menu at a high level of navigation will eliminate the confusion user faces through the main menu. Also having landing pages will smooth the user flow.
​
In lower levels, this is recommended to visually (layout, typography) differentiate the active menu from other menus.
Consistency
​
Users should not have to wonder whether different menus mean the same thing. On the main navigation, the Donation button has a distinct visual element, however, it acts like other menu labels. This confuses users and there is a risk of abundance since they don't expect to see a dropdown for this button.
​
Recommendation
​
Adding a dropdown indicator such as an arrow will help users to learn about the menu and distinguish that from a button.
Uppercase
​
The navbar menus are long and they do not fit in one line. Therefore, using uppercase letters in the main navbar has impacted the readability of the labels negatively and increased the reading speed.
Recommendation
In this case, using bolded uppercase and lowercase letters will improve the users' experience.
.jpg)
Slider
​
-
There are arrow buttons on the hero banner. They rely on users to hover exactly over them to be discovered. As an interactive element, they should be obvious. This issue decreases the users' control and increases the user's ignoring of important imageries.
-
The slider lacks slider pagination to show users how many slides they should expect to see.
Recommendation
Arrow buttons and indicators solve these issues and give the users the freedom to browse the hero banner content.
Interactive links
​
This is essential to inform users about the system status. When users hover over the following links there are no obvious hovering states except the mouse pointer which changs and is not very clear. Even though the buttons have different behaviour their interface are the same, and this. might create confusion in user flow.
Recommendations
-
Hover state including changing the colour of the links will fix this issue.
-
Adding an external icon to the Member Portal will set users' expectations and help them not to feel confused when a new tab opens.
Target Size
On the desktop version, on the level three landing pages, (+) and (-) icons are provided to give users control of the text size on the page. This is a valuable decision in supporting of accessibility. However, the icons themselves are hard to recognize and their target size is too small to click.
Recommendation
The (Minimum) (Level AA) size of the target for pointer inputs is at least 24 by 24 CSS pixels.
.jpg)
Contrast ratio
"The contrast ratio of 4.5:1 is the absolute minimum to meet the readability requirement of web content."
​
The navbar menus with the colour code #696969 and the Contrast Ratio of 5.48:1 passes the WCAG AA and WCAG AAA standard for all sizes of text except WCAG AAA for Normal text size.
​
The navbar active and hover state with the colour code #02827B and the Contrast Ratio of 4.68:1 passes the WCAG AA and WCAG AAA standard for all sizes of text except WCAG AAA for Normal text size.
​
The body text with the colour code #4f4f51 and the Contrast Ratio of 8.17:1 passes the WCAG AA and WCAG AAA standard for all sizes.
YMCA's website fails in meeting inclusive design requirements:
-
There is no accessibility options icon to support people with certain needs.
-
The imagery of the website does not show they have a wide range of people in mind.
This insight is unfortunate for an organization in Canada that is well-known as a multicultural country.
YMCA's website is not responsive and the mobile version is not user-friendly. The header, footer and buttons are impossible to read.
The best practice would be to consider a hamburger menu for the navbar and increase the size of the footer (text and icons) and buttons.