National Park Bingo Quest

Interaction Design
User Interface
Game Design
National Park Bingo Quest is an interactive mobile game designed to enhance users’ national park experience by transforming the classic bingo game into a personalized itinerary of park landmarks and activities.

In my Interaction Design course, the first project presented quite a unique challenge: to transform the classic game of Bingo into an engaging mobile interactive experience. This case study documents my creative journey, from the initial ideation to the development of a high-fidelity prototype.

Interaction Designer
User Interface Designer
September - October 2023
Mockup App
Brainstorming | Traditional to Alternative Forms of Bingo

Although this is a solo project, we started the process by convening in a group brainstorming session. This helped in sharing different ideas and thinking creatively. We focused on coming up with new ideas for the bingo app, including what content to include, who would use it, and the potential use cases of the app.

Step 1: Brainstorming. I have always enjoyed group brainstorming sessions. They are fascinating and inspiring, as it's intriguing to see the diverse ideas and possibilities that others envision. CREDITS: J. BAYONETO, V. CHEN, G. SEIDE | INTERACTION DESIGN FS2023

After brainstorming and exchanging ideas with each other, we each had to choose our concept individually. The ideas my group generated reminded me of a memorable weekend trip to Yosemite National Park with friends.

I was struck by the challenge of experiencing all its magnificent trails and landmarks in such limited time. This adventure not only left a lasting impression but also ignited a creative solution to a common problem faced by many park visitors.

Inspired by this experience, I envisioned an engaging and innovative way to help travelers make the most of their park visits, regardless of the duration of their stay. This inspiration led to the development of my concept, National Park Bingo Quest.

Some national park visitors find themselves pressed for time during their visit. They desire an itinerary that balances a rich exploration with their time constraints, ensuring each visit is both enjoyable and memorable. My project focuses on creating a solution that meets these specific needs, enhancing the overall national park experience for time-bound visitors.

Concept Statement

National Park Bingo Quest is an interactive mobile game designed to enhance users’ national park experience by transforming the classic bingo game into a personalized itinerary of park landmarks and activities. Tailored for visitors with time constraints, the app offers a 4x4 bingo grid where users can fill in photos and videos of landmarks and activities from their explorations. It serves as a curated guide, suggesting essential park experiences.

Whether staying for a day or a whole week, participants of different skill levels can unlock unique bingo games for each national park they visit. Completing a park quest rewards users with badges and a curation of their media as digital mementos. Moreover, each earned badge contributes a $1 donation to the National Parks Foundation, supporting the conservation of our nation’s most cherished landscapes.

User Need Statement

National park visitors who have limited time to explore needs a short list of recommended top national park landmarks and experiences they can visit and still have a fun, enjoyable, and immersive experience given their time constraints.

User Task Flow

The app takes the user through a series of interactive steps, beginning with the game unlocking based own the users' location. Users then proceed to personalize their experience by selecting their skill level and trip duration, followed by an engaging, yet optional, app tour led by the character "Park Ranger Bean" and eventually participating in a curated bingo game tailored to their visit. The completion of the game leads to rewards and contributes to a larger cause, symbolizing the app's commitment to both user engagement and environmental conservation.


To bring life to my user task flow, I used the Mockup App to help visualize my idea through sketching. Throughout this process, I tried to stick to the main journey points in my flow but I also added frames that are not considered as major interaction points but helps contextualize the user journey.

For example, although I don't have to explore the other features of the app, I still include a Home Screen to illustrate how a new Bingo game unlocks based on the user's location and how the user can start a game. I also added notes about possible micro-interactions I can add in the prototyping stage as the ideas come up while sketching.

Sketches. Sketching helps me turn my abstract ideas into a more tangible form and helps me in figuring out the flow of the system since they are low-stakes, easily changeable, and iterative. J. BAYONETO | INTERACTION DESIGN FS2023
Medium-Fidelity Wireframes

In transitioning from initial sketches to a more refined user experience, I jumped into the creation of medium-fidelity wireframes. This phase was pivotal in sculpting the spatial dynamics and content hierarchy within the app, aligning closely with the user journey we had mapped out. Key considerations during this stage included:

Architectural Coherence
I meticulously matched critical touch points in the user task flow with corresponding screens, ensuring a seamless narrative across the interface.

