CDS: Project 1

Analyzing the websites of USA today, FOX news and NPR

How do you begin the task of analyzing different products and their offerings? I began by creating box charts and trying to differentiate the three websites based on various factors. Here’s a brief note of my initial research.

I then tried to expand my analyses on each of the websites based on initial perception, form factors and content.

USA Today

The landing page of USA Today with and without advertisements.

I wish there was something that I could take away from my initial perception of USA Today that set it apart from most commercial news channels. I was left disappointed. Not only was the website extremely advertisement heavy (note the homepage screenshot), but it also annoyed me as a reader by light-box advertisements and page pop-ups that made navigation a tough task to achieve. I was presented with the option of navigating left-right to different news categories as well as up-down page navigation. This wasn’t a bad user experience necessarily but it did take time to get used to the different page interfaces I was presented with.

Right Navigation and exploring different news categories.

In terms of content, I did find USA today to be more image driven but with a good balance of highlighting article titles. Much to my relief, there was no presence of all CAPS anywhere. Reading through the website would have been much easier had there been more spaced out content formation. They stuck to three fonts: Futura Today, Helvetica and Arial. There was a huge reliance on color categories in stark contrast with monochromatic news pages.

FOX News

Landing page for FOX News, with and without advertisements.

For me, my initial reaction to FOX news website was that of a feeling of flipping through a magazine. It was heavy on commercials, sensationalism of current hot topics, and rather image and video heavy in terms of content. Titles can be seen splashed across the website in bold caps and there is very less information on what the reader might actually find inside the article. The immediate flash of options on the top of the homepage was quite distractive to me. As someone who is actually not familiar with FOX news, I was a bit overwhelmed by all the diverse FOX links available to me. What was more confusing was the fact that every page had a different page layout, font family, image treatment and content style.

Variations of FOX U.S, Entertainment and Tech.

In terms of form, FOX news clearly had a lot going on in each of its pages. I counted 7 different types of Font families being used and almost no correlation to page layout from one page to the next. If I were to remove the FOX logo from each page and place them side by side, people would think I am showing them different case studies. Much like USA today, the colors were in stark contrast to white and grey heavy content page backgrounds.

In terms of content, the channel seemed to rely on loud titles, exaggerated phrasing and also on pushing for as much content as possible on the home page. While the politics section was rather text heavy, the images did not seem to correlate with the articles. I found more of a repeat of politician photographs rather than them in actual scenarios.


The first impression that I had of NPR was that of stumbling upon a private blog. It was free of commercialism, was set in muted tonal values, and gave equal importance to the image as well as content. The images were more inline with the news posts, where a reader could get a basic understanding of the tone of the article. The page layout is constant in all its categories, the language used is neutral, and the content has not been pushed to advertise. It is also the only website that offered its users to segregate articles by date, a feature lacking in both FOX and USA today. They have a comprehensible website header menu which gives the user less confusing options.

NPR could come across as static, but in its defense, it is a news website — a channel that is supposed to bring you information in an unbiased fashion, so that you yourself can make your own interpretations of the world’s current events.

Stage 2: Ask why?

FOX news and why it gives you the impression of a tabloid.

  • It seems as of FOX news is targeting an audience that is very superficial. It forces its readers to take context at face value.
  • It doesn’t give its readers breathing space to analyze the content from their own perspective. The sarcastic style and the use of brash language, give the impression of it being a daily tabloid rather than a serious news portal.
  • This is highlighted even more by the non-segregation of news highlights.
  • They place articles related to fashion, gossip and politics side by side. It develops the user to actually skim through the news feed rather than reading the articles it has to offer.

USA Today and why it creates a political heavy image.

  • From images being thrown around the entire page, the thought seems to tilt towards being visual centric rather than writing content.
  • There is no place of hierarchy with the news articles, as all are represented with the same structure of images and small typographic headings.
  • Forces the readers to skim rather than understand. It targets the user which relies on visual information rather than producing thought from writings.
  • The news feed is not customizable, and they use this against the reader to push political articles as the highlights, and creates an urgency in the realm of politics.
  • Negative light is shed on politicians through the use of bad images which evoke the feeling of “not to be taken seriously”.

NPR News and why it is actually a news portal.

  • Its design is neutral.
  • It represents news as it is and does not add an urgency to it or any form of misleading or directional opinions.
  • It evokes emotions about the article through its images and the reader can relate to the tone of the article through its heading and sub-title explanation of the article.
  • This does not direct the user to skim through, but actually harbors a deeper interest about the article.


Came across this article by Mark Manson, ‘In The Future, Our Attention Will Be Sold’. He has said. “the new scarcity in the internet age is attention.This is why politics is becoming less about actual policies and more about dramatic actions designed to draw either positive or negative attention to various actors and political parties.”

