Social Good for Google UX Design Challenge

a tablet and two smartphones (all black) demonstrate the screens of an accessible bingo app and responsive website design with an aqua blue, green and off-white color for buttons and other elements of app.

Social Good Challenge

Challenge: Create a responsive website and app design for social good. Challenge was prompted by the Google User Experience (UX) Certification course.

Problem: Bingo has become a stressful, discouraging experience for numerous seniors due to the lack of accommodation for physical impairments in the game’s design.

Solution: CareBingo, an accessible bingo game design allowing all people with diverse abilities to successfully play bingo in a community setting with dignity.

Story Behind Project

a woman's hand is placed on top of an older woman's hands (wearing a silver ring) on a gray pair of pants. Both women have bright colored shirts showing with purples, greens, pinks, and blacks.

When asked to design an app and responsive website for social good, my mind drifted to crucial needs in my community for which I could design a solution.

Food bank distribution. Homeless shelters. Connecting consumers to local food producers.

Then, I sat next to residents at my local senior home, volunteering for the afternoon bingo game. The competitive lady, who was also visually impaired, beside me couldn’t read the numbers on the card. Another resident couldn’t independently cover the called number on the card due to her impaired motor function.

Suddenly, I saw an opportunity to help people of all abilities and remove physical and emotional discomforts in a community game of bingo.

Design Process

As the UX designer and researcher, I followed a comprehensive design process to ensure CareBingo provided a reliable and pleasant experience for users while meeting deadlines (October 2024 - March 2024).

User Interviews

I attempted a different user interview approach than previous projects. I played bingo with seniors (user group) at my local senior home, asking detailed questions in conversation about their current experiences and observing.

Later, I documented and sorted the feedback.

Personas

Empathy Maps

After personally playing bingo with seniors, making reliable empathy and journey maps that reflected what people said, did, thought, and felt was powerful in connecting with users before brainstorming.

Picture of older woman (circle in middle of picture) with beige containers with black text sharing details about what people in user group tend to feel, say, think, and do.

Picture of older man (circle in middle of picture) with beige containers with black text sharing details about what people in user group tend to feel, say, think, and do.

Journey Map

User Stories

All initial research was distilled into 2 user stories, 1 story for those who have impaired vision and 1 story for those with impaired motor function, for directing design decisions.

Goal Statement

A goal statement was created for this accessible bingo project. I love a goal statement as it's like the North Star shining out the needs of users (based in research facts) which guides me as I begin churning out ideas.

Storyboarding

With a timer, paper, and sharpie in hand, I drew Crazy 8s and storyboards using scenarios, visuals, and captions to illustrate how users will interact with the product. This provided insights leading to empathetic design decisions in wireframing.

I used big-picture storyboarding to illustrate the environment and situations users will interact with the product in.

Gray, square borders surround storyboard drawings in black ink with captions below.

Then, I drew Crazy 8s to picture ways users can complete a task (like covering a called number on a bingo card) even with limited physical ability.

Black-ink drawn phone screens showing different bingo card design ideas.

Competitive Audit

Since most senior homes are using a hybrid of physical and digital bingo products, comparing both types of products was key before wireframing.

Sitemap

Red, mint green, and gray rectangle boxes with gray lines and arrows show information architecture of site.

User Flow

Below is a user flow diagram for how users will navigate from the home page to completing a game, for both players and callers.

Mint green rectangles, light pink diamonds, and gray circles with gray lines and arrows illustrate how users will move through the site (pages), what decisions users will make, and more.

Wireframes

Below is a sampling of the mobile app and desktop website wireframes.

Gray shapes and black text are used to lay out the elements on 8 wireframe app screens.

Gray shapes and black text are used to lay out the elements on 3 wireframe desktop screens.

Low-Fidelity Prototype

Wireframes were connected to create a low-fidelity prototype to test that the app truly was solving users struggles when interacting. The video below shows how users can enlarge numbers on a bingo card.

User Testing

Like interviews, I approached testing the low-fidelity prototype with users more unconventionally.

I visited with a resident, asking if she could read the number in the prototype on my phone (thanks to the Figma app).

She couldn’t read the numbers on the card provided by the senior home, and I would help her during games.

She said that she could see the enlarged number in the prototype, verifying that enlarged text on the bingo card was one solution for making this design visually accessible.

High-Fidelity Prototype

Using the tested low-fidelity prototype and created design system as a guide, I created the first high-fidelity prototype of CareBingo.

Below are the bingo card and board screens users would use most during a game.

