Navigating Information

communication design studio: project one


Deviating from the norm of a standard class introduction—name, background, fun fact—CD Studio began with the group of master students, sitting on the floor, playing with wind up toys. We did more than play. By taking a closer look at these toys, we discovered that each was able to communicate to us. They told us what they might do once wound up, they gave us a perception of their personalities, they showed us the subtle cues design provides that informs users, and they were the perfect ice breaker.

When we did get around to “introducing” ourselves, we did so by answering a series of questions. Then, much like the wind up toys, we took a closer look at what they were telling us. In small groups, we sought to organize the information provided. An exercise that taught us about five organizing principles, L.A.T.C.H.—location, alphabetical, time, categorical, and hierarchical.

8.31.16 — day one

Project one has us beginning by analyzing several online news sources everyday for a week. Beginning individually, then coming together with our partners to translate, brainstorm, integrate, and apply what we have learned. I’ll be honest, my initial perception of each site was instinctively about the main story. On each site it was large, in your face, and of Trump.

When viewing this site from “above the fold” only, it was clear in conveying it’s message. The leading story was highlighted well with a visual and strong statement headline. After a quick scan, additional information was easy to find thanks to a limited color scheme and legible typeface choices. Text and images interacted sparingly, only in their cover images. The site functions well for people on the go, wanting only to scroll through the top ten news stories and move on. However, once you scroll, there are quite a few elements changing simultaneously, pulling your attention in different directions.

MSNBC — 8.31.16

ABC News:
There were several distinct difference with the ABC site in comparison to the MSNBC site, both visually, functionally, and structurally. ABC uses a lot of images, arranged on a grid, to convey stories. It structured the boxes in such a way that both size and placement suggested a hierarchy. Text interacts with each image, however, the hierarchy within those interaction, left me confused and clicking on stories unrelated to what I was seeing. Each section/story contains an image, headline, date, and additional bullet points. Where commonly, the smaller body copy relates to the headline, here it directs you to a different story. Functionally, this site wants to serve as more than a quick scroll through. Here you’ll need more time to carefully read through each block. The way the type is organized could have visitors missing a great deal of the stories. While ABC has political stories, it also brings in science topics, topics for younger audiences, entertainment, and world news.

ABC News — 8.31.16

The BBC news site organized it’s abundance of information very well. It used color, typography, grids, and hierarchy to effectively communicate the structure and functionality of the site. Using mostly gray and white, the BBC was able to use bold colors, assigned to the different news categories, in order to communicate quickly where a story belongs. The type choices allowed me to quickly gather the important information about each story, without confusion. This site had the widest range of topics, with such a range came a lot of information. The home page was structured in a way that I could skim it rather quickly and pick out what I’d like to read. In spite of that, I found exploring interior pages more difficult. They were bogged down by more information and less structure. The BBC’s top stories included the US election, as expected, but also sports, trending topics, and world news. With this, the function of the BBC seems to lean toward a broader audience.

BBC — 8.31.16

Unsplash — user mauro mora


In class, we addressed the sense of urgency that surrounds our lives, particularly with how news is presented to us. We began by discussing why there is a sense of urgency—short attention span, over stimulation, media, fear of missing out, fear of losing readership(in the case of a company). This lead us to consider the potential causes as well as to dive deeper into the ways that companies can persuade their audience through the visual choices they make. The readings leading up to and preceding this particular class discussed the dramatization of news and the feelings this course of action can evoke, they also discussed in further detail denotation, connotation, and representation. All of which culminated in the analysis of the three news sources—MSNBC, ABC, and BBC.

9.5.16 — day six

Over the course of the week I continued my exploration of MSNBC, ABC, and the BBC news sources, both on desktop and mobile. During my analysis of each site I noted a number of difference between the two versions of each site. In addition, I took another look at the structure of each site and compared the three. Illustrated below you will find the comparisons of the desktop and mobile views first, followed by the week’s analysis of each site and finally a brief note on the three site structures.

MSNBC sketches: The mobile version address the issue of confusion while scrolling by eliminating elements within the design. Scrolling through the trending stories is simpler, enabling the reader to scan and obtain information with ease. The menu is also simplified, freeing space for the cover images and headlines.


ABC sketches: Here, the mobile version condenses it’s stories so that the top story is prominent, followed by other trending stories. It is not until you scroll that you begin to see the variety of stories ABC has to offer. As mentioned on day one, each image features overlay headlines and links which take you to other stories. It was a confusing feature on desktop and I found it to be as equally confusing on mobile. Where selecting small type with your fingers is sometimes a difficult task on mobile, this feature caused some frustration.


