NPR Plus is a 4 week academic case study completed with a team of 5 in December, 2016. My role for this project was mainly execution, as I was responsible for the development of the user experience up to crafting an interface that conveys the core concept of the digital intervention.
This is the in-depth process documentation of the project presenting the teams thought process and how we lead to the final product, as well as my rationale behind the design decisions I made when iterating through the UI.
Business Problem: Lack of Young Listeners
NPR is lagging behind competitors due to their hesitancy to properly developing their digital products, which results in a lack of new young listeners.
“NPR has been standing with its toes in the ocean for too long, curbing its digital ambitions in order to appease legacy radio stations.”
— Eric Nuzum, NPR’s Former Head of Programming
NPR’s core business problem is their hesitancy to fully embrace the emerging technological innovations that are occurring in their field of public radio, and in doing so — they are unable to attract younger listeners who will determine the longevity and future success of the brand. Which, in the context of NPR, is significantly important since the median age of their listeners has increased from 45 to 54 in the last two decades.
Sector-Wide Problem: Podcasting Renaissance
With the resurgence of the podcast renaissance, the radio medium is beginning to feel the sector-wide implications that comes with redefining the relationship between podcasting and public radio. Now, more than ever, there is an incredible opportunity for designers to intervene and fill the innovation gap that the resurgence of podcasting has created.
“There remained lots of opportunities for innovation in audio that has somehow not been tapped.”
— Fast Company, 2016
With this in mind, our initial goal was to redefine radio and podcasting in the digital age by leveraging the “podcast renaissance” in order to attract the emerging demographic of young audience. The podcasting renaissance that has occurred within the last year, has created a race to become the premiere podcasting solution within the digital age.
Spotify redefined music streaming, Netflix redefined television, so how can we redefine podcasting?
Social Problem: Misinformed Society
Yet, after recognizing the cultural shift in public reaction to the dissemination of fake news, we saw an opportunity to challenge this social problem. The power fake news showed in the 2016 U.S. election has become an external threat to journalism, as well as NPR’s brand values.
It was important for us to begin with the purpose of the project, which was to promote a more informed and engaged society by encouraging people to be more critical of the content they interact with on social media. This purpose was established through identifying the problems: the spread of fake news and NPR’s lack of young audience, and developing insights through numerous iterations. How we approached this opening was with a digital fact checking experience, by proposing a new mobile app for NPR: NPR Plus.
By leveraging NPR’s existing fact checking section on their website, we believed NPR can become the solution to this rising problem. As we explored various approaches to tackle this problem, such as integrating fact checking directly on Twitter with NPR’s journalistic credibility, we realized it was not feasible since Twitter is a platform that supports freedom of speech. We had to be careful not to contribute to the problem by delivering misleading content.
After further ideation, we chose to focus more on the post-experience in order to emphasize call to action. Due to social media content receiving more views than real news, we saw an opportunity to spread factually correct information through platforms such as Facebook or Twitter.
“The essence of strategy is choosing what not to do.”
- Michael Porter, Harvard Business School
Bridging Business & Culture
This external social problem is an opportunity for NPR to innovate in the digital realm by further developing one of their digital offerings, fact-checking, into a more engaging digital experience that can help individuals of all ages differentiate between credible and fake news. With this, we can contribute to the fight against fake news, as well as helping NPR attract new young listeners.
- This solution is feasible with NPR’s journalistic credibility as well as their brand value.
- Viable because NPR struggles to attract a younger demographic, and already offers fact checking on their company website.
- Desirable due to the spread of fake news and how it played a major role in the U.S. election.
Intervention: Journey of Fake News
The New York Times released a case study of How Fake News Goes Viral, so we broke down the journey of fake news into four different stages.
We realized it is almost impossible to eliminate the creation of fake news due to the vast amount that is constantly published online. We also noticed that it is important that the intervention happens before it reaches various news sources and politicians, since that is when fake news gains momentum.
We narrowed down our target audience into two broad categories. Ones who are willing to be informed and ones that are disenfranchised and has lost hope in the system. The broader idea of our scope is people who are struggling to differentiate between factually correct and incorrect information online, especially young adults.
Deriving from this, we created two types of personas to set a goal and constrain ourselves further. First was Kelly, who has the will to be informed or more involved in their role as a member in society. And Sam, who feels disenfranchised from the political system due to lack of individual impact.
With these two personas in mind we reframed our problem, which essentially became the core concept of the user experience. To translate overwhelming information into valuable information, and to embrace fact checking through NPR’s non-partisan credibility.
If it is almost impossible to eliminate fake news, we can combat it by designing for an experience that motivates people to share factually correct information.
User Scenario Mapping
We created user scenarios based on our personas’ behaviors and goals to get a better understanding of the user’s motivation and how that will reflect on the user experience. The purpose of these scenarios was to clarify the flow of the in-app experience, as well as determining the type of content on each page.
By prioritizing the user flows, I was able to focus on the users’ needs rather than simply designing pages and interactions based on intuition. Creating these scenarios helped us have a clear direction when developing the wireframes. We knew what type of content goes on which page and the steps the users take to reach their goals. I personally found this as an extremely valuable part of the process, as this allowed us to map out our thought process and identify certain pain points.
The primary focus throughout the user journey was to pinpoint stages where we can reduce cognitive overhead in order to create a more engaging experience. To reach individuals such as Sam who doesn’t see value in such topic, it was crucial to influence individuals such as Kelly, who is willing to be informed, to become advocates and reach the extreme users on social media.
Next, we made wireframes of each page to establish the visual hierarchy, content/function and interactions. As the picture below was our initial form, we were approaching from a visual design perspective rather than a UX perspective. This lead to us identifying holes within the UI, thus we took a few steps back and focused on the user flow first for deeper refinement.
First Iteration — How should we present the content?
We initially had the fact check tab divided into two sections, which were Articles and Tweets. The idea was to create a feed similar to Twitter by featuring factually questionable tweets by politicians. We thought we can attract the younger audience through an interface that is familiar to them, and that this will make news content more approachable. Yet we chose not to take this direction of showing if a tweet is factually correct or not, as we realized not all tweets are black and white. It is not NPR’s place to become the arbiter of truth, as this would not align with their non-partisan standpoint.
Second Iteration — UX Refinement
For the second iteration, we hid the content underneath in order to allow users to scroll through other headlines without the drop-down dragging down all the content below. At this stage, we aimed to design an icon for the hold function, since there are currently no universal icons to indicate hold. We switched the annotations page to a card-overlay as we thought it would be an efficient way to swipe through other annotations. Lastly, we decided to use orange only for the fact check section to have its own presence within the application.
We established NPR’s non-partisan standpoint by taking a transparent stance with the sources as research into our demographics indicated that people trusted individuals rather than institutions. Our solution reinforces NPR’s credibility through a dedicated section within each annotation where readers can see who the sources are along with their credibility.
Final Form — Intertwined Pages
In the end, we chose to include the most trending headline at the top in order to prioritize the fake news that is spreading the most. By showing the bar graph with the statistics, we intended to hint users what type of content is underneath the headlines. We scrapped the overlay concept for the annotations as we realized this page holds the opportunity for us to create a path for users to navigate through other tabs, in addition to allocating more real estate for valuable content. With this, each tabs are interconnected, creating a user flow that allows continuous exploration.
We aimed to redefine the traditional fact checking experience by framing each headline with an unbiased standpoint rather than explicitly labelling if an article is factually correct or not. This became necessary after we understood that the theme behind fake news articles was how they prey on a demographic’s perception of truth as individuals have personal biases and different lived experiences.
We didn’t want to deter readers at first glance with black and white labels, such as “true” or “fake”, instead we wanted to encourage people to be more critical by guiding them to engage with the content instead of immediately promoting or dismissing it. Our stance with unlabelled headlines helps create the first objective touchpoints that invites all readers who are in the search for truth.
Commercial Values || Social Values
This project allowed us to explore the field of Experience Design in a larger scale to not only design for commercial values but social values as well. As public perception continues to shift due to our growing digital environment, we must make sure it isn’t heading towards the wrong direction. Dark patterns in UI is responsible for certain human behaviours and can dictate how people frame problems.
One question that came up throughout the process was “what is a fact?”, and “what is fake news?”. It was crucial for the solution to not contribute to the problem, as the problem itself is ill-defined. With the rise of social media, people’s perceptions are beginning to be valued more than objective facts, hence the “post-truth era”. The 2016 U.S. Presidential Election shed light to the existing problem since the birth of the internet.
One of the key ideas we kept throughout the process was to leverage audio. People are addicted to time. People are drawn to products or services which allow them to get tasks done faster, thus I believe audio and voice will play an integral role in digital innovation. An example of this is the advancement of AI, such as Amazon Echo and Google Home. Audio holds the ability to reduce cognitive overhead in a new way, as it is the simplest and fastest way to deliver content. It will be interesting where the implementation of voice in technology will take us since it is a quality that is already within us.