160908: Impressions of New Outlets as Narrative


  • Informative
  • Content-centric, varied content, global in perspective, serious news
  • Your impression is that you had stumbled upon a blog site by the lack of flashy advertisements or push content highlighting large bolded titles. Scrolling, you first see the featured article with a relevant image, which is action-oriented and not static. You briefly read through the summary of the article before scrolling further to scan through the rest of the news. Because all of the news items are displayed in the same format, you are not distracted by the visual formatting dictated by the site and are drawn into an article only when you are interested in the content itself. NPR’s use of a scrolling feed for its news places equal importance on all of its articles, and promotes the reader to dig further into the article rather than just skim through soundbite titles. Its usage of images are fitting to the context of the articles, as compared to shock-worthy imagery used by FOX or USA Today.

Group Analyses of website’s — Manjari Sahu and Ming Xing


  • Sensationalist
  • Political, biased
  • Overwhelming, promotes ‘skimming’
  • Immediately you are drawn to the main article, featured with a large photograph and a shocking title. You are surprised by how negative or conservative the article is leaning, and continue down the page to read the titles of the other featured articles underneath. You briefly scan through the Latest News feed, and are attracted to the bolded news that were highlighted with no apparent order by FOX. Scrolling further down, you see entertainment news categorized by sections, all featuring a stock photo or some form of a clickbait-worthy title.

USA Today

  • Dramatic, visual driven
  • Structured, predictable
  • Ambiguous
  • Immediately you are presented with a grid of visual images, which is unlike text-heavy news outlets that you are used to. Your eye is drawn to the red bar on the top of the page, which features breaking news. You can almost compare USA Today’s visual structure to that of a magazine’s — highly evocative images and ambiguous dramatic titles. As you scroll through, you are drawn to article pieces with the most dramatic or relevant images, and have some difficulty distinguishing between articles and paid content.

After studying all three websites together, we were to frae a statement that would help inform the readers about all three websites. The goal is to create a mental model that will help people become better informed citizens by teaching them how to carefully read content (not just the words but the forms of information) and encouraging them to make comparisons among information sources. We started by creating a chart of characteristics that would help us shape our statement.

Initial chart listing all three news sources data and what we inferred from them. Created by Ming & Manjari

After the segregation, we decided to state the agenda of each website as our base for information. Our statement — What factors help you infer the agenda of a news website so as to be better informed readers?

Based on this we re-charted our analyses, as seen below.

New chart with information of the website’s agenda and what factors help you understand it. Created by Ming & Manjari


We started out by sketching diagrams and visualizations of our research to help find a structure to create out mental model.

After sketching out some of the probable diagrams, we combined our sketches to better explain the statement. We then created a hierarchy of our points that would help combine the statement as a whole. We also studied all three websites with a micro focus on category percentages. That helped us illustrate the final agenda of each website.

Study of news category percentages on the landing page as well as on the feature focus area.
Breakdown of categories

After collecting data and sorting them, we proceeded to create our mental model.

Mental Model of how to analise News Sources. Created by Ming and Manjari

160915: Work session on giving a “how-to” to become a more/better informed consumer of news

Some interesting references:

Step 1: Who do we want to address in this how-to?

  • Consistent conservatives. Pew Research Center cites that 47% of consistent conservatives cite Fox News as their primary source of news, whereas consistent liberals cite several news outlets to get their news. The how-to would address the issue of consuming news from only one perspective, as opposed to being informed by several points of view.
  • Social-media news skimmers. Readers who receive most of their news from social media outlets, which are curated for them, rather than get their news from several sites to get a more global perspective of news. 30% of all US adults get their news information from Facebook, 10% of all US adults get their news from Youtube, and 8% of US adults get their news from Twitter (Pew 2014)

We want to address users who tend to get their news from one source, such as from their social media feed or trending bar, and inform them to become better consumers of news.

Facebook is by far the largest social networking site, reaching 67% of U.S. adults. The two-thirds of Facebook users who get news there, then, amount to 44% of the general population. YouTube has the next greatest reach in terms of general usage, at 48% of U.S. adults. But only about a fifth of its users get news there, which amounts to 10% of the adult population. That puts it on par with Twitter, which has a smaller user base (16% of U.S. adults) but a larger portion getting news there. ~ Pew Research Center 2016

Step 2: What behavior do we notice in this audience, and would like to change in order for them to become better-informed citizens?

  • They tend to get news from one source
  • They tend to get news that is tailored to their interests / leanings / opinions
  • The scope of the news they get is limited, as it is circulated amongst social circles / ‘trending’ at the time

Step 3: Why should they change these behaviors?

  • Scope: They are relying on social media to provide them with only a chunk of all the available news out there, which means they have a very limited point of view on what is currently newsworthy. We need to help inform them that they need to acquire their news from multiple sources in order to have a better perspective of the world around them.
  • Ideology: Their own point of views are being reinforced by the types of media that is curated to them on the social network platform, as well as from the news that their friends in the social network circulate.

160918 Initial Ideas — How To?

How can you get your ideas across to users without it being too formal? How can your design stand out and pull the users in? Keeping these questions in mind we sought out to create an engaging and interactive form of “How to” piece. Since our target consumers were social media users who get their news from curated sources, we sought to adapt our information piece to the medium of Facebook.

