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.

Header.png
 

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.

Design Process 8-04.png

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

Recreation Coordinator interview.png

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?

Avatar 111

"I like it. I get to see my friends on Zoom and the staff."

- Participant

Avatar 104

"It was more about the socialization more than what he could actually do."

- Parent of Participant

Avatar 102

"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.

Observation.png

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.

Observation note taking.png

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.

Journey map.png
 

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.

fifty_fifty team.png

A team meeting to analyze the research data.

Affinity Diagramming

We grouped like observations and drew insights from the interview data.

Affinity diagramming - participants.png

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.

Affinity Diagramming.png

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.

Problem tree analysis.png

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.

Design sprint.png

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.

Map and target.png

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.

SEASPAR Trivia sketch.png

Using 2 choices works for users

Users can feel bad if they get it wrong

Try pictures in place of symbols

Pick and Talk sketch.png

All-in-one for calls and games

Scope might be too large

Try making more users visible at once

SEASPARCADE sketch.png

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.

Storyboard.png

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

black iphone x2.png
black iphone x2.png

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

  1. Can you describe what you see on this screen?

  2. Based on what you see, what would your next action be? 

    1. [Before they press the button to join] What do you think is going to happen next
       

Task 2: Waiting for game to start

  1. What do you see on this page?

    1. Prompt: Do you notice the icons of people? What do you think they mean?

  2. What would you change about this page?

  3. What do you expect to happen next?

Task 3: 1st round of “this or that”

  1. What do you see on this page?

    1. Prompt: What are you supposed to do on this page?

    2. What do you think of this page?

  2. What do you think will happen next?

Task 4: Great answer page

  1. Can you tell me what you see on this page?

    1. Prompt: what do you think is happening?

    2. How would you react if the wait was very long?

  2. What do you think will happen next?

Task 5: Results page

  1. Can you tell me what you see on this page?
    1. Prompt: what do you think is happening?

    2. Do you notice the icons of the people? What do you think they mean?

  2. What do you think will happen next?

Notes

User testing notes.png

User Testing Feedback

Waiting room.png

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

This or that round 1.png

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

Answer chosen 1.png

3/5 users wanted the ability to change their answer

Results 1.png

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?

Summary and next steps.png

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.