Leading the whole process, Product Design


Finalist of Interaction 2020 Awards

How might we help news readers to know where they are, and eventually have a balanced viewpoint?

Libra is a two months project from MFA Interaction Design program at School of Visual Arts. I worked with three people as a team and led the process of the design and concept. Libra is a political news platform which aims to solve political polarization by helping political news readers know where they are in the spectrum and read news from different perspectives. It aggregates different news from different media and maps them into media bias chart. With the help of machine learning algorithm, readers are able to know how biased each article is and which sentences causes the bias. It also allows users to see their reading history and political tendency.

This project is focuses on design sprint, iteration, and how we got to the solution.

Political polarization

Data shows political polarization has been intensified since the last two decades. Republicans and Democrats are more divided along ideological lines – and partisan antipathy is deeper and more extensive. And ideological thinking is now much more closely aligned with partisanship than in the past. As a result, ideological overlap between the two parties has diminished.

Republicans and Democrats are more divided along ideological lines – and partisan antipathy is deeper and more extensive.

1. Solution

composition of libra

Daily Headlines
Daily headlines shows today's article from the different political lean from different media. The chart is based on the Media Bias Chart and Readers are able to read the articles based on the different political point of view.

Article View
Based on the Machine Learning System, article view analyses how much the article is biased and shows the reasons behind the article by highlighting the sentence.

Media Feeds
Media feeds shows the top 5 articles and let readers analyze political tendency by media.

Profile Page
Users can see the analysis based on their readings and see how much they are balanced.

Daily Headlines

Know what they are
You can see different articles in a different point of view on the same topic so that you can read various opinions and think about it on your self on your viewpoint.

Birds Eye View
The article is distributed based on Media Bias Chart. The Y-axis is how accurate the article is, and X-axis is about the political tendency of media.

Topic Filter
Machine can extract the topics of the headlines based on big data, and it provides the filter above so that you can read the articles based on the daily topic

Browsing Experience
If you tap the dot in the map, it will show the main photo and the headlines.

article view

Know what you read
AI automatically detects the conspiracy level, Pseudo level, an analysis of how sentimentally written and highlight the related sentence. It helps you be aware of the article’s opinions and see the hidden intention behind it.

Article Analysis
Based on Machine Learning, the system analyze article and shows conspiracy lever, pseudo level, and sentimental analysis to indicate readers how much the article is biased.

Machine Learning System highlights the sentence based on the analysis to provide the reason behind the analysis.

Vote & Same Topic, Different View Points
Based on the article, you can vote if the article is aligned to your view point to diagnose your political lean. Also, different view point section recommends you to read other news by showing articles that have a different political tendency of the same topic.

media feeds

Know who they are
Libra shows different headlines and photos based on the media’s political tendency; therefore, you can compare the headlines based on the media’s political bias.

Top 5 Articles
By swiping the media outlets logo, the color bar below will change to indicate the political tendency of a media outlet.

Map Navigation
Map navigation shows the coordinate of where each media outlet is based on the media map. You can swipe left or right to switch the media.

article view

Know who you are
Through the profile page, you can realize where you are in the political bias spectrum by analysis and how you can adjust your reading behavior based on the results based on their reading history and vote.

User Score
You are able to view where you are in the political bias spectrum and how you can adjust your reading behavior based on the analysis results

You can view all the bookmarked articles in Collection.

Reading Analysis
You can choose the time period on reading history, and we added micro-interactions in the stats to visually make the data more legible. What you voted on articles will appear here, so in this chart, you can see your tendency and topic you are interested in.

2. How we got here? - Understanding


To find out more in-depth insight, we interviewed various newsreaders with political backgrounds. One interesting fact is interviewees think media outlets are not trustworthy. Still, they cannot find the other way to gain information and consequently use them to assert their opinion based on news media that they read or watch.

Their credibility for news outlets are low. But they do not know anything other than media to encounter news. This phenomenon causes them to choose the media according to their preferences, increase adhesiveness, and eventually, stick to the opinion.

Initial Idea: Comparing the different news on same topic

To solve this problem, my teammates and I started to brainstormed and decided to show various news from a different perspective based on news media has. Users can vote on each broadcast and rate if the article is right or left side so that other readers can decide the political tendency of the news.

3. Design Sprint 1

Initial draft

Based on the initial concept, we quickly iterated, built a prototype and tested with the concept.

UT feedback: people liked the concept but not satisfied with our solutions

"I’m not buying because I don’t know where does the article come from." - Provide media sources.
"I feel tired swiping every time to see articles I'm interested in. I want to see them at once." -
Need a more efficient way to display articles.
"That's quite interesting to see which political side the article lays. I'd like to know more about that, because I don't know where does this judgement come from and why this article is mid-left." -
Communicate the system with users.

People wanted credibility of the reason why the articles are biased.

4. Design Sprint 2

The goal of the second design sprint is to

1. Find a credible source of data to convince readers of the political ideology of each news.
2. Design a better way to show the landscape of news articles in different political tendency.

Key-finding For Sprint 2: Media Bias Chart

We researched to find a credible source based on the UT and found a Media bias chart. The chart maps different main media into the coordinate system — the X-axis shows which side the media lay, liberal or conservative. The Y-axis stands for how accurately they are reporting and if the news is written based on facts or fabricated. We started to explore the possibilities of how we can utilize this chart.
Data Resource

Wirefram & system flow

key screen variants

We tried to design different ways of showing multiple headlines on the map page. We also tried various ways to create a media page. We came up with switching between diverse media is an excellent way to review different media and their articles on the media page. In the article view, we came up with the idea that people can highlight a sentence and give an opinion about how the sentence is biased or fabricated so that the other readers will know the reason why they are opinionated.

UT feedback: people were not satisfied with the design

"How can you guarantee the trustworthiness of the comments? They can also be biased as much as articles and also be a means for people to affect people’s point of view." - Reason for bias check needs more trustworthiness
"Comments rely on people’s instincts or feeling, not with a logical background." -
Comments are subject
"I don’t want to leave comments here. I think people will judge me." -
People might not want to participate when it comes to rating

The proposals we made to correct people's prejudice could result in affecting people's point of view.

5. Design Sprint 3 - Final Design

The goal of the Final design is to

1. Figure out a way to measure bias level of each article.
2. Design a clearer and user-friendly map view.
3. Design a better way to show the landscape of news articles in different political tendency.
4. Define and home interaction and UI

Key-finding For Sprint 3: Bias-checking Machine Learning Algorithm

My teammates and I tried to find a reliable means to utilize to measure each articles' bias level. We researched possibilities in AI and found a machine learning system from MIT that analyzes the bias level in a report. It is a new system that uses machine learning to determine if a source is accurate or politically biased with 95% accuracy. With the help of a machine learning algorithm, our product can analyze the articles and capture the sentences that cause the bias to let users be aware of it.
Data Resource

Wirefram & system flow

key screen variants

Based on the user feedbacks and research findings, we integrated the machine learning system into our article view and also designed a more user-friendly map view and a more clear profile page. We also added a mini spectrum at the bottom of the media page to indicate the political tendency of each media outlet. Readers can see the maps of headlines of diverse media outlets based on their propensity and credibility, view how each article is biased, and read news from a different point of view.

Final keyscreen

6. Impact & Learnings

Finalist for interaction 20 awards

Libra has been named in the finalist for 2020 Interaction Awards honored by IxDA.


Next Project
© Cheon Park 2020