Navigating Information

Process blog for Project 1, Communication Design Studio, Fall 2016

It’s amazing how much we infer about things, even those we have never come across before. In class today, we looked at some examples of toys — a robot, a grasshopper, a nun, etc — and talked about what we thought they would do. Seeing some kind of a key attached to each one led us to quickly believe that these were wind-up toys. The form of the key also served as an indication of how we could wind up the toy. Was it a traditional key shape? Were there two holes in the key where we were supposed to place our fingers?

The next step was figuring out what might happen after we wind up and release each toy. How fast would it move? What trajectory would it take? And surprisingly, there were a lot of inferences, or ‘educated guesses’, we were able to make about these things just by looking at the toy’s form. For example, we guessed that the grasshopper, with a suction cup at the bottom, was going to leap into the air — and it did! We guesses that the robot was going to march forward and in a straight line — and it did.

What we realized was just how much of how we see things is based on our past experiences and existing knowledge.

Project brief: For this project, we’re exploring how the way news is presented (through form elements, like typography, layout, images, etc.) influences how we perceive it. We’ve each been given three news outlets to analyse.

For the first phase we will individually analyse the news outlets and record our findings. We will then combine our findings with our teammate (I’m working with MacKenzie) during the second phase to build a mental model of the news sources. And for the third and final phase, we will use our learnings to design and prototype a “how-to” piece that helps people become better informed citizens.

8/30 — Observations on MSNBC, ABC News, & BBC

Form- Layout, colours, font, density, etc.


Screenshot from MSNBC

The news site has a very clean, sleek look that presents its news in an easy-to-read manner. With a colour palette consisting primarily of greys and white and blue accents, the web pages are able to focus users’ attention without too much distraction. Big, bold images along with headlines in bold serif fonts each help anchor each news piece and draw the attention of its readers. Sections are demarcated with a thin blue line spanning across the main body area. Together, these elements help create a clear rhythm as the user scrolls through the news pieces, particularly on the landing page.

ABC News

Screenshot from ABC News

ABC News also has a very clean grid that breaks up its sections visually in rectangular blocks. The amount of information provided at a glance appears to be more than what is shown by MSNBC. The consistency in font, font size and use, colours and of images helps channel readers’ attention. Similar to MSNBC, the colour scheme employs shades of gray, white and blue accents. Has a good balance between images and text that makes it easy to read without being distracted.


Screenshot from BBC

BBC’s website uses a series of cards to display and organise its news pieces under different headings. Thumbnails for each piece help draw users’ attention, while the headline under it and brief description provide a snapshot of the news item. News categories are colour coded (yellow for sports, turquoise for earth, etc.), however, the coding system is takes some effort to decipher. The narrow vertical line denoting marking the category is also not very apparent at a first glance.

Content — Views expressed, types of news, geographic coverage, etc.


Eight out of the ten “Top Stories” featured on MSNBC are on politics.

ABC News

Covers other news areas, such as science, weather and lifestyle, as well as politics. — both local and global. Yahoo! News also covers a significant amount of global news in comparison with MSNBC. Unlike BBC, ABC News’ coverage focuses on national news from across the country.


The articles on BBC consist of a balanced range of news areas — politics, sports, technology, business, etc. It also provides more coverage on global news than Yahoo! News and MSNBC.

Interestingly, BBC provides a substantial amount of broader context within specific articles. For example, an article on Donald Trump’s recent trip to Mexico not only covered the specific event, but also provided readers with links to other relevant articles published previously as well as a recap of other key information from the past that relate to this news piece (see below).

Excerpt from BBC article; “US election 2016: Trump defends wall on Mexico visit”

9/1 — The ‘Why’

This class, our class discussion centred around differentiating denotation (actual meaning) and connotation (implied meaning). We also delved into the evolution of news and the way we consume it today, as well as why news pieces are portrayed the way they are and the factors that affect determine how its portrayed (e.g. company agenda, audience motivation, etc.)

While previous research looked at how news was presented and the visual cues used in delivering their messages, it’s time to dive deeper into the three news sources, understanding their motivations and goals — the why — and how they manifest in the way stories are told and news is presented to their readers.

