Communication Design Studio

Carnegie Mellon University, School of Design, MDes/MPS Communication Design Studio class taught by Stacie Rohrbach and Brett Yasko. In this article, I write about my thoughts on projects, discussions, and readings.

Class Review: Week 1 Tuesday 8/27

We had our first class of the semester!

To the start off the semester, professor Rohrbach and Professor Yasko invited us to sit around the circle and talk about the different objects in front of us. We began by asking what they were. There was an immediate consensus that these were toys that can be wind up. ‘But why do you say they are toys?’ professor Rohrbach asked. She pushed us to investigate why we made assumptions. We talked about how these objects’ form, materials, and colors gave us visual clues to their function. The professors questioned how we categorized certain objects together. Is the material important? Is the action of the toys important? We wrestled with the complicated ideas, such as how abstraction could bring intrigue or what it means to be transparent about the origin of a product. We noticed that the element of surprise can produce wonderful natural reaction from people. When the toy was released from being wound up and acted in a certain way, the class would let out audible responses. We discussed how the element of surprise could spark joy or disappointment in people.

Different objects we looked at in class

“These discussions are a different example of ‘decoding design’”, professors discussed. This was a perfect intro to the communication design class. In this class, we will be learning about design that can inform users but also trigger an emotion from them.

My favorite toy was the smallest, yet the most powerful and the peppiest. It was painted light pink and when it was wound up, it could ‘walk’ the farthest and fastest. In Korea, we have a saying ‘the smallest pepper is the spiciest”. It means that just because it is weak or small, that doesn’t mean you should discount it. It could be a dark horse. I believe this could be a good metaphor for this class. The smallest, most obvious observation could lead to the most powerful insights about how we design and communicate.

Reading: Pew Research on Made-up News

• I was surprised to find out that many Americans agreed that the made-up news or fake news is a serious problem that we have to tackle. Republican took this matter a lot more seriously than democrats which were different from what I knew.
• I gather the running theme of the impact of fake news is losing confidence in the system; this could be government, journalists or even in American public and communities.
• People who were less politically aware were more likely to share fake news, both unintentionally and intentionally.
• While younger generations were a more positive outlook for resolving these challenges, they were also less concerned as well. They were combating fake news in more tech-proactive way; they flagged stories or unfollowed certain person or channels.

Project 1: Analyzing News Media

Week 1- Initial research: New York Times, Huff Post, and Washington Post (liberal-leaning news publications)

Visual Structure of News Sources

• All three of the publications put most emphasis on the ‘headline’ article. To my observation headline was chosen by a combination of how recent the story unfolded but also how recently this story gains attention to society. I wonder how attention could be a continuous loop and result in a snowball effect: the story is considered important and makes the headline, this triggers social attention, and this turns into more media attention and so on. This is a chicken or the egg question as well.
• Our group discussed that the very top of the website had the top bar with different categories of news, headline jumps out after that and it was other recent stories that did not make the headline. And Opinion pieces followed either on the sidebar or as a separate section. Other categories such as art and living were arranged at the bottom.
• The Huff Post had a faster transition from news to entertainment news.
• The New York times prioritized the curated stories (editors picks) higher while the Washington Post had audience-centered stories (most read) higher on their page.
• Even after a decade of internet, the New York Times and Washington Post publications resemble what the print newspaper used to layout their papers while the Huff Post took more of the form of a blog or a forum.
• The New York Times and Washington Post set the appropriate level of hierarchy through an area the article took up serif font and San serif font, bold fonts, and divider lines. Even with the hierarchy, the article took up space pretty evenly: this gave to sense of equality among stories.
• The Huff Post’s hierarchy was interesting that the headline was located on the very top, set in an alarming black banner, barely leaving any room for the logo. The headline had all the bling. The all-caps letters, the underlines that changed colors when hovering, the white texts on the black background. The contrast between the headline story and the rest of the website was quite jarring and gave me the impression that other stories are much less important.
• Both the New York Times and Washington Post had traditional element listed such as title, subtitle (brief description), author, and date, addition to modern elements such as comment counts, and bullet points. The Huff Post had mostly just headlines, sometimes with description texts.

ViThe visualorm of News Sources

