Starcrossed Influencers
A game experience that raises awareness on misinformation.
Role
UX/UI Designer and Researcher
Skills
UX/UI Design and Research, Wireframing, Low/High Fidelity Prototype, Figma, Visual Design, and Logo Design
Starcrossed [Influencers] is a web-browser game experience that raises awareness for impressionable teens and teaches them skills to accurately pinpoint patterns and techniques commonly used in social media and articles that mislead people. The overall goal was to make an experience that interweaves an engaging narrative consisting of a reimagined story of the classic Shakespeare play “Romeo & Juliet.” As well as to integrate it with interactive gameplay that would help encourage our target audience to reduce the spread of misinformation and be aware of how they can be susceptible to it.
Design Challenge
The spread of misinformation is a vast and reoccurring problem nowadays in our society, especially now that a majority of people get new information from social media. Despite there being an increasing awareness to consistently “check sources,” — the point of confusion is how exactly a person can tell if a source or claim is legitimate?
Understanding our Audience
Before our team began conducting research, we first conducted surveys and analysis on gathering an overview of what the audience and focus of our project will be within the framework of misinformation.
Through research and official surveys, our team found that a sizable portion of people do not consistently know how to detect if a source is false or misleading. It is also generally seen as a grueling task to learn. Teens are primarily only learning old-fashioned fact-checking techniques from high schools, such as not using Wikipedia and noting whether or not a URL has “.org.” Today it is not considered a reliable form of fact-checking due to the general public being able to purchase those types of domain names. In our survey, it was evident that those who do check sources thoroughly typically do so for essay writing and are practiced often at the college level. We also found that the likelihood that a person would check a source is around fifty-fifty and that 73% of people get their news information from social media.
There was also some indication of bias from our survey, with around 50% of people from our survey saying they may or may not believe a claim if it came from a friend or family members. About 22% of people said they are very likely or almost always believe a claim if it came from their friends/family members. These results may be a point of concern, considering that most people get their information on social media in which friends and family members typically circulate the content.
Research Question
How do we intertwine an engaging narrative with education about an objectively dry subject such as combating misinformation on social media?
Research
Through our research and competitive analysis, we found that a majority of award-winning misinformation games currently in the market do not have a richly developed narrative or plot in their games, which we suspect could be why a majority of their target audience does not play or know about these games.
After discussing with several of our domain experts (such as a high school teacher, a game developer, and an educator), we determined that the best way to get information received by younger people is to appeal to their empathy. Developing a narrative where the player can see that their actions of spreading (or tempering) misinformation based on the posts they decide to share and how it directly affects the lives of the game characters may be the best way to do that.
Survey
Conducted a survey to construct a foundational understanding on how individuals receive news information. Besides, how one determines if the information obtained is credible.
One of the questions asked in our survey (November 30, 2020)
Findings
Survey
A majority of our primary demographic (73%) finds their news information on social media.
The likelihood of people to actively research is fifty-fifty (52%)
High school did not teach relevant fact-checking techniques to teens, so they don’t have common knowledge of the subject.
Around 49% of people said it would depend on whether or not they would trust a claim from their family/friends. 22% of people said they are most likely or always willing to trust a claim from their family/friends.
In 2016, the Stanford History Education Group released a study of over seven thousand middle school, high school, and college students. When asked to evaluate online information, they based their evaluations on a site's look and feel. They focused on things that a website creator could easily change, like the URL or the about page. However, this technique doesn't work well.
Competitive Research
Researched various fact-checking and educational games to help us better understand the design space of our game idea. Some games are suggestions from our survey as well as recommended by our professors, experts, and stakeholders. Through that, we looked at game aesthetics, gameplay, game stories, and other perspectives to help us apply the more successful aspects to our game.
Divided our research into two categories, which allowed us to differentiate between our findings between our users, audience, and what was already in the market.
Category One
Gathering information regarding our primary and secondary users.
Category Two
Looked at games that taught about fact-checking and how to identify if a source is credible and accurate.
Misinformation and Fact Checking Games
These are games we came across in our competitive research and analysis.
Aims at fighting misinformation, with users having to play the role of a fake news writer.
Allows the choice for players to spread misinformation in order to convey to the player how they can easily create and spread misinformation in an instant.
Users can learn how to find clues like finding where a story originally came from and comparing it to other sources, as well as how to use tools like fact-checking sites and reverse image searches.
Shows how to spot coronavirus misinformation in 5 minutes, putting players in the shoes of spreading fake pandemic news and displaying the techniques used to spread fake news on social media.
Game Inspiration
Use hints for each mission, having users be presented with a story on their social network feed, and having them click on the different parts of the page where they see a magnifying glass. Once they’ve seen all the clues, they can decide how reliable they think it is and how to respond to it. Also, inspired the notifications and messages features.
We were inspired by the game idea which puts the player in the role of the creator of fake news trying to make money from advertisers by setting up a site, copying news stories and re-posting them, creating fake social media accounts, and generating interest by choosing users and groups to target with social media messages. Through this game, users could quickly get a sense of what questionably ethical strategies work best.
Goals
We aim to achieve the impact for young people to be inspired to think more critically, engage more responsibly on social media, and reduce instances of spreading misinformation.
Audience
Our main target audiences are teens (13-17), with young adults (18-25) being secondary. This decision was based on the potential for long-term societal impact, and that younger audiences are more open and easy with changing their habits compared to an older demographic.
Primary
Jax Adams (The Bored Teen) is our primary persona. She was inspired by Jody’s 15-year-old sister and the cumulative interests she has with her friends that are of the same age. Their interests regarding humor, games, and their general behaviors and knowledge regarding misinformation dictated a lot of our design decisions.
User Scenarios
“As a high school student, I want to learn what kind of information is credible through a fun interactive experience, so I can get a good grade on my homework.”
“As a teenager, I want to be able to share something funny on my social media where my friends can see so we can bond over it.”
“As a social media user, I want to be able to post content without worrying about whether or not I will be canceled or criticized for spreading misinformation.”
Secondary
Our secondary persona is Bryan Bim (The Skeptical Gen Z). Our design assumptions led us to believe that young adults around our age are fairly impressionable and open to behavioral change, which is why we ranked them as secondary. Due to the fact that college generally teaches their students how to think critically about sources and claims, they might not have as much of a need to play the game itself. However, they may still learn from the social-media-oriented advice.
User Scenarios
“As a College student, I want to find credible information on the web without any tricks, so that I can find good sources to use on my research papers.”
“As a Gamer, I want to have fun and be able to relinquish my competitive side, so I can focus more on my homework.”
“As a researcher, I want to know what makes these sources credible, so that I know which information I can base my hypotheses with.”
User Outcomes
Outcome 1
Identify various forms of misinformation on social media.
Outcome 2
Apply fact-checking techniques to information shared on social media posts.
Outcome 3
More aware of the prevalent issues of the spread of misinformation after playing the game.
Outcome 4
Prevent the spreading of misinformation on their social media pages by reducing the number of posts they share that have misinformation.
Outcome 5
Inspired to care about the content they’re sharing and seeing through the lessons and themes presented in the game.
Storyboard
Our storyboard features persona Jax Adams. The scenario begins with her friend sending her a link to our game, wanting to discuss what ending she’s gotten. After playing herself, she is inspired by the narrative to apply the fact-checking techniques and lessons she learned in real situations and share the game with others.
The storyboard explores how we envision our game being shared and inspiring engagement and potentially behavioral change through empathy and the discussion of misinformation issues.
Usability Testing Findings
Conducted 9 user testings using our Figma prototype, 3 were from our primary demographic (teenagers), 5 were secondary demographics (young adults), and 1 tertiary demographic (adults).
Finding 1
7 claimed did not learn about fact-checking in high school.
Finding 2
8 people noted the game’s narrative as a delighter.
Finding 3
4 felt the user interface was simple and easy to navigate.
Finding 4
The majority of pain points mentioned are related to the size of the text, clarity of messaging/ buttons, and general Figma bugs.
Quotes
These are quotes provided by our testers of the Starcrossed Influencers game experience.
“I love the design and look, it is very simple, doesn't take too much thought”.
To the general public, I feel like this is useful, especially for folks who are so used to social media as their main source of information”.
“…I think it is a really good game for people who like to challenge themselves…”
Recommendation
Tutorial
The user flow layout of the introduction is part one of the Figma prototype.
Morning Brawl User Flow
It is the user flow layout of part two and part three of the Figma prototype.
Figma User Flow
Figma User Flow
The detailed user flows were created to explain the process of the gameplay demo from beginning to end. The purpose and overall goal for each element within the gameplay are clearly defined as well.
The user flow is split into three “parts”: the “introduction & tutorial” section, the “news article comparison” section, and the “story-driven” section. By approaching the experience this way, users can run through snippets of what a completed game would have been like, which would have been a mix of both gameplay (revolving around identifying misinformation) and its overarching story elements.
Game Logo, Layout and Title Design
The inspiration of the game logo, layout, and title design, was primarily on the game narrative, the tale of Romeo and Juliet, and our title for the game. The direction we took with the logo and title design was a retro and vintage theme that would showcase the game narrative in a fun and immersive experience.
Round One
Round Two
Round 3
Final Logo Design
Design Layout
Initial Design Layout
Final Game Design Layout
Figma Prototype
During the design process of our Figma prototype, we decided to have the theme of the game narrative to be present throughout the game experience. Thus, we integrated moons, stars, and a vibrant night theme based on the night scene from the Romeo and Juliet play.
Coded Prototype
We developed two versions of our prototype in which the Figma prototype illustrates the visual look, feel, and experience. While the coded prototype conveys the interactive features and elements of the Starcrossed Influencers game.
Reflection
Making pivotal design decisions by working on our capstone project enabled me to derive a deeper understanding of our target audience and users.
I learned to articulate and design an experience that illustrates an engaging narrative and educational experience by recognizing the multi-dimensional aspects of the objective and goals set forth.