MSNBC, for example, is a news site that is heavily political. Roughly 70% of their stories involve local politics in some manner. The few stories that feature other parts of the world are usually anchored in its effect on the US, particularly on its politics. The site provides readers with a carefully curated list of articles with the title “Top Stories”. The site, devoid of clutter, displays these articles in the main column with large hero images and equally bold headlines. The typeface used for the headlines convey a sense of importance and urgency to its readers. This, together with the stark contrast between the white headlines and the dark backgrounds, quick draw the eyes of the reader. The goal seems to be to grab the readers interest and get them involved in political discourse. Below every headline is a comment counter, a measure of participation that shows the number of comments made by other readers. Hover over the comments button and you will prompted with a “Join the discussion” call-to-action. It also seems to be designed to play into the reader’s “Fear of missing out” (FOMO) as it shouts “everyone else is part of the conversation, don’t you want to be too?”.

Given MSNBC’s political nature, it’s no surprise that we’re are also immediately made aware of the site’s own political stance. We start to sense a connection when we see the blue accents found in the colour scheme. On looking further, we see it again in photographs used; the way the camera shoots at an upward angle. The images use soft blurs, vignettes and areas of shadow to draw focus to the subjects, presenting them in a powerful and dignified light.

Images from MSNBC’s “Top Stories” section

The photos on MSNBC are far more curated and deliberate than the ones found on ABC News or BBC. The photos on these sites tend to be more “matter-of-fact” in presenting their subjects and, on occasion, even use crowdsourced photos with noticeably lower resolutions (see image from ABC News below).

Images from ABC News’ homepage

ABC News, on the other, hand covers a much broader spectrum of news topics. It offers a much higher level of coverage especially for community related stories, such as “Good Samaritans Rescue 26 People from Sinking Boat”. Stories such as this offer a “feel-good” factor that is often lost in the world of news. For example, the “In Case You Missed It” (again, playing into people’s FOMO) section of the site focuses largely on highlighting the stories of the general public.

Staying true to the community emphasis on this site, ABC News highlights official hashtags for key news pieces (generally ones that are tracked over a period of time) so that its readers can view and take part in the discussions on social media and share news to further amplify its voice.

ABC News depicts these stories with images featuring many smiling faces; the most compared to the images used by MSNBC and BBC. Also helping ABC News project this image is the typeface used. It is more rounded and therefore appears more approachable, compared to the imposing typeface used in MSNBC’s headlines.

Lastly, ABC News empowers its readers by giving them choice. Under primary news themes, ABC News provides the latest article (shown as the headline) as well as one or two relevant articles that discuss adjacent issues or present a different take on the story.

Similarly, BBC too offers news on diverse areas (arguably more than ABC News) ranging from sports, weather, travel, technology and business. The most noticeable difference between BBC and the other two sites is its global perspective, providing stories from a range of countries.

BBC also allows readers to access its content in 33 languages, catering to its global reader base. What I find particularly interesting about BBC is how it caters to its diverse audiences.

Excerpt from BBC; “What’s the point of Asean?”

For the well-informed, the site points them to other articles in the “More on this story” section to help them dive deeper into a specific story or shows them more articles related to the broad area under categories, like “Europe”, “Asia”, etc. For the novice readers, BBC grooms them by supplementing its articles with contextual information (see example above), links to previously written articles and explainer videos that shed light on the fundamentals of a given issue.

Image from; “An Intro on How to Manufacture Desire”

Seeing how much meaning is communicated through connotation in addition to denotation, as designers, we need to learn to design for the goals of the organisations we work for while advocating for our users. As companies strive to play with consumer psychology to make their products more attractive and ‘sticky’, we need to design responsibly and ensure the power of persuasion is not used in a harmful manner. This could mean pushing back when asked to design certain features, working with companies to re-assess goals, and so on.

At the same time, with the sheer amount of content vying for their attention, today’s users need to become smarter about what they consume and how they consume it. They need to be conscious about the threshold between useful and addictive, and ensure they stay within it’s boundaries.

(9/1) Development of Mental Model

“A mental model is the representation that a person has in his mind about the object he is interacting with.” — Susan Weinschenk, 100 Things Every Designer Needs to Know About People

For this week, our focus is building a mental model of the news sites we researched earlier. By understanding how we perceive the structure of these websites and the role of the visual elements in imprinting their images, it allows us to think about how we can help people become better informed citizens / consumers of news.

Summary of key points

Mental Model — Version 1.0

We first explored the idea of representing the overall structure of the websites using circles to denote its key elements; with the size of the circle proportional to the level of prominence given to it when navigating through the content. At the heart of the diagram is a piechart illustrating the use of images vs text on the website.

1st attempt at mental model for MSNBC

(9/7) Mental Model — Version 2.0

