De.code
De.code is a chrome plugin designed to present practical tools to help new news readers explore the news, placed side by side with a variety of news content. It is an outcome of a 4 week-long process observing, analyzing and evaluating various news sources. We focussed on the aspect of EXPLORATION when it comes to knowledge acquisition.
Detailed process blog here.
Duration: 4 weeks
Team: Hannah Rosenfeld, Leah Jiang, Vikas Yadav
My role: Design Research, wire-framing, UX/UI prototyping
Tools used: Photoshop, Illustrator, Sketch, After-effects
PROMPT
The goal of this project will be to equip people to navigate through information, identify useful information and make smart comparisons among various sources of information available.
INITIAL RESEARCH
We started project by individually observing three news sources: CNN, USA Today and FOX News, over a period of two weeks. During these two weeks I kept a close eye on visual design and tone of reporting by each source. Towards end of this phase i prepared a comparative table in an attempt to outline crucial observations.
GENERATIVE PHASE
Moving ahead we worked together to synthesize our individual observations. We looked more closely to the visual style adopted by each source. We also emphasized on their choice of Typeface as it could suggest tone in which these sources are trying to communicate. For example, CNN uses SAN SERIF to break any news and Helvetica NEUE for running text. Both typefaces feel complimentary, supported by ample white space, experience on CNN comes as non-pushy, comfortable and sorted. On other hand, FOX News uses bold ARIAL everywhere with stark variation in size between breaking news and running news. Experience on FOX News comes literally as a modern day newspaper. In a nutshell we concised our synthesis into six organization features that one should be aware of in order to confidently explore news:
1. Categories — Explorable categories are intuitive, capturing popular themes and patterns. They help make sense of news content and provide a framework to understand how content is organized, and where you’ll be able to find it.
2. Consistency — Consistency from page to page within a news source helps to orient you and helps you know where to look for content. Similarities in content, tone and layout will set a clear foundation and make you feel safe to explore.
3. Tone — Though it may not be the apparent at first glance, the tone of a news source plays a big role in inviting or discouraging exploration. Tone comes through in choice of language, type, colors, and even imagery. Explorable news sources tend to employ a more neutral tone.
4. Layout — A news site should use a variety of media across their pages, balancing text and image to create an interesting yet explorable space. Consistent layouts are even more inviting and take much of the guesswork out of navigating through a new site.
5. Navigation — A news site should make you feel safe to explore with robust menus, clear titles, and intuitive interactions. Clear navigation shows you what is possible, orients you within space, and makes it easy to move in and out of content.
6. User Involvement — Many sites invite your involvement via discussion in the comments section or through sharing on social media. These small features not only invite exploration of viewer comments, but also help contribute to an inviting tone that can make you feel confident to explore and contribute.
Brief required us to shape our learning into a useful design tool for people which can support them to navigate through information. Since we are on a college campus and 2016 election campaign is the hot topic around, we thought “How can we provide a useful tool to college freshmen(first time voters) so that they can explore news the way they want?”. With our target user set, we decided to prototype something fast and get feedback through user testing.
PROTOTYPING
As our first iteration, we decided to make a desktop app. Through this app we wanted to provide two options to the user:
Option 1 — Take user through a map, communicating important concepts for parsing information and presenting appropriate examples through comparison on various sources.
Option 2 — Take user through a series of flash cards, communicating information parsing concepts through a simple quiz. We conceptualized this option as a self paced quiz, providing user ample time to absorb question, answer the question and assess feedback after the quiz.
After designing a quick prototype we decided to modify the idea by merging two options into one and reducing number of steps to explore the app to minimum.
REFINEMENT PHASE
In our second attempt we decided to make an interactive webpage. On this webpage, user’s will be directed through intuitive questions. We framed these questions around general psychology of people when they have to navigate through news portals. People looking for specific topics mostly struggle with “How do i get to something?” whereas people who want to explore news typically struggle with “Where am I, where should i click next?”. Understanding these needs, we expanded six organizational features into nine features around intuitive Where’s and How’s.
Prototype designed on Adobe XD here.
In another round of testing, people said:
- “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.”
- “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.”
- “Maybe page should open with content expanded. Needs more connection between form/content and target audience.”
- “Need connections to real websites.”
- “How do I find this? Why will I click on it?”
Feedback very clearly suggested a lack of context(actual news websites), strategy to orient user’s towards the tool(where to publish the tool) and main content made visible more explicitly (iconography+text). Learning from the feedback we approached our third iteration as a Chrome plugin, which will be published on social media. We conceptualized decode as an overlay on original news source. Plugin provides a complimentary experience to reading on a news source, providing a comprehensive guide to identify key organizational features and empowering readers to navigate through information smoothly.
