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. 

Frame 2 (5).png
speaknowlogo 2.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.

speaknowgraph1.png
speaknowgraph-4.png
speaknowgraph-3.png
speaknowgraph2.png
 

“Q:You take measures to verify the information you consume on social media (eg. check website links, compare articles from different sources, etc.).” 

Frame 8.png

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
Persona 1.png

To better sympathize the users, we create two users personas to illustrate our target users' potential frustrations and UX needs. 

seccondary.jpg
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.  

storyboard-1
Storyboard-2
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. 

Frame 1.jpg
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. 

True.png
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. 

Screen Shot 2021-01-06 at 7.10.19 PM.png
 
  • 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
Screen Shot 2021-01-06 at 7.19.38 PM.png
Moodboard
moodboard.png
moodboard-2.png
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.

Style Guide 3.jpg
User Testing 
With Lo-Fi & Hi-Fi Prototype

For user testing, we have five users from age 20-24 years old completing three tasks to help them fully explore the app, and we will record their data for future comparison. 

Tasks: 

1. Read a news article 

  • Make a fact check self-assessment 

  • Discuss this article / Create a discussion thread on this article

  • View discussion threads about this news

 

2. Read a discussion thread 

  • Add comment under a discussion thread

3. Find your past posts and saved articles 

Iterations
Changes Based on User Testing 
Before
After

1.

Article - 6 (1).png
Article - 4.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.

    • SolutionWe changed the “forum” function to “discussion” in the navbar to avoid confusions of the users

  • Failed3/5 users feel not encourage to post because they have to copy article link in order to create a discussion thread 

    • ​✅ SolutionAdd the "Discuss this Article" button that allows the user to create a discussion post with one click

 

2.

Before
After
unnamed (3).png
unnamed (4).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" 

  • ❌ Failed3/5 users feel not encourage to post because they have to copy article link in order to create a discussion thread 

    • SolutionSince 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
Liberal.png
Liberal.png

Change profile section to categroies 

Profile section with My Post and Saved Items

Profile.png

Some Feedbacks We Received

Screen Shot 2021-01-07 at 8.24.03 AM.png

—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.