C. PROJECT 1: Navigating Information


The prevalence and easy reach of information has caused certain information overload and forced information sources to pick and choose based on many considerations. This results in certain bias and narrow perspectives on world events, yet readers of those sources can hardly notice their traces of choreography . Thus, communication design may be able to help people to be better informed and formulate a critical and unbiased attitude toward information sources.

Step 1-Analyzation

[8/31] Individual Findings

NPR Homepage
NPR Feeds
CBS Homepage
CBS Feeds
GoogleNews Homepage
GoogleNews Feeds
  • Initial Perception

NPR: The homepage appears to be very minimal style. There is a lot of white spaces, and all texts are in grayscale. Each news is neatly arranged in the same white rectangular space, suggesting an impartial point of view.The typeface for the news titles are reasonably scaled up and boldend. The size of all images are about half of each section. Only four sections can be seen within the screen height.

CBS: The overall style is similar to traditional newspaper. All news are jammed in the middle 1/3 space of the computer screen, leaving two trips of large white space at both sides. The top story occupies nearly half of the space with its big size image, and the title font is extremely thick. Many sizes of typefaces are used, and certain section titles are in crimson color, leaving readers a quite chaotic impression. There are seven sections that can be seen in one page (without scrolling downward).

GoogleNews: The homepage style seems to suggest that GoogleNews is more for news search than news reading. The page is fully occupied with small texts/images, categories, tags and source links. Each section is very close to each other, leaving nearly no white spaces. All titles and key links are in bright blue, which is overwhelming and does quite the opposite job if the original intention is hierarchy and differentiation. The top-story is slightly bigger than the other news, which are crammed together in a single page below. A total of twelve sections can be seen within the screen height.

  • Component Hierarchy

NPR: The overall structure for the feeds is simple stacking. Each component on the page is nearly identical, including image size, font size and section size. And they seem to be unrelated to each other. Even for the news on the top, it is hard to say whether the slightly bigger font for the title suggests the importance of itself or it is simply a means for expressing strong opinion. The light grey space on the right is for opening the radio toolbar, which does not have a hierarchy either, just simple stacking of contents.

CBS: The page structure is highly hierarchical. The top story lies on the upper left of the page, occupying nearly half of the page space. Below the top news there are two sub-columns: one serves for major contents, and the other one serves for supplementary news. The column on the right can be divided into two portions: the part that can be seen with first glance are news related, and space below are used for other miscellaneous information. The supplementary news column has a clear association with the top story, and so does the upper portion of the right column. There are at least seven levels of typographic hierarchy shown on the webpage, which easily draw varies levels of attention from readers.

GoogleNews: The focus seems to be displaying search result rather than delivering information. the page is divided into three sections: left strip for news categories, right strip for miscellaneous information, and the middle column for news display. The middle section is stretched to 5/7 of the screen width, therefore making all news descriptions to be displayed as one line sentences. Readers can hardly find any focus in this composition since there is no densified texts displayed as a visual cue.

  • Content

NPR: The section categories include politics, health news, around the nation, elections, parallels (world news), the salt (food), the two-way (breaking news), a nation-engaged (conversation series), etc. The categories show a wide range of neutral-wording topics, with mild attention to current mass focus. Within three pages of news feeds, 2 out of 13 news are related to the election. The title for one of the election news is “FACT CHECK: Trump Says Immigration System ‘Does Not Serve’ American People”, which suggests the media’s critical and analytical attitude toward Trump. The wording of the description is carfully chosed, showing no sense of bias or harsh tone.

CBS: The sections listed include campaign chatter, latest news, news you should know, Trump in Mexico, crisis unabated, close call, most popular, Chicago violence, eye on 2016, most discussed, giving up hope, etc. The section titles contain negative vocabularies, expressing a sense of unease. The major focus of the media is clearly the election, giving the fact that within three pages of news feeds, 7 out of 11 news contribute to this topic. Words such as “Constructive” or “comes at a price” are used in the article titles, which seems to be politically toned for certain point of views.

GoogleNews: The categories include top stories, suggested for you, world, U.S., elections, business, technology, entertainment, etc. The categories listed are neutral, and current mass focus is shown through only the top stories. Within three pages of news feeds, 3 out of 23 news are related to the election. The same event relating to the election is reported by many medias, and their news titles are juxtaposed to one another in a single section, allowing readers to compare and choose.

[9/1] Horizontal Comparison

Color Fill Block=Same Content | Black Stroke Block=Unique Content

