Design Process
We started with a broad problem scope, and nailing down the exact problem was our first hurdle in this project. After research and ideation, we underwent two major iterations of our problem statement.
Initial Problem Statement
How might we enhance the learning experience for students with visual impairments?
1. Research Insights
Our research involved 1-1 interviews with two visually-impaired students at the University of Washington, complemented by extensive secondary research and visits to lecture hall classes.
The key insights have directed us to concentrate on classroom peer interaction as a significant pain point for which in-market solutions are lacking.
01 Identifying social interaction as the primary area of concern.
Secondary Research
We discovered a wide range of problem spaces through exploratory secondary research.
Interview
During interviews, we asked: What are the most critical, unmet goal?
Users expressed strong frustration in SOCIAL interaction and reluctance to seek NON-ACADEMIC help...
Product Audit
... Yet from product audit, we identified a notable GAP in existing products addressing unique challenges in social interaction.
02 Focusing on the classroom and navigating the user journey to pinpoint pain points.
After narrowing the problem down to social interaction, we spoke further with our participants and decided to focus on the classroom, as it is their primary environment for meeting people and making friends.
Immersed in large lectures, we navigate the user journey and emotional highs and lows.
03 Finally, articulating user needs and translate into design requirements.
"I want to have an easier way to IDENTIFY classmates that I spoke with before."
"I want to easily FIND where my classmates are SITTING."
"I want to NAVIGATE smoothly to my friend without counting the rows."
"I want to easily FIND GROUP MATES and participate in group discussions."
The design should assist users in identifying specific individuals they want to interact with.
The design should allow real time location sharing within the classroom.
The design should aid users in navigating their way to these individuals.
The design should assist in better forming groups and managing the group discussion process.
With above insights, we iterated the problem to:
Iteration 1
How might we enhance the peer interaction experience for students with visual impairments within the classroom?
2. Ideation
Having Fun Brainstorming!
We collectively brainstormed 30+ ideas.
Grouping and Shortlisting.
We grouped the ideas into 6 major categories and prioritized the 2 most appealing ones based on prior user research. We shared this prioritization with our two participants, and they fully supported the decision.
Storyboard of the Final Idea: Friend Finder
The core idea shaped our final version of the problem statement:
Iteration 2
How might we help visually-impaired students easily identify and locate their classmates within a large classroom environment?
User Flow
To address the user need of locating and sitting next to a specific friend, we outlined three primary user flows:
Add a friend - Locate a friend - Navigate to the friend.
We deprioritized...
It is worthwhile to point out that after conducting tests with our participants, we decided to deprioritize the following features and user flows at this stage:
- The ability to locate an empty seat when no friends are present in the classroom.
- An audio prompt indicating the presence of other friends along the route.
- A feature enabling users to tap their phone to exchange digital name cards when meeting a new friend.
3. Low-fidelity design decisions
User feedback guided the following key design decisions in our wireframing process.
Canvas integration
Decision
Create a new feature vs new app.
Rationale
Canvas app is already widely used and favored by students, including those who are visually-impaired.
Multi-mode
Decision
Offer both text and map views.
Rationale
Users with different levels of visual impairment differ in navigation mode preferences.
Choice of Assistive Tech
Decision
Enable voice, screen reader, zoom.
Rationale
We initially prioritized Voice Control but discovered users have different preferences in interaction.
4. Usability test with RITE
We tested the prototype with 2 visually-impaired participants along with 2 sighted participants given recruitment challenge.
We quickly iterated our prototypes using the RITE (Rapid Iterative Testing and Evaluation) approach due to the limited number of participants available. Here's an example of how the landing screen evolved:
Five key issues were identified during the usability test to improve the prototype.
Issue 1 Disjointed integration
Participants mentioned difficulty switching between the new feature and other Canvas features.
Action: Integrate the feature seamlessly into the Canvas dashboard for smoother transitions.
Issue 2 No exit path
Participants were not able to exit the navigation mode.
Action: Introduce a bottom navigation bar and back button on the start navigation screen.
Issue 3 Lack of navigation flexibility
During real-time navigation, participants felt the need to repeat the current step or pre-learn the next one.
Action: Simplify the process by consolidating all steps on one screen and adding a repeat button.
Issue 4 Search difficulties
Adding new friends wasn't intuitive, as participants tended to scroll for search.
Action: Enhance the process by expanding the suggested list to a full class list in alphabetical order (first name) for easier friend addition.
Issue 5 Friend management
Participants needed efficient ways to access a full list of added friends.
Action: Provide direct access to the full friend list from course screens.
5. Iterated low-fidelity
select the photo for an enlarged view
6. High-fidelity
6.1 Naming
We brainstormed the name Dubby Buddy in the final stage of the project. The term "Buddy"and its rhyme convey a friendly tone, while "Dubby" establishes a link with U-Dub, the University of Washington.
6.2 Accessible Design System
During the class project, time constraints prevented us from testing the high-fidelity prototype with our users. However, once the class project was concluded, I dedicated additional time to gather user feedback and refine the design system.
To add a touch of friendliness, I changed the primary color to a yellow color tone and ensured the color contrast ratio met AAA compliance standards. Additionally, buttons and profile photos were resized to improve accessibility for users with low vision.
