Impact Through Design: Anti-Fake News App (Concept)
Research | Strategy | UX Design | Prototyping
1. The Problem, Scope of Project, & My Role
What was the last article you read on Facebook? Did you doubt some of the claims?
My team found that while users get most of their news from Facebook, they have little confidence in the legitimacy of the facts and search elsewhere to cross reference the information.
We sought to equip users with confidence in the news from Facebook
Our solution is a news aggregator app called FrontPage that provides fact checking scores, a news organization's political bias, and contextual information.
The Problem:
With the rise of fake news and the prominence of ideological echo chambers within social groups, Facebook's legitimacy as a news source is undermined significantly.
My team wondered how might we ensure Facebook users have confidence in the legitimacy and transparency of the news they’re consuming.
Scope of the Project:
Team of three / 14 days
Mobile App
Wireframed in Sketch / Prototyped in Flinto
My Role: Researcher, strategist, and designer
2. Research & Analysis
To begin to solve the problem of increasing confidence in the news on Facebook, we set out to understand exactly how news is currently consumed on social media.
We spoke with ten users. Below is a sample of questions we asked:
- How many times did you read the news last week? What sources of news did you read last week?
- What thoughts about the article, the content, or the author do you have when you read an article?
- What is your perception of the news articles that appear on your social media feed?
- When you read news on social media sites, what, if anything, do you appreciate about the experience? What, if anything, do you think is missing about the experience?
Our hypothesis and assumptions were that users:
- Want to know if statements are true
- Want transparency in bias and opinions
- Assume articles are mostly clickbait
- Check reputable sources to compare information reported in articles on Facebook
- Have follow-up questions to articles and will search on Google for more information
To understand users' expectations when reading news on social media, I put together an analysis of features four competitor sites (at the intersection of news and social media) utilized:
A snapshot of the features analyzed
Key insights from our research were that users:
- Want legitimate news sources and have go-to sources
- Want to research information in articles
- Want alternative viewpoints on a topic covered
- Must have transparency in how much an article is opinion and fact
- Want to be on top of current events / in the know of what everyone finds important
- Valued ranked comments on sites such as Imgur and Reddit
- Discount articles on Facebook due to perceived lack of credibility and transparency
4. Ideation & Solution
We synthesized our research findings and created two personas who we focused on for our solution:
Primary Persona: Katheryn
Secondary Persona: Cameron
I mapped out a common experience reading news on Facebook from our primary persona's perspective:
A clear negative trend: Bumps along the way include finding clickbait headlines, inflammatory comments, and heavily biased / opinionated articles (that are masquerading as facts)
Our Solution:
Our solution is a native iOS news aggregator app called FrontPage which is similar to Facebook's messenger app in that it can be accessed from the Facebook app, but is a standalone product.
To address the lack of legitimacy, transparency, and contextual information, and the need for relevancy, the app's key features are:
- A top news feed and social news feed
- User-submitted annotations
- Facebook integration
- Fact-checking scores
- Media bias indicators for news organizations
- Access to contextual information
These are some of features that best addressed the problems and needs revealed during our research phase
Ideation:
After a couple sessions of collaborative ideation (design studio), our team came up with a one-column, minimal feed design similar to social media platforms such as Facebook as well as reputable news sources such as the New York Times and the Wall Street Journal.
We then divided up the design work; I took on designing the article and its contextual information.
Initial Mid-Fidelity Wireframes:
News Feed:
My teammate took on the feed design. The feed is divided into a "Top News" and "Social Feed"; "Top News" is the most recent news published whereas the "Social Feed" contains articles shared by Facebook friends. Having these two feeds ensures users have both types of relevancy.
Each article you'll see has a fact-o-meter indicator, news organization bias indicator, and user-submitted usefulness rating to provide transparency on the organization and its article, as well as yet another layer of relevancy.
Article with carousel of contextual information:
From the news feed, users will find similar indicators for the article as well as be able to click on the text to lookup contextual information and articles form other news sources on the same topic
The carousel pops up when a text is clicked on, similar to the Kindle's carousel
The highlighted text is user-submitted notes / commentary
We prototyped our designs in Flinto and set out and test our first iteration.
Strong results: There was some general confusion as to how the usefulness and truthfulness ratings were generated
Since there weren't major concerns regarding the functionality, some adjustments we focused on when moving to high fidelity were to:
- Clean up the indicators on the news feed to clarify "truthfulness" and the bias of the news organization
- Ensure design was clean and maintained some of Facebook's look and feel
- Provide more information on how the usefulness and truthfulness ratings are generated
- Adhere more closely to iOS standards (since the solution is an iOS app)
High-Fidelity Wireframes:
News Feed:
I re-designed the bias and truth indicators by adding labels, changing the bias scale to circles from a rectangle with color gradients, as well as making them smaller overall
Hamburger menu was changed to a bottom tab bar per iOS standards
Facebook-related colors and format for the search field were added to add more branding
Article:
I carried over the new indicators from the news feed and removed images to clean up the article
Carousel replaced with an overlay for the contextual information:
My focus for this feature was to match current iOS experiences and clean up the interface
We again prototyped in Flinto, merged, and tested our next iteration.
Overall, functionality remained high and there was better understanding of the indicators for the news sources and articles.
Next Steps:
Were we to go through another round of iteration and testing, some of the key areas to focus on would be:
- Including news organization under bias indicator
- Further prioritization of features to decrease API's utilized
- The value of user-submitted highlighting / annotations in articles
- Further clarification of how truthfulness is calculated
- Testing value proposition of a "usefulness" rating
Conclusion:
The need for FrontPage is evident in that those who read news on Facebook want more transparency; similarly, Facebook has openly made this a priority and is actively seeking a solution. Jumping off of that, FrontPage is part of the movement towards greater media literacy and responsibility. This kept our team supercharged throughout the project and I personally hope to be a catalyst in these type of impactful products being developed.
Please reach out with feedback or comments overall! I'm eager to discuss.