CD Studio - Navigating Information

8.29 - Class Kicking Off

Our communication design class started by analyzing and interacting with a group of wind-up toys. Before we were allowed to grab a toy and start playing with it, we were asked to predict how the toy would behave. We decoded the toys and their functionalities by analyzing their form, material, and color, etc. It was fascinating to find out that most of us gravitated to the abstract toys, which were harder for us to predict their behaviors. We favored them because these toys would bring more surprises.

My background is in industrial design. Through years of training and practicing, I deeply believe in “form follows function.” With the training I am getting from the class, I’d like to acquire a deeper understanding of how the form, both 3D and 2D, affects user to interpret, interact and feel.

A group of wind-up toys

8.30 - Davis - Schemas Reading

Sketchnote for Davis’s writing about Schemas

8.30 - News Venues Analysis

Individually, my teammates and I are going to analyze and compare three different news venues: ABC News, CBS News, and NBC News, through the lens of communication design. What we are trying to get out from here is how visual structure, form and content affect the way we perceive the news.

Visual Structure

Each of the website places their top stories, which are all about the devastating hurricane Harvey, at prominent positions. When I opened ABC and NBC, I first noticed the photographs of their top stories with white headlines on top. In comparison, title of CBS’s top story is so bold that it was the first thing that caught my attention.

ABC, CBS, NBC home pages - top part

The second thing I noticed from ABC was the live news they pin on top of the navigation bar. They caught me not only because their prominent positions, motion of the thumbnails and the red “watch live” text also helped the news to stand out. In comparison, CBS places its live news next to the top story, in the form of an auto-playing video. To me ABC is more polite. It asks its audience to consciously choose whether or not to see the live news before playing the live video where as CBS’s auto-play video is more intruding.

Three news venues have different navigation headers. ABC keeps its frequently viewed news sections on the left side of the navigation bar, action buttons and other outlets (watch, live, show) on the right. CBS chooses to use different kinds of outlets as its top layer categorization. When hovering over certain tab, a floating table with thumbnails of the categorization shows up. Similar to CBS, NBC has outlets as the 1st layer categorization. All news sections are put in the “sections” drop down tab.

Navigation bars of ABC, CBS, NBC

Length of the homepage of ABC is relatively short compared to the other two news sources, especially CBS. ABC puts different pieces of news on white cards with drop shadows against light grey background, which makes the grouping clear and information stand out. Images sizes are consistent and clearly distinguished based on priority. All the cards are horizontally and vertically aligned. NBC divides its news with horizontal divisions and showcases them by sections where as CBS’s posts are alternatively arranged.

Layout of ABC, CBS, NBC

Based on the impression so far, ABC seems to have a strong emphasis on imagery. It is comparatively more organized and friendlier to scroll through. CBS, on the other hand, is more chaotic and overwhelming. NBC appears to be more text-heavy than ABC, but has better grouping of information than CBS.

9.3 - News Venues Analysis

Visual Form

ABC places a strong emphasis on imagery. They use bold images and white headline on top. In order for the white headline to stand out, ABC’s images have a gradient overlay, which is darker on the bottom. CBS uses bold, large titles above images. Comparing to ABC and CBS, NBC uses a lot fewer images and more text. Its type treatment is more even and thus more difficult to see the hierarchy.

Image and title for ABC, CBS, NBC

In terms of use of color, all three news venues use colors sparingly. Both ABC and CBS choose to use blue as the color of their navigation bars, whereas NBC simply uses line to separate the navigation bar from the rest of the content. Bright colors are used when attention is needed. ABC uses bright orange icons for trending topic. The orange alert icon allows audience to easily subscribe to a hot topic they are interested in.

CBS uses red to separate each section.

Use of bright color at ABC, CBS

Interestingly, CBS seems to suggest the importance of the written time by putting it above titles and assigning red to it whereas ABC makes the dates less noticeable by using small and grey text underneath titles.

Different treatment for news written time at CBS, ABC

Visual Content

Scrolling down the homepages of the three news venues, I found that first few scrolls of the ABC’s and CBS’s homepage is populated with news of the most discussed topics such as North Korea and hurricane. In comparison, NBC has a more diverse selection of news topics. One reason can be that NBC utilizes more text than imagery which enables them to fit more content within one page. CBS uses mostly the center part of the page that results in a longer depth.

Homepage of ABC, CBS, NBC

In general, pictures of ABC has a stronger sense of cohesiveness: all of images are overlaid with a dark tone and contrast is high. For example comparing ABC’s and CBS’s picture of DACA, ABC’s picture was shot from above that shows more of the facial expressions of the crowd. CBS’s picture has a relatively lower contrast and has less faces involved. It’s almost like that CBS is trying to show the viewer what has happened objectively whereas ABC processes their images more and has a more subjective voice. NBC, on the other hand, selects images that are more cinematic comparing to the other two venues. NBC’s images give me a sense of tension when looking at them.

Compiled images of NBC, ABC, CBS

ABC’s titles are well aligned with the images they select. Oftentimes, there are short quotes in the titles that are open for the viewers to interpret. NBC and CBS often use quotes as well. ABC only uses white headlines and pictures to give the viewers quick grasps of the stories. Similar to ABC, NBC only includes short titles for viewers to browse through the content. Unlike the other two venues, CBS shows more detailed quick views by including subtitles and captions. Viewers are able to gain more information before they click into a certain story.

