💡 Overview
Hit the Buzzer! is an app that I developed for my solo student project in my Special Topics in UX Design class. My interest in gamification drove me to create this app, as I find that gamification enhances user engagement.
In my free time, I work part-time as a Korean teacher for Thai students. I found that I really enjoy providing techniques and experiences to my students. However, learning new languages can be hard and challenging, leading to burnout. Therefore, I want to use that experience to create gamification in an educational context, aiming to make learning an enjoyable experience
The inspiration for Hit the Buzzer! came from the Thai famous YouTuber Kuen Kru Pai Yang (which means "Are you still remember this?"). I found it entertaining when the host asked a question and allowed participants who hit the buzzer to answer. This experience sparked the idea that creating an app with a similar concept could be both enjoyable and educational.
Role
UX/UI designer
Duration
2.5 weeks
Platform
Mobile
Tools
Figma, Illustrator
☄️ Problem
While teaching and asking questions, I always observe my students and have identified two significant problems
Finding ⤵
- Lack of Engagement in Class: Traditional teaching methods may struggle to capture students' attention, leading to disinterest in the learning process.
- Guessing Behavior: I tried to use some existing learning applications with my students but some of them tend to guess answers hastily during competitive question-answering scenarios where response speed impacts scores. This behavior can result in overlooking the actual content of questions and neglecting careful consideration of answer choices
🌟 Solution
As a UX designer, my goal is to assist users in learning while making it enjoyable and to decrease guessing behavior when answering questions. I aim to achieve this by developing an application with a buzzer feature that requires users to hit the buzzer before answering. If a user hits the buzzer but provides the wrong answer, they will lose points. Therefore, users need to ensure they are confident about their answer before hitting the buzzer to avoid losing the game.
🪄Additional feature
While trying to solve the problem, I considered additional features that could be added to this app to make it a comprehensive learning application rather than just a gamification
Users can learn random knowledge by discovering pre-made decks within Hit the Buzzer! and challenging with specific players or random matchmaking options.
Users can customize their avatars and also take on challenges to acquire more items, motivating them to learn further
Users can collect trophies in any deck, and inspiring them to learn more across other decks as well
🧑💼 Persona
After defining the solution and additional features, I identified two distinct personas to gain a deeper understanding of users' motivations and goals. The first persona is Jenna, a teacher seeking to create enjoyable classes with increased student interaction. The second persona is Kevin, who loves to spend his free time learning new things.
📚 Information Architecture
🎮 Game flow
🖍️ Sketching & Wireframe
After understanding all aspects of the application's process, I translated my ideas into a digital wireframe. This process involved capturing images of each screen, providing a visual representation of the user interface and the overall structure of the digital product
🛠️Design system
I aim for users to recognize Hit the Buzzer! as a game rather than a learning app. To achieve this, I designed the UI to be playful and user-friendly, using bright colors for a lively and enjoyable visual experience. Additionally, I selected typography with a gimmicky effect commonly seen in games
🖼️Mock up
🔗 Prototype
- Friendly greeting & motivational prompts
- Join rooms via pin or QR code
- Engage with players by selecting preferred decks
- Play now with random decks
- Drafts auto-saved if creation isn’t completed
- Set response times & scores per question
- Create questions with multiple answer formats
- Preview all questions before sharing
- AI recommends decks based on playing history
- View deck info: sample questions & total questions
- Join as player or observer
- Create rooms for teams or individual challenges
- Instructions displayed in waiting room
- Points shown for correct/incorrect answers
- Live points & leaderboard updates after each question
- Final summary & leaderboard at game end
- View gameplay history & scores
- Display earned trophies & highlight missing ones
- Personalize avatars
🧪Testing
Participants: 10 people (ages 15–35, various occupations, enjoy mobile games)
Method: 1:1 interviews
Task
- Explore homepage
- Play game
- Create a game by using existing deck
- Create own deck
- Explore profile page and personalize avatar
Finding ⤵
- Easy to use
- Feels fun like a game, not an educational app
- Trophy collection motivates users
- Users enjoy avatar personalization
- Make buzzer, timer, questions more visible
- Add answer explanations
- Show requirements for earning trophies
- Allow sending text/emojis in-game
- Support rooms with more than 6 players
🗝️ Key takeaway
- Inspired by usability testing: This solo project required me to design from an ideal state without the influence of team opinions. Therefore, conducting user testing with a diverse range of scenarios provided valuable perspectives that I might have missed. This will help me improve the app in the future.
- Time management learning: Due to time limitations, I realized the importance of project and time management skills in establishing clear goals and staying on track with various tasks. In conclusion, this project not only allowed me to design the app from an ideal state on my own but also provided valuable lessons in time and project management that will benefit my future endeavors.