Debunked
Encouraging middle schoolers to start conversations about their online activities with peers and parents
Brief
Client
HCDE 518:
User-Centered Design
10 weeks (Autumn 2021)
Team: Priyana Patel, Apoorva Kulkarni, Zoey Gray, Kyle Wang
Digital misinformation is pervasive, and while we are all susceptible to it, children are particularly vulnerable due to less-developed critical thinking skills and lack of life experience. Even though today's youth are digital natives, most still lack the skills to judge true from false online information accurately. It is estimated that more than half of 12–15 year-olds go to social media as their regular news source, with only 2% having the basic literacy skills to tell real from fake news.
Design Question
User Research
We completed a literature review over several articles from education theories to UNICEF’s reports about how misinformation may affect children.
We conducted four semi-structured interviews with middle schoolers, ages 11 to 13. As a part of the interview, we showed a series of images depicting information on social media and the web. We also asked participants to navigate through a website while sharing their thoughts aloud.
To better understand parent perspectives, we also employed social listening across various platforms, particularly Facebook and Reddit, where there are numerous highly active parenting forums. We searched these forums using different combinations of the following keywords: middle school, disinformation, misinformation, fake news, and critical thinking.
To understand what existing products do, the gaps between them, and children’s pain points with learning misinformation, we completed a competitive analysis of four products: Google’s Interland - Reality River, Checkology, Fakey, and NewsFeed Defenders.
01
Parents’ priorities are internet safety & finding a balance between allowing independence and monitoring their kids
02
Teens learn about misinformation in class but find it unengaging, not convinced that misinformation is a real issue.
03
When uncertain whether something is true, teenagers rely on their peers' opinions or confirmation in numbers.
04
Many existing products target misinformation, but with little awareness from teenagers.
Personas
“I have learned enough that I can tell for myself what is and is not misinformation.”
Don't Care Daniel
“My daughter’s autosuggest videos on YouTube are growing increasingly concerning. NASA moon landing faked anyone?”
Protective Pam
"How do I find out if [what I discover online] is real or not?
Uncertain Ulyssa
Design Requirements
Transparency
The platform should be accessible for parents, satisfying concerns regarding their child’s online safety.
Engagement
The solution should be fun and interest the youth who would be using it, much like readily used social media (Snapchat, Instagram, YouTube, etc.).
Awareness
In addition to raising awareness about all types and degrees of misinformation, the envisioned product should help middle schoolers identify and explain why the information is potentially harmful.
Social
The solution should incorporate some type of social element by capitalizing on youth's tendency to rely on friends.
Independence
In recognizing middle schoolers’ increasing agency, we want our users to be able to use our platform without assistance from parents or teachers.
Ideation & Sketching
Storyboarding and User Flow
Usability Testing
After creating our mid-fidelity interactive prototype in Figma and Framer, we evaluated our misinformation game. We completed user testing with the preview feature on Framer in combination with Wizard of Oz techniques. During our sessions, the moderator clicked on the indicated gesture (e.g., tilting heading to the right = fake) to mirror the appropriate user action and system reaction.
Goals of Testing
Change #1
Onboarding
Add a video tutorial that participants are automatically directed to provide a visual of the game’s directions.
Change #2
Gesture Reactions
Provide visual cues & animations to confirm whether a user’s answer is correct, incorrect, or if they are unsure.
Change #3
Results Page
Simply the Results Page: make the options more visible for players and clarify which elements are actionable.
Final Prototype
How does it work? Debunked is a misinformation-themed trivia game that would integrate with social media platforms (e.g., Snapchat) on mobile devices. It aims to engage middle schoolers on the topic of misinformation and to help start conversations about their online activities with peers and parents. Debunked includes social gamification features that allow users to earn badges, share their achievements, and compete against friends.
Snapchat Integration
Integration with Snapchat provides an easier onboarding experience and allows use without the assistance of an adult.
AR Head Tilt
An interaction that has been employed in several viral Snapchat and Instagram filters and is more entertaining than simply clicking buttons.
Share to Story
Allowing users the ability to share their scores on their story elicits friendly competition and encourages social interaction.
"Unsure" Button
Having an “unsure” button motivates users to ask their friends or parents for help to appease uncertainty, provide validation, and facilitate discussion.
Badges
Badges are designed to motivate continued engagement as users strive to achieve higher badges with their peers.
Reflections
Looking back, this project has taught us a lot about education. One of our main goals for this project was to equip middle school students with the tools to help them make safe decisions about viewing and accessing information online. Hence, our solution had to involve education and entertainment, which led us to consider the concept of gamification and educating students passively rather than actively.
We also learned how varied the mindsets and behaviors of middle schoolers are. Since our target users were between the ages of 11 and 14, they were in the phase of their life that bridges childhood to adulthood. As a result, they had very different experiences with social media and even the internet. Understanding these nuances was crucial for us to create an effective solution.
Future Considerations
Alternate & accessible gestures
Turning heads requires a series of photos to make the decision in the backend, so it may be more likely to make mistakes. There’s also no clear match between tilting heads and making judgments in the real world. Users may have no idea where to start without the tutorial and might get confused while playing the game.
Difficulty & engagement for learning
If the questions are too easy, teenagers may lose interest quickly. If they are too difficult, teenagers may be overwhelmed. We hope the level of difficulty can grow with the teenagers’ ability to detect misinformation so they can always learn something new from the game.