PlayTest

An online learning tool where users can engage with content and their peers in a fun and exciting way, while facilitating healthy competition and good study habits.

As a design associate with Design Interactive, I had the opportunity to work with a team of three other designers and our two clients/developers to reimagine the collaborative studying process with PlayTest. I led the research and high-fidelity prototyping stage of the project and continuously communicated with my team and our clients to update them on progress and receive feedback. We also received feedback from other design associates in weekly design critiques with the other DI cohorts, while working under the guidance of a mentor. We presented our final product to 50+ other designers and peers, as well as a panel of industry professionals, and won the awards for Best Prototype and Audience Choice Favorite.

Role
UI Design & UX Research
Duration
April 2021 - June 2021
Design Team
Matthew Kwong, Jamie Chou, Joanna Li
Developers
Kati Tran & Sandra Soto
Awards
Best Prototype & Audience Favorite

But first . . . Why?

Overview

The transition from physical spaces to digital platforms has led to a lack of social interaction where remote learning has made it difficult for students to connect with both their coursework and their peers. Most online study tools view studying as an individual experience, rather than a shared experience or learning for fun.

Problems

  1. Lack of engaging and meaningful study platforms.

  2. Lack of connection.

  3. No support for STEM.

Solutions

  1. Encouraging individual study and fun, alongside online group accommodation.

  2. Study anywhere, anytime with anyone

  3. Offering better support for code, chemical symbols, math, and more.

There is a 34.75% increase in student performance with challenge-based gamification in education.
80% of learners say that they would be more productive if their institution was more game-like.

❓ Differences

What sets us apart?

  • There is no platform available that offers flashcards with native support for special notation.

  • Competitors were designed for classrooms in mind, while PlayTest encourages individual study and fun alongside large group accommodation.

  • Competitors were built for in-person play, so remote options aren’t as easily found (ex: having to stream Kahoot from a third-party).

👩‍💻 Stakeholders

  • Market Size

    75.4 billion - global edutech market size.

    1,800 million - projected size of the gamification in education market by 2023

  • Revenue Model - how will it make money?

    Monthly subscriptions for an ad-free experience and access to premium services and tools.

    This model already works! With less features and virtually no real competitors, Quizlet has proven that this model works.

🧑🔬 Target Market

  • Online Learners

    With every passing year, students become more and more inclined to use online tools for academic purposes as the use of technology in schools around the world continues to grow.

    65% – current student use of smartphones and laptops to complete homework

    STEM Students

  • The accommodation in flashcards for all types of notation STEM students may need.

    How STEM notation is represented on Quizlet and other platforms using a traditional keyboard.

Process

R E S E A R C H

User Research

I started by researching gamification apps, techniques, ideas, and other resources for learning tools in coalition with the user experience. After doing background research, I did a deep dive research into gamified learning apps that already exist, and decided to focus on qualitative data and interviews. To collect data to brainstorm potential ideas for our product, I conducted competitive analyses of two online study platforms, surveyed 58 students, and conducted 5 user interviews.

Competitive Analysis

Users don't like Quizlet's lack of support for STEM subjects.‍

  • There is an inability to input equations and diagrams.
  • The set up is mainly memorization-based, which doesn’t work well with STEM.

Users enjoy Duolingo for its gamification features such as their badges and rewards system.

  • Gamification promoted friendly competition and motivation.
From our competitive analysis we decided to focus on catering to STEM students and determining how we can gamify it in a successful way to support the field in a new and effective way.

Surveys

We surveyed high school and college students using a Google form survey to identify study habits, study preferences, and different gamification techniques that students felt were effective for them.

  • Students strongly favored practice problems and accessibility, and wanted a way to track their progress.
  • High schoolers use learning games more than college students.
While we initially were designing an app for all students, from our research and results, we narrowed down our audience to just high school students.

R E S E A R C H

User Interviews

To get more in-depth insight into our users’ pain points and needs, we conducted 5 user interviews with students. A key insight we discovered in our interviews was that students prefer application-based studying rather than memorization, and enjoy both studying alone and with others.

💡

Goal: How can we distinguish PlayTest from other learning platforms, and accommodate different learning styles to encourage application-based learning?

D E F I N E

Problem Statement

After researching, we created an affinity map to synthesize our findings, summarize them into insights, and then group them by common themes. For each theme, we brainstormed potential “How might we” statements to address the findings and pain points from that category.

Based on our user research and affinity mapping, we combined our “How might we statements” and defined them into three separate questions to focus on and solve.  

📍

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

I D E A T E

Sketching

To ideate our potential solutions, we each created sketches to address our “How might we” statements and addressed the three main questions.  
Michelle
Jamie
Joanna
Matthew
We discussed our solutions with one another and how each of our sketches aimed to resolve one of our "How might we?" questions, or our overarching problem statement.  As a result we came up with the three core aspects of PlayTest.

Design an online learning tool for high school STEM students to accommodate multiple types of learning in an engaging way and improve the individual and collaborative studying experience.

🤝 A new and efficient way to work on flashcards together and individually.

🎮 A social aspect that allows students to easily collaborate and play with their classmates.

🧬 Support for special notation, like STEM elements or diagrams, in flashcards.

P R O T O T Y P I N G

Mid Fidelity

User Flow

In this stage we came up with the initial layout of the Playtest website. With our problem statement and our three core aspects as a guide, we created a user flow of the product.

Mid-Fi Sketches

To take our 6 week timeline into account, we narrowed down our focus to a few key features: the development of the home screens, a notes-to-flashcard feature and the fill-in-the-blank game feature.

💬  User Testing