After our discussion in class, I felt like something was missing; like the important information wasn’t being conveyed in our initial version of the mental model. So, I went back to the summary of key points to see if there’s a better way to visualise the information and came up with the following sketches. The main developments were:

  • The heart of the model now expresses the diversity of news articles — a central point in illustrating how well-rounded the news sources are as well as their neutrality / bias
  • Arrows indicate flow through webpages and their connectedness
  • Starting to look at expressing elements like positive of news pieces on ABC News — to emphasise its “feel-good” factor
Sketch of ABC News mental model
Sketch of BBC mental model
Sketch for MSNBC mental model

(9/8) Mental Model — Version 3.0

Before further iterating the mental model, we decided to take a crack at the overarching narrative that will guide our presentation. Here’s a look at the key points we wanted to cover:

  1. Scope of content → Topics of news covered
Diagram showing structure of ‘featured’ section on sites. Each circle represented the featured section on the landing page and was broken down into to show the weightage given to its components. E.g. for ABC (above left), the featured section was divided into its main story, featured stories and a customised news feed called “My Stories”

2. Point of view/company goals → Images (powerful shots and curation vs head-on vs detached), structure, navigation (organisation of options vs ), community

Illustration comparing camera angles across the three websites. MSNBC’s photographs tended to be more dramatic and shot from a lower camera angle giving a sense of importance to the subject, while BBC and ABC were shot either head-on or from higher up giving a more neutral representation of the subject.

3. Audience → Emotion (urgency and call-to-action, positive and community, providing context), time commitment and level of engagement required of readers (scan vs read, mobile friendliness)

(9/10) Mental Model — Version 4.0

Having decided on the key points we wanted to focus on for the presentation, I did a few sketches to explore ways that would make it easy for people to compare news sites based on the parameters we defined.

  • Spectrum: The sketch below places the news sites on a spectrum from neutral to strong stance, global to local and broad scope of news to narrow; with BBC on one end and MSNBC on the other.
  • Colour: Use of shading to highlight the breadth of topics that BBC offers its readers (where each colour represents different topics), the prevalence of community news on ABC News’ websites, and the heavily politics focus of MSNBC.
  • Structure: Connecting pie charts together to illustrate the various components of the site structure
Legend: purple = politics, green = community news, blue = sports, yellow = technology

(9/12) Mental Model — Version 5.0 (final version… hopefully)

We thought a lot about the essence of what we wanted to share with everyone during our presentation and it came down to three key messages:

Practicing how we sketch our mental models for the presentation


  • Observe the scope of news presented on the news sites you look at. Does it present you with a holistic view of current affairs in the world or a small snippet of this?
  • We drew wireframes of the landing page to highlight the genre of news featured on the page. Each genre was assigned a different colour to enable people to see the density of these genres on each site. BBC’s featured news pulls from a range of different news topics — politics, world news, sports, science, technology, etc. ABC News’ featured section typically highlights an elections-related main story accompanied by a range of national news from topics, like sports, entertainment and community. MSNBC’s featured story is almost always on American politics and 80–90% of its top ten articles are political in nature too.


  • How does the structure of the website affect the news that is “pushed” to you? And, does it encourage visibility of a range of stories? Take note of how websites channel your attention to the stories they want you to see.
  • The pie charts represented the weightage given to each section of the featured area on the landing page. For example, BBC features five news stories with images (the main story is given the same weightage as the other four combined). ABC News presents one main story with a feature image and top stories in list view. Similarly, MSNBC uses a large hero image to focus attention on its feature story, while the remaining headlines are shown in list view too.
BBC mental model of featured section vs screenshot
ABC News mental model of featured section vs screenshot
MSNBC mental model of featured section vs screenshot


Now, we could’ve probably dedicated the whole presentation to talking only about the use of images across the news outlets (but we won’t). So, here are the main ideas…

  • Images can communicate a lot about the news source’s own point of view and agenda. As images are often the first things readers see even before they read the articles, images often have the power to impact the lens through which they read the articles.
BBC camera angle sketch and photographs used
ABC News camera angle sketch and photographs used
MSNBC camera angle sketch and photographs used
  • We found that the camera angles used to take the photographs on the three news sources revealed a lot about the news source’s point of view of the subject. For example, the photographs of Hilary Clinton on MSNBC were primarily close-up shots from a low camera angle and focused only on her. This made the photos of her appear more dramatic and portrayed her in a powerful and dignified light. The photos of Donald Trump, however, had the tendency to capture him either looking down, in the midst of speaking and/or with groups of other people in the frame. BBC and ABC News, however, took a more neutral approach to their images with photographs that were mostly taken head-on.
  • ABC News’ choice of images is that a few of them were crowdsourced (not professionally shot) and that their photos featured more smiling faces than the other news sites. This alludes to their emphasis on the community angle in their news and “feel-good” stories.
  • BBC made use of stock images in additional to professional photographs. We think this is due their the nature of some of the news stories being reported on. While MSNBC and ABC News are predominantly event-driven, BBC balances this with articles that take a step back and look at specific industries or topics more holistically. In these cases, stock images offer a good substitute to illustrate ideas without being dependant on photos from specific events.