Salmon pink, mint green, fire engine red, black, and light gray are used on different elements in 3 screens of high-fidelity prototype.

Card screen (in 3 different states) on the left and the board screen on the right.

Usability Testing

I conducted moderated usability testing. A moderated study allowed me to be close and present with users for questions on this app and web design which has a heightened focus on accessibility.

Also, video and audio recordings (with testers’ agreements) allowed me to distill feedback later more accurately.

Thoughts on Usability Testing

I wish I had tested this app on users more specific to the user group (seniors with disabilities). On the positive, a wide range of users were present for this study (from children to adults).

CareBingo is for everyone and broadening our age range of testers revealed opinions that would otherwise been unvoiced and not noted for iterations on the product.

Affinity Mapping

Feedback from users during usability testing was transferred to digital sticky notes. I read, arranged, and then rearranged these notes until feedback patterns and themes emerged.

Baby blue and salmon pink sticky notes with black text share feedback, insights, and themes from usability studies.

These insights were sorted into 3 categories. P0 are functional issues, accessibility concerns, and deceptive patterns users found.

Baby blue and salmon pink sticky notes with black text share feedback, insights, and themes from usability studies in order of importance to fix.

Numerous themes and insights were addressed in the iteration.

Setup Process

The account set-up process was hard to navigate for users and lacked clarity.

I changed the design to integrate the setup for the game following signup. Any future adjustments are made in the user's profile.

This involved changing the information architecture from hierarchal to subsequential.

On left, mint green rectangles, light pink diamonds, and gray circles with gray lines and arrows illustrate how users will move through the site (pages), what decisions users will make, and more. On right, Red, mint green, and gray rectangle boxes with gray lines and arrows show information architecture of site.

Updated user flow and sitemap.

5 high-fidelity screens of app prototype.

Updated app screens for sign-up and setup.

2 high-fidelity screens of desktop website prototype.

Updated website screens for sign-up and setup.

Bias in Helper Text

Text input fields for names (in sign-up and sign-in flows) had gender-specific sounding names as helper text.

As this design is for all genders, helper text names were removed as the text was found unnecessary and biased in this case.

Two off-white text input fields (one more accessible than the other) surrounded by gray boarders. Black and gray text can also be found on the picture.

Example of text input field before and after biased helper text was removed.

Content Below the Fold

Bingo card and board were resized to fit inside all screen sizes above the fold.

Also, enlarged number containers were slightly reduced in size (to still show bingo card in background) to prevent users from distress thinking they had left the bingo card completely by enlarging the number.

Mint green, fire engine red, and black are used for various elements on the two bingo card screens pictured. Black phone frame surrounds each screen.

Bingo card was resized to be completely above the fold and provide a smoother experience.

Mint green, fire engine red, and black are used for various elements on the two bingo board screens pictured. Black phone frame surrounds each screen.

Bingo board was resized to be completely above the fold.

Finishing Game Too Quickly

No chance of winning remains for seniors who clear their card too soon in many bingo products commonly available.

In CareBingo, users confirm on a separate screen containing a disclaimer whether they still desire to leave the game or clear their card.

Also, a future CareBingo feature I would add and test is to save all cards from games users leave or clear by default and provide a recovery option.

Mint green, fire engine red, and black are used for various elements on the two disclaimer screens pictured. Black phone frame surrounds each screen.

Page with warning and disclaimer slows users down, preventing them from regretfully losing their winning chances.

Making Text Input Fields Accessible to Color Blind

During iterations, I tested the ability for a color-blind person to perceive the text input fields in different states (default, active, error, etc.). The input fields of the first prototype failed as it used color only to differentiate.

Both borders and supporting text were added to improve the experience for all users.

With grayscale, eight text input fields are pictured, four more accessible than the others.

I can verify various text input field states are understandable for everyone using a grayscale.

Final Designs

Mint green, fire engine red, and black are used for various elements on the five bingo game design screens pictured. Black phone frame surrounds each screen.

Mint green, fire engine red, and black are used for various elements on the two bingo game design screens pictured. Black phone frame surrounds each screen.

Thoughts for Future

This project was fulfilling, providing real challenges from individuals in my community, yet educating, as I learned that usability studies can reveal initial designs need major changes to meet users' needs but are worthwhile to address.

In the future, I hope to integrate features that could resolve other frustrations users are experiencing in their community games. For example, I witnessed a senior's frustration over losing tickets of monetary value. Researching and integrating a digital monetary reward option or suitable solution to help players receive and protect their earnings has become a problem I'm now aware that bingo players at senior homes face.