Similar news content were found on each media when comparing homepages across all three medias in the same day. This indicates that these medias do take the responsibility to faithfully present current hot issues to their readers. However, the space occupied by each news is way different. In GoogleNews, all news take up similar size of space, suggesting that the company’s goal is to give what readers want rather than conveying certain message to the readers. In NPR news, the political news occupies the least amount of space. This speaks to the nature of NPR, which is a national non-profit organization. For NPR, since its readers are nation-wide, they need to consider the impact of any sensitive information. Thus the web designers would want to shrink the news space to minimize conflicts among readers while still delivering information. For CBS news, delivering striking news to capture reader’s eyes seems to be their first priority. Both the main story and the secondary news have the word “threat” in their titles, suggesting a sense of anxiety and insecurity.

Each media also has their unique section on the homepage. NPR news places ads about The-Two-Way, NPR’s flagship news portal, at the center of the web page. The intension is obviously attracting new readers and expanding their news exposure. For CBS newss, their unique feature are the live news window on the upper right corner of the web page, as well as the Candidates’ Tweets section at the lower left. It seems like CBS news cares more about the timing of the news, as well as the trend of the public voice. Perhaps its audience are more expressive, and would like to catch up all news 24/7. GoogleNews has many sections tailored for each individual. This reveals the company’s high reliance on database, and their ability to extract information from each person.

[9/5] Vertical Comparison

The image used often shows context. The Two-Way ads constantly locates at the center.

The image used often doesn’t show context, and big head portraits are used instead to make the news more compelling.

There are way more words than images shown on the page, top news over similar topic are shown alternatively, making the content even more objective.

[9/6] Peer Comparison

Step 2-Mental Model

-how media informs readers to consume news?

-how do readers who consume news effect media to frame news stories?

Perspective (NPR/CBS/GoogleNews)

-How do we feel about these news resources overall?

Visual Impression/Style

curated blog | provocative newspaper | impersonal personalizable search engine


-Where do these impressions come from?


neat/spacious | chaotic/patchy | dense/plain

{abstract page diagram showing how info organized}


  • radio promotion | TV promotion | personalized section

[large space contribute to unique feature/intention]

  • equal weight/contextual image |multi fonts/head image | info aggregator

[text/image balance]

{degree of hierarchy spectrum}{abstract page showing quality of hierarchy}


  • broad range | political oriented | general category [category]
  • neutral | provocative/dramatic | multiple source/tone [language]

{headline examples} {images}{data pie chart showing range}

-Why are they presenting themselves this way? Who do they see as their readers?

-What happens when you don’t see all this? Is it possible that you can let these news sources shape you without understanding how? What if you only read one news source?


critical reader | emotional reader | researcher

[9/15] Presentation

(The actual presentation was not documented, the photo was taken in the rehearsal round)

Constructive feedbacks were provided by peers:

  1. The colors on the layout diagrams are confusing because there is no explanation or legend that explains their meaning.
  2. The abstract diagrams convey the points well. But they might be too small to be seen clearly.
  3. There are too many aspects covered, lacking one strong point.
  4. Conclusion may be too long when compared to the analysis.
  5. Presenting the whole journey map makes it easy to understand the overall structure of the presentation.
  6. Write keywords on the side when talking helps memorizing the content. But they need to be more legible and precise.
  7. We synchronized drawing and talking well.

Step 3-How To Instruction

For our next step, we try to look beyond the news source, and start to question ourselves: what exactly does being informed mean to individuals? The definition must be varied person by person. So instead of making any preconceived assumptions and insert them into people’s minds, can we design something that guide them to become the type of informed citizen they want to be?

[9/20 & 22] Brainstorm

Idea 1: an animation showing Mark, our imagined citizen who wants to to be informed, tries to use our provided conceptual model to expand his island of knowledge in both breadth and depth dimensions, and transform it into actions at various stages in order to make meaningful impacts.

Idea 2: a tool kit that allows user to pick out prompts written on cards, and mark knowledge on rings provided by the kit. The rings then can be put together into a decorative stationary piece on table showing either knowledge in spatial range or in time range. This way users are able to visually track their process and have a tangible feeling of the accumulation of knowledge on certain topic.

Idea 3: an app and pendant (physical object) that helps users accumulate understanding and experience related to a topic of their choice, as well as visualize their progress in multiple ways. Through an near-infinite series of digital cards, the app takes users through four steps in accumulating this understanding: worldview, authority, synthesis and action.

The pendant is chain or ring with many circles on it. Each circle represents a piece of knowledge (just like on the digital visualizations). These circles are enabled with a radio frequency that communicates with your smartphone (Near-Field Communication, NFC). As users sort through information on their device, they can light up different circles (each of which has LEDs inside) to sort through the pieces of knowledge in a more physical and tangible way.

[9/27 & 29] Refining Concepts & Prototyping

[10/4] Final Scheme & Presentation

Like what you read? Give Willow Hong a round of applause.

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