Equipped with the findings from our research into the way news was presented on these sites, we want to encourage citizens to think more critically about 1) content 2) structure and 3) images and how these three elements in particular can influence the way they perceive news.

(9/13) Presentation of Mental Model

We presented our mental model in class today along with our arguments on what people need to be thinking about when critically analysing news sources.

I think our team had the individual components of the presentation in place (diagrams, analysis, key points, etc.), but needed to work more on how we delivered them. The feedback we got from the class was really helpful. Some of the important points to note for the future are:

  • Make sure the drawing of diagrams and talking are synchronised. This will definitely take a lot of practice but will ultimately help channel the people’s attention to the things that matter.
  • Provide a clear agenda of the presentation (both verbally and visually) so that the audience is aware of the structure and can better connect the dots between content with the overarching purpose.
  • Ensure diagrams and visuals are clearly labelled so that the work can speak for itself, even if we will be talking through it. It also helps audience understand the point in case they miss out on something we say.

On a positive note, the class seemed to understand our underlying message and appreciate the way we represented information through pie charts and diagrams that depicted camera angles, particularly.

(9/14) Building a generation of well informed citizens

Having built a strong understanding of the ways in which news sources can subtly influence our perception of the news, our task is to use this knowledge to build a “how-to” guide that helps people become better informed citizens.

What makes a set of instructions effective?

I did some quick research into what some “how-to”’s and instruction manuals look like and the different approaches they took were. Here are some of the examples I looked at:


  • Almost entirely composed of illustrations except for text used to mark steps and quantity of items required.
  • Glaceable
  • Easy to relate what is on the instructions to what is happening in reality
Image from extemporeapp

Smitten Kitchen

  • 80% images showing each stage of the process accompanied by a short paragraph of text with explanation of each step.
  • Images make it clear which ingredients and tools are needed for each step and what the outcome should look like.
Screenshot from Smitten Kitchen


  • Fast-forward, almost stop-motion style videos that allows them to show every stage of the cooking process.
  • Typically less than 30–50 seconds in length
  • Lacks information on ingredient quantities
Video from Tasty’s YouTube channel

In class, we discussed the findings from research and found that good instructions considered many of these characteristics:

  • Glanceable
  • Images have necessary components for that step
  • Concise and clear text
  • Transitions are clear and logical
  • Information isn’t redundant
  • Valuable repetition
  • Point of view of viewers/readers
  • Audience motivation for viewing
  • Viewing context
  • Steps
  • Supplies
  • Directional cues
  • States the goal
  • Hierarchy

Before embarking on this next phase, we needed to answer a few fundamental questions…

  • Who is our target audience?
  • What is our goal?
  • What is the best channel to reach out to our target audience?

Target Audience: Millennial Voters

We decided to target millennial voters, between the ages of 18–35 as they make up a substantial portion of the electorate (31%) according to an article by NPR. This segment of the demographic also opened up interesting options in terms of the channels we can use to reach them.

Goal: Think Critically About News

To equip young voters with the tools to look at the news they consume more critically. As a result of this, we hope that millennial voters will be able to make better informed decisions come election time in November.

Channel: Buzzfeel Article

Given how many people use their Facebook news feed as a primary source for news, we felt the best way to reach our target audience was to create something that was easy-to-read and shareable. A Buzzfeed article also enabled us to take a more light-hearted approach whilst equipping readers with tips and tricks to help them spot news bias.

Our Strategy

From our observations of news sources earlier in the project we found that some news sources were very apparent in their bias because we were looking at them from a critical standpoint. What about people who look at their daily news (from the source they’ve always got it from) and don’t have any other points of reference? With the power to customize almost everything in today’s world, it’s very easy for people to be trapped in their own media bubble, not realising that the information they receive is skewed and that they’re only seeing a filtered portion of the news.

For example, a study by Pew Research Centre suggests that,

