UX & Interaction Designer
iphone 6 plus mirrored hero.png

Poliscope

Poliscope


Fostering socialization and diversification of views through personalized news consumption
 

OVERVIEW

Poliscope is aimed towards college students who are interested in reading the news, but view this activity as being extremely time intensive. Members of our target audience want to stay abreast of the news in the most efficient, seamless manner possible. My team and I produced a proof of concept based on primary research and usability testing, but I chose to pursue an individual project that revolved around redesigning the interaction and visual design of the team’s final deliverable. 

Our proposed solution was a smartphone application that will aggregate news stories relevant to the user from multiple news outlets into a single location. Our design also gives users the ability to socialize and interact with friends because members of our target audience expressed to us that one of the most important parts of learning about political news is being able to talk about it with friends. In addition to facilitating political discourse amongst friends, our goal was to create a system that discourages confirmation bias and encourages users to diversify their views.
 


Course

Introduction to HCI, University of Washington

Role

Product Manager, UX/Interaction/Interface Designer

Team Members

Janet Gao — Writer, Frontend Developer
Kim Le — User Researcher, Designer, Writer
Ian Turner — Writer, Frontend Developer

Timeline

September 2015 - December 2015

Key Activities

Ideation, semi-structured interviews, competitive analysis, popular media scan, concept sketching, storyboarding, paper prototyping, usability testing, visual design, interaction design

Tools used

Sketch, Principle, Photoshop


My role on this team was to not only set clear milestones and goals to keep the team on track, but to also ensure that the team's product definition was grounded in our research findings. It was my responsibility to help my team produce deliverables that consisted of flows and experiences that accurately reflected our target audience members' goals and desires. Additionally, it was my responsibility to effectively communicate the team’s design concepts to the course instructors in order to solicit actionable feedback. 
 

 
 
•       •       •
 
 

PROBLEM SPACE

Personal informatics systems aid individuals in the pursuit of obtaining self-knowledge (Li et al., 2010). By collecting personally relevant information, personal informatics systems empower users to to engage in self-reflection. This class of systems is highly related to the Quantified Self movement, which emphasizes “self knowledge through numbers,” (Wolf, 2009). Self-knowledge can refer to an increased awareness of one’s behaviors, habits, and thoughts

According to data collected by the Pew Research Center, the most popular personal informatics systems revolve around health tracking, with seven out of ten U.S. adults tracking personal health indicators or the health indicators of a loved one. However, behavior change goals are not always strictly related to health and fitness. People may be interested in keeping a record of their emotions in order to know themselves better, or, in order to discover “correlations among data that suggest a change of their behavior in a particular direction.” Despite this desire for quantifying moods and emotions, very few systems support this goal because of the complexity of this particular kind of data gathering; a “complete automation” of emotions is impossible and systems of this nature require that users are compliant in tracking their own emotions, which they may not be (Cena, Lombardi, Rapp, Sarzotti, 2014). 
 

People [collect their emotions] in order to simply know themselves better, or in order to find correlations among data that suggest a change of their behavior in a particular direction.
— Cena et al., 2014


While it may be difficult to capture emotions, we wondered if we could capture a possibly proxy for emotions, that is, an individual’s opinions and preferences. Specifically, we were interested in distilling an individual’s political leanings based on their news outlets preferences, and then using this information to chart the evolution of their personal beliefs over time. Research indicates that people’s political views shift as they age, but people also have a propensity to only seek out information that is in accordance with their already held personal beliefs. Surfacing this information could possibly expose individuals’ personal biases and give them a means or self-reflection. “Am I spending too much time focused on a particular viewpoint?” “Am I not giving both sides of an argument equal consideration?” “How have my views evolved over time?” These are the types questions we hoped we could help people ask themselves. 

 
 
•       •       •
 
 

Research

Over the course of roughly three weeks, we conducted primary research with current University of Washington students in order to understand their current engagement with the news and how this news consumption process could either be improved, or, encouraged further.
 

Semi-Structured Interviews

We conducted semi-structured interviews with four UW students that we characterized as being either “politically active” or “politically inactive.” Politically active individuals describe themselves as being engaged in either print or televised news, whereas politically inactive individuals describe themselves as being uninterested in the news and generally lack the motivation to stay abreast of political happenings. We asked our participants a number of questions regarding their news consumption practices, including:

 
  • What is something difficult about following political news for you? What would make this process easier? 
  • Do you feel motivated to follow the news? 
  • What are your preferred sources of news?
  • How often, and with what frequency, do you follow the news?
     
 
