Making school fun and memorable by gaming in-class
Educational mobile app design inspired by real-life teaching experience
↓ For the process
WHAT MAKES CRASH CARDS DIFFERENT?
Real Interactions
Crash Cards facilitates group games from your learning content. Players answer in real life, whether it’s shouting out, raising hands, writing down, or acting out, you decide.
Answers, Prompts, and Hints
Players take turns being the Coach. The coach reads the prompt and rewards points. Players listen to the prompt, look at the hint, and answer with each other.
Designed to match varying supplies
Pass one device around a group of players. Add another to stay stationary and display hints. Every player can use their own or even play with paper.
01
FOUNDATION
Creating and running effective activities for the classroom is time-consuming and challenging!
Teachers juggle a lot
...
It takes a lot of
...
energy to motivate a class full of diverse skills and emotions
...
consideration to accurately assess and address evolving needs
...
time to create lessons that are engaging and effective
A serious problem
“90% of members say feeling burned out is a serious problem”
From the classroom to the (digital) world!
This project was completed in two phases with each result below and the process detailed following.
Working as a teacher, I applied UX strategies to better understand the experiences and challenges of my colleagues and students to develop a successful classrrom learning game.
↓ For the phase one process
A year later, for the final capstone of the UX academy from Designlab, I create an MVP end-to-end app design to test if this solution can scale to teachers and learners around the world.
02
DISCOVERY
BACKGROUND
In January 2021, the midterm science scores came back disappointgly low for the primary students at the international school that I taught at. I grew a lot as a teacher over the seven years I worked there, but my studies in UX gave me tools and inspiration to tackle this familar problem.
Objectives
Understand teachers’ experiences in building their students’ retention of learning content
Observe activities aimed to build students’ retention of learning content
Prioritize features of an ideal classroom activity
Create and test activity with students
INTERVIEWS
The school has several campuses throughout the city with hundreds of teachers. When I found opportune times. I approached colleagues about discussing their experiences. I explained my goals and scheduled meetings with eight interested teachers.
Learning gaps
All teachers acknowledged significant portions of their students were not grasping/retaining learning objectives sufficiently.
Too much content, too fast
6 out 8 mentioned the amount of learning content and disparate subjects as a challenge.
Practical solutions only
All teachers expressed some distress over the workload. An activity that takes too much time or effort to prepare will not work.
“Unfortunately, I do realize some of my students have not got [the learning objective]. But we have to move on with the curriculum. I don’t have time to prepare more or go over things further. It sucks.”
- 3rd grade teacher
COMPETITIVE ANALYSIS
I picked three suggested activities from the interviews I conducted. My colleagues allowed me to observe them run the activity with their classes. I also tested them with my classes.
Students are most engaged in game-like activities where there is a fast pace and consistent engagement. However, ensuring all participants are active and content is meaningful is challenging.
03
DEFINE
SOLUTION
Develop a card game played in small groups
The rules and structure of games, especially played in groups, can superpower engagement.
CHALLENGE
How can I simplify resource creation?
The teacher must supply the cards to ensure the content is organized and of high quality.
KEY FEATURES
Clear
Interaction should be simple and expected from every group member. Otherwise, it is easy for certain students to be left out.
Social
There’s only one teacher, so they cannot be a necessary part of the engagement. Students are excited to work with each other.
Organized
The progression through the content must be organized so that it is covered in an effective way by all students.
04
DESIGN
THE TEMPLATE
I researched platforms used for creating custom flashcards, however they were not practical, so I created one on Figma.
Single-sided
Instead of waiting for double-sided printing, having the cards fold down the middle actually gave them more strength and durability to be used as playing cards.
Sized for easy printing and playing
Eight cards per page made the cards the perfect size for small hands to easily hold and sort through, as well as read text.
THE CARD
At first, I used the traditional flashcard layout. I realized that I could increase engagement by adding an element to the card design.
By adding a prompt to the backside, it turned the activity into a game with players listening, reading, speaking, and assessing.
THE GAMEPLAY
Set up
- Put the students in groups (based on their ability)
- Give each group a set of cards
- Divvy up the cards between group members
- Set a time limit.
Show and tell
One student chooses a card from their hand. They show the front clearly for all of the group to see. At the same time, they read the prompt from the back.
Give a card
The prompting student chooses the player who was the first to answer correctly and gives them the card.
Emphasize the answer
When rewarding the correct student, the prompter should verify by repeating the answer clearly for the group.
Rotate and repeat
After the time limit, player with the most cards wins
04
ANALYZE
REFLECTION
When I started to work on this project, I didn’t think of it as a UX project or intend on creating a case study out of it. I was trying to solve a problem that I was connected to. UX helped me approach it more curiously, systematically, and in the end, effectively.
A Year Later
I was ready to apply everything I learned and take this project to the next level. My goal remains to create an effective classroom routine for busy teachers. Now to make it a scalable solution.
Problem: Paper is not scalable
While teachers had no issue utilizing the resource and running the activity, configuring cards with new content was too challenging.
Solution: End-to-End app design
Make this tool accessible to the world with the scalable powers of the digital medium.
END OF PHASE ONE
START OF PHASE TWO
01
DISCOVERY
How important is it to run activities focused on building knowledge retention in students?
How important is it to run activities where students interact with each other without the need for teacher input?
How challenging (or time-consuming) is it to create materials for activities?
COMPETITIVE ANALYSIS
These first three platforms are popular applications aimed at teachers building review content and auto-generating games from that content.
Limitations
Every player needs a device
Answer by clicking
Weaker students are discouraged
Group play requires teacher involvement
The last example isn’t aimed at teachers or learning. Users can’t create any content, but they can play socially. And users love it, giving it a near perfect rating for the paid app.
Is this what student engagement should look like?
SECONDARY RESEARCH
The device-focused nature of the popular competitors reminded me of a common concern shared by many parents of students I taught over the years:
Overuse of devices detracts from important social interactions.
I found research on the topic that supported that this is a common concern amongst parents.
“At school, [parents] had additional concerns about technology being used to fill time and taking away from other educational goals like information retention and developing social relationships.”
02
DEFINE
SYNTHESIS
Don’t be the gameplay
Click or tap multiple-choice play seems a natural fit for gamifying learning. Essentially take a boring quiz and add some colors, timers, sounds, and a leaderboard on a screen and now it’s a game. It can really motivate students, at least the competitive ones. The problem is that tapping is an extremely limited form of interaction. Done socially and its just a race, and weaker students tune out as others rush to answer.
Facilitate the game play
The goal is to take the success of the social play I witnessed with the paper cards and combine it with the content creation tools of popular educational review apps to give teachers help creating and running effective activities.
KEY FEATURES
TEACHERS
Create cards from learning content
Break learning down into answers and prompts
Organize cards into decks
Organize cards into decks
LEARNERS
Practice alone or play together
Enter the deck code to play and review its content
Players are guided through gameplay
Players are guided through gameplay
CLASSROOMS
Play with varying supplies
Print the deck and play with paper
Or play with 1 or multiple devices
Or play with 1 or multiple devices
FEEDBACK
I presented the concept to my group crit as well as my mentor. I realized that since this would be most effective for younger students, I needed to structure the design so that it is both fun and easy to understand. In explaining the gameplay, I realized challenges with using one or multiple devices.
Challenges
How will young players know what to do?
How do the two sides of the card work on one device?
How can players start a game together?
03
DESIGN
SOLUTIONS
Instruction Screens
Large simple text and confirmation buttons to ensure players know who is up and what to do
Large simple text and confirmation buttons to ensure players know who is up and what to do
Hint Controls
When playing with one device, active player has a button to flip views and show either the answer or hint “sides”
When playing with one device, active player has a button to flip views and show either the answer or hint “sides”
Special Codes
For using multiple devices, users can host a room and generate a unique code for others to join
For using multiple devices, users can host a room and generate a unique code for others to join
Inspired by a popular game my students played
BRANDING
I wanted a super simple home page for students to only have to enter the game code and start playing. I also wanted some way to illustrate that this is meant for social playing and young learners.
I received positive feedback for the monsters I used, and after several iterations I arrived at a minimalist and inviting homepage design.
ITERATIONS
Sketches
For content creation, I looked to popular flashcard apps for ideas.
I took inspiration from Quizlet’s minimalistic card design.
I considered what views and actions would be desired for mobile use for teachers.
Need to be able to quickly search through decks, as well as add, edit, and delete cards.
First Draft
From feedback on the sketches, I created low-fidelity mock-ups.
Added a way to expand and condense all cards listed.
Added an edit button on expanded card, switching it to an editable mode.
While editing, added icons and better default text to illustrate purpose.
Crossroads
I presented difficult design decisions to peers and built a mid-fidelity mockup to test
Voting was pretty divided over deck cards, but discussion revealed another option: a stronger share button with text and border.
There was a clear preference for light colored buttons.
Using action words for the button text was favored.
04
ANALYZE
USABILITY TEST
Four respondents performed a series of tasks with the prototype and shared their expectations and impressions.
How simple were the tasks to complete?
How useful do you think Crash Cards could be in the classroom?
“I think it's a really great idea. I bet my students would love playing with something like this.”
“I love how you created an app that can be used in the classroom even when the students don't all have computers or phones with them. The app is pretty easy to use and it seems like students of all ages would be able to figure it out!”
Settings Page
Realizing the user needed a way to edit the title, details, and configurations of the deck, I decided to repurpose the edit-text-button.
Previously, I used it as a path to edit the card content. Feedback made me realize this is better through each card.
Preview Cards
Since the views are so different, teachers need a way to preview the gameplay view from their deck creation screens.
Teachers would want to be able to quickly select any particular card to view. I didn’t want the cards to look too busy, so I replaced the edit-icon-button with a preview-icon-button.
Drag to edit
I created a drag action on the cards to reveal the edit button. Tapping that opens the edit mode for all the cards, retaining fixed on the selected card. From here, repeating that drag behavior now reveals the delete button.
Reveal Hint
When playing with one device, the coach needs to read the prompt and reveal the hint separately. That’s not necessary when using more than one device, however, I realized it might still be desired. Now, teachers can set whether it automatically displays or the coach reveals it.
Hide answers
To help keep the answer more secure, one respondent recommended adding a way to hide/reveal the answer when playing.
Gameplay options
One important insight came from a teacher who asked whether it’s possible to turn off prompts or hints. My focus and excitement was on how prompts and hints could be used together. But discussing with her opened my eyes to a new possibility.
Turn off prompts or hints
I became aware of use cases where turning off prompts or hints would be helpful.
This in turn made me realize play was not limited to shouting out answers.
Key insight
With Crash Cards organizing the content creation and gameplay, teachers can explore ways to set up their gameplay, whether learners are shouting out, raising hands, writing down, acting out, or more.
INSIGHTS & FINAL CHANGES
05
CONCLUSION
REFLECTION
The eureka moment for this project was to have players check and reward each other, leaving the ansewring external to the device. With paper cards, this allowed for more social and exciting gameplay. Using the device allows teachers to create, organize, share, and play their decks.
I hope to take this project even further in the future, and produce a functioning MVP that can be tested with students.
Features to Explore
Enter QR code to play
Load cards from .csv or .xls
Remote ways to play
Student accounts
