COMic Con Bingo

Project Overview
As part of a class project, I conceptualized and designed "Comic Con Bingo," a multiplayer scavenger hunt and bingo app tailored for convention attendees. The primary goal is to provide entertainment during downtime and offer a chance to win real-life and convention-related prizes. I aimed to address the needs of convention attendees seeking engaging activities that align with their interests.
Role
UX/UI Designer
Tools
Figma, Adobe Photoshop

Understanding The Concept

Comic Con Bingo would be an exciting mobile app designed to engage convention attendees and enhance their convention experience. Through gamification and a scavenger hunt-like gameplay, users would explore the convention venue and discover unique elements, allowing for interaction and enjoyment.

The logo for the app created in Adobe Photoshop

User Need Statement

This app caters to the needs of convention attendees seeking entertainment during downtime while attending a convention. They desire an engaging and rewarding activity that aligns with their favorite comic, movie, show, or game.

Crafting User Flows

Using the user need statement, I went on to create the user task flow of the app. This was designed to give a seamless and enjoyable experience for users. Upon opening the app, users would click to join a game if one was available and would be presented with a random bingo card showcasing various elements found at the convention. The challenge consists of identifying and capturing these elements in a photo within a given time frame, turning the bingo experience into a timed scavenger hunt.

The user flow of the app

While in a game users will click on items on their bingo card, leading to a pop-up prompt where they could take a photo or upload a previously taken one. This approach not only ads excitement but also encourages attendees to explore the entire convention. Winning requires being the first person to achieve five in a row and allows them to win real-life, convention-related prizes at a Comic Con Bingo booth at the venue. For those not winning the round, they will return to the home screen and wait for the next game, ensuring continuous engagement throughout the event.

Visualizing The Redesign

Using the user flow as a starting point for the direction of the app, I started on creating some low fidelity wireframe sketches on paper.

Early-stage lo-fi wireframe sketches

Using the user flow as a guiding material for the app design, I started on creating some low fidelity wireframe sketches. In the lo-fi wireframes, I sketched out a minimalistic, intuitive interface. I wanted the design to stay simple and create focus on visual hierarchy and straightforward interactions, ensuring that all players can easily understand the game mechanics. The design prioritized user-friendliness and accessibility, allowing attendees to seamlessly navigate the app while having fun.

As the wireframes went from low fidelity to medium fidelity, I focused on refining the visual elements while incorporating user gestures for dictate seamless interaction. Iterative design with the feedback from my peers played a big role in enhancing the design.

Some medium fidelity wireframes with related gestures

Visual Design Mood Board

In order to proceed on to creating high-fidelity wireframes, I needed to understand what kind of colors and moods I wanted the app to convey. To bring the ideas of comics, gaming, and excitement into the app, I curated a mood board for the app's visual design with vibrant colors that are commonly found in traditional comics, comic-style illustrations, and elements that give a sense of convention culture. The mood board served as a reference point, guiding the app's aesthetics so it resonated with the users' passion for comics and pop culture.

Mood board created in Figma

Putting It All Together

In the high fidelity wireframes, I applied the final touches including color and styling based off the mood board, bringing the app's design to life in a full prototype created on Figma. Attention to detail, such as button animations and transition effects, contributed to the overall sense of excitement and immersion, capturing the fun convention experience for app users and convention patrons.

Attention to detail, such as button animations and transition effects, contributed to the design's sense of excitement and immersion, capturing the fun convention experience for app users and convention patrons.

Reflection

Creating this app from a simple concept to high-fidelity wireframes was a very insightful experience that showed me the importance of thoughtful design when creating prototypes from the very beginning stages of a project. As a class project, I wanted to create a fun app for convention-goers like Comic Con attendees. Throughout the process, I paid close attention to user needs in order to make sure the app aligned with potential users interests and preferences. From lo-fi wireframes to vibrant mood boards, I was able to make the visual UI of the app similar to comic-style illustrations and visuals. The high-fidelity wireframes added the finishing touches, making the app feel immersive and engaging. I'm very happy with the outcome and hope this can someday become an actual app!