People get their news from their peers now…news sources now are much more diverse and diffuse, and you talking to your friends through whatever [social media] you’ve got actually matters.
— Addisu Demissie, Clinton Campaign National Voter Outreach & Mobilization


Through our semi-structured interviews, we gleaned four important insights:

 
  • Our participants were generally resistant to the idea of having their personal biases brought to their attention. Additionally, they were uninterested in tracking their political leanings overtime.
  • Participants were skeptical that “unbiased” news sources currently exist, or that they could ever exist at any time. Instead of going to a single news source for objective or non-partisan news, participants seemed fond of a system that would allow them to compare stories from partisan news outlets against one another.
  • One of the most important parts of learning about political news is being able to talk about it with friends. Individuals emphasized that in social situations, it is important to them that they are able to keep up with what their friends are talking about. Additionally, friends tend to influence the type of news that individuals are interested in.
  • Individuals are more motivated to learn about political news when it has personal relevance to their own lives. (Relating to the previous task, what an individual’s friends are interested in also counts as being personally relevant.) One of the current issues with the task of finding political news is that there is too much information to wade through in order to find personally relevant and interesting posts.
     
 


Secondary Research

After conducting primary research with members of our target audience, it became evident that our users were not interested in a politics and news-centric personal informatics system. Instead, our participants expressed an interest in what is essentially a highly customizable newsreader with elements of a social media platform. The challenge became how we would differentiate our product from the likes of Facebook, Twitter, Medium, and theSkimm. 

 

Poliscope Competitive Analysis.png



I conducted a competitive analysis and a brief popular media scan, which made it evident to me that the major deficit of these services is that they spread misinformation and falsehoods go uncorrected. Facebook, in particular, is guilty of perpetuating confirmation bias, that is, the “tendency to seek out information that confirms [an individual’s] beliefs, and to ignore contrary information.” According to the New York Times, Facebook is able to determine a user’s political leanings based on the user’s activity on the site, and then it is responsible for creating confirmation bias by showing users more of the same content they already interact with. Bloomberg View asserts that confirmation bias plays a “pivotal role” in the creation of Internet echo chambers on a wide range of topics including “current presidential campaign, the acceptance of conspiracy theories and competing positions in international disputes.” 

Based on these findings, we realized that our proposed app could determine users’ political leanings and, unlike Facebook, Twitter, and the like, use this information to diversify its users views and discourage narrow-minded thinking. This goal was not at-odds with our research findings; as stated previously, research participants expressed interest in a method for comparing the content of news outlets against each other. 

 
 
•       •       •
 
 

Key insights

After gleaning relevant insights from both primary and secondary research, we distilled the following three design implications. These design implications helped guide subsequent ideation and prototyping:

 
  • Our solution should aggregate different news sources into a single location, while also taking a user’s personal interests into account.
  • Our solution should allow users to monitor the news their friends are consuming, and allow individuals to discuss said news with one another.
  • Our solution should not attempt to present users with “unbiased” news summaries because there seems to a certain degree of skepticism regarding “non-partisan” news outlets. Instead, our design should give users the ability to easily compare conflicting points of view in order to draw their own conclusions.
 
 
 
•       •       •
 
 

ideation

We ultimately chose to pursue a standalone app as opposed to something like a Facebook browser extension that could, for example, allow users to filter News Feed content in order to quickly find news stories of personal interest. Our ideation revolved around mobile solutions because our primary research suggested that people generally read the news during downtime or during commutes (for example, as they walk to class, or, ride the bus to work). 
 

 
 
•       •       •
 
 

Prototyping

Prototyping took place over the course of two months and revolved around creating and conducting usability tests with a paper prototype of our proposed design. Insights from testing ultimately informed the creation of a "high-fidelity" wireframe. 
 

Paper Prototyping


We began finalizing our design by creating paper prototypes. These paper prototypes were intended to aid in testing the usability and desirability of our proposed design solution. However, before conducting usability tests with members of our target audience, we conducted two heuristic evaluations on our paper prototype. The goal of our heuristic evaluations was to get a high level understanding of what was confusing or effective about our proposed user interface design using Jakob Nielsen's "10 Usability Heuristics for User Interface Design." Our heuristic evaluation uncovered the following issues with our prototype:

 
  • Our paper prototype used language that we, as the designers, had internally defined and come to understand. It became evident that we were not using phrases that were familiar to our users, and that we needed to resolve this issue in order for users to successfully navigate throughout the app.
  • Our paper prototype did not provide mechanisms by which users could undo their actions.
  • The prototype did not provide users with sufficient help and documentation
     
 

