UX/UI Design | Accessibility | 0 → 1
Designed an accessibility feature to enable students with visual impairments to identify and form deeper relationships with classmates, resulting in positive user satisfaction.
Overview
This project was completed for a course in user-centered design at the University of Washington (UW) for which our team developed a high-fidelity prototype of Friend Finder. An accessibility feature integrated into the Canvas Student mobile app (UW's academic platform) to assist UW students with vision impairments —both low-vision and total blindness*— in identifying and navigating to peers with whom they want to form deeper relationships in large classroom environments. Our work resulted in positive user satisfaction from visually-impaired students we involved in the end-to-end design process.
*Within the context of this project, per the American Optometric Association, "low-vision" is defined as those possessing some level of vision, while "total blindness" refers to those with no light perception.
My Duties
User flows, wireframes, design system, user interviews, mockups, prototyping
Duration
3 months
Team
1 Project Manager, 2 UX Researchers, 1 UX/UI Designer, and me (UX/UI Designer)
Tools
Figma, FigJam, Miro, Notion, Google Workspace
The Problem
Few tools to support visually-impaired students' in class-social experience
Though there are many assistive technologies and institutional resources to facilitate the in-class learning experience for visually-impaired UW students, there are few tools that help support their in-class social experience. Specifically, in easily identifying classmates with whom they would like to form deeper relationships in large classroom environments.
A UW lecture hall. Some can even be larger than this one, creating extra challenges for visually-impaired students in identifying specific classmates.
The Solution
An accessibility feature, helping users identify and navigate to specific classmates via screen-readable text or a visual classroom map
To help address this gap, Friend Finder acts as an accessibility feature integrated into the Canvas Student mobile app. After being enabled, it allows students with low-vision/total blindness to add specific classmates to a personal list and navigate to them via screen-readable text or a visual map within large classroom environments.
Enable the feature
Add a friend
Navigate to friend
The Impact
Positive user satisfaction
Assessing the satisfaction of our target users, was critical for this project to assure the app was both accessible and a step forward in the right direction. Positive feedback from two visually-impaired students closely involved in the project helped to affirm this.
Initial Design Question
Emphasized visually-impaired students' overall learning experience
Our initial design question was broad as we assumed there were gaps in visually-impaired students' learning experience. This assumption was later disproved as we progressed through our primary research methods, which entailed a literature review, competitive audit, and user interviews.
How might we enhance the learning experience for visually-impaired UW students?
Research Methods
Literature review, competitive audit, and user interviews
We did a literature review to preliminary explore the problem space, a competitive audit to gain more insight into the tools currently employed by visually-impaired students, and conducted user interviews to understand visually-impaired UW students' classroom experience.
Literature Review Key Finding!
Many visually-impaired students struggle with the social aspect of the classroom setting, namely around interacting with peers due to the physical constraint of not being able to recognize classmates.
A whiteboarding session where we compiled and discussed our literature review findings.
Competitive Audit Key Finding!
There are few tools to facilitate visually-impaired students’ social interactions with class peers.
A few of the applications on which we conducted a competitive audit.
Interview Key Finding 01
The students encountered challenges identifying classroom peers, primarily within large classroom environments.
Interview Key Finding 02
The students desired to form deeper relationships with their classroom peers.
Challenge & Resolution
We faced obstacles recruiting participants due to limited ties with the target cohort and research fatigue experienced by them. To alleviate this, we maximized the time with the participants we did recruit, involving them in the end-to-end design process, which ensured a more accessible outcome.
Refined Design Question
Modified to focus on the identification aspect within large classrooms
Utilizing our literature review and competitive audit findings, and to reflect the most prominent pain point of the students we interviewed, not being able to identify their classmates within large lecture halls, we reframed our initial design question.
How might we help visually-impaired UW students easily identify their classmates within large classroom environments?
Design Requirements
Accessible, but also help identify and navigate to classmates
Using our research findings we developed design requirements to aid our team in idea generation.
Sketches
30+ concepts produced, exploring various directions
We collectively developed over 30 sketches around the primary design requirements, iterating upon them following team critiques. Classroom maps, multimodal support, and real-time location tracking were commonly reoccurring elements.
Challenge & Resolution
We initially struggled to narrow down a compelling direction from our abundance of sketches. To overcome this, we ran our ideas past the students we interviewed prior and closely checked each idea against our design requirements, ensuring scope alignment.
One of my sketches playing around with the idea of a check-in system to pull location data and visual map of the classroom.
Storyboarding
Say hello to "Friend Finder"
Then, we utilized the sketches to craft a storyboard of the proposed feature, Friend Finder. At this time, we also decided to tailor the concept to mobile, since our target users were well familiar with their mobile devices and its assistive technology tools, and to enable seamless use within the classroom.
Hover for storyboard context
Mid-fidelity wireframes
I developed distinct navigation modes for users: one for total blindness and another for low vision
Using Figma, we translated our storyboard into
mid-fidelity mockups over several rounds of iterations. I led the wireframing process, maintaining a focus on developing the flow for enabling the feature and navigating to a friend. I created two distinct navigation modes reflecting the divergent needs of our target users.
Challenge & Resolution
This was my first time creating wireframes optimized for screen-reader usage. To navigate this, I relied on our project manager's screen-reader knowledge, asking questions and incorporating their feedback throughout the process.
After enabling the feature, the user would have two distinct CTAs
2a. Navigate to the friend via screen-readable text (for totally blind students)
2b. Navigate to the friend via a visual map (for low-vision students)
Usability Testing
Prompted the direct integration of Friend Finder into Canvas Student
Then, we conducted 4 rounds of user testing with 4 different UW students to receive user input, modifying the design accordingly per their feedback.
Participant Profiles
1 participant had total blindness
1 participant had low-vision
2 participants had no visual impairments
Included due to our small sample size, permitting us to acquire additional feedback on the design.
A participant with total blindness testing the mid-fidelity prototype of Friend Finder using VoiceOver on his iOS device.
Key Findings & Design Changes
Key Finding 01
Participants struggled to switch between Friend Finder and Canvas and preferred having Friend Finder directly integrated into Canvas, as they were already used to it.
Design Change 01
Direction integration of Friend Finder into Canvas.
Key Finding 02
A screen-reader user found the location description difficult to follow and found it unintuitive to have each step on a separate screen.
Design Change 02
Consolidation of text-navigation steps onto one screen.
Key Finding 03
Participants desired a way to see all their friends in a selected course, regardless of whether they are actively present in the selected course or not.
Design Change 03
Addition of a full friends list for each distinct course section.
Post-Project Iterations
I streamlined the color palette and roundness on UI components
Following the project's conclusion, I independently solicited feedback from the course instructor and a professional designer. Since the primary feedback entailed a lack of visual cohesion, I refined the initial design system to create a more cohesive look prior to redesigning all the high-fidelity screens.
Next Steps
Outline edge cases associated with the real-time location tracking feature (e.g., what happens if there is a barrier in the visually-impaired student's path).
Define the user experience for the visually-impaired students’ friends so it imposes minimal barriers on them.
Further enhance the feature's accessibility (e.g., inclusion of customizable color palette/text sizes).
Learnings
Learned to design UI components to seamlessly function with screen readers for improved accessibility.
Recognized the value of integrating proposed solutions into a user's existing workflow rather than attempting to reinvent it.
Faced challenges conducting our research partially due to limited ties with the target cohort.
