PANEL
05
Panel is a globally accessible browser extension that sets out to combat misinformation in a fake news era through a robust and accessible article breakdown that leverages both user submitted and expert submitted article reviews.
Objective
Combatting misinfirmation in a fake news era
Scope
4 weeks
Project Type
Individual
My Roles
Research, Analysis, Wireframing, Prototyping, USER Testing, Branding, Visual Design
Tools Used
After Effects, Figma, Google Form, Principle, RotatO
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat lacinia sem, quis placerat arcu interdum eget.
Panel leverages crowdsourcing to combat the impact of missiniformation on gen z via the spread of ‘fake news’ through online platforms such as social media.
Creating a functional identity
A key factor in the success of the solution was creating a visual language that would quickly and effectively convey to the readers the overall rating of an article but also the public vs expert ratings.
Leveraing the logo I was able to use the individual columns inside of it to provide a visual representation of the public and expert ratings
Leveraing the logo I was able to use the individual columns inside of it to provide a visual representation of the public and expert ratings
Using this style and colour theory I maintained consistency throughout all stages of the application as to reinforce associations between ratings and appropriately convey the overarching feelings towards an article that might become convoluted if just rating by number.
In-browser article report generation
The Panel solution is dependent on the availability of data to create reliable and trusted article reports. Considering this Panel features an easily accessible CTA for generating new article reports inline with the content of the article on their news page.
This flow is broken down into short and easy steps as to minimise load on the user's working memory so they can focus on providing the most accurate representation of the article at each stage.
This flow is broken down into short and easy steps as to minimise load on the user's working memory so they can focus on providing the most accurate representation of the article at each stage.
Colour theory was implemented in the ratings sliders as to convey to the user the spectrum of accuracy in which their rating lies outside of just using a number which can be left to interpretation.
After all, an article rating is only as good as the rating being representative of what the user's true perception of the article is.
After all, an article rating is only as good as the rating being representative of what the user's true perception of the article is.
Easily access, review and share article reports
Due to Panel being a browser extension it is a relatively global solution for combatting the spread of fake news, this being as it can be accessed across web pages and web based messaging systems found on social networks.
Article reports provide the user with a concise and structured breakdown of the article via a summary, the article ratings, it's breakdown across the different categories of assessment, author overview (complete with public and expert ratings), supporting and conflict material for the claims made in the article.
Article reports provide the user with a concise and structured breakdown of the article via a summary, the article ratings, it's breakdown across the different categories of assessment, author overview (complete with public and expert ratings), supporting and conflict material for the claims made in the article.
Article reports pop up in the Panel extension for current users and can be easily shared via a hyperlink or email. Should a recipient not have Panel installed, the article report will open in a new browser tab as to promote accessilbity in combatting fake news.
Creating a hub for validated news and accountability
The Digest showcases trending articles across a plethora of categories as can be filtered from best to worst rated but more importantly it promotes accountability for publications and authors.
This is achieved through the rankings tab, this houses rankings of both publications and authors according to the ratings associated with the articles they have published.
This is achieved through the rankings tab, this houses rankings of both publications and authors according to the ratings associated with the articles they have published.
In tracking and displaying this rating it informs users as to which publications and authors to be careful of and also deters the publications and authors from publishing fake news.
How it started
We have never had access to as much information as right now, but in a world of misinformation and lies that information is only as important as its accuracy.
Panel is a digital solution that leverages crowdsourced ratings and feedback in combination with expert opinions in a RottenTomatoes esque system as to best determine the accuracy of information across mediums such as news articles, videos and wikipedia entries.
Current solutions such as Snopes fall short in that its success relies upon the general public’s trust in their editors, this is problematic as there is often a disconnect between the media and public.
Current solutions such as Snopes fall short in that its success relies upon the general public’s trust in their editors, this is problematic as there is often a disconnect between the media and public.
By rating information based off of both you can provide contrast between the two, highlight when there is consensus and use that data in order to gain insights into the factors that cause the disconnect.
Within the realm of Human Centred Design it is important to consider the ramifactions of a problem, to do so you must first scope and idenity the human need the problem relates to.
Within the context of fake news the human need according to Maslow’s Heirarchy of human needs is Safety. Safety is a core pillar from which the proceeding 3 human needs are establiished, if a person’s safety is comprimised in any regard it jepradises the integrity of the others.
Within the context of fake news the human need according to Maslow’s Heirarchy of human needs is Safety. Safety is a core pillar from which the proceeding 3 human needs are establiished, if a person’s safety is comprimised in any regard it jepradises the integrity of the others.
The goals
Understand how people consume the news.
Understaning the impacts of fake news on society.
DEvise a solution to combat the spread of fake news.
Develop a sytem of accountability for those publishing fake news.
The process
01
Discover
02
Define
03
DEvelop
04
Deliver
Discover
At this stage, primary research was conducted in order to gain an understanding into the accessibility of fake news, its consumption, and impact through a preliminary survey, user interviews and competitive analysis.
preliminary survey
The preliminary survey sought out to establish fundamental understanding into the problem, target users and their news consumption habits.
Furthermore it aimed to develop knowledge of the factors that users use to identify fake news so to provide a foundation by which potential rating categorisations could be determined.
Furthermore it aimed to develop knowledge of the factors that users use to identify fake news so to provide a foundation by which potential rating categorisations could be determined.
Moreover it was important to understand how fake news impacts them and its prevalence/impact on society.
survey insights
Taking the date collected from the user survey I then processed it as to provide insights into the target user, how they browse and consume news and their outlook on fake news.
Notable discoveries were that 96% of users encounter fake news at least onece per week, that publication name and reputation was the most prominent method of validation fake news (50%) and that messaging platofrms account for 73% of distribution channels for online news.
expert Interview
To understand the multifaceted nature of Fake News, I conducted an extensive interview with a journailst into the criteria used to identify fake news, the possible causes for misidentified fake news, motivations for publications to publish fake news, the impact of reputation on article perception and the root causes of fake news.
Takeawys from this process were that publications could have a propensity to published biased news in order to pander to their audience, that high quality journalism is inherently inaccessible due to it being hidden behind paywalls and that public perception can falsely label valid news as fake should misinformation be accepted as fact, thus showing the importance of having a breakdown of expert and public ratings to highlight such discrepancies.
competitive analysis
Competitive analysis was conducted to assess the strengths and weakenesses of current market solutions.
When looking at the results of the competitive analysis matrix, it becomes clear that none of the current market solutions provide an open, easily accesbile platform that has global fake news prevention with a digestable scoring system that informs users as to why an article is fake news.
When looking at the results of the competitive analysis matrix, it becomes clear that none of the current market solutions provide an open, easily accesbile platform that has global fake news prevention with a digestable scoring system that informs users as to why an article is fake news.
Due to this they aim to combat fake news at specific instances of it rather then across the web, moreover they don't help inform users as to how to avoid fake news.
These platforms lack
clarity
consistency
accessibility
globality
transparency
Flexibility
Digestibility
referenceability
How might we create an interactive system to combat the sharing of misinformation on Social Media by Gen Z and uphold safety in a “Fake News” era?
define
implementing the data and insights collected through the methodologies implemented in the discover phase, the define phase then commenced, this was focused on framing these insights in relatable fashions that represented the user, their needs, pain points and motivations.
USER PERSONAS
After the discover phase I identified the target audience as 18-24 year olds, this being as it was overwhelmingly the largest demographic amongst the responses but also because it correlates with data that the most popular news source is social media.
From this I then started to flesh out the target audience more, from the survey I can see that most prominant educational levels were spread across high school, bacheloors and masters degrees and with 70% of the respondants being male.
Furthermore and poossibly as a result of social media being the most popular news source, messaging platforms were also the most prominent method of sharing online news.
From this I then started to flesh out the target audience more, from the survey I can see that most prominant educational levels were spread across high school, bacheloors and masters degrees and with 70% of the respondants being male.
Furthermore and poossibly as a result of social media being the most popular news source, messaging platforms were also the most prominent method of sharing online news.
Considering all of this information I then created my user personas. When creating them I aimed to encompass and reach every corner of the target audience.
For example providing a variety of ages across the full range, varying educational levels, browsing habits and dependency on news in their everyday lives.
Doing this will allow me to explore a wider variety of user needs and to create a solution that satisfies the design question.
For example providing a variety of ages across the full range, varying educational levels, browsing habits and dependency on news in their everyday lives.
Doing this will allow me to explore a wider variety of user needs and to create a solution that satisfies the design question.
using my new understanding of user pain points from the discover and define phase, Key functionalities were created to address the needs of users.
KEY FUNCTIONALITIES
To be able to verify the validity and accuracy of a news article in a matter of seconds and take a deeper dive into its ratings if necessary.
Allow users to publish a rating of a piece of information with ease of use and clarity of mind as to how the rating is implemented.
To have access to the most reputable articles of news by topic for each day.
To be provided an understanding as to which publications are reputable.
To be provided an understanding as to which authors are reputable.
To be provided wiith supporting resources that bolster reviews and combat the “rebound effect”.
Solution Exploration
After considering all of the intial concept ideations in combination with the proposed functionaliity and in accordance with the design metrics the solution that accomodated all facets was the Crowdsourced web extension.
This is due to several key factors. The first being that it allows for globalized fact checking, this is vital functionality as it encourages accessiblity, new report generation and does not distrupt the user’s normal news consumption habits. This means that they can continue to browse their news as they see fit, from the pubclications they enjoy whilst recieving crowdsourced ratings embedded into the webpage.
Moreover, by globalising the fact checking you’re ensuring that the date collected about a report doesnt just pertain to the one instance where it is currently being viewed. Instead any instance of a link will be detected as the same article with the rich database of ratings.
This is due to several key factors. The first being that it allows for globalized fact checking, this is vital functionality as it encourages accessiblity, new report generation and does not distrupt the user’s normal news consumption habits. This means that they can continue to browse their news as they see fit, from the pubclications they enjoy whilst recieving crowdsourced ratings embedded into the webpage.
Moreover, by globalising the fact checking you’re ensuring that the date collected about a report doesnt just pertain to the one instance where it is currently being viewed. Instead any instance of a link will be detected as the same article with the rich database of ratings.
This way users from all platforms, with all sorts of backgrounds can unite their ratings to provide collective and holistic knowledge to promote crowdsourced fact checking
It is not a perfect solution however, this being as it is hard too discover such a solution in comparison to a website. To best address this web links will be implemented that direct to the article reports that can be easily shared with users as to increase the presence of the solution outside of those with the extension installed.
Furthermore by embedding the generate a report button next to the article itself you are encouraging further ratings to be generate which only further increases the accuracy of the overall rating, unlike the website or application which requires users to visit them as to provide ratings..
It is not a perfect solution however, this being as it is hard too discover such a solution in comparison to a website. To best address this web links will be implemented that direct to the article reports that can be easily shared with users as to increase the presence of the solution outside of those with the extension installed.
Furthermore by embedding the generate a report button next to the article itself you are encouraging further ratings to be generate which only further increases the accuracy of the overall rating, unlike the website or application which requires users to visit them as to provide ratings..
Combining my research insights I am able to define user needs and design metrics (observable metrics that can be monitored to asses the success of the soluton.
DESIGN METRICS
Increasingly convergent accuracy of ratings across rating groups (pubic and experts)
Low variability in rating breakdown (to display increasing understtanding of how to screen fake news)
IncreAsing parity between public and expert ratings
Clear User Understanding as to which authors are reputable
Insight into how to assess the validity of an article
Supporting resources that bolster reviews and COMbAT the “rebound effect”
develop
Having established an understanding of the users and the problem space, solution ideation and development could begin, this exploring how to best identify and solve the takeaways of the previous stages.
Information Architecture
Outlining the organisational and navigational structure of the solution, an Information Architecture was created.
This divided the solution into three sections, the generate report functionality, the expandable article report embedded next to news items on a web page and the digest which is housed in the extension itself.
The generate report section allows users to generate new article reports for news they encounter on the internet.
This divided the solution into three sections, the generate report functionality, the expandable article report embedded next to news items on a web page and the digest which is housed in the extension itself.
The generate report section allows users to generate new article reports for news they encounter on the internet.
Existing article reports take the date provided by individual article reports submitted by users and provide an breakdown of the article's validity according to the sections defined int he informatoin architecture.
Finally the digest is a hub where trending news across categories can be accessed as well as rankings of news outlets and authors.
Finally the digest is a hub where trending news across categories can be accessed as well as rankings of news outlets and authors.
Wireframing
After defining the information architecture low fidelity wireframes were created as to start visualising the solution.
The first flow explored the process of validating a news article shared over a messaging platform and generating a shareable article report to inform the sender of that the content they had shared was in fact fake news.
The second flow outlined the digest fucntionality that can be found collapsed within the web extension, this provides an overview of trending articles and highlights the best and worst publications and authors with regards to the validity of their work.
The last wireframe flow explored the report generation process that is used as funnel for the data that supports solution's article reports.
This being a popup window next to the article in question that guides the user through the process of submitting an article review according to different stage and critieria identified in the extensive user interview.
Low Fidelity prototyping
Task 1: Article Validation via report link
Task 2: Viewing the most accurate publications & thier worst rated Editors
Task 3: Submitting a new article report
After completing the wire framing process, the wireframes were then converted into interactive prototypes in Figma in prepare for user testing.
User Testing
Using these interactive prototypes, user testing was conducted across the three task flows outlined in wireframing.
The goal of which was to monitor user behaviour both said and seen when interacting with the low fidelity prototypes across each task to provide identify room for improvement and usability issues for further refinement.
User Testing Feedback
Using the feedback collected from the user testing, several design changes were made across each of the 3 sections of the application.
Firstly the progress bar for the article generation flow was revisited to add an inter-step signifier in grey to show the user's progress within that stage (when the stage is the fill turns black, compared to the raised grey when in progress)
Secondly the visual hierarchy of the rating sliders was improved so that there is a greater distinction between the rating bar and the scale.
Firstly the progress bar for the article generation flow was revisited to add an inter-step signifier in grey to show the user's progress within that stage (when the stage is the fill turns black, compared to the raised grey when in progress)
Secondly the visual hierarchy of the rating sliders was improved so that there is a greater distinction between the rating bar and the scale.
Furthermore context clues were added to the rating bar titles as to help inform and guide the user should they have trouble understanding the categorisations.
When looking at article ratings, the rating breakdown solution was designed so that users can extract a more accurate rating through specific numbers.
Finally the visual hierarchy of the digest was revisited as to assist with way finding when tab switching or sorting results.
When looking at article ratings, the rating breakdown solution was designed so that users can extract a more accurate rating through specific numbers.
Finally the visual hierarchy of the digest was revisited as to assist with way finding when tab switching or sorting results.
deliver
The final stage was to deliver the solution, this was achieved through creating a brand and visual identity that is echoed across the high fidelity visualations as well as high fidelity prototypes to showcase how the solution addresses the user needs.
HIGH FIdelity visualisations
Implementing the brand identity and rating system visual design, the low fidelity wireframes were converted into high fidelity visualisations that draw from the existing visual standards of many market leading web browsers to present a consistent, neutral, clear and thus unintrusive canvasfrom which the key information can be displayed.
Furthermore, contrast was used to promote hierarchy and structure within each aspect of the solution as well as effectively designed button states that are key in communicating progress throughout the review generation flow.
Takeaways
I believe that the final solution does a great job at combinging the strengths of all of my proposed solutions whilst trying to minimise its weakenesses as to best address the user needs and soolve the design question.
The particular strengths come from the addressing the issue of distrust between the general public and the media as highlighted in my secondary research throuogh the public and expert ratings that when packaged within the visual design of the icon and ratinig bars creates an intuitive and accessible rating system.
Furthermore the insight that I ganied from my extensive interview with a journalist was key in designing the brerakdown portion of the ratings. This aims to address the design question of how might we stop the spread of fake news. This is very important as I dont think any one solution will ever stop the spread of fake news as at the end of the day it is up to the reader’s comprehention of the article.
The particular strengths come from the addressing the issue of distrust between the general public and the media as highlighted in my secondary research throuogh the public and expert ratings that when packaged within the visual design of the icon and ratinig bars creates an intuitive and accessible rating system.
Furthermore the insight that I ganied from my extensive interview with a journalist was key in designing the brerakdown portion of the ratings. This aims to address the design question of how might we stop the spread of fake news. This is very important as I dont think any one solution will ever stop the spread of fake news as at the end of the day it is up to the reader’s comprehention of the article.
By informinig them on what to look for to spot fake news they will be equiped with the knowledge of how to identify it and thus limit the spread (in addition to in increasing the accurary of the ratings they submit).
The solution is not without it shortcomoings however, the most prominant of which is the techincal limitations of a bowser extension, this being as it cannot target native applications such as the twitter or facebook app. This is a big limitation considering the 18-24 year old demographic and their use habits.
Nonetheless it could be possible that if a solution collected a compelling number of ratings over a duration of time and showed great success in combatting the spead of fake news that platforms such as twitter and facebook could implement their functionality natively.
The solution is not without it shortcomoings however, the most prominant of which is the techincal limitations of a bowser extension, this being as it cannot target native applications such as the twitter or facebook app. This is a big limitation considering the 18-24 year old demographic and their use habits.
Nonetheless it could be possible that if a solution collected a compelling number of ratings over a duration of time and showed great success in combatting the spead of fake news that platforms such as twitter and facebook could implement their functionality natively.