Usability Testing

SafeWalk-0960.jpg

We used the information gathered from our heuristic evaluations to make iterative changes to our paper prototype, prior to conducting three usability tests. I served as the facilitator during usability testing, which consisted of prompting users to "think aloud" as they attempted to complete tasks provided to them by me. Our tests revealed four potential areas of improvement:

 
  • Our onboarding process needed to be revised in order to provide a better explanation of app functionality
  • Our app necessitates that users indicate their news story preferences, that is, the kinds of stories they are interested in reading about. Our paper prototypes dictated that users select their preferences via a search bar mechanism, but this proved to be too confusing and we decided to replace the search bar with a filtering system that revolved around selecting checkboxes.
  • The system for receiving news articles from friends - receiving a notification that appears on the “Friend Activity” page - proved to be confusing. We decided to incorporate a message inbox into the application.
  • The user is capable of shaping the types of news stories that appear on their News Feed by indicating their feelings regarding the article. Our prototype involved a binary “like” and “dislike” system that proved to lack the nuance that our users expected. We eliminated this binary system and provided users with a more fine-grained list of options.
 
 
 
•       •       •
 
 

proof of concept

We synthesized the findings from our usability tests, and incorporated this feedback into our final deliverable, which I would describe as being a "high-fidelity wireframe." In other words, the focus of this deliverable was on user flow, as well as content and layout hierarchy, rather than visual design.  
 

 
 
•       •       •
 
 

final design

The focus of this particular course was not on the visual design, so after the class ended I decided to revisit this project in order to give it a visual redesign, as well as experiment with potential motion interactionsThe work that follows was produced entirely by me, without additional assistance.  I created static mockups using Sketch and I created interaction animations using Principle. I made sure to retain my team’s research findings in my design.

After creating an interactive prototype using Principle, I conducted three usability tests and used these findings to further iterate upon my design and produce a second high-fidelity prototype.


Visual Design

In order to give the app more of an editorial feel, I chose to use Adelle for article headlines because it is a font that is frequently used in newspapers and magazines. I chose to utilize a card based UI for multiple reasons:

 
  • They are a convenient way to display content composed of different elements.
  • They are a good alternative to a grid list when the content you wish to display needs more information to enhance an image.
  • They are an effective tool for quickly communicating stories. In this design, the cards contain just enough information about an article for a user to get a sense of what the full article contains. 
  • Card UIs rely heavily on images, and studies suggest that images grab a user’s attention quickly and efficiently.
  • The articles are dismissible, and including them on separate cards further cements this functionality.
 



First Prototype

Services like Facebook contribute to the creation of echo chambers by prioritizing content that users and their friends engage with the most, that is, content that has been “liked” or commented on. While Poliscope does not eliminate the social aspects of news consumption - as this was something that test participants stated was of utmost importance to them - it does attempt to prioritize and differentiate between news pertinent to the user and news the user’s friends have interacted with. It does this by separating this content into two separate feeds - a News Feed and Friend Activity Feed - and the News Feed is the default option.

Users are able to specify the types of articles they wish to receive from particular news outlets during the app’s initial on boarding process. However, users can further fine-tune what appears in their news feed by selecting from a list of actions to impose on the article. Here, I am demonstrating a scenario in which a user has chosen to hide an NPR article regarding ISIS from the news feed. 

Here, I am showing off the "filter" feature of the application, which allows users to quickly surface particular news stories - in this scenario, articles from FiveThirtyEight about Hillary Clinton, the 2016 Presidential Election, and so on -  without permanently changing the topics and news outlets they are following. I was interested in experimenting with methods for providing users with touch feedback, and I decided to try to provide this feedback by animating button presses outward from the point of touch. 

Finally, in addition to demonstrating the interaction of switching between the "News Feed" and "Friend Activity" screens, I am showing off the experience of skimming over a specific article. Although Facebook inadvertently contributes to the creation of echo chambers, it encourages its users to “keep an open mind” by seeking out content that doesn’t appear in their feedsPoliscope removes the onus of responsibility placed upon users to seek out diverse content by providing users with suggested reading at the end of each article.