BBC sketches: The most striking difference for me was with the BBC, where on desktop they were image heavy, mobile become text heavy. On the landing screen only the top story received an image, which was covered in part by the lengthy headline. Scrolling down it was headline after headline, differentiated only by the category marker and a thin rule line. Only occasionally would another image and overlay text would break up the long list of headlines.


Over the course of the week, MSNBC’s content remained mostly political in nature, with the top story always being about the election. Our discussion on denotation and connotation led me to take notice of the imagery that MSNBC was selecting for their home page. Their choices were deliberate and the structure of showcasing the top ten stories allowed for a curation of sorts. Images of Hillary Clinton presented her as the singular focus and were typically shot from a lower angle, suggesting power. Typographic choices are simple and sturdy, allowing the audience to find information quickly while allowing MSNBC to come across as trustworthy. After taking a closer look at the choice made by MSNBC, I was able to get a better sense of their audience. In both their visual choices and content structure, they seem to skew more toward the Democratic party.

MSNBC—9.2.16, 9.3.16, 9.4.16, 9.5.16

Throughout the week ABC featured stories not strictly political in nature. While there were certainly stories surrounding the election, ABC brought in stories from other areas, including the weather, sports, and science, to name a few. They also brought in feel-good stories that were scattered throughout their page, breaking up the content. Overall, their images choices feel more denotational, the images chosen for each story allowed me to quickly comprehend what the store was about. In addition, their typographic choices are clean and light. ABC offers more than news, brining in entertainment and technology, to offer a wider selection for the general audience.

ABC — 9.2.16, 9.3.16, 9.4.16, 9.5.16

It is clear that the BBC’s audience is the broadest of the three sites I analyzed, both culturally and interest-wise. Truly a global news source, this site has featured stories that cover the American election, China, and conflict in the Middle East. It also brought in sports, travel, and cultural stories that cater to a wider range of interests. Over the week, I noticed that the images were more denotational. Creating an objective point of view while allowing the reader to scan through the variety of stories quickly and deduce what each was about. BBC uses both typography and color well. The typography was unobtrusive and allowed for effortless scanning, while the use of color categorized the stories with minimal effort.

BBC — 9.2.16, 9.3.16, 9.4.16, 9.5.16

Finally, I compared the structure of the three news sites again, noticing that the use of imagery and variety of stories being reported expanded with the audience. Moving from left to right, start with MSNBC, then ABC, and finally BBC. The use of images starts out limited on MSNBC’s site and becomes more copious as you move to ABC and BBC. As the use of imagery becomes more expansive, so do the offerings.

(from left to right) MSNBC, ABC, and BBC
White board work sesh

9.6.16 — Mental Models

We discussed, in further detail, the importance of mental models in allowing us to visualize the analysis of the new sources. Up until this point we have been working individually, observing and dissecting three news sources, BBC, ABC, and MSNBC. How do we get make sense of our notes and how are we able to explain them to our partners? Mental models, of course.

We also began working in our partnerships, reviewing each others site analysis and identifying common touch points. Working as a team, we were able to use the combined research to narrow in on the content we wanted to present.

9.8.16 — Work Session

Our goal entering the work session was to establish the over-arching narrative. In class, we had discussed how content will determine form. We built upon our previous findings to help us create a narrative, focusing on the breadth of each site and how that is an indicator of each company’s point-of-view.

9.10.16 — Weekend Work Session

Zeke’s Coffee

We felt it would be good for our sanity to get out of the studio and have a work session at a local coffee shop. We found ourselves at Zeke’s Coffee in East Liberty. As we were now officially “Fueled by Zeke’s,” we got to work tightening our story for the white board presentation. Continuing our focus on the diversity of each site, we then began to narrow in our story, doing this by taking a closer look at the feature section of each site. We noticed that the way these news site utilized the feature section was a good indicator of what the over goals of the company are. By establishing our talking points we found it easier to explore how we were going to visually represent our content.

9.12 .16— Work Session #2

As our presentation on Tuesday was fast approaching, Manya and I wanted to go over the final visuals for our presentation. We ran through our narrative several times, with slight iterations to our visuals each time, we were able reach a visual we felt best communicated our goals.


Disney Pixar’s Finding Nemo — astrobhoy YouTube

Whenever there is an important day in my life, I usually beginning by singing, “Today’s the day, the sun is shinning,” quote from Finding Nemo, the Disney Pixar movie (see link in caption). Today is, in fact, the day. After preparing and practicing, our white board analysis of the three news sources, BBC, ABC, and MSNBC, was finally going to be shared with the class.


