FRUITFUL
Team
with Amanda Sanchez, Amrita Khoshoo, Diana Chun
Role
Research, Concept Development, Illustration, Content Writing
Project Duration
5 weeks
Tools
Illustrator, Photoshop, Figma, InDesign
Background
Given the mass of information that technology provides us, it’s easy to become overwhelmed. Contemporary news sources recognize this challenge and thus continually look for ways to provide their readers with information that their companies deem important and in a manner that addresses the needs and desires of their audiences, which can lead to a narrow view of news.
To combat this problem, people are increasingly looking to gather information from venues that enable them to read content from multiple sources—social media and news aggregators being some of the most popular outlets. Although these sources are often perceived as providing a broad range of news articles, the specific content that is visible is typically determined by personal viewing patterns and/or curators, which can also heighten narrow views and echo chambers. These problems can cause readers to become ill-informed and lead them to make poor decisions on important issues.
Based on 3 liberal media news outlets, how can we help people become better-informed citizens?
This achieved by teaching them how to carefully read content (not just the words but the forms of content) and encouraging them to make comparisons among information sources.
Outcome
Fruitful
Fruitful is an app that nudges users to be mindful of their news consumption habits and strive for a more balanced perspective. We believe a more informed outlook is one that is exposed to diverse ideas, concepts, and opinions. Getting a good balance of diverse viewpoints is important. We can better understand other people’s beliefs and work together to make a difference.
The project was printed as a zine as the final product, in the zine there is a description of the whole problem and the statistics of the news “bias” that makes people not properly informed. The zine can be found in the following link.
HOW it works
01
Introduction
Getting a good balance of diverse perspectives is important.
That is Fruitful’s main message, because normally with the amount of information we receive everyday is hard to get out of our own perspective bubbles and we keep the echo chamber with our own same ideas.
But what if we could have the possibility to have a different opinion from time to time?
Fruitful’s introduction explains the context of the app’s creation and why is important to have a fruitful perspective.
As Thomas Jefferson once said:
“If a nation expects to be ignorant and free in a state of civilization, it expects what never was and never will be. If we are to guard against ignorance and remain free, it is the responsibility of every American to be informed.”
02
News Sources
The app starts with the selection of 3 sources of media sources.
The example takes first The New York Times, Washington Post and then The Huffington Post, these are all liberal media, so if you select 3 venues that are alike in perspectives, the Continue button will take you to a page when you can balance your diet, in this case your news intake.
So we select other 3 venues, like Mother Jones, BBC News and AP news, all of these have different labels - Independent, International, Neutral, Conservative, etc.
This selection of news sources is important to have variety on the news and perspectives, this first step helps the reader to have more options than the ones they are accustomed to.
03
News
Once the news sources have been selected, the news page comes next. Where based on a specific topic, you’ll be able to see different news from different sources or different news all together.
The news article is represented by a fruit, for it to be added to your basket as a daily intake of nutritious and various perspectives. The news are easy to read since they are curated to be not heavy and have a summary of the main important components of the article, for you not to feel overwhelmed with too much words.
The news can be found in the Home button on the bottom menu, which is in the middle and is represented by the Fruitful logo.
04
Fruit Basket
The more diverse the fruits in your basket, the better.
Once you have read the news article, the fruit of that article will be added to your daily consumption and it will update your fruits basket. The basket can be found as part of the menu in the bottom labeled as “Your basket” and represented with a basket logo.
The fruits basket updates your daily consumption of news and the more diverse fruits you have in the basket, the better. This means that you are taking news from different sources and are providing you with miscellaneous perspectives.
Additionally, in this page, you’ll be able to see which news you read in the day and your own stats for the previous month, explaining how many articles you read, the time you spent reading in minutes and the supplemental readings you had.
05
Supplements
The supplements are articles that are not related to you main news sources but are different from the ones you selected in the beginning, and are about topics that are not too heavy for a reading before sleeping.
These help to vary even more the pear-spective that you already have.
And they can be found in the button of the left in the bottom menu, called as “Supplements” and represented by a pill illustration.
Design Process
01
Understanding the problem
During this stage, we were doing research looking at the statistics of the problem and analyzing the liberal news pages in general. First we started with a exploratory research of the digital news sources, in this case their websites and applications ( if available).
Then we did a detailed analysis of the web pages and made a list of bullet points to understand which were the main factors that captivated the reader.
The New York TimeS
5 column grid
Components that appear:
Main: title, subtitle, location, when it was posted, facts (bullet points), some articles have comment indicator at bottom, author, photo of author, and most of the time picture or graphic related to article.
Sometimes: Special tag for when things are live. Red text at bottom of summary (part of metadata).
Can see around 8 pieces of content when landing on page (above fold)
Images don’t specifically give away that much info about news. Related image, but not obvious. There is some graphic illustrations (NY times hires illustrators to create content).
Some use headlines, full sentences and some use intro text, some statements
The Washington Post
Ads positioning and scale in layout are distracting
Main: titles, description text, bullet points, sometimes bullets+description text appear together
A lot of opportunity for discoverability — sections on right, not technically curated but a user can find out what else is going on
Washington post plays around with layout — Different things seen by different members in our group at different times
Dynamic layout and dynamic images.
Use typography and white space to create contrast, and imagery is almost tertiary
Huffpost
Millennial language “hot stories”
Bold, san serif type — more modern for younger crowds
Hardly any intro, no summary, just quick headlines
List layout (mimics blog). Don’t play a lot with layout. Simple layout. More like a social media, blog like feed.
Use color in text and for accent — green and pinkish-red.
HuffPost has too much contrast — headline competes with image (screaming at you/not easy on the eyes)
Images come from different resources and they look not professional, some are not even HD.
These discussions helped us understand how the news sources deliver their messages and what was important for them to focus people’s attention on. But how informed were the users of these news sources to begin with? Were they actually having truthful and unbiased information? The news venues that we analyzed (with the exception of the HuffPost) try to be neutral and factual even when they are considered “liberal media”. So basically they were well informed right? But, we could not believe that
In the end… what was the most important key point? While we were doing all of the research about the statistics of news readers, we realized that there was a common threat for many of the articles -> News Fatigue.
Almost seven-in-ten Americans have news fatigue, more among Republicans (gottfried, j & barthel, m, 2018)
And there it was. Our own story to go with and an actual opportunity to help people feel less overwhelmed with the amount information they were getting every single day. Everything coming from all these news sources and all with the same urgency at once. Causing a cognitive overload to the reader, resulting in the dropping of the news sources subscription altogether to stop that.
02
Concept Development
Based on the cognitive overload key point discovery, we figured that news sources (even if they are reliable) lack the simplicity that other platforms have like social media. From this, we had a set of ideas to work on to tackle our main focuses that were: Cognitive Overload, People living in bubbles and the unreliability the social media provides for news.
From the first brainstorming, we had a lot of ideas that we ended up prototyping as a whole amusement park. Then we did sessions with the whiteboard to nail down on the specifics of our best ideas. During this phase we were in a Lewinian-ish spiral of ideation, where we would plan ideas, observe them in the context of the users as possible scenarios, reflect on those and plan again. All of our ideas started with the main problems, but in the end, we could not cover all of them, until Fruitful.
When we arrived to Fruitful, we wanted for people to have a wholesome pear-spective from reliable sources but still have the convenience scroll mode from social media without the cognitive overload. That is why our application and the balanced diet of viewpoints was the best intervention for us to develop. We additionally added an entry point for our intervention, stickers in the fruits at food markets, so fruits would be label with little stickers that contained the QR code to download the app and start being fruitful. The whole intervention was so fun to build and work on, so the team felt really excited the last few weeks working on this particular solution. We were designing a project we wanted to be users of.
03
Design Decisions
Once we all voted for this idea, we started the visual decisions and we got inspiration from various art boards from Pinterest that were using muted colors. Since our mantra was literally to not overwhelm the reader, we voted for the muted colors as a design decision, additionally the palette was suited for the flat design illustrations we were creating. I did the illustrations and worked on 2 particular ideas, and the one that was more successful for our intervention was the flat design one with a muted color palette.
Using a muted color palette with a flat aesthetic is classic, polished and just different enough to make it stand out from all the other flat projects out there. - Design Shack (The Evolution of Flat Design: Muted Colors)
Further, we were discussing how to break with the bubble idea, so as part of the onboarding we are requiring for people to select other news sources that are not related in content to the main ones, by content we mean the labels of liberal, conservative, neutral, independent and international. We went for this to actually provide the reader a fuller idea of how other media sources were talking and portraying the same issue. This is important for people to create criteria by themselves and avoid misinformation.
04
Prototyping
For the prototyping, Amanda used Figma to do it and I learned to use it too, since we were all collaborating to create it. This was an amazing experience and she did a great job by mentoring me into a new web-based application that I was not familiar with, yet since there is a consistence with XD, the main components, were not as difficult to grasp. I mostly took care of the illustrations, using Adobe Illustrator and playing with the amazing muted color palette. The main idea was to have flat design, so the creation of the fruits was no problem.
We also worked together with the Zine edition, and I was in charged of the grammar and spelling, something that has a lot of weight in printed publications like ours.
Figma prototype
05
What did I learn?
I loved the outcome of this project, but the journey was not as pleasant as the result. During all of those sessions of iterations, I got exhausted because I thought we were just going in circles without an actual productive outcome that we felt was providing a solution to the problem, this had to do a little bit with some of the feedback that we received during classes. That is when I learned that not all feedback is something to be considered entirely, and most of it is a guide but not a rule to follow. This bad experience helped me to understand that designers can’t please everyone and there will be always someone who does not agree with our intervention, and that’s fine, actually is better because it has room for improvement and growth. After every storm there is a rainbow, they say… but still… when the storm is happening, is better to just dance in the rain, and enjoy it.