BFA Thesis 2023: News Credibility App - Browser Extension & Mobile App Case Study
I created an app and browser extension that provides useful information about the credibility of news posts on social media in order to help viewers differentiate fake news from real news.
To accomplish this, I created branding for the product, mocked up and prototyped the application and extension, design and print a process book, and set up a gallery installation to present the project.
For my thesis project, our class was assigned to choose a problem that could be solved through design. Throughout 2020, when the Covid-19 pandemic erupted and had us doing schoolwork from home, I discovered a huge problem with fake news and misinformation running rampant on social media. Regardless of how you lean politically or your various stances on issues, more information about a news outlet, author, their bias, and the chance the article is reliable is useful information. Misinformation, whether intentional or unintentional can be dangerous to the general public. Statistics say 75% of social media users can’t differentiate fake news from real news. This appeared to be a problem that could be solved through user interface design, more specifically an overlay on social media that can help the user find truth.
Initial Process & Brief
My thesis question is “How can the application of user interface design techniques promote information literacy among social media users in the United States?”
To start this project, I would need a trustworthy brand that exudes neutrality and professinalism, as well as an easy to read user interface.
In order to create an honest aesthetic I researched color palettes associated with trust and shapes and symbols used in banking and security brands. I began sketching and thinking of how to visualize digging deeper into the news or into information, and I thought of a shovel and the act of excavation. I had this idea of a shovel in the ground with waves coming out of the contact point, with the tagline “Dig Into Reality”. I began brainstorming names and landed on “Excava”, the root word of excavation. After more sketching and iterations, I noticed the shovel had a shield shape, which can convey trust. I also chose the typefamily I wanted to use for the project, being Eurostile. It’s a typeface that does a good job of looking tech-adjacent and being scalable, but isn’t too decorative or distracting. I also decided on the color palette being a mix of strong blues and greyscale to reinforce the sense of trust and solidity.
In the final brand design, I was able to create a strong logo and wordmark which would help form the beginnings of an effective brand.
Branding
Logo & Logotype
Color Palette
Typography
Background Assets & Visual Style
User Journey Map
The process of creating a user interface for the app and browser extension fell into place once I solidified the look and feel of the brand identity. For the mobile app, I needed to create menu iconography in-line with the brand that easily shows the user where it will take them. Each icon seen below is an original creation of mine, that follows contrast guidelines for accessibility and adds to the usability of the app. The blue buttons below would highlight which page you’re on, and the rest would remain white for easy viewing. The text in the overlay bar has a bit of transparency as to not distract the eyes, but it remains visible in case you’re an unfamiliar user or would appreciate having it as a reference.
The color palette of the overlay is minimalist and white across both platforms as it blends well into Facebook’s feed on both mobile and web. The colors for the bars are easily identifiable as controversy has a passionate purple that grows into a fiery red the more controversial a topic is. The political bias bar is straightforward as democratic is a deep blue on the left side and republican is a stark red on the right.
User Interface & User Experience
Wireframes
App Assets
App Screens
Practicality
Browser Extension Mockup
Browser Extension Settings Page
Mobile App Prototype
A full mobile app prototype is available here
The BFA graduates of 2023 had our gallery show at Redline Contemporary Art Center. My installation consisted of a 60 second video on a loop and my process books. I also set up some signs with my QR codes for my design site and some stickers with a QR code for my illustrations found @jasek1art on Instagram.
Gallery Installation
Gallery Video
In the pages of this process book, I detail the research that went into the project, along with the specific exploration of branding and user interface design, and the practicality of how to bring this product to life.