• All the publications had minimal colors. Black and dark gray was dominant while some red was used to indicate the state of the news (Red ‘live’ tag, to show it is ongoing news)
• NYT: Mostly serif, WP: Serif for titles with sans serif for the rest, HP: Sans serif for everything
• The sanserif in Washington Post and New York Times appeared to be more traditional while all serif fonts on Huff Post looked more contemporary feel.
• As mentioned above, the Huff Post had very high contrast on all their visual element which communicated ‘sensationalism’ to me.
• The Washington Post had dynamic photos that would switch slowly giving life to the webpage paired with a dynamic grid structure that moved liberally between each update throughout the day.
• There was a confusing interplay of card elements and non-card elements on the Washington Post.

Written and Visual Content of News Sources

• The New York Times had a more packed front page with smaller text (one could see 8 stories when you open the NYT website, 3–4 stories on WP and 1 headline on HP). The New York Times packed front page was paired with appropriately curated photos and white space.
• The photos on The New York Times and the Washington Post appeared more professional and coherent compared to the Huff Post in their quality, tone and subject matter.
• Punctuations are used often on the Huff Post website with more social media colloquial phrases, targeting to the younger audiences.

Class Review: Week 1 Thursday 8/29

In this class, we started diving into different elements and tools of communication design. We also talked about the project 1 and how the elements and tools we discussed could be applied to this project

Takeaways

• Pew: We were surprised by how conservatives are more concerned about the made-up news. However, the reasoning and solutions for the issue differed between democrats and republicans. Why is this important? Could we look beyond the political party line? Could we reframe this?
• Project’s goal is to make people ‘a better-informed citizen’. This means that they should have digital literacy and media literacy. They should also be critical, analytical, tolerate to multiple views, have ‘trust’ in the system/community, can place individual stories in a bigger context, aware of gatekeepers/stakeholders, and empathetic.
• We talked about different tools when we start formulating design ideas: Schemas, Stereotype, formative versus illustrative design role.
• We looked at the style cycle and notion of a connotative part of design versus a denotative part. Look at the diagram below.

Reading: Context of Typography, Utilizing Quick sketches for information transfer

Gonzales Crisp, Denise. Typography: Graphic Design in Context

• “Context is Everything”, Crisp describes a context as a series of orbits intersecting with one another. I believe this makes the design interesting at the same time so challenging. Knowing where the project stands between all the web of orbits and knowing how to navigate different interest/goals is difficult. Maybe we can start the next design process by drawing a literal van-diagrams.
• I thought that viewing the context as the set of rules and limitation regarding time and space was interesting. Rules can drive from the motives and abilities of all the parties involved, limitation of the artifacts and delivery methods. I would like to look into more in-depth examples of these limitations.
• Aspects that typography has to consider are the initiator (someone who commission the work), the reader (user), artifacts (technology), and delivery (form).
• Typography exists in a confluence of format (what), medium (how), place (where) and span of time (when). How does span of time affect the design? Would it be something to do with trends or reach of audiences?

Moyer, Don. Napkin Sketch Workbook

• There are many different ways to convey complex information: Van-diagram, gradient, ebb and flow, systems, bar graph, sequences, etc.
• Every sketch format is appropriate for some while others will be more effective than others.
• I will start utilizing these concepts by using matrix and bar graph for project 1. I believe it can show what headline is conveying and how this can start to set the overall tone of the newspaper.

Project 1: Continuing the dive into the news media-Watch out! Headlines!

This week, we are proceeding with the analysis on the three assigned news media: The New York Times, Washington Post, and Huff Post. An in-depth look at the headline over the weekend informed how the first couple of headlines are forming my overall impression for the publisher.

• My group met together to share the findings. Amrita looked into the history of each publisher and content, Stef researched revenue and ads, Amanda analyzed the visual elements(typeface, the density of text, structure) while I looked at contents (closely following the headlines over the course of 4 days).
• I was surprised to find out that these, seemingly unrelated research areas, were starting to fit into each other. The history was closely related to their mottos and revenue structure (subscribers vs. ad) and that informed the target audience, visual looks, and the language(tone).
• Some of the interesting statements/quotes from our group discussion: ‘While New York Times and the Washington Post are organized like a library, Huff Post is functioning as a town square’, ‘when the articles go out to the social media websites and aggregator websites, the visual structure goes out the door. The fonts choices and grid structures are stripped down, giving more significance to the headlines and photos of the article.
• This made me take a closer look at the chart where I have been documenting the headlines and photos every morning and night. I believe the correlation between what is covered and the tone of voice could inform us of how each publisher forms the characteristics and bring in certain type of people as a reader.

