CD Studio/Project 1:Navigating Information

Navigating Information

Project 1 delves into the truthful nature of reporting and making information easy to navigate, especially for the masses. What could be a better topic than elections this year, they are just around the corner ! It is not uncommon to find people strongly opinionated and sometimes confused about the Political Candidacy.

How can we equip people to navigate through information, identify useful information and make smart comparisons among various sources of information available?

This week’s exercise is to observe and analyze three news portals for each day of the week. Gauge communication strategies used by each. An essential part of this observation will be to look closely for any undertones of bias or any intent to push a specific type of content. I will be approaching this project in two parts. The first part will be to observe an assess these website from my point of view. With personal viewpoint i don’t imply personal subjectivity but assessing them on some objective points which i could readily observe.

Now for the second(interesting) part, i will closely observe these websites on a daily basis based on the points raised in classroom discussions and knowledge absorbed from designated readings. Daily assessments will start with a brief narrative to establish a clear line of navigation through each post and related learnings.

Lets begin !

Portals to be analyzed are: CNN, USA Today and Fox News

Strategies to Analyse

For the Objective part, I will use specific parameters to analyze. These parameters will be:

  1. Homepage Composition and Content Organisation
  2. Navigation
  3. Typeface
  4. Color Palette
  5. Information Sorting/Prioritization
  6. Density: Negative and Positive Spaces
  7. Visual Consistency

Since the parameters of this analysis are the very pillars of Portal’s Visual Structure, i expect them not to change on a daily basis. However, I will be on the lookout to register any inconsistency.


Day 1, 09/01

First Impressions

CNN

  • Page has three major components: 60% Breaking News, 30 % Top Stories and 10% for top bar to navigate to other categories.
  • The layout design is inconsistent along different categories. Categories of US, WORLD, HEALTH, ENTERTAINMENT, OPINION being identical in layout and information organization. Pages like POLITICS, MONEY and SPORTS have their individual personalities. As a curious observation, i could see that STYLE page is somewhat identical to the major prevailing style in other categories. One can assume that CNN has identified the lack of visual unity and is working on it gradually.

What is interesting with CNN’s top stories section is “how the whole thing restructures itself”.

Red figures indicate news published within one hour. The sequence on the other hand is dynamic and changes. Although i have not been able to identify the reason to be so, i guess a week long observation could reveal something interesting.

Overall Flow

The whole site reveals itself only my scrolling vertically. The content itself on the homepage does not suggest any particular flow.


US TODAY

Homepage of USA Today is similar to CNN in visual composition. However, few components make it perform better on the experience standpoint.

  • Color coded tabs for each category. Same colors reflect on thumbnails of each news.
color coded tabs for categories establish an early sense of visual language to follow and guides user throughout the site
each thumbnail carries the colored tab
  • The homepage composition hints the user to scroll down. A subtle move but is effective, since the half sliced row of thumbnails suggests more can be found under. I found it especially effective because USA Today has a confusing feature which in my opinion does not function adequately.
PS the arrows in the center image

At first i thought these arrows suggested horizontal scroll. However, once i hover over these arrows, they suggest a transition to a different category. But what is inadequate is, there is no coming back from that transition. Moreover, its inadequacy is reflected in the fact that left-arrow takes you to Weather and dead end, right-arrow takes you to NEWS and dead end. The feature suggests a lot but disappoints user on multiple levels to an extend of frustration.

  • Unlike CNN, USA Today opens an additional widget on top of homepage without leaving the homepage.

Orange: Controls to navigate through and go back to homepage. I like this kind of an interface since its similar to facebook’s photos experience and thus convenient for people to navigate.

Yellow: Instant sharing controls.

Blue: Reflects the category that current news falls in.

  • Dynamic Weather tab provides quick info through smartly employed Iconography as per detected location.
  • Unlike CNN, each page has a coherent visual flow in terms of layout and composition.

FOX News

60% page is white, top news lack emphasis

The layout of Fox News is somewhat like CNN and USA Today, however, it is too condensed. Instead of implying relief, it looks like they forgot to use the space on the canvas or probably ran out of content. The homepage is definitely Text-Heavy. One thing that quickly grabs attention is the array of FOX Channels on the top bar.

An interesting thing in Fox’s case is the variation of Typeface and Composition. Since the top navigation bar remains the same throughout the site, it might be a means to communicate the attention provided to each category. A way of bringing out a sort of flavor of each category.

a strong presence of the top bar ties together the varying color schemes and play of fonts on each page.

Day 2: 09/02

Following is a Matrix of points discussed earlier.


Day 03: 09/03 (Something about Typefaces)

Some interesting points were raised in the class yesterday. Font, Style and Color almost resonate with the identity and characteristics of a specific channel. Before delving deeper, i want to take some time and explain what happened in the class. Investigating through the importance of Ethics, Responsibility and Role in context of COMPANY and AUDIENCE makes a compelling case and need to understand “being in shoes”. It raises some crucial question in my mind:

  • Whom are we designing for? (Just the reader or beyond the digital page)
  • What should we Design? (Too early to say)
  • How should we Design it? ( Exploring new angles)