Pattern Utilization
Employing familiar design patterns, I integrated elements like navigational tools, input/output fields, and social sharing features to enhance user familiarity and ease of use.

Structural Hierarchy
Leveraging the grid system and principles of Gestalt psychology, I organized the interface to intuitively guide user attention and interaction.

Interactive Dynamics
I incorporated swipe gestures, aligning them with the native gestures of the mobile platform, to create an intuitive and fluid user experience.

Responsive Feedback
Designing micro-interactions was a key aspect, as these subtle responses to user actions serve to enrich the overall usability and engagement.

Wireframes. I created my first wireframes using pen and paper then transferred them to Figma to create medium to high fidelity versions. Additionally, this class has taught me to add context for gestures and to start thinking of the interactions concurrently. J. BAYONETO | INTERACTION DESIGN FS2023

This mood board reflects my deep inspiration drawn from the vivid colors present in various American national parks. The palette captures the essence of their sunsets and sunrises, landscapes, and the diverse hues found in their native plants and animals, each park telling its own visual tale.

The typography resonates with the style used by the National Park Service, particularly in their iconic welcome signs. In terms of design approach, I've blended both flat and gradient UI styles, visible in the color choices and vector illustrations. These elements are a precursor to the design of achievement badges and other UI elements in the game.

Envisioning a full-scale, live app, I imagine unique designs for each national park, reflecting their individual natural beauty and character.

Moodboard. This is one of my favorite parts of the process and where I start to see the visual identity of the project come to life. I have always been an avid fan of creating mood boards, not just in design projects, but for basically anything in life that requires me to develop a clear path or vision. J. BAYONETO | INTERACTION DESIGN FS2023
High-Fidelity Wireframes

Building upon my medium fidelity wireframes and the visual identity I developed in my moodboard, I crafted high-fidelity wireframes in Figma to bring my design concept to life. A key practice I've embraced in my recent work is the integration of actual written content over traditional placeholder text. This commitment to real language is not just a visual choice but a functional one, as it significantly influences user interaction within the app.

Another noteworthy feature in these designs is the inclusion of the HIKE SAFE acronym, a set of safety guidelines from the National Park Service. This element isn't just informative; it's a crucial part of the user journey and safety before they dive into gameplay.

The wireframes also showcase a dynamic background that changes based on the time of day. In a potential live deployment, I envision this feature reflecting real-time local weather conditions, adding another layer of immersion and utility.

Pushing the boundaries of the project brief, I also included an interactive widget featuring Park Ranger Bean. This character isn't just a fun addition; it serves as a guide for users to help track their hiking activity metrics, provide weather updates, and offer essential safety tips like hydration reminders.

Live Prototype

For your viewing convenience, I recorded a video to show my prototype in action. You can also test the interactive Figma prototype embedded along with it.

Feedback and Reflection

Reflecting on this project, my first deep dive into interaction design, I realized the value of focusing on the small yet important details, particularly micro-interactions. These small but impactful elements added depth and engagement to the user experience, teaching me the significance of detail in design.

The feedback from my professor was particularly enlightening. Her commendation not only supported the quality of my work but also indicated that it had set a new benchmark for the project. This feedback was both gratifying and motivating, pushing me to continue raising the bar in my future projects.

" Excellent work/progress and what a great portfolio piece you got out of this project! I appreciate your attention to details in the design + interaction decisions and your prototype turned out amazing. You just raised my bar for this project ;) "

Professor, Interaction Design
Michigan State University Fall 2023

Challenges and Lessons Learned

Interestingly, my excitement to work on the project brought up my tendencies to continuously expand the user journey, adding new elements beyond the original plan. While this iterative approach enriched the project, it also highlighted the need for balance, particularly when collaborating in a team setting and working on set deadlines and requirements. In future projects, I aim to use this creative expansiveness while maintaining a structured approach to ensure efficiency and cohesion within a team environment.

Next Steps

Looking ahead, the next steps involve refining my process for integrating micro-interactions and user journey development, ensuring they align with project timelines and collaborative workflows. This project has been a significant milestone in my journey as an experience designer, providing invaluable insights and a solid foundation for my future work in this exciting field.