What we can see from these two graphs

• Huff Post(HP) has a dense focus on politics while the Washington Post(WP) has a more wide variety of coverage. Variety of coverage could keep the news interesting and upbeat. However, a reader might find some of the categories irrelevant(the article on five ways to upgrade your sandwich). This is a conflict of values between well-rounded citizen and politically aware citizen.
• The WP was the most neutral news in terms of the tone of voice. The New York Times(NYT) maintain a tone much friendlier than Huff Post. This indicates that people can rely on WP for neutral/factual news while NYT has more of a strong following(the fan/subscribers) than HP. This finding might offer an explanation about why the time a reader spends on the website on average differs. WP: 3 min 13 sec/ NYT: 2 min 45 sec/ HP: 45 sec
• Questions remaining: was it most insightful for me to represent my information this way? How else could I have done it and how else could I have arranged the tone of voice? (high emotion-low emotion, most public-personable). Is it right for me to think that the categories and tone of voice are resulting in attracting audiences’ (formative) or is it the audiences pushing the publisher to a direction (illustrative)?

Class Review: Week 2 Tuesday 8/29

The class started by sharing what we thought about the reading and how the reading could inform what we were finding in the project. How does the external context begin to inform how information is being presented? Afterward, we broke into groups to talk about what we want to convey in our research presentation.

• We begin to look into where the point of intervention could be, according to our findings.
• What are our findings? The New York Times(NYT) and the Washington Post(WP) boasts a long history and respect while the Huff Post was only 14 years old. The target audience, the tone of voice and content informed this history.
• They were all building trust, credibility, and reliability with their readers well. Why is the reader still not getting the news better? Where is the room of improvement?
• While looking at social media and news aggregator pattern, we started to noticed that maybe it wasn’t the trusting reader had problem with. Maybe it was people being tired of the news, and it might be news fatigue.
• After talking to Stacie and Brett, we had a more clear idea of what we want to communicate to the class and how we can go from here. They pushed us to think about how the form and structure were influenced by the company’s history and demographics. How are these aspects of the news helping/distracting the readers?

Our group, aka ‘Carne Asada’ is ready to share what we found!

Class Review: Week 2 Thursday 9/6

Presentation day for group findings: Overall takeaways

It went well! Good job, team!

• Seeing other groups’ finding and presentation style made me think about our group’s finding. While simple and strong conclusion we had, we agreed that we had to do more research on social media and other news websites to make our findings stronger
• Personally, I need to remember to say ‘We’ instead of ‘I’. I wonder if I was subconsciously not letting go of my own work. This could hinder finding more insightful research as a group. Looking at the video, I also have to work on looking at the audience more and turning my body towards the back of the class to become a better, confident presenter.
• Having the time constraint is valuable in prioritizing information. This would be valuable for outside the classroom. This could be used as a method to narrow down your options.
• Traditional timeline vs. User journey timeline: They each tell people different, valuable story.
• Stacie talked about how we can focus on hitting the key point at the end! This is an important presentation strategy.
• Could we use the whiteboard more, use as a point of emphasis? Think of a conversation between visualizations(sketches) and your speech.
• While a group was presenting, everyone wrote down their feedback on the live google doc. This was interesting to do, to see how people were reacting/thinking so instantly. This class taught us about giving constructive feedback.
• For the weekend, we were to reflect on what we found- Formalizing into written and visual form.

Class Review: Week 3 Tuesday 9/10

Over the weekend, we wrote out what our findings and analysis on the assigned liberal media(The writing can be found here). In class today, we engaged in a design charrette exercise to brainstorm ideas of intervention.

• Our group had great ideas ranging from magic 8 ball news, interface facelift, interactive exhibit and news pop up.
• After we shared our initial ideas, we unanimously came to the idea of carnival that can show different aspects of the problems we noticed.
• Initial concept after the charrette: The carnival will be called SLOW LAND. the user stores their phone at the beginning of the carnival making the carnival phone-free zone. The so-called ‘reader’ will go through a series of activities/zones to understand and learn about becoming better-informed citizens.
• First: Journey of Journalism. The ‘reader’ learns about the cycle of the stories. How much effort the journalist has to go through, and how news can evolve through news site-aggregators-social media-before it reaches you.
• Second: Bubbles. This is an anti-gravity chamber. The ‘reader’ can realize there is not much he/she can do to grow when one is in his/her bubble all the time.
• Third: Letterlandia. It teaches the ‘reader’ about news literacy, how to distinguish fake news from reliable news sources through game and puzzles.
• Food court- irresponsible consumption of news! How do we defeat that? think it over a chocolate bar from Newsland vending machine. Want to know about the news? Here, have a fortune cookie with a snippet of headline news.
• Fourth: Mindful land. At the end of the day, know that you can always turn it off and walk away from it. Take care of your mind first. So you can come back refreshed.
• Exit: Call to action. Learn different ways how you can be engaged, proactive about the news you care about.
• I thought this was an interesting start. I think there was a lot of goals and messages we wanted to convey at this initial brainstorming session. it is time for us to focus. When we come back on Thursday class, I want to talk to the group about the overall goal and feasibility of it all. I also want us to dive in deep on each section and make sure it is essential, effective and clear for the ‘reader’.

Class Review: Week 3 Tuesday 9/10

Reading Discussion: Image of the City by Kevin Lynch

For class today, we were asked to read a couple of chapters from the book, ‘Image of the City’ by Kevin Lynch. In class, we talked about what the book was about and how it could apply to visual communication elements. Through his writing, we begin to see how the designing city is designing how we navigate spaces. With the analogy of city as communication design, we ask ‘how do you guide users around the content’?

Categorization:

• Path: Movement between space, (margins, gutters, whitespace, bad example: rivers)
• Edge: It can be obvious and not obvious, soft edges vs. hard edges (rule, grid, medium, size of objects, content, whitespace, color)
• District: Sections that you can enter, neighborhood, it can be segregated by function such as business district (index, chapter, categories of content)
• Nodes: meeting point, junction, critical vantage points, hub (folio, table of contents, footnotes, breadcrumbs, page#)
• Landmarks: Highly visible, can’t enter into, doesn’t carry much meaning, but it is personal (Logos, graphic element, fonts in design system)

This comparison helped me understand the text more in-depth. However, there were many more areas I wish we could’ve discussed. Especially for chapter one, we did not get to talk about how a city’s image should be apparent (legible and tangible) for all animals in order for their day to day lives. For this to happen, there can be some planning, but in the end, the city is in the mind of its people. Therefore, understanding people is a critical step in making the city’s image.

Class exercise: Investigating Typefaces

We were also asked to read through Ambrose Harris’s chapters on the basic visual design principles. During class, we looked into different typefaces and how that can give connotative meaning aside from the text’s denotative meaning. We looked at how different fonts that have the same characters (i.e. garage sale, yacht club) could carry totally different meaning due to the typefaces that were used. San-serif gave younger and more contemporary feel while serif fonts looked more series and respected. I would like to investigate more about the exact reasoning why I perceive different typeface with different meanings. What are the benefits of knowing the history of the typeface and its historical context? What is that mean for foreign language with alphabets, foreign characters? What is the appropriate amount of typeface knowledge as an interaction designer, UX designer, or UI designer? What is our goal of learning about typefaces? I feel like there is so much you can learn about the typeface. To be continued…

Class Review: Week 4 Tuesday 9/17

• What is intervention? Its main purpose should be to interrupt, improve a situation, raise awareness, start a conversation so people can think about the issue critically.
• For our project, we should pay attention to the fact that we are addressing the general public, and the issue of news(consumption, creation, state of)
• We should think about transparency, tolerance-bias, relevance, reaction, timeliness
• For Zine: talk about what, who, why important, how it is, next step(follow up), where(context)
• Napkin sketches: ways of organizing, tell stories, build mental models, synthesis/ pattern recognition

Small note about working as a team: Week 4 Thursday 9/19

Today was an in-class workday for our Zine and intervention.

I think we had a breakthrough in our group! After talking to our professors, they sensed the apathy towards our intervention. Stacie suggested getting some fresh air and talking it through. I personally was not sure how others were feeling about the intervention; I just knew that I had no opinion as well as no passion about it. I thought it worked just… fine.

Talking with everyone, I noticed that all of us were holding back ideas, because how far we have gone in the process and how an objection would be detrimental to the end product. How did we keep going down the path that no one understood or liked? Maybe thought everyone else liked it. We were talking a lot, but we weren’t being open about our own opinions.

We each got some coffee, cookies, yogurt and sat outside for a while. There were few tears, a few hugs and a lot of hashing out our reservations. This is how I learned to work with the team. The craft is not perfect yet. But at least we are all working on it. I just wanted to note this as a victory, because today, we recognized the problem and got on the same page.

Closing: Week 5 Tuesday 9/24

Final thoughts on the project

In this project, our group was asked to look at liberal media in order to understand the current news consumption habits in USA and possibly come up with an intervention to address the shortcomings of the current news media.

Findings

The news media we looked at was The New York Times(NYT), HuffPost(HP), and Washington Post(WP). Both the NYT and WP have been respected as a reliable source of news and setting the standards for model journalism. However, in the digital era with social media and news aggregator apps, they were suffering in diminishing subscription revenues and overall viewership. HP was taking another approach to combat this. They were born out of internet blog, and their visual structure and contents reflected this. The articles are laid out inside a simple card element with a single grid structure. The content started out with serious news topics but moved quickly onto entertainment and celebrity gossips. But behind their casual facade, HP was actually putting out great journalistic work. through this, I saw the tension between the meeting the need for convenience/short term satisfaction verses supporting the well-informed citizen culture.

Problematic Patterns

Social media era started in the late 1990s and quickly became the essential layer of how we conceive the world around us. At first, social media such as Facebook was about sharing an idea. Today, close to 2/3 of adults get their news through social media. This is problematic because of the reinforcement of the echo chamber and it often distracts people from seeking out reliable news source.

Cognitive Overload and Fatigues

Another aspect that we have to look at when we study news websites and social media is how we have access to them 24/7. This means that websites also have 24/7 access to us. The internet brought the world to us, but we learned that the world it brought had many problems. The amount of news, breaking news, ALL CAPS TEXTS with exclamation marks!, FOMO, the tragedies and activism are all very overwhelming to people and wearing people down. This was especially prevalent in tech-savvy young adults, age 20–30s which is the biggest demographic in our news media readers. How could we give them somewhere they can be informed but also be able to consume the news mindfully?

Intervention

Our intervention, Fruitful, targets the 20–30s with different political backgrounds. It aims to provide a neutral and reliable news platform without all the sensational package, but also begin the conversation about different political views and staying informed.

It meets out prospective users at their everyday place, a grocery store. Inspired by the fruit stickers, we designed a tough point on the produce and deli number tickets to pique their interests.

The stickers on the fruits invite the users to explore a different way of consuming news. It includes the app name, Fruitful, mysterious quotes with the URL to our app.

The app Fruitful gently nudges users to consume news from reliable news sources and with more variety. The app has a simple muted color tone with simple UI to combat cognitive overload and news fatigue.

The intervention aggregates news from a wide range of reliable news media: conservative, liberal, alternatives, US powerhouses, etc. It gently nudges users to consume news from reliable news source and with more variety. Each area of a news source is assigned with different fruit and user can see how they are filling up the basket with different news source’s fruit. It also offers a quick snippet of news in ‘vitamin supplement’ form.

The app has a simple muted color tone with simple UI. It strips the news article down to simple san-serif text, in the efforts to keep all news sites equal and free of cognitive overload.

Reflection & Group Work

Designing a cohesive artifact as a team was something I never have done before. I enjoy working as a team but my past group work usually came with clearly assigned roles, and often I was the token designer. Working with talented designers was an invaluable experience, bouncing ideas with each other. But also it was challenging at times because I had to let go of aspects that I felt that I was competent at. For next time around, I want to work on not closing the door on the idea too fast overtaken by the excitement on a seed of an idea. I also would like to work on giving helpful, constructive criticism since my questions were often taken by my group as an attritional process rather than the revenue of exploration to make the thesis stronger.

Overall, this project yielded a satisfactory process and result for me. Our intervention captures what we battle with every day: to be informed, or to live another peaceful day. The consistent demand from the world for one’s attention becomes to be a hindrance on keeping up with objectivity and consistent engagement. I hope the app can tell people what they are doing could be recognized/awarded and being mindful of your own mental well being is the most important thing in well-informed citizen. I would like to investigate more option for UI in order to validate if this form could support a different kind of news: from national tragedy to adversary op-ed.