By reading three reports from the three different venues on a same topic, I got an impression that ABC and NBC are more opinion based whereas CBS tends to list cold facts. More background research and further analysis is needed for me to validate or revised my statement.

9.4 - Get to know the audiences and creators

Sketchnote for Crisp’s writing about context

In her writing, Crisp explains the idea of context specific to typography. However, I found it very inspiring and relevant to what we are doing. Crisp talks about that designer cannot solely look at context when “systems (cultural, technological, cognitive,…) are so all-encompassing.” I am especially inspired by Crisp’s opinion on the relationship between every person/enterprise and a number of potent systems. As designers, before we design we need to look at the context, which can be broken down into four aspects according to Crisp: motives, abilities, material nature of the artifacts, and particulars of delivery.

Applying Crisp’s thinking to our news venue analysis project, it is necessary for me ask the following questions:

  1. Who are the audiences of the news venues? And
  2. Who initiates the work and why?


Based on the research from Pew Research Center, I started by learning about the size of audience and their political ideology for each news venue. ABC, NBC, and CBS are the three big television networks that dominate the U.S. ABC news and NBC news has a relatively same size of audience, which is slightly larger than CBS’s. The graphs below show that most of the audiences of the three news venues have relatively neutral towards liberal political ideology.

Political ideology of the audience of ABC, NBC, CBS

Among the three news venues, ABC has a higher number of conservative audiences who trust in the source.


9.5 - Translate salient points into visual sketches

Last Thursday in class, we met as a group to discuss about the things that we discovered from the news venues. After compiling a list of points, we were asked to characterize these points and translate them into visual sketches as if we would explain the venues to strangers. I found it quite challenging to transform the fragments of information we observed into something that can tell a story visually. Stacie informed us to reach a consensus of the salient points that we want to talk about as a group, arrange them as a story and then sketch the points to communicate with others.

Thereby, we came up with an outline of points that we wanted to cover first. After that, we designated the findings from three venues under each categories.

With some discussion and several attempts, we finally created sketches that explain our points clearly. In general, I found out that diagrams, such as pie chart, are more efficient for making comparisons.

9.12 - Presenting findings and visual sketches

Today in class, each of the group presented their findings about the news venues through draw-and-tell presentations. One of the group member is responsible to speak while the other 1 or 2 group members are making sketches that reinforce the speech. We got good feedback regarding how the sketches were clear and they could stand alone even without our verbal explanations. However, there were some parts that we could potentially improve on if there was a second chance:

1.The order of sketching could be better thought-out.

With key elements of the sketches missing, it can be hard for the viewers to understand the speech in correlation to the sketches. It will be helpful if we can put down the most important elements first. For example, when we explained that NBC news are the most provocative and CBS the least, it would be clearer if we draw the scale first, and then define the two ends of the scale.

2. More explanation with each sketch

By hearing other groups’ presentations, I realized that speech is much easier to grasp and follow if the presenter refers to the relevant sketch and elaborate his/her points using that sketch. We can do better with engaging the sketches while we speak.

3. Draw connections between visual structure, form, content with the big idea

During the presentation, we explained how technology influences the visual structure and form of ABC. It will be more effective if we analyze more on how visual structure, form and content of each news venues are supporting the big idea we are trying to make.

9.14 - Seeing the bigger picture / Design jam

Seeing the bigger picture

For the first half of the class, we did the exercise of categorizing each of our findings for news venues and trying to spot patterns. I worked with a few of others to sort out the visual content findings for the news venues. It was relatively straight forward when we were trying to group the findings that have similar criteria, but it became harder when we were breaking them down into more granular categories and labeling them. It became even harder for us to draw the connections across the news venues and come up with valuable conclusions. I saw the other group made the connection between font types the news venues choose to use and their political leanings. The finding is thought provoking; I wish we have more chances to analyze in the scope of all news venues we are working on.

Design jam

We did a fun activity, design jam, as a group of three for the other half of the class. Within a short period of time, our goal was to come up with an intervention for citizens to have a more informed news reading experience. Then we need to represent the intervention with physical objects/toys of our choices. Our intervention is an app that allows users to read the news from different perspectives. The app will track the news user “A” clicks on that day and send out a newsletter to A at the end of the day. The newsletter compiles all the news another user “B” goes through that day. B has similar interests of news topics with A, but B can have similar or total different political believes from A. By doing so, we are trying to allow users to hear various voices at a more personal level.

Using physical objects to represent our idea constrained us from going too granular or spending too much time laying out wireframes. It is a great way for the exploration phase when we need to look at a big picture rather than small details.

9.19 - Developing the idea from design jam

After a few rounds of discussion, we decided to further develop our idea from design jam. Our goal of intervention is to expose users to a wide range of news as well as different perspectives. Each day a user will receive a newsletter which contains a summary of news another user read that day. To encourage users read the newsletter, we connect people by their shared interests and social connections.

At the beginning, we wanted to connect people simply by their interests. For example, a foodie may be interested to find out what another foodie reads through. However, we figured that the tie could be weak and the motivation was not strong enough to retain users. Therefore, we added another layer of shared social connection. Knowing you have a personal connection to the other user is a bigger drive for seeing what the other person is reading. At the same time, we decided not to include any picture in the news summary and to keep the tone as neutral as possible.

There was a point when we tried to make sense of the service we were providing. We started to draw user paths for each persona. The practice helped us to walk through the whole intervention as well as identifying the differences across the personas.