“Denotation vs. Connotation”

Before introducing the class exercise, Stacie threw a googly, a possible hint to the following. The emphasis was on “Connotation”. Denotation is specific but Connotation is associative.

We were provided with two sheets of Typography. We had to provide suitable adjectives to each Typeface. First one had three distinct Typefaces. Distinct in structure and appeal. The sheet itself provided a context. The contrast was visible, not abstract at all. But as soon as the second sheet arrived, line of distinction became very thin. Structure were not distinct, appeals were almost clashing. It was time to make some Connotative distinctions.

SHEET 1
Can a typeface be Mexican ?

Nurie was doubtful but my mind had accepted it such…:)

SHEET 2

It was clear from the class exercise, how powerful a typeface can be in representation. This makes me want to comment on the websites more than ever.

CNN:

  • The clean interface with even crisper Typeface(mostly Helvetica Neue) communicates clearly, without bias.
  • San Serif Bold does the job efficiently of breaking the news.
  • Interesting is maintaining the same Font size. Subtle bold effects are almost not noticeable.
  • Overall it feels non-pushy, comfortable and sorted for eyes to follow.

USA Today:

  • I can not praise their layout any less. Unlike both CNN and Fox, search bar is prominent, suggesting they value viewer’s curiosity.
  • Futura Bold for Breaking News and Arial for Popular News. In my opinion Arial is one of the popular time-tested fonts which stick. So much for playing safe. However, the size and bold nature of Arial font suggests USA Today is trying hard to reel people in.
  • So structured that it feels almost rigid.

FOX News:

  • Nobody shouts it out loud like FOX. A single story thrown in my face while others cease to exist.
  • Arial everywhere, so conserved.
  • This website is the modern day newspaper, quite literally.

08/09, Shaping Presentation:

Our next task for this project is to make a group presentation guided by speech and sketches. The presentation will be 6–9 minutes long. Purpose of this presentation is as same as that of the project i.e. ‘How to help people become better informed citizens/consumers of news ?’.

Hannah, Leah and I have decided to put our ideas on the board in order to identify possible strong overlaps. These overlaps will aid us to decide the main ideas to communicate and will help us to structure the flow of this presentation.

The main idea we want to capture is “Exploration” though these news sources

With all the categories sorted, our next step is to fabricate a story around each source, highlighting their strong as well as weak points. For purpose of this, each of us have picked up a source:

Hannah- CNN, Leah-ABC, Vikas-FOX

This table captures the major points we want to cover for each source.

Key motives surrounding the presentation will be:

Emphasizing points clearly

What is the outcome of your presentation?

How does it help people become better informed citizens/consumers of news?

SEPT 15

Feedback on the presentation has brought out some interesting points of how people prefer to be informed. Some crucial learning are:

Inferences of the Presentation Phase

Agenda for today’s class to analyze various “How to” sources and take cues in order to make an effective communication strategy. After brainstorming for a couple of minutes with Stacie, this is what the cohort came out with factors which makes “How to” videos work well. These are:

  • GLANCEABLE
  • IMAGES HAVE NECESSARY COMPONENTS FOR THAT STEP
  • CONCISE+CLEAR TEXT
  • TRANSITIONS ARE CLEAR/LOGICAL*
  • INFORMATION IS NOT REDUNDANT
  • VALUABLE REPITITION
  • POINT OF VIEW
  • AUDIENCE MOTIVATION FOR VIEWING
  • VIEWING CONTEXT
  • STEPS
  • SUPPLIES
  • DIRECTIONAL CUES
  • STATE GOAL
  • HIERARCHY

Learning from the process of analyzing “How to” videos, it was time for us to bring something to the board from this learning. Following task in Project 1 is to “ Brainstorm a series of instructional steps so that people can walk through manageable actions that they can take when reading news”. The objective of the following exercise is to decide on a target group, strategize “how to make the process more exploratory in nature?” and brainstorm about the possible mediums that can be used.

Target User
Our Mission Statement
A compelling “How might We” question

Following today, we are planning to do individual concepts for this exercise and merge their essence in a singular framework.

SEPT 19

This is a late post for a meeting that took place on Sept 17. Today we discussed multiple models for doing our “How to”. Stacie gave us a subtle hint to utilize learning from our early presentation focused on the analysis of three news sites in particular.

Essence of Early Analysis

Since we are laying focus on first-time voters(college freshmen), we want to emphasize on the exploration aspect of the providing information. Before looking at the models of how we want to structure the flow, these are the few factors which guided us to reach this far:

  • Time (something which is flexible to short-time routines as well as dedicated time routines)
  • On the go experience(something that target group prefers)
  • Maintaining a suggestive nature as opposed to prescriptive
  • Orient the intervention towards content as well as visual(design) investigation.

We intend to propose a bilateral experience:

Direct Pathway: Pathway to the information which is direct in nature, information which can impact their decision making immediately. We intend to provide them an experience guided through filters. These filters are open to their preferences. This pathway will be time efficient, smooth and suggestive. One feature could be ‘listing number of news sources based on the user’s preferences’.

