Many high schools offer summer debate workshops, but they're limited by physical space and budget. In-person formats restrict the number of participating students and incur significant costs for venue rentals, transportation, food, and accommodation. This excludes many interested students due to accessibility and affordability.
Empowering Students Through Digital Transformation
This is where our digital solution comes in. By transforming the face-to-face experience into an engaging mobile app, we aim to:
Expand reach: Serve a wider student audience beyond geographical limitations.
Lower costs: Eliminate physical venue expenses for schools and streamline delivery.
Increase inclusivity: Break down financial barriers and cater to students who couldn't participate previously.
This case study showcases how we took this educational game from the field to everyone.
My Responsibilities(Freelance UX Designer)
Wireflow
Wireframe Design
Client
Jingil Co.
Industry
Game & Education
B2B
Summer debate workshops in high schools are a great idea, but they have limitations. They can only hold a small number of students because of space limitations. Also, renting a place, transportation, food, and other things cost a lot of money. This means many students who want to participate can't afford it or can't get there.
Expand reach: By offering a digital platform, we enable students from different geographical locations to participate in debate workshops, breaking down barriers related to distance and transportation.
Lower costs: Eliminating the need for physical venues reduces expenses associated with venue rentals, transportation, and accommodation, making the workshops more affordable and accessible to a wider range of students.
Increase inclusivity: By providing a digital solution, we ensure that financial constraints do not hinder students' participation. Providjng access to debate workshops without the limitations of physical space and financial constraints.
We started by answering some questions about our target user:
Who: Our user group is high school students interested in learning and practicing debate skills whom inrolled in the "Art of Debate" workshop.
Location: Users will likely access the app on their smartphones or tablets in various locations, such as at home, school libraries, or during specific times planned by the mentors.
Needs: High school students likely need the app to be:
Engaging: The app should be visually appealing, interactive, and hold their attention.
Easy to Use: The app's interface needs to be intuitive and clear, allowing them to navigate features and understand game mechanics quickly.
Supportive: The app should provide learning resources, feedback mechanisms, and opportunities to practice various debate strategies.
Social: Social interaction features like connecting with peers or participating in online debate duels, like and share other students cards, ... .
We knew our users needed a debate app, so we created a web app to work on any device within our tight budget. Our goal was to recreate the real debate experience digitally, as seen in classrooms. Students hear a story with different sides arguing for solutions. They choose a side and write "cards" to explain their arguments, using these cards to "duel" with others. Classmates vote for the best argument, teaching students how to write strong debate cards and follow debate etiquette.
Making this digital was a challenge! I researched similar games for ideas, then our team brainstormed and documented our plan. I created the user flow out of this which you can see in below.
Game map, explaining each level and different actions available in the game.
During sthe wireframing phase, I focused on creating layouts for two different screen sizes: mobile and desktop. To capture the feel of a lively debate chatroom, I drew inspiration from popular high school social apps in Iran, like Instagram and Telegram, plus doulingo at the client's request.
The Game's Core Flows:
The game revolves around three main flows:
Scenario: Here, players explore the story and different viewpoints.
Voting: Players vote for well written arguments.
Duels & Judging: Players engage in debates and judge their peers' arguments.
We'll dive deeper into these flows in the next section.
Home screens which explains scenario progress throughout the game.
The game unfolds like this:
Start with two characters and write argument cards to support your chosen side.
Use these cards in duels (explained later!).
By participating in votes and duels, after passing some time, you unlock new characters.
Watch a quick educational video to learn more about debate strategies.
After unlocking, you can switch sides or stick with your original choice.
Go back to the first step until there is no more character to unlock.
The End.
Initially, we considered a Tinder-style swipe mechanic for quick voting, but after client discussions, we shifted to a design that better fits the gameplay: comparing and selecting the stronger argument.
The final voting screen lets players "like" and save the best argument cards for future duels. Most cards will align with the player's chosen side, but every five rounds, we include one card from the opposing viewpoint. This ensures players see diverse arguments and are better prepared for debates.
P.S: Since this product hasn't been launched yet and was done for a client I am not allowed to share the final UI designs here yet.
This was my first ever experience in game design, and despite initial hesitations, I dove headfirst into the project. I spent two days exploring similar games, so I could apply to my own creation.
Ultimately, I'm incredibly happy I faced this challenge and did my first freelance job. Stepping outside my comfort zone proved immensely rewarding and thought me valuable lessons in working with a team which is not mine.
You may also like: