Communication Design Studio

08/29 – Analyzing the Designed World

Today we delved deeper into how we perceive the designed world. Coming from a Graphic Design background a lot of my design process is more subconscious and based on intuition. If I’m working on something visual I will usually have an idea of what I want something to feel like and I will iterate until the visuals matched the feeling I’m attempting to convey. Why a particular attribute like colour or form makes sense for what is trying to be communicated is usually somewhat vague for me.

What I found so fascinating about this class is we took the time to think more consciously about the implications of visual attributes. For example, when we were looking at the blue Noggin Bops toy it was easy to imagine how it worked based on its form. The placement of the joints in its legs and neck implied it did a quirky waddle in place when you wound it. It’s bright colour also told a story about its audience (children). 
When looking at the different toys, it was surprising to see that there was a loose consensus as to which toys would be most interesting to play with. People gravitated toward the toys with interesting forms or because they seemed to offer some level of surprise and unexpected behaviours. This suggested to me that you can distill some level of universal design principles that can guide good design.

Thoughts on the Davis and Mason Readings

Mason did an excellent job of unearthing the fundamental issue with how we consume news. It’s perpetual focus on negativity and celebrity, and the confusion of freedom of speech with the freedom to not be offended is a systematic problem. The technology and design behind the 24 hour news cycle is truly impressive but misused in this regard. In the past 10 years with mass production reaching new heights with the internet, little has been done to address the constant flow of negative information that perpetuates false biases about the world. What I find so strange about this is that how these systems of technology and people that enable real time news information have become part of what I expect from the world. It’s hard to imagine this feat in organization used in any other way. I wonder what sort of systematic tweaks can be made that can steer News away from the constant Doom and Gloom?

Analyzing the News

With Updated Commentary

Browsing through the sites Motherones, Alternet, and Truthout it was evident that they fall within the progressive liberal spectrum. This could easily be inferred by the majority of the headlines on the homepage, which focused on positioning Republicans in a very negative light. Each one of the sites clearly leveraged tactics like fear mongering and extreme negativity to push their message. Headlines were written in a way that regardless of what was being reported, the situation seemed dire. Despite this, it was interesting to discover how much difference there was between the visuals and overarching strategy of the sites. The fact that Motherjones, Alternet, and Truthout all appealed to an audience with very similar political views did little to homogenize the visual structure and content of the websites.

Mother Jones

Between the three sites, Mother Jones felt like it did the best job of presenting itself. The design of the site is modern, and it’s very clear time and money was invested into its presentation. They use a very expensive typeface Mallory, which is an American and British inspired design by Frere–Jones. It contains a lot of character but quite sophisticated in its inherent design and how it’s deployed on the homepage. It pairs well with their positioning as a non-mainstream new source with journalistic integrity. The site uses little color except for hints of orange which echo the minimalist design. The lack of color has the effect of drawing the eye to the well-photographed imagery on the page. The visual design makes it appear like the reporting is well mannered and honest. I found it interesting that because the site seemed nicer looking, I felt like I could trust it more. Regarding the structure of the information, Mother Jones had the most similar structure to other sites. Politics, Environment, Food and Media are all categories you would expect on popular news sites like The New York Times or CNN.

Mother Jones has a point of view but unlike the other sites I surveyed for this project, it seems to care less getting readers engaged with activism and more on subscribing to their magazine. I feel like most people regardless of whether or not they agree with the points of view presented on this page wouldn’t feel like they were excluded by simply looking at it. The interior pages on the site contain what I would consider longer reads than a traditional news source like CNN or the BBC. They tend to focus on making an argument and supporting that argument with (biased) information rather than presenting information. I interpreted this to mean that the content on the site was meant for a more casual and engaging read, similar to something like The New Yorker. I think the fact that the homepage is so airy supports this notion as well. The homepage content is organized in such a way that you have one major story in large type and big photography then three smaller supporting stories. The content is much more limited than Alternet. What I can infer from this is MotherJones unapologetically places quality over quantity and isn’t concerned with selling users on a bunch of mediocre stories, just one well written one. Over the course of several days, it seemed like Mother Jones updated their site less than the other sites I observed.

Mother Jones Website


Alternet is in many ways the counter to mother Jones visually. The harsh blue and orange paired with a more techy typeface, Museo, give it very edgy feel. I can’t help but feel this site is geared toward a very young and very passionate audience who are already entrenched in their political philosophy. The photography is not very polished and usually pixelated giving it a bad cell phone picture feel. Oddly enough, the most similar site experience I can think of is TMZ. It’s the opposite of academic which I often associate with a more quiet tone that airs on the side of minimalism. The tone of the language is incredibly accusatorial.

Most headlines begin with very direct accusations of members of the other party, especially Donald Drumpf. The feeling I get when I land on Alternet is that the site wants me to be outraged and do something about it. The fact that they have a tab on the site specifically for activism hints at this. The density of content on the homepage is much higher in comparison to Mother Jones and Truthout. Alternet also updates their site more frequently than Truthout and Mother Jones. They fit close to 7 stories on the homepage which makes it feel like a news site focused more on the latest stories.

Alternet Website


Truthout felt like the least polished site because of some of the outdated aesthetic choices. For example, a small detail that bothered me to no end was the weirdly sized social media icons on the gray gradient. This led me to the conclusion that they haven’t touched the design of the site in over a decade. Thus I get the feeling that this site is more of a grassroots type and lacks the funding Mother Jones may have. The tone of the language while less accusatorial still follows a similar theme and paints a cohesive narrative of the marginalized members of society.

While I’m less skeptical of Truthout than Alternet, the question of “if they can’t afford a decently designed site, how can they afford to do good journalism?” still comes to mind. The more quite black and white visual tone of the site does help this a bit. For example, the use of a serif typeface (Georgia) makes it feels more scholarly despite its other shortcomings. The photography also felt more authentic than Alternet but still doesn’t look like they have the funding to hire a photographer. The primary navigation, however, seemed like it was geared around getting people to join the opposition movement especially with BuzzFlash tab which is a non–stop live stream of bad things the republican party is doing.

Truthout Website

Research Notes

Napking Sketching 101 — Mental Models

At the conclusion of the research, I sketched out the key points I felt were most important to communicate about Motherjones, Alternet, and Truthout. Through these sketches, my goal was to clearly explain higher level concepts that made these sites similar or different. The speed and informal sketching process allowed me to quickly visualize ideas and analyze their properties.

Thoughts on the Crisp Context and Moyer

It’s important to consider not only what is said, but how it’s said too. Language is multidimensional, and I believe it’s foundational designers understand and exploit this to effectively communicate. Typography is the perfect example for this. A court order written in bright pink with comic sans probably won’t be very convincing. It goes against the connotations we’ve built up over the years that tell us it’s a serious document.

There are elements implicit in visual forms that convey information about what’s being said. This is why I think sketching is so powerful. You can convey a lot of information very quickly with a well-drawn sketch. A website site map would be very difficult to describe in written language, but with a well-drawn sketch, you can learn all you need to know in a single glance.

In class, we analyzed this idea in great detail first by attempting to illustrate key points, then mapping the actors involved and concepts they relate to on the white board. This exercise taught me to think deeper about the information being sketched. A line or a circle can contain a lot of information if carefully considered.

Crafting a Story

Following the analysis, our next step was to try and craft a story explaining the news outlets. To begin, we divided our analysis into four parts. The first part was defining the big idea that was unearthed in the analysis. In our case, we realized, the goal of these Alternative news websites is to convince people of an uncommon point of view. We then divided the rest of the analysis into three parts: content, visual structure, and visual form. We then evaluated these three parts to see how they either supported or refuted the overarching goal of the alternative news sites

We whiteboard and then codified our investigation into a short essay with supporting illustrations. For efficiency, we broke up the written portion into two parts.

Shengzhi — First Half

Unlike BBC, ABC or New York Times, alternative is a non-mainstream leaning, so it has its unique problems of trying to sell people on its ideology. To solve that problem, these three alternative news websites’ ( Mother Jones, AlterNet, and Truth Out)approaches and strategies varies a lot.

Before I delve deep into the analysis, I would firstly point out a feedback circle that would affect their approach, and the circle contains three key elements, which is the Finance(Money), History of credibility, and strategy. These three elements, somehow, forms a interactive and feedback circle, which significantly influents the way of their “selling” strategies, as well as the design of their websites.

For instance, Mother Jones was first published in 1970s, and it has the longest history of these three news source, it is also the most famous of these three, since it has a long history to build up its credibility. Therefore, it would be reasonable to imagine that with its mature donation system and subscription, it won’t have so much trouble to get finance support and users. Thus, they focus their energy on providing thoughtful and nuance analysis, delving deeply of one piece of news, without selling too much for its users.

However, unlike Mother Jones, AlterNet and Truth Out are both founded around 2000s, which is a pretty short time for a news source, (by the way, BBC has been founded almost for 100 years). Therefore, as non-mainstream new sources, they are still getting through a hard time of selling its ideology and achieving their users. For AlterNet, they try to grasp users’ eyes as quickly as possible. That makes sense, because they don’t have the time to gradually build their credibility, nor does they have the money to do so. What they want to achieve is to catch your eyes at your first glance.

Nevertheless, Truth Out chooses a different approach, what they would like to do is to offer the diversity and thoughtfulness at the same time, which isn’t an easy job. And obviously, they didn’t do it well. But whatever, they still try to implement the strategy of providing its. So, on one side, they attempt to offer thoughtful long stories and simultaneously try to draw people’s attention. These two strategies somehow conflict to each other.

When we go back to our influential circle, it becomes not so hard to understand all their strategies, and each of them, in one way or another, all makes sense for its own situation, but when we talk about their news websites, we can see how do they implement their strategies on the design of their websites.

Brendon — Second Half

Because Motherjones tries to appear more thoughtful and nuanced, they have adopted a long form content strategy that primarily focuses on deep analysis on pertinent news topics. This functions as a key differentiator between them and the competitor news outlets we analyzed because it permits them to focus predominantly on analysis of the news instead of real time reporting. This difference in focus has a clear effect on the tone of the content. Motherjones does not need to lure readers with attention grabbing content, and thus, the headlines and articles haves a more subdued and reasoned tone rather than an extreme tone which is more commonplace for alternative news sites.

The design of the site does a great job in supporting their goals of providing deep analysis and long form content. The homepage, for example, is pleasantly uncomplicated and free of clutter. Upon landing, there is only one primary article with a large photo supported by three related articles in smaller text links. It’s clear from the layout of the site that Motherjones is primarily concerned with producing quality content.

This minimal design aesthetic of the homepage helps aid the reading experience. The clear hierarchy of the layout makes it easy to navigate and easy to read. The choice of a black and white color palette with hints of orange does an excellent job of making the site feel well designed without distracting from the primary content. The sans serif typeface (Mallory) also really enhances the reading experience by making the articles highly legible. This is especially important since the nature of MotherJones’ deep analysis will require longer, sustained reading periods.

Alternet is an interesting contrast because its strategy is fundamentally antithetical to MotherJones approach. Alternet works very hard to sell their ideas as quickly and efficiently as possible. As a result, their content is focused on real time reporting in the style of short form articles. They try to leverage headlines and article content with a more extreme and accusatorial tone in order too quickly grab the readers attention. In comparison to MotherJones, it’s clear Alternet is concerned with quantity and not quality. They use a lot more imagery than the other alternative news sites, and each photo is framed in such a way to support the controversial accusation being made in the headline.

Their focus on speed and quantity is echoed in their website design. For example, on the homepage, they compact a lot of articles with controversial imagery and headlines. It’s clear that through this approach they are trying to drive traffic by engaging readers on a subconscious level by filling them with a sense of urgency. The issue with this approach is that it provides the reader with no clear sense of hiearchy and it can come off as overly forthright in a way that damages their credibility. When nearly everything on the page is loud and screaming for attention, it’s not clear what is expected or where to click. For someone who doesn’t already subscribe to their political philosophy, this must be very off putting.

The visual execution of the site doesn’t do much to make up for the pitfalls of their content strategy. The use of a bright orange and blue color scheme only serves to further add confusion to the page hierarchy with more visual noise. The typeface selected for the site (Museo) has a techy/edgy feel pushing it further away from an aesthetic that the majority of people would probably associate with trust and credibility.

Truthout takes a hybrid strategy, trying to combine diverse content, attention grabbing headlines, and thoughtful long form content. The result is an ineffective web experience that is just as confusing visually as it is strategically.

On the homepage, readers are confronted with a primary article and a myriad of other articles surrounding it. The tone of the headlines tends to be extreme but often get lost in a sea of text links and news content. Outside of the primary article, the hierarchy is unclear because it’s difficult to discern what is and what is not an article link. This shortcoming would probably confuse New readers and lead them to move on to a different website.

Truthout looks like a grass roots news organization because its website looks dated and like budget constraints hamper their ability to hire a quality designer. The color palette is also very bland making the heavy text page feel dismal and uninteresting. The poor choice of stock photography does little to combat this effect and the choice of a serif typeface (Georgia), while it feels more academic, simply creates more visual noise in a constrained environment.

Between the various sites, Motherjones does the best job of selling readers on their uncommon point of view. The nuanced and thoughtful content strategy does the best job of establishing credibility which in turn leads to a larger reader base and more financial independence to fund quality content.

Where Alternet and Truthout struggle the most is creating a respectable brand that exemplifies trust and honest reporting. The quick and dirty tactics deployed, while they may gain readership in the short term, is not a good strategy for long term growth. If Alternet and Truthout are to hope to become more popular in the mainstream, they should take a lesson from MotherJones playbook.

Presenting Our Findings in Class

In class today we presented our narratives in the form of whiteboard sketching. This was really helpful because it allowed everyone to talk openly about their findings but in a more structured and presentable way. One of the most interesting takeaways was that it’s important to consider how something is presented and not just what is presented. For example, ensuring that the pacing was easy to follow and matched what was being illustrated on the board was key to even just basic communication.

This alone could throw off an entire presentation and make the key points incomprehensible. It was also interesting to consider the different types of illustrations worked better than others. In many of the presentations, people responded positively to drawings that were able to compare the sites relative to one another. This helped ground the disparate information into a cohesive visual explanation.

Presentation Followup

Following the presentation of everyone’s findings in the form of live whiteboard sketching, we put all our findings onto sticky notes and tried to organize them to hopefully glean interesting insights. To provide some structure, Stacey continued the organization of Content, Structure, and Form. I was assigned to focus on the insights having to do with the visual form. It was particularly interesting because of the categories it is probably the most subjective and difficult to view objectively. For example, a typefaces and color can be interpreted very differently from person to person depending on their built associations with them.

The most interesting things we learned emerged when we organized them by an unexpected axis. For example, we analyzed the classes of typefaces each site used and mapped them onto the political spectrum. What we discovered none of the right-leaning sites used purely serif typeface combinations and that. This led us down a separate line of inquiry, what if you could organize the typefaces that were used by the age of the publications. Would we find any trends?

Design Jam — Helping Citizens Become Informed

The next part of a class we spent doing a design jam. We had 45 minutes to try and come up with an intervention that would help citizens become more informed about politics and different points of view. To aid us in our mission and to encourage us to come up with more than just static wireframes for an app, Stacey brought in toys, building blocks, and all sorts of nick nacks. Working with Shenzen, we were able to come up with an idea for a cafe that serves a choice of 3 randomly chosen news sources with their coffee.

We felt that this may create an incentive for people who may not necessarily be seeking a different point of view, to be exposed to it in a non-confrontational way. To explain our idea, we made a puppet show which ended up being quite funny and enjoyable for the class. The major feedback we received was to consider how the news was curated. For example, perhaps it’s better to be more heavy-handed and give the users one news source instead of three.

Design Intervention Brainstorm

We continued with our idea of the Different News Everyday Cafe and started to clarify the different details. We had a lot of ideas around the delivery of the news and the cafe experience. For example, we had a lot of debate on physical versus digital news and whether or not digital news would appear as unbiased as a physical newspaper. We also had a discussion about what the social experience should be. We thought that the cafe itself could be designed in such a way that would nudge conversations. For example, if all the seating forced people to sit across from each other, perhaps they’ll be more likely to engage in debate about the news in front of them.

Design Intervention Continued (09/19/2017)

In class today we continued to brainstorm our interventions and reviewed what we have learned so far.

What we learned: 
1. Learn how to organize info
2, Visualize to understand
3. Visualize to communicate
4. Analyze/deconstruct communication
5. Layer forms of communication (written/visual; verbal/visual)
6. Identifying patterns of stories
7. Collaboratively map
8. Concepts and Ideas
9. Reflect and document process

The second part of the class we broke off into a work session. Continuing with our exploration from the night before Shenzen and I worked to further develop our idea of a new cafe. Throughout this process, we struggled the most with coming to terms with how to turn it into a successful design intervention that would help people who are not open-minded to hear alternative points of view. We kept pushing our idea to include a digital platform that could provide debate and even went as far as thinking about the layout of the cafe, but it never evolved into something we felt served its intended purpose.

This led us to step back and try and look at what aspects of our idea was working and what wasn’t. The fundamental system of having randomly generated news was something very interesting, so we decided to focus on that. Through some ideation, we came up with the idea of a game where users would be presented with the news but not be able to tell what source it came from. Users would then have to read the article and guess what news source it was from. Our thinking was that people may find them-selves guessing incorrectly and being swayed by the opinions of the other side of the political spectrum.

Executing the Idea

We flushed out our idea of the app by then quickly mocking up our ideas in the sketch. A lot of the wireframing and the structure of the app had already been figured out, so it was simply a matter of applying it. We worked quickly, so the transition from wireframe to final visual design was practically nonexistent. During the process of mocking up the app, we realized how potent a social component could be regarding game incentive that would encourage people. We played that up and dedicated a tab to all of the social aspects of the game. We also settled on the name of NewWarrior. We felt this was a name that conveyed that this app served as a way to consume news but with a gaming element.

Facebook MiniGame

NewsWarrior Full App

NewsWarrior Description