“Those with consistently conservative political values are oriented around a single outlet — Fox News — to a much greater degree than those in any other ideological group”
— Media Sources: Distinct Favorites Emerge on the Left and Right, Pew Research Centre

What are the effects of viewing news from a single source instead of multiple sources?

We thought it would be interesting to explore the implications of consuming news from a single news source vs multiple news sources, especially if the single source took a strong standpoint when presenting the news. And decided that a social experiment was in order.

What if one of us only looked at news from a single news source (say MSNBC) while the other looked at multiple news sources (MSNBC, ABC News, and BBC) for a week?

We could track our emotions, mood and the type of news we were presented with over the course of a week and see how it differed between us. And the best part is that we don’t have a clue as to what the outcome will be.

For five days we decided to look at our assigned news sources twice a day at 9AM and 9PM:

  1. What we perceived to be the most important piece of news during each session
  2. Why we felt like this was the most important piece of news
  3. Our emotions using one word
  4. Our mood from a scale of 1 to 5 (1 being very negative and 5 being very positive)
  5. How long we spent reading the news
  6. Whether we read the news on a laptop, tablet or mobile phone

Based on what we learnt, we would consolidate the results from our experiment and present them accordingly.

9/15 — Structure & Content for Buzzfeed Article

One of the popular types of articles on Buzzfeed is the takes on the form of product comparisons or fun human experiments accompanied with reviews of their experiences and summaries of what they learnt. We looked up a couple of comparison articles to understand their structure and format.

We analysed the structure of these articles found the have a few things in common:

Structure of typical Buzzfeed comparison-style article (left) and proposed structure for our article (right)


Anyone who has fallen prey to Buzzfeed’s articles knows how important the clickbait-esque headline is in grabbing people’s attention as they scroll through their Facebook news feed. So, I did some analysis of existing headlines to uncover their recipe.

Here are some sample headlines:

We then applied our learnings to formulate headlines for our article:

  • We gave into news bias for 5 days and it completely changed our views
  • We tried to become better informed citizens… and it completely changed our world
  • We became clever about our news consumption for 5 days and it changed our world
  • We analyzed the news so you don’t have to… BUT you should

Feedback on 1st Draft of Article

We did a ‘speed dating’-style feedback session in class today where we spent 5 minutes presenting a first cut of the article along with the target audience and our intention in small groups. The groups we presented to then gave us feedback on things we could improve.

The session was really useful and helped us iterate on the way we pitched our idea in a concise manner. The feedback we got from other teams was also really helpful and served as food for thought as we continued to work on our projects. Here are the key points:

  • How do we envision getting the article to target audience? Facebook?
  • Show logos of news sources on the infographics for MacKenzie and Manya so that readers can keep track of who looked at which resources.
  • Use different colours for each person so that it’s easier to distinguish results.
  • Make the article more interactive by asking the audience how they felt when following the experiment.
  • Co-relate tips and results shown on infographic. If they’re not co-related, then consider separating the two.
  • Show the mood rating on a scale to make it’s meaning clearer.
  • Use shorter sentences, bigger images and a more dramatic headline.

Final Article

Here’s a look at our final article on Buzzfeed:

And, here’s a version on Medium:

Presentation reflection

I think I was generally happy with our presentation and, in particular, with the response from the class. They seemed to understand what we’re trying to do and our personal experiment-style approach to our “how-to”. The GIF seemed to be well-received and I think make our piece stand out and be memorable.

For our presentation we decided to only focus on the article as the main visual that is projected on the screen, while we talked about our target audience, intent, and approach while walking them through the article. In hindsight, we could’ve benefited from using a 1–2 slides to set this up before diving into the article. It would’ve given the class something that illustrates this information in a clearer manner. The class also encouraged us to look at how this idea might play out beyond our current time frame.

What if we…

  • Limited our news intake for a longer period of time? What kind of impact might it have on our daily lives beyond just mood/emotion?
  • Shared this with people and generated some buzz around it? Wonder how the community might respond?
  • Tried this with other news sources? Perhaps, more niche, smaller news outlets. How might that affect our response?

One of the things I’d be most interested in seeing is…

How the projects in the class can work together?

There were quite a few other groups who focused on young voters as their target audience and decided to do “how-to” pieces that were either based on or leveraged social media in some form. For example, I can definitely see how Jesse and Lisa’s Twitter feed could bolster the effectiveness of our Buzzfeed article and vice versa. Or, maybe Bori and Ashlesha’s video could be embedded at the end of the article to highlight the possible ways news intake can affect readers in their daily lives — in a more tangible way.