Usability Testing

I decided to iterate upon my original visual design and interactions based on additional usability testing. I conducted three usability test sessions with University of California, Berkeley students. I presented test participants with my original prototype on an iPhone using Principle Mirror, a companion iOS app to the Principle For Mac desktop application. 
 

DSC_0128.jpg

Testing revealed the following usability issues, as well as potential areas of improvement:

 
  • Participants were not interested in reading the “Opposing Views” articles. However, they expressed a willingness to read "Opposing Views" articles if their friends had read those articles
  • In my original design, clicking the Filter icon on the home page directs users to a page in which they can select or deselect the news outlets and topics they want to see appear in their News Feed or Friend Activity Feed. The “x” button on the filter page was commonly misconstrued as a “cancel” action as opposed to its intended action, i.e., confirming the selected choices and returning to the News Feed or Friend Activity Feed.
  • The filtering scheme employed by both my team’s original proof of concept and my redesign involved filtering based on multiple criteria at once. My test participants found this scheme confusing, stating that they would prefer to filter the News Feed or Friend Activity Feed results by a single news outlet or topic at a time. I assume this adverse reaction is due to the fact that keeping track of multiple filtering criteria at a single time imposes too much of a cognitive burden upon the user. 
  • My team’s proposed design allowed users to update their Topic and News Outlet selections via the Settings page. However, the feedback I received during usability testing seemed to indicate that users would like to be able to update their preferences via the Filtering page as well as via the Settings page. If a user navigates to the Filtering page and notices that they are following a Topic or News Outlet that they’re no longer interested in following, they want to be able to unfollow the Topic or News Outlet while the knowledge that they are following this entity is still fresh in their head. 
  • Users did not understand how to share articles with one another. The icon I used in my original design - an arrow - is sometimes used to denote a “reply” action, and my test participants seemed to think that tapping this button would result in leaving a comment and/or reply to an article. 
 


Second Prototype

As a first step towards incorporating feedback from usability testing into a revised design, I sketched possible UI design revisions and additions.
 


After sketching designs, I moved onto creating static Sketch mockups and Principle interaction animations.
 


In addition to incorporating my usability test findings into the second iteration of my design, I also wanted to iterate upon the visual design. My goal was to make the interface design feel a bit simpler and cleaner. For example, I utilized slightly lighter colors and reduced the size and weight of icons used throughout the app. For example, this change was applied to the “share” button icon, which was updated to an icon that is more universally recognized as connoting sharing; in my previous design, the icon used to denote sharing caused confusion because users thought the button represented a “reply” action. Article cards include the article's headline, the name and logo of the news outlet that published the article, and the time at which the article was published; article cards on the Friend Activity Feed also include the name and profile picture of the user's friend that read or shared the article.


My design allows users to influence the content that populates their News Feed and Friend Activity Feed by selecting from a list of actions to impose on the article. In the example below,  a user has chosen to hide an article from FiveThirtyEight regarding women's soccer.


Users can share articles with one or more people by tapping an article's “share button." Articles can be sent with or without a custom message. 


Tapping an article card, on either the News Feed or Friend Activity Feed, directs the user to the entirety of the article. When the user scrolls the page, the navigation bar contracts so that the article content is able to occupy the majority of the screen. The “share” button does not disappear, instead, it simply shrinks in size to it within the condensed navigation bar.


In addition to sharing articles within the app, users also have the option to share an article as a text message, which enables users to engage friends and family in political discourse even if those individuals have not downloaded Poliscope. Users also have the option to copy the link to an article directly. Tapping "more options" summons the same set of actions that appears when a user selects the "more options" button (denoted by three horizontal dots) on an article card in the News Feed or Friend Activity Feed (as seen above).
 


“Similar Articles” and "Opposing Views" articles were updated to include the name and profile photo of friends who had read or shared those articles

Rampant harassment takes place on various online platforms, and this abuse usually manifests itself in the comments section. Misinformation is also spread through comments sections, and research published in the Journal of Computer-Mediated Communication stated that “Uncivil comments not only polarized readers, but they often changed a participant’s interpretation of the news story itself” (Anderson, Brossard, Scheufle, 2013). The researchers dubbed it “The Nasty Effect.” Similarly, The Guardian published an article that put forth the assertion that comments sections are vitriolic, and even went on to question their usefulness or necessity. 

