Reimagining Collaborative Studying — Playtest

An online learning tool that connects students with their coursework and peers

Background

This past year, the COVID-19 pandemic has caused a massive transition from physical spaces such as schools to digital platforms like Zoom. Due to the lack of physical and social interaction, remote learning has made it difficult for students to connect with both their coursework and their peers.

Our client project aims to redesign the remote learning and collaborative studying process through a platform called Playtest, 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. Over the course of six weeks, we collected user research and created sketches and prototypes which we user-tested, to create our final design.

Meet the Team

The Process

User Research

Our first stage was user research. To collect data to brainstorm potential ideas for our product, we conducted competitive analyses of two online study platforms, surveyed 58 high school students, and conducted 5 user interviews.

Competitive Analysis

The platforms we chose to look into were Quizlet and Duolingo. From our competitive analyses we found that people didn’t like Quizlet’s lack of support for STEM subjects. For example, with classes such as math and science, students didn’t find the flashcards on Quizlet to be beneficial. There was an inability to input equations and diagrams, and students found Quizlet’s flashcard set up to be mainly memorization-based, which doesn’t work well with STEM. On the other hand, we discovered that users enjoyed Duolingo for its gamification features such as their badges and rewards system, which created friendly competition and motivated users to keep using Duolingo.

Surveys

We surveyed 58 high school and college students using a Google form survey. Through our survey we aimed to identify study habits and study preferences of high school students. The demographics for our responses consisted mostly of college students, and through the survey we were able to determine what study platforms/apps they use, what they like and dislike about different study platforms, as well as preferred study methods. We also received responses on different gamification techniques that students prefer that make them learn more effectively.

Some of the main findings we were able to gather from our surveys were that students strongly favored practice problems and accessibility, and wanted a way to track their progress. Most importantly, we also determined that high schoolers use learning games more than college students, so we narrowed down our audience to just high school students.

User Interviews

To get more in-depth insight into our users’ pain points and needs, we conducted 5 user interviews. A key insight we discovered in 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.

Problem Statement

After our research stage, we synthesized our findings by summarizing them into insights, and then grouping them by common themes. From these themes, we brainstormed potential “How might we” statements and combined them into three separate statements which we used to ideate, along with one main statement, which was “how might we accommodate for multiple types of learning in a collaborative and engaging way for students?”

Ideation

Ideation consisted of our initial ideas sketched out. We wanted to address three main questions:

How might we encourage the application of material rather than just memorization?

How might we make flashcards more effective for different study needs and methods?

How might we motivate students to study collaboratively?

As a result, we came up with three main features for the platform: working on flashcards collaboratively, a social aspect allowing students to easily collaborate and play with their classmates, and support for special notation like stem elements or diagrams into the flashcards.

Prototyping

After the initial ideation and sketches, we started on our mid-fidelity prototype and came up with the initial layout of the Playtest website. In this step, we narrowed down our focus to the development of the home screens, the notes to flashcard feature and the fill in the blank game feature. Additionally, we met with our clients each week to discuss our ideas and get input on their ideas for the interface.

User Testing

To receive feedback and test our solution, we presented our mid-fi prototype to our clients, other designers, and potential users to get different perspectives on our project.

First, our clients suggested that to make our homepage more dynamic and personalized, we could include a dashboard with insights that allow students to view statistics such as their most studied subjects, as well as track progress on goals/achievements.

Next, we got critiques from fellow DI cohort members. From their feedback, we found that the “purpose” of the features was a bit ambiguous due to the lack of visual clarity. For example, they mistook the feature to create flashcards from a PDF for a feature to take notes and annotate on PDFs.

From our user testing, when navigating through the platform, our users noted that there was a lack of visual feedback when completing an action, making it difficult to intuitively figure out where to go next.

Based on our feedback, we implemented changes shown below in our final design.

Final Design

Our homepage is a dashboard where students can choose between various actions. Students have the ability to create flashcards, play games, view their folders, recent activity, and track progress and goals.

The main feature we focused on was creating flashcards from notes. To create a flashcard from notes, students need to select a term and definition, but can add additional information such as notes or examples. To view the study set we created, we’ll click the View Cards button on the top right.

Here we see a completed version of the flashcards we created from our notes. Students can also view add-ons that they created for each flashcard. Clicking the top right button will allow them to go directly into Play mode.

Play Test would not be the same without games. To accommodate for players of all types, we’ve also included an ability to switch between multiplayer and single-player options.

Once all players are ready, the game will start. What’s awesome about this game is that this comes DIRECTLY from the diagram screenshotted from our flashcards. Simply select the molecule and fill in the rest of the diagram. Once the game is complete, it shows a leaderboard of the current game.

Looking at the notes to flashcards creation process, most importantly, through PlayTest, Converting your 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 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

Takeaways

During this cohort project, we learned how to work as a team, as well as how to work with clients. Our main focus for this project was to balance between adapting to both client and user needs. To achieve this, we shifted our focus creating multiple features to cater to each user’s needs, to developing and adapting one feature to fit multiple needs. Due to the six-week time constraint, we also learned to focus on the core concept of the product in order to maximize efficiency.

What’s Next?

In the future, we would like to further refine details and logistics such as the option to create a diagram from a PDF. Additionally, we want to receive more feedback by conducting more in-depth user testing where we would give the users different “goals” instead of having them try to navigate through one predefined path. Finally, we want to expand our platform and make it more in-depth by adding new features and expanding the game library.

Check out the full design on Figma →