Be patient, good things take time :)

Fake News Buster
An educational social platform that helps improve users' news literacy skills
00 Introduction
CollateralInvision Prototype, Concept Video

TeamCheryl Cheong, Tristan Lebatoulle, Matthew King

My RoleLiterature Review, Competitive Analysis, Interview, Personas Creation,Ideation, UI & UX Design, Prototyping, Concept Video

ToolsGoogle Form, Trello, Sketch, InVision
Video Walkthrough of the app
The spread of fake news has become a more serious issue than ever. Unfortunately lot of young consumers of news, particularly high school students, cannot really distinguish fake news from the real even though they claim they are confident in doing so. It is especially dangerous when they consume news actively from social media without a good set of news literacy skills and strongly developed critical mind, making it easy for them to be duped by fake news.
An educational social platform app - Fake News Buster has been designed to strengthen 4 key news literacy skills for its users. The app provides step-by-step training with scaffolding approach as well as opportunities for students to investigate and share suspicious news articles with others on the platform. As students progress in the app, their ranking as the fake news buster will be improved.
Demo Video
Here is a video explaining the details behind the project and how exactly does Fake News Buster work.
Jump to Design
Survey Responses
Unique Ideas
01 Discovery
Most users of social media are deeply affected by the spread of fake news. According to a study conducted by Stanford, teens are especially struggling with distinguishing fake news from the real. They are easily duped by fake news as they consume information on social media actively without processing them critically. With such concern, we first identified high school students as our target user group to start with since they are at the stage of developing their world views as well as plans for post-graduation. It is especially important for them to establish the skills to tell what news articles are trust worthy or not so that they can make well informed decisions.

We then utilized 4 different research methods including Literature Review , Survey, Interview, and Competitive Analysis.The combination of the quantitative and qualitative methods helped us to gain deep understanding to the following questions we have:
Literature Review
  • What kind of existing research is already out there?
  • What are some of the reasons that led to the problem?
  • What is high schoolers news reading habit like?
  • What are some of the news resources/platforms most commonly utilized by high schoolers?
  • How confident are high schoolers in identifying fake news?
  • Can they actually identify fake news from the real?
  • What are high schoolers' views on fake news and its impact?
  • How do high schoolers actually read the news?
  • What kind of news literacy skills do they utilize and lack of?
Competitive Analysis
  • What are some of the existing solutions out there? (to avoid repeating similar designs)
  • Are existing solutions good enough to solve the problem?
  • What are some of the strengths and weaknesses of the existing solutions?
As we completed reviewing 5 different articles for literature review, gaining 105 responses for survey, interviewing 6 different high schoolers of different grades as well as analyzing the pros & cons of 6 distinct existing solutions, we come to synthesize our findings and define our users' needs.
02 Define
With the data we obtained through the research phase, we first analyzed the current characteristics of our target user group to identify what are some of the opportunities we have with the user group. The 4 main characteristics of high schoolers is summarized as the following:
Characteristics of user group
Social media as main source of news
Not surprisingly, majority of high school students actively utilize social media as their main source of news. Popular platforms include Reddit, Twitter and Facebook. They enjoy using social media to share news articles with others or read news shared by their friends.
Snacking on news instead of reading
In both literature and review and interview, we found that high schoolers prefer to snack and browse on tidbits of news they see on social media instead of reading through the articles. They choose to do so because of its convenience, despite knowing it is unreliable.
Limited news literacy skills
Most high schoolers are aware of some news literacy skills such as examining source and author, yet they cannot actually apply the skills when they are put to test to identify fake news. They also demonstrated lack of skills in fact checking and discerning fact from opinion.
High level of self confidence
Participants in our survey indicated a high level of self-confidence (4.59 out of a 1-5 confidence scale) in identifying fake news based on the headline. Our interview participants also stated they were confident in not consuming fake news at all.
As we have identified the characteristics, we then moved on to identify the opportunities with high schoolers in reading news and discerning fake news from the real. With the opportunities identified, we established two key problem statements for the project
Having a reliable resource
Throughout research, high schoolers expressed a shared goal - to have a reliable resource that they can refer to on platforms that are convenient to access and follow.
Reading instead of browsing
In order to truly process news articles and apply critical thinking skills, high schoolers need to change their habit from snacking/browsing news to reading them. It will be an important behavior change for them.
How to apply new literacy skills quickly
High schoolers demonstrated they cannot really apply the news literacy skills even though they are aware of some. They need to learn how to apply the skills in different context and platforms quickly so that they will not be easily duped.
Understand impact & spread of fake news
Participants of our studies are clearly unaware of the spread of fake news and how they will lead to undesirable results such as formulation of biased opinions with their high level of self confidence. Such issue needs to be corrected immediately.
Three different personas are created based on the level of news literacy skills different study participants demonstrated in interviews, survey and literature review. This helps us to empathize with different users with various levels of news literacy skills as well as maturity before we move on to ideation. You can click on the image of the persona to learn about them in detail.
As we synthesized our research, we defined two key goals for the project :

