The WarriorRec app is University of Waterloo's athletics and recreation platform. This app faces usability challenges due to its layout and design, especially for visually impaired users.
How might we improve features of the WarriorRec application to make it more accessible for users with a visual impairment?
To improve the user experience, a search bar was added to the home page and the hamburger menu to enable users to complete tasks more quickly.
The page layout was redesigned to enhance accessibility, featuring higher contrast between text and background to support visually impaired users.
Breadcrumbs were introduced to reduce cognitive load during navigation. The simplified layout, through removing the banner and adding padding, minimises visual strain and makes the app easier to use.
The search feature with autocomplete serves as an aid for visually impaired users. Tasks can now be completed faster without the need to identify the correct icon.
Adding padding between the icons and the edge of the screen creates a cleaner layout.
Change in text colour to increase contrast and improve readability for users.
The page layout was redesigned to simplify the process of finding activities. Streamlining the navigation and enhancing user control over the experience.
Change in text colour to increase contrast and improve readability for users.
Change of page layout to remove the blank space in the centre of the screen which can be confusing to users.
Addition of a breadcrumb navigation for users to keep track of page flow, showing the hierarchy of a parent page they have exited out of.
Layout change to maintain consistency throughout all pages.
This new layout allows users to see all their favourited activities instead of needing to scroll through the dates to find the exact date they have registered for their activity.Users are now able to quickly access all the necessary information on one screen without any additional action.
To understand the problem, I created a KWL table to organise what I already knew, what I needed to research, how I would research it, and what I learned.
Following the three research questions in the chart below, I conducted user testing with individuals with visual impairments, had users perform specific tasks to identify pain points, observed their interactions with the app, and reviewed articles on accessibility features for visually impaired users.
Using the Microsoft Inclusive Design Framework, three personas with varying levels of visual impairment were created, each accompanied by an empathy map.
Context scenarios were developed to understand how each persona would perform tasks, followed by a user journey map to identify pain points and propose solutions.
Based on my research findings, these added features could improve the app's user experience.
A search function enables quicker task completion, while a redesigned page layout enhances accessibility with higher colour contrast between text and background for visually impaired users.
Breadcrumbs reduce cognitive load during navigation. The simplified layout, achieved by removing the banner and adding padding, minimises visual strain and makes the app easier to use.
Below is the updated user journey map with these features.
Low fidelity wireframes were first created on Adobe Xd before moving forward to the high fidelity prototypes.
Before user testing, high-fidelity wireframes were created to give users a clearer visual of the final application.
This was important during testing, as many users provided feedback on the icons, colours, and the notification banner.
During the user tests, five participants tested the prepared prototypes in Adobe Xd.
Observations were recorded based on user behaviour, along with feedback gathered from an informal post-test interview.
The participants had either situational or permanent constraints, such as low vision in one eye or using the application without glasses while being nearsighted with astigmatism.
The added features proved helpful during the user tests. Users struggled the most with the overload of icons, while the addition of the search bar significantly aided in completing tasks more efficiently.
Users were able to successfully click the buttons without confusion, with the added to the color changes in the text and buttons, which provided feedback when a task was completed.
During the design process, I recognised the importance of avoiding early assumptions. While I aimed to create a solution for visually impaired users, the usability tests revealed that my initial design didn’t meet their needs. I learned that user feedback is essential and should be viewed as an opportunity for positive change, not a personal failure. This experience enhanced my understanding of accessibility and inclusivity, especially for users with visual impairments. The user test highlighted the subjectivity of design decisions, as some features that didn’t affect some users had a significant impact on others, emphasising the need for diverse perspectives. I also found the importance of researching and reading academic papers, as they offer insights from large participant groups that I couldn’t replicate on my own, which deepened my understanding of visually impaired users and enriched my design process.
I struggled with writing some JavaScript code, but after reaching out to classmates and using online resources, I resolved the issue by assigning the same class to all the buttons to simplify the code. This project taught me the importance of seeking help, advice, and feedback at each stage. Another challenge was becoming too familiar with the application's interface, which made it difficult to spot issues that could affect visually impaired users. To overcome this, I regularly sought feedback from users with visual impairments.