We felt the content and visuals were right where we wanted them to be. We had decided to narrow down our analysis to just a few main points, the feature section in particular and how it can provide insight into each sources’ goals. We did this by discussing how broad or narrow the topics of news are as well as how each site use photography. While overall we felt that we had conveyed our information well, we realized that we could have streamlined our presentation. It would have been beneficial for us to have given an overview upfront. Also, instead of one person presenting and the other drawing, our presentation might have flowed better had the person drawing also talked to the point being made. We could have also utilized text to enforce our argument and enhance the visuals.

Manya just beginning to erase our presentation and realizing that I was taking a picture.

9.15 .16— How-To-How-Tos

Today we went over a few different “How-To” styles, including videos, text/images on web, and text/images in print. We also discussed what elements go into a successful “How-To.”

Some of those elements are:
Concise & clear text
Transitions that are clear and logical
Audience motivation for viewing

After our discussion we broke back into our teams for a quick work session. Manya and I started to think about what audience we wanted to target, from there we started to discuss goals, all while keeping in mind the key arguments of our presentation. We also explored the idea of a Buzzfeed style article as our medium for this portion of the project.

9.15 — Brainstorming with Manya
Source — How To Tie A Tie,

9.20.16 — How-To Work Session

We worked to solidify our concept of a Buzzfeed-type article. Our audience is young, millennial, voter that have a strong leaning toward conservative. The research from Pew Research Center, Political Polarization & Media Habits, guided who we identified as our target. In a comparison piece, we aim to show our audience what it is like to look at one news source vs looking at a range of news sources in order to become a better informed global citizen.

We looked at the structure of Buzzfeed comparison articles. Below are a few of the articles that best exemplify what we are aiming to achieve. These were informative, fun, and easy to follow.

We were going to begin our five day comparison challenge. Manya would be looking at BBC, ABC, and MSNBC for her news, I would be only looking at MSNBC for five days. When Stacie came by to go over things, she provided excellent feedback on how to incorporate the “how to” aspect of the project. We were going to include a challenge for the reader to follow along, then provide tips throughout the process that would act as our “how to.”

We also took a look at other potential mediums for our “how to,” which included Ikea manual, Cards Against Humanity, and Candyland. The latter two were mainly jokes, but we could see where Cards Against Humanity could be a good platform to reach our target audience.

Ikea Malm Manuel — Source Scribd.

Leaving today, we were feeling good about our concept and launched right into day one of our challenge.

9.22.16 — How-To Content Development

We were in day two of our challenge and it provided a lot of insight into how we were going to structure this piece, ultimately we will build a Medium post that includes…

Quick intro line
Image (title images) introducing the article
Set-Up (introduce the concept, ask the user to participate with us)
The Rules
Us (image and description)
Keep In Mind (ask the user to particpate with us)
Day 1–5: Visual (am/pm mood, what happen, top topics), Description, Tips
9. Wrap up (ask the user to comment what they found in analyzing their news more closely)
10. What should MacKenzie and Manya think critically about next???? Advertisements / Trees / Movies / Music

We had briefly discussed, in further detail, an Ikea-style how to, but ultimately were more excited about the Buzzfeed-style article. We felt it hit closer with our target audience as well as provided an excellent platform for us to address how to be a better informed citizen. We are aiming to keep this “how to” fun and lighthearted so that our audience, consistent conservatives, does not feel as though they are being yelled at or talked down to. Entering into the weekend we have most of our content created, the setup, rules, and keep in mind portion are complete. After we finish up our challenge on Sunday, we are going to come together to establish a look for the visuals, write our wrap up section, and begin to build our Medium post.

9.27.16 — Speed Dating ❤

We went through a thrilling round of speed dating. Speeding dating, as it relates to design, involved five groups that remained stationary as the other five rotated. As listeners we were asked to think about each groups presentation and provide feedback with these in mind…

What you saw or did not see.
Things you may want to focus on.

It was a great way to provide and receive feedback, Manya and I received a lot of valuable feedback to apply to our final deliverable.

10.4.16— Project One Finale

Final presentation day! It was great working with Manya of the past month and working toward this deliverable. We continued to look back on our progress and findings from the first half of the project to better inform our concept. To help define our target we took another look at the Pew Research Center article, Political Polarization & Media Habits. The findings surrounding consistent conservatives, specifically that they tend focus on one news source also helped to shape our concept and goals. We choose to focus on young voters and use Buzzfeed comparison-style articles in order to connect with voters in fun, light-hearted as to not come off as authoritative or condescending. We felt this was especially important in reaching the more conservative users in our target group.


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.