Group Project
Tool: Sketch, Figma, After Effect
Time: 8 weeks
SpeakNow
Educate users on digital literacy and minimize the spread of misinformation
Product Design Project • Oct 2020 - Dec 2020
Team
Sabrina Chuang, Gisca Giancana , Iqbal Badar, Mengyuan Zhang
Tools
Figma, Mural, Adobe Illustrator
Role
User Research, Product Thinking, Visual Design, Prototype Design
Overview
Let's Empower Your Speech With Real News
SpeakNow is a news aggregation and discussion app that provides a platform for users to engage in online civil discourse and improve digital news consumption.
We aimed to help users of all ages by fact-checks every incoming news and displays the result through a trust rating system. The clear design allows users from young kids to senior citizens to discern falsified and truth claims on an article. In addition, users are able to post discussion threads by linking and referring to fact-checked articles on the app to minimize the spreading of misinformation.
Introduction
"The Reuters Institute’s Digital News Report 2019 reveals that more than half of all respondents in 38 countries (55%) are concerned about their ability to discern what is real and fake on the Internet."
Problem: In an era of misinformation, social media has paved the way for falsified news and information to thrive in the digital world. The lack of education in digital literacy has made it difficult for people to identify fake news and build a healthy news consumption habit. The spread of fake news causing people to be polarized and isolated from a broader perspective which may further cause hate speech and in some extreme forms, physical aggravation.
Solution: To provide a democratized news and discussion platform and break online habits that lead to the spreading of misinformation.
.png)
User Research
Identifying News Consumption Habits
To understand how people consume digital news, we conducted a survey of social media users ages 18-25, and four in-depth interviews. We received a total of 59 responses that gave insights into their daily news consumption habits and insights on social media as a source of news.
“Q:You take measures to verify the information you consume on social media (eg. check website links, compare articles from different sources, etc.).”
From this research, we learned that most people are aware of fake news and do take measures to verify news on social media. However, it can become too much of a hassle for them to fact-check every article they come across. Some were even unsure of how to distinguish between real and fake news as there is no exact way or instruction to follow. Another major insight was that people generally take into account of comments and other people’s opinion on social media to determine the accuracy of news they consume.
SECONDARY RESEARCH
“Large social media corporations are able to create more artificial intelligence to help filter news stories that generate misinformation, however, they choose not to. They have an economic fear that if they try to clean up all the sensationalized yet inaccurate stories, they would lose a great number of users and eventually, reduce their revenue.”
— Franklin, CEO of Oigetit
Interviewing the CEO of a Fake News Filter App
It is economically impossible to eradicate fake news on any digital platform. However, we learned that we can use artificial intelligence to fact-check the content of an article by comparing it with databases and libraries of established facts to give consumers a reference to measure the accuracy of an article.
User Personas
Our Potential Stakeholder
To better sympathize the users, we create two users personas to illustrate our target users' potential frustrations and UX needs.
Framing Problem
Minimize the spreading of misinformation while incorporating social networking elements and allowing users to freely discuss about news topics?
How Might We
Storyboard
Possible Scenario
We create two storyboards to illustrate some possible use cases and scenarios users will have.
IDEATION
Affinity Mapping
After gathering user insights, we brainstormed solutions through affinity mapping by writing down the pain points experienced by different types of digital news consumers. We then consolidated our ideas, categorized them, and identified features to fulfill their needs.
Brainstorming Solution
From our affinity map, we combined the solutions into three major app features that are aimed to enhance the experience of digital news consumption. Our goal is for users to be able to consume factual news, as well as provide a space where users can confidently and accurately express their thoughts on a news topic.
1. Trust Rating System
Our AI fact-checks incoming articles and displays its result through a trust rating system from Snopes.
2. Regulate Discussion Thread
Create and join discussion threads by linking and referring to articles that display its trust ratings.
3. Self Fact Check
Users can assess the credibility of an article to test their fact-checking ability based on four criteria.
Competitive Analysis
By identifying potential pain points in competitor apps, we were able to create a better value proposition and ideate solutions both in the design and functionality aspect, ensuring that our app solves the problem in a way that our competitors don’t.
-
An advantage over Reddit - users can create discussion threads that are less susceptible to misinformation as we allow users to link fact-checked articles on the app and refer to its trust ratings when making assumptions.
-
An advantage over Snopes - our design ensures that users could see the “trust rating” of each article when browsing through the app, eliminating the need for users to click on every article to view the trust ratings.
-
Our articles are divided into 13 categories to create more personalization, some competitors only have 9 and 5.
-
We separate the “Politics” category into “Liberal” and “Conservative” to ensure that we don’t report one-sided news
DEVELOP
Wireframes
Moodboard
Alertness, Purposeful, Powerful, Respect, Impactful
Styleguide
We wanted to eliminate as much color as possible, considering that the aggregated articles would be filled with pictures from the original article. We decided to use red as the primary color to express the message of alertness, purposeful, and powerful.
Iterations
Changes Based on User Testing
Before
After
1.
.png)
Able to post a discussion thread about this article directly
Grey out the button to indicate selection
Add recommended articles to give users more perspectives
-
❌ Failed: 1/5 user is not sure whether she can select the self-check assessment
-
✅ Solution: We grey out the buttons to inform the users that they did not select anything.
-
-
❌ Failed: 3/5 users were confused about the language use of forums and discussion. They don’t know where the discussion goes in the hierarchy.
-
✅ Solution: We changed the “forum” function to “discussion” in the navbar to avoid confusions of the users
-
-
❌ Failed: 3/5 users feel not encourage to post because they have to copy article link in order to create a discussion thread
-
✅ Solution: Add the "Discuss this Article" button that allows the user to create a discussion post with one click
-
2.
Before
After
.png)
.png)
Replace "Forum" with "Discussion Topics"
Replace "Topic" with ""
-
❌ Failed: 2/5 users are confused with the language used in the app
-
✅ Solution: Replace "Forum" with "Discussion Topic"
-
✅ Solution: Replace "Topic" with "Articles"
-
-
❌ Failed: 3/5 users feel not encourage to post because they have to copy article link in order to create a discussion thread
-
✅ Solution: Since we add the post discussion button in the article, we replace "Post" with "Profile" so users can have easy access to their past and saved posts and comments.
-
Replace "Post" with "Profile"
After
3.
Before
Change profile section to categroies
Profile section with My Post and Saved Items
Some Feedbacks We Received
—Tareq, 24 Y.O
-
Tareq feels like the mobile app is really good design wise but feels as if there is a slight learning curve to use the app, in recognizing the features of the app
-
He enjoyed the forum page when it was explained to him
-
He liked the thought process for the article.
-
Was confused about the difference between a discussion and a forum.
-
❌ Failed: 2/5 user feel frustrated that they had to horizontally scroll to the end to find the news category they wanted to see
-
✅ Solution: Hamburger menu with a list of categories
-
-
❌ Failed: 1/5 user will accidentally tap "My Post" when he wants to click "Save Items"
-
✅ Solution: Swipe left and right to switch between "My Posts" and "Save Items"
-
Final Design
Core Functions of Speak Now
Seek Truth Value in Every News
Our algorithm fact-checks every news in the app, and we show the results to you through our trust rating system.
Become a Master at Fact-Checking
Improve online news consumption habits by testing yourself in your ability to fact-check articles in the app.
Engage in Civil Discourse
Post discussion threads by linking and referring to fact-checked articles in the app, eliminating the spread of misinformation.
Truth Claims in the Political Spectrum
We provide fact-checked news from both sides of the political spectrum to eliminate one-sided media reporting.
Clickable Prototype
Reflection
What Did I learn
This project is a bit challenging because all my teammates locate in different places and live in different time zone. Therefore, sometimes communication can be tricky and a response will not be reply right away. However, by wisely using Trello to assign everyone's tasks and strategically meeting every week we were able to overcome the difficulties in working remotely.