National Park Bingo Quest

Interaction Design
mobile
User Interface
Game Design
Enhancing Park Visits with Engaging 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.

MY ROLE
Interaction Designer
User Interface Designer
TIMELINE
September - October 2023
TOOLS USED
Figma
FigJam
Mockup App
IDEATION: FROM CLASSIC TO INNOVATIVE
Brainstorming | Sparking Ideas

Although this is a solo project, we started the process by convening in a group brainstorming session. Group brainstorming sessions ignited diverse ideas, inspiring me to create a unique solution for national park visitors.

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 turns the classic bingo game into a personalized itinerary, offering a 4x4 grid where users fill in photos and videos of landmarks and activities. Completing quests rewards users with badges and digital mementos, and contributes to the National Parks Foundation.

User Need Statement

National park visitors with limited time need a recommended list of top landmarks and experiences for an enjoyable and immersive visit.

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.

VISUALIZING THE EXPERIENCE
Sketching: Bringing Ideas to Life

Using the Mockup App, I visualized the user task flow with sketches, adding contextual frames and potential micro-interactions.

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: Structuring the Interface

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
Moodboard: Setting the Visual Tone

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
THE RESULTS
High-Fidelity Wireframes: Bringing Concepts to Life

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

Experience the prototype in action through a recorded video or test the interactive Figma prototype.

MOVING FORWARD
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 ;) "

- REBECCA TEGTMEYER
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.

BACK
TO TOP