NewsWarrior is an app designed to expose people to an assemblage of political perspectives and news sources they wouldn’t ordinarily read so that they can better identify their biases and become well-informed citizens. NewsWarrior accomplishes this by providing a game-like reading experience by encouraging users to set up goals and compete with their friends. The NewsWarrior app offers a limited selection of randomly selected news from different sources combining politics, culture, economy and other opinion-related domains of news. This is done intentionally to provide the right balance of choice and curation as to avoid confirmation bias.

The design intervention where users would be first introduced to NewsWarrior would take place on the Facebook News Feed in the form of a quiz/minigame advertisement. Facebook is where the majority of Americans, both left, and right-leaning, get their news and thus the perfect place to stage an intervention about News bias. By guessing the bias behind the news article, people will learn where certain news biases come from. Users are always rewarded with points for participating but to varying degrees depending on how well they can guess the biases. In the facebook minigame, it displays how many friends of theirs are using the NewsWarrior app as well as their weekly score. While users may get points for as long as they are on the minigame page, they must download the app to claim them permanently. Elsewise they will lose them once they leave the experience.

The Facebook minigame serves as an initial and one-time hook for the design intervention, while the full downloadable app serves as a long-term intervention that helps people to read news from different perspectives and promote behavior change over time. In the facebook minigame, the system (Algorithm) will randomly select a small sample of news, based on relevant topics of the day. It’s important to note that the user is purposely given a limited choice to avoid biases in what they read. For example, if given too many options users may start to tap only on articles with titles that confirm already held beliefs. When the user finishes reading an article, the system will ask the user to guess the bias (left to right). The system will then tell them if they are right or wrong and provide a friendly suggestion on how they can improve as well as why they may have received the outcome they did.

The algorithm used in the system functions in the following ways.

  • Randomly selects news from diverse set of news source
  • Ensure the news provided contains relevant topics that the user is likely to be interested in. It’s important to point out that this is a delicate balance because it requires enough personalization to engage curiosity but not so much that it creates a filter bubble.
  • If a user is very good at guessing a particular type of news, adjust the content being displayed to make guessing more of a challenge.

By downloading the full app and creating an account, users will unlock features that make the experience more engaging. The web app, while good for getting users to look at a different point of view, is still not the best way to get sustained engagement. Biases take time to overcome, and one instance of being exposed to a different point of view will most likely not lead to any noticeable change in behavior.

The structure of the app is very simple. There is a tab dedicated to the News Feed, a tab for challenges, and a tab for friends. Users pick from the News Feed an article they would like to read and once completed they try to figure out the bias (in the same way you do in facebook minigame) of the news source that wrote it. They then find out whether or not they were right and provided with an explanation as to why they may have gotten it right or wrong.

An important aspect of the app is the points system. This serves as the incentive to keep users engaged and interested in reading more articles from a diverse set of perspectives. Users get points for every article they read, additional points depending on how long the article is, and points for guessing the bias of the article correctly. Over the course of the week, users track their points and work towards a weekly goal. This tracking bar is visible on the top of the news feed to remind them of their progress throughout the week.

Users also have challenges that they can complete to unlock achievements in the challenges tab. For example, the Bias Warrior challenge is achieved by guessing the correct bias ten times. Also, users can challenge a friend to compete with them for an achievement. The friend’s tab allows users to invite friends to compete with them weekly. The leaderboard tracks everyone’s points, and the first place winner gets bragging rights for being the most informed. From this tab, users can also track their on-going challenges with friends and invite new friends to partake in the fun. We believe the social component is very important because it adds an extra incentive beyond just getting points and meeting a goal.

The gamification is critical to the success of the app. It’s designed to get users to continuously read articles from news sources they wouldn’t ordinarily read and in the process, become more aware of their biases as well as broaden their perspective. Additionally, it also needs to serve the purpose of being a news app a user might use in place of The New York Times or Fox News. This is important because normally users will stick to a small selection of news sources to get most of their information. In that sense, the app tries to be a hybrid of informative news and a game like experience.

High Level Takeaways

In conclusion, I think I learned a lot about how to think about communication. The framework we used to analyze the news sites content, structure and form was a very useful one and one I think can be applicable to other types of projects. It was really fascinating to do a deep dive into news and uncover the why behind things we accept as normal. For example, being able to clearly pinpoint why certain strategies worked over others was very empowering.

I really enjoyed working in groups and it became clear to me that working in teams is a skill. Communication, posturing, and planning are things that are supposed to be worked at.

Perhaps the biggest takeaway for me was the process of translating our findings into an intervention. It was the most difficult but most rewarding part of the process because it was the most difficult to ideate and work collaboratively on. The challenge I think was really good practice and I think everyone improved in this respect.