1. How can we help high school students who are over-confident to realize they are not really able to identify fake news from the real?

2. How can we help high school students to improve on their skills in identifying fake news and enable them to apply those skills in different contexts?

With the goals and opportunities identified, we moved on to the ideation phase.
03 Ideation
Before we started a design sprint, we all sat down as a team to discuss design considerations we need to be aware of as we ideate. A main goal identified in the research phase of the project is to help users to progress from simply aware of some basic news literacy skills to successfully applying the skills when they read news on different platforms in their daily lives. In order to achieve the goal, tools that only provide passive detection based on keywords from articles would not satisfy our users' needs. We also need to ensure users are learning skills and applying them in context according their level. Therefore, scaffolding is an approach that we should adopt to help users of different levels to progress. We then started a design sprint which involve having each team member to brainstorm as much ideas as possible within a 15minutes time frame. Together we came up with 23 distinct ideas. Some of the best ideas we shared include:
  • Gamification of detection of fake news
  • Vlogging on existing fake news to share users' views on fake news articles
  • MOOC series on news literacy skills
  • Browser extension/mobile app highlighting questionable keywords
  • Daily quiz app probing users to answer questions related to fake news
  • Gamification that requires students to write fake news to learn what constitutes fake news
Sketches created during ideation phase
We then reviewed our users needs again to think about which idea will suit our users best. After some long hours of discussions, we finally converged multiple ideas into one - an educational social platform which allows users to share and highlight investigations concerning suspicious articles to the newsfeed of the app with others as well as learn/improve their news literacy skills in the training ground of the app according to their news literacy skills levels determined in the pre-test phase in registration phase. As users progress in the platform with different features of the app, their levels and ratings will be improved accordingly as well.

As the only designer on the team, I moved on to create low fidelity wireframes for the team to review after we reached consent. You can click on the images below to learn about the low fidelity wireframes in details.
04 Design
The team took a look at the key news literacy skills identified in literature review and discovered 4 main skills to be covered in the design - namely 1. Checking on Author 2. Source Check 3. Fact Check 4. Distinguishing fact from opinion. We agreed that the design should prompt users to actively utilize and learn these 4 key skills as they read different news articles. As the team was reviewing the low fidelity wireframes, I started designing the UI elements and style guide for the app. After some work, the style guide is established as following.
As the team was reviewing the low fidelity wireframes, I started designing the UI elements and style guide for the app. After some work, the style guide is established.

After I gained feedback from the team, I moved on to work on the updated user flow. The user flow can be seen in the illustration below.
Here are the details of the final design. You can also interact with the InVision Prototype here.
05 Takeaways
I have learnt a lot from the project. Here are some important takeaways

1. Thorough research helps you to succeed

We did a fairly thorough research with this project by obtaining over 105 responses for survey, 6 in-depth interview, literature review and competitive analysis. Though it took us quite a bit of time, the process did help us truly identify the existence of the problem as well as the key user's characteristics & needs well. We also came to understand why some of the existing solutions were not working and what we needed to do to improve the problem. As the team reviewed our findings after we completed the design, we agreed we did address a number of issues identified in the research phase.

2. What users want may not be the best for users sometimes

In our research, users expressed their goal when consuming news is to obtain reliable news conveniently on various habits. However, we also identified most high schoolers are snacking on news instead of reading when we analyzed our findings, which led to insufficient time to process news articles critically. If we chose to design a solution that simply satisfies their goal, it would have only encouraged them to continue snacking on the news thinking they are all reliable - "Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime". In this spirit we chose not to design something to spoon-feed our users, but rather teach them the key skills to read and process news critically. Therefore, we sometimes have to make decisions that do not simply satisfy our users, but is the best for the users in long run.

3. Empathize with the users well when it comes to making design decision

As a team with multiple members, we all have different ideas and views regarding how to solve a problem. When it reached the stage where we could not reach consent, we referred to the personas we created before we moved on to the ideation phase again. We tried to think about what do our users really want and need deeply again by empathizing with our personas. This helped us to identify with the problems well and come to an agreement to converge a few of our ideas to make it one that we believe will work best for our users.