Bad News
Case Study
An open system empowering citizens to challenge the news media and hold them accountable when they do "bad" things.
Overview
Consumers can use Bad News to confront the news media. It includes resources for reporting bias, inaccuracy, and outright propaganda. Bad News aggregates these reports and provides statistical analysis. The offending news sources are automatically sent email notification with the hope they will make corrections and improve their reporting practices.
On its own, the primary objective of the app is to improve the overall quality of news. Within the context of my portfolio, the purpose of the work showcased here is to demonstrate my skills and familiarity with recent tools and services that are likely to be encountered by a UX Designer.
ORG: Peter Klein Productions, LLC
ROLE(S): Project Lead
DESIGN TOOLKIT:
Visual Studio Code
Figma
React
TypeScript
TailWind
Adobe Photoshop
Adobe After Effects
Lovable
Google Optimize
Google Sheets
Google Forms
The Problem
American trust in news media has been trending downward since 1976. Today, trust in what's reported by the news media is the lowest on record.
The lies told by the media have become so transparent, everyone can sense it, if not consciously then subconsciously.
Today I can't find alternative perspectives on a story, even though the Internet is bigger and faster.
We're all paying the costs for allowing the media to consolidate. Fewer sources means less actual news.
The news being reported today is measurably less accurate and arguably of lower quality. There's a growing concensus that the primary cause for this is a combination of reporting bias, propaganda, and even corrupt practices.
Making matters worse, the media have blocked or eliminated comment sections and other means to provide media producers with feedback. Americans have few means to voice their disapproval and many feel disenfranchised.
As the below chart shows, of different groups being considered ranging from local governments to the federal government, Americans have the least trust and confidence in the "mass media."
The Challenge
Given this historically low trust in the media, the primary goal for this project was to improve the quality of, & trust in main-stream news. The practical goal was thus to build a platform with which to achieve this — to demonstrate a viable framework.
Creating an app that allows users to critique the news media will certainly be a complex task. It must be designed in a way that encourages users to actively participate in reporting activity while also providing them with an easy-to-use interface. Finally, security measures must be implemented to protect user data.
The Status of the App & My Role
I don't plan to complete the Bad News app for distribution before I land a new job. Having recently been introduced to a few like-minded individuals with some great new services that compliment my concept, I expect to uncover some features to incorporate that will unfold as time permits.
As journalism is something I have personal experience with, I had the idea for a similar app in the past. Being active in pursuit of a new job in UX design, I needed to build skills using cutting-edge tools in a few areas. It made perfect sense for me to begin work on Bad News as the means to become familiar with these tools. It seemed like a smart addition to my portfolio as well. Therefore, what you see is, at the very least, a demonstration of my UX design skills and, at the very most, a demonstration of a workable framework with great potential.
Design Process
As this project is only to demonstrate a viable framework, some design processes have been limited in scope or were unnecessary. But I still made use of the well proven pattern of...
- Empathize with Users
- Define Pain Points
- Ideate Solutions
- Create Wireframes & Prototypes
- Test & Iterate on Designs
Competitive Audit
Searching for anything similar to my app concept found nothing in the form of an app and little in other forms. However, there are web services that seek to present news with accompanying bias or partisan influence. The purpose of which is to better inform the user/reader and curb any value the material has as propaganda. In this audit I find that both services examined do a fair job of overcoming challenges, but leave much desired.
General Information
Competitor
Users
Product Offering
Unque Value
allsides.com
ground.news
User Experience
Competitor
User Flow
Tone
Desktop Experience
Accessibility
allsides.com
+ Information is fairly well organized
- Almost no branding, use of cues or language to highlight or draw attention to unique features or sections. Very little effort to clearly divide data and external content from company service info and news about the company.
+ News seems current. Links to main content areas are somewhat easy to find
.- Appearance is like run-of-the-mill news aggregate, lacking any visual cues or branding of their unique features.
+ Lighthouse Accessibility rating of 96
- Only 75 Best Practices rating
ground.news
+ Good effort to guide the viewer into content and then guide the eye to defined features on the page/screen.
+ Pretty good means of displaying news in the context of bias highlighting.
- Confusing overlayed ball graphics & pop-up messages when hovering in places.
+ Lighthouse Accessibility rating of only 73
- Only 75 Best Practices rating
Identifying Users
Only when a real-world user base has been identified can any meaningful user goals, frustrations and problems emerge for consideration. And I didn't want to overlook any prospective users. Basic user research was conducted prior to taking on the project, supplemented by competitive research and brainstorming.
With that data and some analysis, we can ideate solutions and forge ahead with specific users in mind. Based on the most common demographics and key user problems identified, 6 user personas were developed. These were fabricated amalgamations of typical users to help guide the solutions being designed. Here are 2 examples...
As you can see from above, Erica is unique in that she not only seeks to improve the quality of news, but she also wishes to advocate on behalf of others.
Saadah is more typical of prospective users. The twist in his profile is that he has the goal to become an independent journalist himself.
Primary System Functions / Features
At its core, the platform will contain the following functional areas...
Reporting System
Tracking System
Automated Notification System
Publishing/Promotion System
5 Ways to Structure Info on 4 Screens
One of the exercises in my Google UX Design coursework was to rapidly sketch "5 ways to structure info." Early in conceptualization of Bad News I came up with the following examples. The layouts that worked best are highlighted.
Screen 1
Screen 2
Screen 3
Screen 4
Wireframes & Consistency
I find Figma to be very helpful and it was essential to completing this project. But before getting to basic wireframes, I first sketched out how the critical screens would be structured. I put a much thought into the sketches, which I believe this comparison of before and after demonstrates.
High-Fidelity Figma Screens
During this process I became familiar with the methods of converting screen layouts into code; in my case, VS Code. Below are the final screens in Figma before being stripped of variable content and exported for coding with VS Code.
Logo Iterations
The brand, "Bad News" can be taken in the literal sense and viewed strictly as a negative connotation. But sometimes concepts aren't simple enough to convey in one or two words. The app's fundamental purpose is to allow for the reporting of "Bad News." Hence, the brand name. It's edgy, but makes sense. You can see from the iterations below how I tried to include the concept of the "media," which eventually came through the television symbology.
Usability Study - Bad News App
There's little doubt that the Reporting System will be the greatest challenge. Reporting is also the first step in the process which the other systems rely on to function. As such, this study focuses solely on the Reporting functions. It was developed but has yet to be undertaken.
User Flow
User flow is important to establish as early as possible. It can be helpful from conceptualization through developing user activity metrics. Below is a sample user flow from before even sketching the first wireframes.
Minimum Viable Product Prototype
This has been more difficult to develop than other, seemingly complicated apps. I expect further development to be no less difficult. Adhering to restrictions and limitations in what can be reported and what constitutes an offense that are key to service integrity is important. It's no less key and probably required to maintain user interest that the experience be intuitive and rewarding.
