• Work
  • about

priyana patel

  • Work
  • about

Debunked

Encouraging middle schoolers to start conversations about their online activities with peers and parents

Brief

Debunked is a mobile AR trivia game to teach youth about misinformation.

Client
HCDE 518:
User-Centered Design

 
Duration

10 weeks
(Autumn 2021)

 
Roles
User Research, Prototyping, UI/UX Design, Usability Testing
 

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

How can we equip middle schoolers with engaging tools to critically evaluate online information?

 
 

 

User Research

We conducted a literature review, 4 semi-structured interviews, a social listening evaluation, and a competitive analysis to understand learning preferences, pain points with current misinformation learning tools, and parental concerns regarding their children's online activities.

  • 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

We segmented our potential users into three personas that encompass the user goals for our envisioned system by aggregating the data we collected.

“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

Based on our key findings, we constructed a set of design requirements that our future design solution should incorporate.

 

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.

 
 
IMG_0479.PNG
IMG_0481.PNG
IMG_0482.PNG
IMG_0483.PNG
 
 
 

 

Ideation & Sketching

We completed a 6x4 sketching exercise and produced 24 distinct design ideas, from a scanner browser extension to an AR scavenger hunt, that integrated our design requirements and addressed the needs of our targeted users. After affinity diagraming our ideas, we filtered our top 3 and re-sketched our concepts. We discussed the strengths, weaknesses, feasibility, and originality of each sketch. We voted again and decided to move forward with a mobile “misinformation trivia game.”

 
 
 

“Debunked” is an Instagram and Snapchat filter that lets users play an interactive misinformation trivia game. The user holds up their front camera and tilts their head to answer quiz questions, and immediate feedback facilitates learning. At the end of the quiz, players can share their score to their story or challenge a friend.

 

 

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

  • Are the instructions clear enough?
  • Is the difficulty of the questions "engaging"?
  • Are the gestures and interactions intuitive?
  • Do users utilize the "Share" function?
 
 

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.