Passive Pathway: This pathway is slow but much more elaborate. Here we want to focus on training the user on how to investigate a news source. This pathway will help them create an aptitude and will guide them to make better choices while choosing their sources of information.

PASSIVE PATHWAY(Left), ACTIVE PATHWAY(Right)

Our next strategy is to structure the content we want to communicate. Crucial questions yet to be answered are:

  1. Form of the content (Game, Quiz, Mad Lib with filters)
  2. Medium to carry the content (Physical or Digital)

SEPT 22

Today’s agenda was to see the progress in terms of structuring and wireframe part of this experience. In an early discussion, Stacie asked us to focus on the self-guided exploration part. Since, prototyping both parts could be a humongous task in the allotted time.

RED(Self Exploration/Passive Pathway) vs BLUE(Suggested Exploration/Direct Pathway)
Wireframe for the recommended sources list, wireframe to understand interaction

This week i tried to incorporate this project in an assignment for Molly’s subject. Here i tried to employ the process of frame creation as described in Kees Dorst’s “Frame Creation”. Changing context around framing a problem exposes new problems. With a new frame, comes a new lens to look at a problem. It becomes an opportunity to understand problem more broadly. In this post, i have tried to frame “How to make first-time voters more informed ?” as “How to make information fun to engage with?”

Some reasons(WHY) to do this are:

  • young target audience
  • preferred medium is mobile
  • time(how can intervention be used in buffer time?)

Some factors(HOW) which helped me to create a different frame:

  • Knowledge is prestigious to people.
  • incentive of having knowledge is a positive public reputation
  • A multiplayer game is participatory in nature

New frame allowed me to approach problem of making first-time voters more informed though a multiplayer mobile-game.

SEPT 27

Abiding by Stacie’s advice, we worked further on developing an interactive web page, De.code. To test it with people we quickly prototyped it on Adobe XD with mock interactions.

Find prototype here: https://xd.adobe.com/view/f1199569-4058-4627-5dda-ff4de043ca3a/screen/artboard1/Homepage

While testing it in the class, we recorded following feedback (emphasizing more on the shortcomings):

  • Really beautiful, love the interaction, trying to process where I might land if I end up on this site — interpreting the how vs. where. A lot of these things I would have to explore to understand the verbiage that’s used — it’s intriguing, but I don’t think that just by looking at these questions I would know what the next step would be or what information would be presented to me. Maybe need to be clearer with the context
  • Looking at a new website and how to begin to assess, interpret, or explore it. That context at the beginning is really helpful and important. How might you orient the viewer to know this is about encouraging exploration of new or unfamiliar news sources. The interactions make it seem like these are steps, rather than can be explored in any order.
  • What I didn’t hear about, young voters — why are you targeting this population and how are they going to be reached. Because of the double step interaction I might get lost and miss information. Might click on the buttons before click on the informational content. Maybe page should open with content expanded. Needs more connection between form/content and target audience. Couldn’t anyone use this? How did you get to this target audience? Is there a takeaway from this? How do I access this information again if I want to? Do I have to go back to the website, or do I get an email send to me with my “results” or with an outcome of the interaction with the tool?
  • Is this like a website, what’s the form? Where am I going? I don’t really understand what that means — what does that verbiage mean to me. Not feeling oriented within a website. Clearly not coming through. Having trouble with the questions, and I don’t know what’s going, where I am, where this is in reference to? I don’t currently understand what’s being reference.
  • I’m confused looking at this, how and where, what does that mean for a news source, be more clear with iconography because it’s not super clear.
  • Need more orienting context to get started. Even with titles, need better understanding for what the sides of the matrix mean. Need connections to real websites, explaining in words but I don’t know how this applies to actual website. How am I switching between this and the news source?
  • Telling me what to do and how to do it instead of making me aware. Icons alone might not be enough to orient me. How do I find this? Why will I click on it? Why would I install a plugin? Might have to be a trick, sound like something else. 9 ways to learn about the election. Clear steps make me feel like there are so many ways to get content, even if I don’t ever read the news. Even if I’m not interested in the content I would still play around here for a while. Need some more context around these questions. If this is actually for voters, should incorporate elements of voting into it.

It was clear from the above feedback that we needed a more contextual and relevant medium to host our content. People want to see this tool in action side by side. Thus, we have decided to make it into a google chrome plugin. Since, it will be a plugin now, we will have to restructure the content in a more portable and concise way. So we have decided to back to parameters from our “ Essence of Early Analysis” from SEPT 19. The prototype looks something like following:

Hi Fidelity Wireframe, De.code as Chrome Pllugin

Now we are working on presenting our final iteration on OCT 04. We plan to structure our presentation based on the following questionnaire:

  • Why are we doing, what we are doing ? (hint-project brief)
  • Who is the target audience ?
  • Why this target audience ?(optional)
  • Where will they find about De.code ?
  • What is De.code ?
  • How does it work ?
Twitter Ad page(left),Chrome App Store Page(Center), Facebook Ad page (right)
Like what you read? Give Vikas Yadav a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.