For these reasons, we decided that Poliscope should allow its users to share articles - and their thoughts on their content - directly with specific people, as opposed to broadcasting their opinions in an open forum. Poliscope features a messaging system, but articles are intentionally devoid of comments sections. 


In the second iteration of my design, I decide to include the Friend Page, which is composed of the names and profile photos of a user’s friends. Individuals the user has recently interacted with appear at the top of the page, and the remainder of the user’s friends are organized alphabetically. Users can also use the search bar to quickly locate a specific person.
 


The “x” button on the Filter Page - which was commonly mistaken as a “cancel” action as opposed to a selection confirmation - was removed and participants are constrained to filtering their News Feed and Friend Activity Feed by a single criteria at a time. Users can refine the results of their News Feed and Friend Activity Feed by selecting from the following filtering criteria: “News Outlets You Follow”, “Topics You Follow”, “News Outlets Your Friends Follow”, and “Topics Your Friends Follow.” Users can choose to unfollow news outlets or topics from this page as well (as opposed to navigating to the Settings Page in order to update their following preferences). Additionally, users have the option to refine the results of their News Feed and Friend Activity Feed via unique search terms.
 


The following screens represent what a user's News Feed would look like after filtering results using the search terms "Hillary Clinton."

 
 
•       •       •
 
 

Next Steps

When my teammates and I examined sites like Facebook and Twitter, we were correct in identifying their tendency to amplify confirmation bias as being a major issue. However, we were likely being overly simplistic in our logic that providing users with an alternative perspective would be enough to combat this confirmation bias. After reexamining this work, I’ve identified necessary potential areas of exploration and opportunities for future improvements. 


The Importance of Fact-Checking

Although Poliscope makes it easier for users to educate themselves on both sides of an issue, the information they absorb is only useful if it is not misleading. A BuzzFeed News analysis discovered that three major right-wing Facebook pages published misleading or false information 38% of the time, and three major left-wing Facebook pages also mimicked this practice 20% of the time. John Hermann of the New York Times echoed this sentiment, pointing out that Facebook News Feeds were cluttered with deliberately falsified “news” stories. An author at The Intercept, Sam Biddle, recently proposed a solution for Facebook in the form of employing “a team of bipartisan fact-checkers to identify pages intended only to dupe millions of users.” These articles made me realize that Poliscope would need to employ a team of individuals tasked with controlling the quality of content entering users feeds
 

Hyperpartisan political Facebook pages and websites are consistently feeding their millions of followers false or misleading information
— BuzzFeed News, 2016


News journalists depend on Facebook for distribution and adapt content accordingly, which translates to clickbait-esque content. Clickbait and other inflammatory content tends to receive the most engagement, and much of this content is incorrect or half-true. Following this logic, fact-checkers could be directed to verify the truthfulness of popular posts within the Poliscope app. Users could also be given tools to report hate speech that an internal team could evaluate and take action upon. Models for how such tools could be implemented exist within Microsoft products and the Youtube platform, to name a few. 


Visually Distinct Content

John Hermann’s New York Times piece also shed light upon the phenomenon of news intentionally crafted for platforms like Facebook, “political news and advocacy pages made specifically for Facebook [are] uniquely positioned and cleverly engineered to reach audiences exclusively in the context of the news feed. These are news sources that essentially do not exist outside of Facebook, and you’ve probably never heard of them. They have names like Occupy Democrats; The Angry Patriot; US Chronicle; Addicting Info; RightAlerts; Being Liberal; Opposing Views; Fed-Up Americans; American News; and hundreds more. Some of these pages have millions of followers; many have hundreds of thousands.”

This content appears next to articles produced by established news outlets - CNN, The Wall Street Journal, The New York Times, etc. - and is given the exact same visual treatment. To quote an article published in Mashable and written by Damon Beres, “Researched news ... complete bullshit. It's all at the same level… a bit of dissonance happens when you put a great piece of journalism next to something that, well, isn’t.” If I were to pursue Poliscope further, I would investigate the effectiveness of a visual treatment that distinguishes between these fledging, or, in some cases, outright fake, news organizations and established news organizations that are known to uphold a certain journalistic integrity; for example, this could be accomplished through “verified” badges, badges indicating an article has been repeatedly flagged for containing falsehoods, and so on.