Concept 1: The social media comic

How can comic communicate information? Image Source: Ansley Zaloudek

Comics have become a great medium for information. Not only are they engaging and create multi-dimensional story lines, they can be easy to follow and give immediate feedback to the reader. Comics have also been used largely to highlight satire in todays political environment in all nations, with a focus to create though provoking images. Considering how visually driven Facebook is, and how it drives its readers to skim through “viral” posts, a comic can stand out as a great piece for storytelling. Below are a couple of comics that I saw for reference :

Trump Smash Debate!
America is Already Great

Concept 2 : Buzzfeed Quiz

What if we create a how-to campaign that is in the form of a social media quiz? Perusers of social media can take this quiz, figure out how “informed” they are about news and bias, and are then presented with a graphic that teaches them what to look out for when perusing the news on the web. The inspiration came from the clickbait-worthy titles of Buzzfeed:

This design solution addresses the following:

  • It targets users who are more likely to be getting their news from one source — Pew Research cites about 40% of US adults get their news from Facebook. We know the bias exerted by Facebook in showing us only what we want to see, so this population would be a good target for the goal of instructing people to become better informed citizens.
  • It utilizes an interactive instructive format to make the process of becoming more informed a delightful and memorable one. The quiz format allows users to compare themselves with others, and to silently ‘nudge’ those who are not quite as informed to take action.

160925: Some Developments

We have decided to go with the Quiz format for our final design, and are in the process of creating our quiz questions and aligning them with our goal of helping them become more informed readers of news. Our final quiz would help participants figure out whether they are a News Ninja or anAverage Joe, through a series of questions that target the following:

  • Discern the tone of the image — understand that the images used for an article are used towards certain agendas
  • Don’t fall prey to clickbait — understand that ambiguous language tactics are used to pique reader interest
  • Don’t get influenced by the tone of the headlines — understand that the way a headline is written can influence his/her judgment of the article topic
  • Don’t just get news from feeds — actively pursue news — understand that feeds present a narrow point of view and that to get the whole picture s/he needs to find information from multiple sources
  • Get information from multiple sources — understand that every news outlet has an agenda and that in order to be an informed citizen one must get news from multiple outlets
  • Don’t just skim through headlines — follow into the articles and read them — understand that all news is more detailed than the short headline it is allocated

160926: First Pass Mockups of Quiz Questions

How can we make the quiz our “How-to” piece?

We looked at various ways to communicate our concept model of how to analyze news through questions in the quiz. We identified our main goal : How to be a critical reader of the news? Ming and I prototyped a set of questions. We then tested the content in the questions with users around our studio, and based on the feedback, made several changes. Our final mockups for the quiz content are below :

A brief explanation follows each mockup. When presenting these to users, we will hide the explanation part (below the line), and reveal it to them once they had made a decision.

160927: Visual Design

As we were working on the content and testing it out with our users, I started looking at the visual language to represent our quiz. We were presented with many options to create our quiz online, on Buzzfeed as well as through Facebook Apps. However, the design layout and language of the quiz created in these platforms was limited.

Various Apps in Facebook that allow you to create Quizzes.

After studying the options available to us to make the quiz interactive, we decided on creating our quiz design and layout as a separate app that can be integrated into Facebook. This would allow us to experiment more with the form of the quiz as well as colors, typography ad layout. Our final pages of the quiz will be shown inside the Facebook ecosystem, similar to how the apps are shown in the above images.

Persona of the Quiz

Keywords for the design : Fun, Interactive, Ninja, News, Informational

Looking at layout — Scroll vs Slides

Visual Design Iterations

Option 1: Have a sliding page format. The colors and font style sis not seem to be cohesive.
Option 2 : Scroll down page. A lighter color format, with icons created around the keywords NEWs and Ninja. A bit more fun in look and feel. The contemporary style felt a bit off form the “Ninja” view.
Using icons from the web — we tried to see how a Ninja and Average Joe could be placed side by side for comparison.

Takeaways from iterations :

  • We liked the format of creating a sliding page quiz. This would give us a fixed frame to showcase our content in, and at the same time not giving the quiz users too much information that they could get confused. After studying various layouts, we opted to try and create a quiz layout inspired from comics. We looked at anime style comics which use flexible layout formats and visual hierarchy to create reading flow. In terms of using a ninja, we created an avatar that would fit into our quiz personality. We wanted to use the ninja as the persona taking the quiz taker through the quiz and information itself.
Ninja avatar iteractions.
Final Forms of the Ninja
  • In terms of typography, we searched for type styles that resonate with the keywords — playful, ninja and informative. After searching and trying various type styles we decided on 3 fonts to use in our quiz.
  • The color scheme of light tones vs dark tones was critiqued. We decided to try using a color palette of black and grey monotones, with one or two bright color highlights.
Final Color Palette
  • Layouts
Iterations of the layout styles — from structured comic frames to a more organic frames: use of curves and brush strokes.

Final Images

Like what you read? Give Manjari Sahu a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.