Tools
Figma
Playtest is an online learning tool that connects students with their coursework and peers.
Duration
6 weeks
Role
UI/UX, UX Research, Visual Design
Team
Matthew Kwong, Joanna Li, Michelle Lee
Short on time? Click here to skip to the final designs
The Challenge
The COVID-19 pandemic 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.
The Solution
Playtest is a gamified study tool that accommodates for all types of subjects, 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.
💡 “How might we accommodate for multiple types of learning in a collaborative and engaging way for students?”
The Process
My Role
We followed a six-week sprint, and checked in with clients via Zoom to present our progress and recieve feedback and ideas. I led the ideation and synthesis portion of the sprint, documented our progress and conducted exercises such as affinity mapping and sketching. Additionally, I developed the prototype for portal and the study set pages.
Constraints
The sprint took place remotely, so it was more difficult to set up interviews and conduct user testing. Additionally, because it was in such a short timespan, we had to focus on developing a few main aspects of the platform.
User Research
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 research were Quizlet and Duolingo. From our competitive analysis, we learned that:
People didn’t like Quizlet’s lack of support for STEM subjects, for example, there is no function to input equations and diagrams
Quizlet’s flashcard set up is mainly memorization-based, which makes it hard to apply class knowledge to unfamiliar problems.
Users enjoyed Duolingo for its gamification features such as their badges and rewards system, which created friendly competition and motivated users to keep using the app.
Surveys and Interviews
Through our survey we aimed to identify study habits and preferences of high school and college students. We were able to determine what study platforms and apps they use, what they like and dislike about them, and their preferred study methods.
Some of the main findings we were able to gather from our surveys and interviews were that students felt that practice problems and accessibility were the most important features in a study tool, and wanted a way to track their progress.
From our takeaways, we decided to focus on how we can distinguish PlayTest from other learning platforms by accommodating different learning styles to encourage application-based learning.
🗨️ “A lot of subjects are more about application, as opposed to memorizing vocabulary words or recognizing structures.”
Ideation
Based off of the research, we synthesized our results and brainstormed insights, combining them into three main questions:
💭 How might we encourage the application of material rather than 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 created the initial layout of the Playtest website. Here, 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.
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.
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.
We got critiques from fellow designers, who felt 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 the changes shown in the next section to produce our final design.
User Testing
Homepage
Our homepage is a dashboard where students can create flashcards, play games, view their folders, recent activity, and track progress and goals.
Creating Flashcards from Notes
The main feature we focused on was creating flashcards from self-uploaded notes. Users select a term and definition which are then converted into a card format, and can add additional information such as notes or examples.
Gamification
To accommodate for players of all types, we included an ability to switch between multiplayer and single-player options.
The games are based off of and directly take content such as images (shown below) from existing study sets.
Reflection
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.
✨ Explore the final design on Figma!