To test our solutions we asked our clients, other designers, and our target audience– high school students– to perform a usability test and "think out loud" in order to give us different perspectives on our project.

Some tasks that we asked our users to complete included:

  1. Create flashcards through notes (input photos, equations, diagrams, etc.)
  2. Play a game with the flashcards
  3. Use the 'Test' feature
  4. Create flashcards manually

"It would be cool to add a dashboard with statistics and recently played games or subjects studied."
– Client ideas

"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."
- User insights

    ✔️  

    Changes to make:

    • A more dynamic and personalized homepage – a dashboard with insights that allow students to view statistics such as their most studied subjects, as well as track progress on goals/achievements.
    • Visual clarity – the “purpose” of features was ambiguous and they mistook the feature to create flashcards from a PDF, to be a feature to just take notes and annotate on PDFs.
    • Intuitive design – when navigating through our platform there was a lack of visual feedback when completing an action, making it difficult to intuitively figure out where to go next.

      F I N A L  D E S I G N

      High-Fidelity

      🏠 Home Screen

      “Create Flashcards” & “Play” buttons

      The main features and action items of Playtest is the ability to both learn and play, with a collaborative aspect.

        Insights section

        Analyzes the user’s study habits and allows them to view their statistics, set academic goals, and track progress.

          Pinned folder

          The user's current folder of flashcard sets that they are studying the most for quick and easy access on the home screen.

            Badges

            Earn badges like "Cardmaker Badge" or "Studied a set 15 times." This gamification aspect of Playtest can serve as a visual indicator of the student's progress and is a reward system that can improve students' motivation, personal growth, and involvement, and increase overall engagement.

              Recent activity

              The most recent flashcard set the users were reviewing, or the most recent review game they were playing, so users can easily go back.

                Social activities bar

                On the bottom right corner users can see which of their friends are online or playing, and the user has the ability to easily join their friends’ activity.

                  ✅

                  From our client feedback, we created an intuitive landing page/dashboard that’s dynamic, personalized, and shows a clear pathway of options the user has.

                  🗒️ Notes to Flashcards

                  Our flashcards feature supports STEM students and has functionality for STEM notation with two options– creating flashcards manually (similar to Quizlet), and creating flashcards from your notes.

                  Create flashcards directly from your notes

                  Users can upload files, such as a textbook pdf or a Google Doc, to directly transfer into flashcards. This eliminates multiple clicks of copying, pasting, and screen-shotting textbook information into your notes, and then copying the notes into flashcards, cutting the process down by over 50%.

                    Highlight or capture to create a term, definition, diagrams, examples, and more

                    Highlight text or screenshot a section (this function supports STEM notation and works best for pictures, diagrams, or equations that aren't supported by a traditional keyboard) to input into a flashcard. The left sidebar shows the flashcard set you’re creating and shows where you are in your process.

                      Direct feedback

                      The term, definition, notes, and examples, are color coded as dots that appear on the flashcard on the left sidebar, so you can visually see as your flashcard is being created and what parts have already been included.

                        ✅

                        Based on user testing results from the flashcard creation process, we added more visual clarity by incorporating direct feedback along the way.

                        Accessibility

                        To take into account the specific formatting of the page that you’re working with, we made the menu bar flexible– users can reposition it around the screen to best suit their needs and convenience.

                          Finished flashcards

                          When viewing flashcards,  additional information can be seen on the side. Flashcards that were created from notes or an uploaded file also includes a link to the source for the student’s reference.

                            🎮 Play

                            Application > simple memorization

                            PlayTest utilizes the student’s notes, flashcards, and diagrams from the flashcards and turns them into games, and allows users to create user generated content to create their own practice problems and games for each set.

                              ✅

                              While this prototype features fill-in-the-blank and trivia as two game options, we’d like to explore more games that can be ready made/easily transferable from flashcards to play, as well as an easy way for users to create their own games and content with templates and customizable options to support their needs. (Think Kahoot, Jeopardy, Family Feud, etc.)

                              Community and collaboration

                              Students can see who is online, currently in a game, or studying.  Users have the option to play in single player mode to support more independent studying or to self test, but students who want to play games in multiplayer mode can easily join their friends' games, or create and invite their friends to a new one. On PlayTest, students can share notes and flashcards, and participate in each other's games using each other's practice problems, for the ultimate motivation and fun with some friendly competition.

                                F I N A L  D E S I G N

                                Full Prototype

                                Reflection

                                💭 Be adaptable

                                While learning how to work as a team, as well as how to work with our clients, our main focus for this project was to balance between adapting to both client and user needs. Additionally, due to the six-week time constraint, and working remotely, we learned to focus on the core concept of the product in order to maximize efficiency – this meant shifting our focus from creating multiple features to cater to each user’s needs, to developing and adapting just a few features to fit multiple needs.

                                ☀️ Design optimistically

                                Creative problem solving is the most enjoyable part of designing to me. While time is always a constraint, ideally I would always want to continue iterating. For this project I would've liked to be able to conduct multiple and more in-depth rounds of user testing, receive more feedback for improvement, and then focus on researching and designing user generated content for games and practice problems to accelerate the social network and community on the platform. Recognizing that there's always something else that can be improved allows me to design an opportunistic way.

                                ♥️ Thank you!

                                Thank you to Design Interactive for giving me the opportunity to work on this project, and a huge thanks to my cohort team: Matthew, Jamie, Joanna, and our amazing mentor Rochelle. Lastly, thank you to our clients Katie and Sandra for including us in their project and working with us!

                                Thanks for stopping by, let's connect! 👋
                                Resume
                                Designed with ♥️ & 🍵 © Michelle Lee 2024