top of page
NTUA Accessibility Audit
Finding web accessibility issues and prioritizing solutions for a utility payment platform.
ROLE
UX Researcher — Usability Evaluation,
Design Improvements, Prioritize Fixes
TEAM
CGU Game Lab— 1 Project Advisor
TIMELINE
Aug 2024- Dec 2024
CONTEXT
In my Inclusive UX Design class, I performed an accessibility audit of the Navajo Tribal Utility Authority (NTUA) website, the platform customers must visit to pay for their monthly utility services.
Following the Web Content Accessibility Guidelines (WCAG) 2.0, I identified 7 usability issues in the "Log in to Account" workflow. I prioritized the fixes and redesigned elements that would most improve the customer experience.
01
The Challenge
NTUA recently switched to online billing only, although the majority of their users are over 65 years old, have low digital fluency, and limited internet access. This made it even more critical to create an accessible website for people to pay their utility bills.
02
Key Outcomes
1. Created a user persona based on NTUA's target market to guide design prioritizations.
2. Identified 5 usability issues based on Web Content Accessibility Guidelines (WCAG) 2.0.
3. Prioritized and delivered design solutions in compliance with standard accessible design principles.
03
User Persona
Focusing on a person who is under-served by the experience but should be included, if not prioritized.
Gary, a 70-year-old man who
struggles with vision loss and low technology literacy.
Gary has been using NTUA utilities his whole life, but they just now switched to online billing. His granddaughter helped him set up his account, but he can’t figure out how to log in and pay his bills. He is frustrated and confused by the website, and his poor vision is making it even harder to navigate. If he fails to pay his bills, Gruncle will be charged a late fee that he just can’t afford.
04
Workflow
While the website had several usability issues, I assessed the workflow most pertinent to the target user.
Gary's Goal: find and log in to the NTUA customer payment portal to view billing and payment info
1. Find the customer portal on the Home page
2. Enter login credentials for the customer portal
3. View current bills and payment info
05
Issue #1: Unclear Navigation
The link to the customer portal is nearly impossible for first-time users to find. Not only does it lack a title, but the icon doesn’t remotely resemble a portal at all. Due to the unclear navigation, Gary goes through a frustrating wild goose chase.
Can you find the portal???
🪿🪿🪿🪿
The current button is a tiny, fine-lined dollar bill vector next to all of the social media icons. Not only misleading, but against the WCAG 2.1 AA standards, which state that Headings and Labels should allow the user to quickly identify content on the page and determine whether or not they want to interact with it. They explicitly mention not to use visual-only headings or buttons.
06
Issue #2: Unnamed Links
Most of the links on the Home page, including the link to the Customer Portal, do not have discernible names. According to the WCAG 2.2 AA guidelines, links must state the purpose of the link so visitors can decide if they want to follow it.
Link text that is clear, unique, and focusable improves the navigation experience for screen reader users like Gary.
07
Issue #3: Unscalable Content
The content on the login page is not user-scalable. Looking at the code, we see that the "user-scalable" option is set to "no", which means the developer disabled it.
Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. It is a direct violation of the WCAG.
08
Issue #4: Insufficient Touch Targets
The touch targets for most of the buttons on this page do not have sufficient size or spacing. Some people with physical impairments cannot click small buttons that are close together.
According to the WCAG 2.2 AA, the size of the target for pointer inputs must be at least 24 by 24 CSS pixels to pass the success criterion.
09
Issue #5: Low Color Contrast
The graph and other elements do not have sufficient contrast between the foreground and background colors in accordance with WCAG 2 AA contrast ratio thresholds. Users like Gary will struggle to understand the information conveyed by this visual due to the poor contrast. To make it worse, there is no alt text for this graph to supplement the visual.
10
Primary Redesign
While there are several accessibility improvements that can be made, I redesigned the most impactful one.
In the navigation menu, I swapped the social icons for a login and sign up button, streamlining the workflow and making the process easier for first time users.
11
Recommendations
1. Conduct User Research
What is the primary goal of users on the NTUA Website?
Uncovering the most pressing needs of the user base will inform decisions around the layout and navigation design of the website.
2. WCAG AA Compliance
Ensure the site complies with WCAG 2.2 AA Standard guidelines to ensure basic accessibility for all users of the site.
From toxic forums to trusted feedback: my human-centered design theis project.
bottom of page