fifty/fifty
During the 2020 COVID-19 pandemic, SEASPAR, a recreation nonprofit for individuals with disabilities, transitioned to virtual programming. SEASPAR had difficulty finding accessible activities for their participants.
I started this passion project to support my community during an uncertain time. I was the lead UX designer for an accessible web-based mobile game called fifty/fifty. I led three UX design students through research and a design sprint to create a proof of concept of fifty/fifty for SEASPAR to use during virtual programming.
Role
Lead Designer
Timeline
June 2020 - November 2020
Team
3 UX design students
Tools
Figma, Mural, Sprint by Jake Knapp
Background
In order to investigate the problem of limited accessible virtual activities, I assembled a team of three UX design students looking for real-world experience. Personally, I aimed to share the knowledge gained from working in the UX industry. I also wanted to experience the process of leading a group. We approached the project like a startup - I served as a lead designer, facilitator, and mentor, and the students were individual contributors practicing their skills in research and design.
Key Contributions
-
Strategized design process
-
Mentored design students
-
Facilitated design sprint
-
Led design thinking activities
Design Process
After an intake meeting with a SEASPAR representative, we crafted our initial problem statement: How might we provide SEASPAR participants with more accessible games they can play virtually? We used this as the starting point in our design process.
Learn About Accessibility
Read about accessible UX design best practices
Interview and Observe
Talk with the users and be a fly on the wall at virtual sessions
Journey Map
Outline a remote session from conception to execution
Affinity Diagram
Cluster interview and observation data for insights
Problem Tree Analysis
Define the right problem to solve
How Might We
Phrase the problem as a question that inspires
Design Sprint
A design sprint covers the activities for the design and deliver phases of the project. It includes:
Sketch
Each person puts their own ideas to paper
Decide and Storyboard
Pick one idea and build on the experience with a storyboard
Prototype
Simulate a finished product for users to see and feel
Test
Conduct 5 testing sessions with users to get feedback
Discover
We identified three personas: participants that attend virtual programs, family members of the participants, and recreation coordinators that plan and host the programs. We interviewed the personas, observed virtual programs, and created a journey map to understand their current experience and opportunities for improvements.
4
Participant and
Family Interviews
6
Recreation Coordinator Interviews
5
Program
Observations
1
Journey
Map
Interview with a recreation coordinator.
Sample Interview Questions
Interview Quotes
Participants and Families
-
How has the switch to virtual programming affected you?
-
What do you think of the virtual programs so far?
-
Let’s pretend there is a program tonight at 5 on Zoom. How would you prepare for it? Does anyone help you prepare?
-
Why do you attend the programs?
-
Recreation Coordinators
-
Tell me about your process of planning virtual programs. How do you come up with ideas?
-
What criteria makes a program accessible for the participants?
-
Think about the last program you hosted. What went well? What didn't go well?
"I like it. I get to see my friends on Zoom and the staff."
- Participant
"It was more about the socialization more than what he could actually do."
- Parent of Participant
"When we had in-person programs, participants could be more independent. Now we rely on family help."
- Recreation Coordinator
Observations
To build empathy, we conducted 5 fly-on-the-wall observations of virtual programs: social club, game night, BINGO, dance party, and sing and jam.
Game night was trivia, where the recreation coordinator posed a multiple choice question. Participants showed a paper with a handwritten answer choice (A or B) to the camera.
The team collaboratively took notes on Mural while observing. On-the-fly clustering of like observations began to occur.
Journey Map
I facilitated a journey mapping session with a recreation coordinator. Our goal was to to understand the end-to-end process of a virtual program, from conception to execution. The map records each step and the tools, people, and feelings involved for the 3 personas.
Define
Using the data collected in the discover phase, we needed to draw insights, create design principles, and converge on the right problem to solve. I facilitated two remote design thinking activities with the team over Zoom: affinity diagramming and problem tree analysis.
A team meeting to analyze the research data.
Affinity Diagramming
We grouped like observations and drew insights from the interview data.
Key Insights for Participant and Family Data
It's not about the activity, it's about seeing friends - but participants can't do that in-person.
Participants had difficulty understanding why programs needed to be virtual. It was hard not to see their friends.
Key Insights for Recreation Coordinator Data
Virtual tech support gets in the way.
A significant amount of time is spent troubleshooting technology problems. It diminishes the experience of the program.
In-person SEASPAR programs promoted participant independence. Virtual settings hinder it.
Technology like Zoom and Kahoot require help from family for participants to operate.
Programs and activities are personalized.
Activities that reflect participant interests are more meaningful and engaging. It fosters friendships.
Design Principles
We converted the key insights into design principles for our solution. Based on our research, a successful solution will:
Bring people together
Enable independence
Be accessible
Be personal
Problem Tree Analysis
The previous activities gave us a breadth of challenges the personas were facing. We needed to narrow down the exact problem to solve. I facilitated a problem tree analysis with the team to uncover a problem that was both critical for the personas but also realistic for the team to take on.
Initial Problem Statement
How might we provide SEASPAR participants with more accessible games they can play virtually?
Revised Problem Statement
How might we create an accessible activity that encourages independence and personal connections in a virtual setting?
Problem Statement Reasoning
The initial problem statement assumed that accessibility of the activity itself was the most critical challenge. However, through our research we learned that this assumption was more nuanced.
The reason accessibility of is important is because it would allow participants to be more independent. It aligns directly with SEASPAR's vision of enabling "...participants to discover abilities, achieve potential, and realize dreams." It also impacts the experience of participant's family members. Virtual programs require family member's time to serve as technology support (where previously that time was used for other activities). Furthermore, involvement from a recreation coordinator may be required to guide the participant and/or their family through a lengthy technology troubleshooting process. Though family and coordinators are happy to help, the virtual environment is prone to challenges that negatively impact the overall experience.
We also discovered that programs foster personal connections between participants and staff. In a virtual setting, it is difficult to replicate the experience of in-person camaraderie. Our research showed that this is something the personas missed the most.
Design and Deliver
The Google Ventures Design Sprint
The final phases of the project were an opportunity to facilitate my first design sprint. A few months before this project began I read Sprint by Jake Knapp and was itching to try it.
Modifying the Sprint
Design sprints are normally a five day process. It involves:
-
Day 1: Map and target
-
Day 2: Sketch solutions
-
Day 3: Decide on the best
-
Day 4: Build a prototype
-
Day 5: Test with users
Day 1 has activities to discover and define. However, we intentionally did that in advance. We were not experienced with disability and accessible design, so I planned for a comprehensive research phase to build domain knowledge and empathy.
Map and Target
Keeping the problem statement in mind, we journey mapped the experience of using an accessible game during a virtual program session. The goal was to pick one persona and their experience to focus on testing during the sprint.
Though the recreation coordinator and the participant's family have significant journeys in this process, the team ultimately decided to focus on the participant’s experience.
The journey of each persona using an accessible game.
The Sprint Question
We also defined a sprint question, which is the essential question we aimed to get answered during the sprint. The question encompassed our optimism for the future and our fears about failure. Can we really build something that participants can successfully use on their own, without assistance?
Sketching
Team members individually sketched out solutions for the project using the crazy 8 method. We critiqued each other’s final sketches and choose one to prototype and test with users.
Using 2 choices works for users
Users can feel bad if they get it wrong
Try pictures in place of symbols
All-in-one for calls and games
Scope might be too large
Try making more users visible at once
Notification that it's starting is helpful
Involves a lot of waiting
This design was chosen for testing
Storyboard
We created a storyboard of the SEASPARCADE to map out each step of the experience to test. The storyboard unified our vision for what to prototype.
Prototype
We created a prototype of of the game called fifty/fifty in Figma. The prototype takes place from the POV of a participant joining an existing game. They would have the game open on their mobile device while having Zoom open on their computer. The Recreation Coordinator would be the game host, asking the questions aloud and remarking on the answers.
The prototype features:
-
Personalized profile photos and answer choices
-
Binary answer choices
-
Stats on the number of people who chose each choice
-
WCAG 2.0 level AA compliant color contrast
-
Large touch targets
User Testing
On the final day of the design sprint, we conducted user testing with 2 participants and 3 recreation coordinators.
Sample Tasks from User Testing Script
Task 1: Welcome screen
-
Can you describe what you see on this screen?
-
Based on what you see, what would your next action be?
-
[Before they press the button to join] What do you think is going to happen next
-
Task 2: Waiting for game to start
-
What do you see on this page?
-
Prompt: Do you notice the icons of people? What do you think they mean?
-
-
What would you change about this page?
-
What do you expect to happen next?
Task 3: 1st round of “this or that”
-
What do you see on this page?
-
Prompt: What are you supposed to do on this page?
-
What do you think of this page?
-
-
What do you think will happen next?
Task 4: Great answer page
-
Can you tell me what you see on this page?
-
Prompt: what do you think is happening?
-
How would you react if the wait was very long?
-
-
What do you think will happen next?
Task 5: Results page
- Can you tell me what you see on this page?
-
Prompt: what do you think is happening?
-
Do you notice the icons of the people? What do you think they mean?
-
-
What do you think will happen next?
Notes
User Testing Feedback
4/5 users felt that the text size and images were too small
2/5 users wanted to know how long it would be for the game to start
3/5 users wanted visibility to how much time is left to answer
2/5 users didn't know if the text, picture, or both were clickable
3/5 users wanted the ability to change their answer
4/5 users said the profile pictures were too small
2/5 users wanted to know how long it would take for others to answer
Next Steps
Based on testing feedback, the answer to our sprint question was yes, participants can successfully use fifty/fifty independently. The decider noted that the application is "easy to navigate, with constrained options that reduce the chance of errors."
However, major questions remain for the design of fifty/fifty:
-
How do participants log on to the game?
-
What is the experience of a participant who only has one device for both Zoom and fifty/fifty?
-
How do recreation coordinators create the game?
-
What is the hosting experience for recreation coordinators?
The next step is to complete design iterations based on user testing feedback. This includes visual design adjustments, improvements to system status visibility, and error prevention. Assessment against accessibility standards and best practices should continually be performed. Furthermore, additional design sprints are needed for the participant log in experience and the recreation coordinator creation and hosting experiences.
Reflection
Fifty/fifty was my first experience designing an accessible product. I learned that inclusion must be intentional. It’s important to keep checking who I may be excluding in the spaces I design. I also learned that inclusivity requires humility - in the process of this project, many of my assumptions about disability and technology were challenged. Inclusivity is never “done” or “complete”, and I intend to remain aware of its impact and continue to learn.