Gamifying the learning experience for students

Launch Prototype
Salesforce Title Image
Overview Image

Project Details

My Role:

Product Designer


Figma, Notion, Zoom, Google Drive


6 Weeks


Design Interactive- Jamie C, Rochelle D, Joanna L, Michelle L


PlayTest is a learning platform designed to make learning fun by gamifying the experience. Our client, PlayTest pitched to us with a broad idea of the student learning platform for STEM students, which we broadened to an online learning tool for high school students to learn and engage with content and their peers in a fun and exciting way, while facilitating healthy competition and good study habits.


To collect data to brainstorm potential ideas for our client’s product, we conducted competitive analyses of two online study platforms- Quizlet and Duolingo, surveyed 58 high school students, and conducted 5 user interviews.

Competitive Analysis:

  • Quizlet’s flashcards were memorization-based and lacked support for math and science classes
  • Duolingo facilitates friendly competition and motivation through badges and rewards


After surveying 58 students, we found that students:

  • strongly favored practice problems and accessibility
  • high schoolers use learning games more than college students
  • wanted a way to track their progress

User Interviews:

To get a more in-depth and personal insight into our users’ pain points and needs, we conducted 5 interviews via Zoom with high school students.

“A lot of subjects are more about application, as opposed to memorizing vocabulary words or recognizing structures.”

A key insight we discovered from our interviews was that students prefer application-based studying rather than memorization.

Using this insight, we wanted to focus on how we can distinguish PlayTest from other learning platforms, and accommodate different learning styles to encourage application-based learning.

Synthesis + Ideation

To synthesize our research findings, we created an Affinity Map of key insights, writing down sticky notes of our findings, and then organizing them by categories of similarity.

For each category, we created an overarching “How might we” statement that had the potential to solve our questions.

Synthesis Stickynotes

Based on our research findings and affinity mapping, we further refined our “How Might We” statements into three main subjects to develop features for. These included:

  1. How might we motivate students to study collaboratively?
  2. How might we make flashcards more effective for different study needs and methods?
  3. How might we encourage the application of material rather than just memorization?

These would then be encapsulated in our main How Might We Statement.

How Might We? Diagram

Problem Statement

“How might we accommodate multiple types of learning in a collaborative and engaging way for students?”

Solution Sketches

Using our problem statement as an outline, we worked together to create a userflow of the product


To begin brainstorming potential solutions, each team member created sketches.

solution sketches

We then met internally discussing our solutions with one another, explaining our thinking and how it related back to the problem statement. After presenting these to our client, we were able to narrow down 3 core aspects to making PlayTest:

  1. Working on flashcards collaboratively
  2. A social aspect that allows students to easily collaborate and play with their classmates
  3. Support for special notation like stem elements or diagrams into the flashcards


Due to the project's limited six-week duration, we narrowed down the scope of our project, focussing on the development of the home screens, notes to flashcard feature, and fill in the blank game feature. We then sketched out potential solutions to each focus.

Mid-Fidelity Sketches

After meeting with our client to share our thinking and get their feedback, we created mid-fidelity screens, adding a layer of visualization and fidelity that would further establish the product to our client.

User Testing

To put our solutions to the test, we conducted a round of usability testing with our client, other designers, and most importantly, our target audience, high school students.

A major piece of feedback that helped enhance the homepage was turning it into a dashboard rather than a library of class folders.

We received confused reactions about the “Flashcards from Notes” feature with most users assuming that the feature was only for annotation/note-taking rather than a way to create flashcards.

During user testing, students noted that there was a lack of visual feedback when a task was complete, unsure where to click and what each button or action did.

“I don’t really know where to press first… It’s hard to tell what parts I’m done with and what part I’m on.”

High Fidelity

Using the feedback we received from user testing, we implemented these changes into our final designs.

Home Screen

To motivate students to learn collaboratively, we wanted our home screen to clearly illustrate the main aspects of PlayTest, learn and play - which can be seen from the two main action items: Create Flashcards and Play.

Additionally, we added the insights section that analyzes students’ study habits and allows them to set and track academic goals and progress. Below that we incorporated a rewards system through badges to encourage students to keep learning and gamify the overall experience.

On the bottom right, we incorporated a social activities bar so students can see what their friends are playing.

Overall, with the social sidebar, goal setting, and insights, Playtest motivates students to work harder and learn collaboratively.

Notes to Flashcards

To achieve our goal of making flashcards more effective for different studying methods and needs, we implemented notes to flashcards function.

Through PlayTest, Converting notes to flashcards has never been easier.

To create flashcards, students can select a term, definition, and add notes or examples from their textbook.

In response to some of our user testing results, we made the flashcard creation process more intuitive by adding direct feedback along the way. Students are now visually prompted with color-coded dots as they create each flashcard.

When viewing the complete set of flashcards, the add-on information is shown on the right. For accessibility and ease of use, users can reposition the menu bar when creating a flashcard.

Game Lobby

To put the Play in PlayTest and encourage students to apply their learning material rather than memorization, we turned students’ notes such as diagrams from the flashcards sets into games.

We also implemented a social aspect that allows students to see which friends are currently in-game or active online. This is especially helpful for students who want to play games in multiplayer mode, allowing for the options of independent studying or friendly competition.


Due to the six-week time constraint and being a remote team, we learned to focus on the core concept of the product to maximize efficiency.

The hardest part of this project was finding the perfect balance of adapting both client and user needs. Instead of creating multiple features to cater to each user’s needs, we adapted one feature to fit multiple needs.

Given more time, we would have liked to conduct a final round of user testing. This would have helped us learn whether or not our updated solutions from round 1 of user testing were successful.

A huge thank you to my team at Design Interactive: Jamie, Joanna, Michelle, and Rochelle. Lastly, thank you Katie and Sandra for allowing us to help bring their idea of PlayTest to life.