Smart Read

A fake news detector app

Outcome

2nd place @ IBM CSC318 Student Design Competition

Role

UX Designer

Type

School project

Team

UX designers, Researchers, Design advisor

Misinformation in social media

Fact-checking information we see on social media is often inconvenient, leading to my peers and I consuming information on social media with no consideration for its validity. How do we know if the information we consume is reputable or misinformed?


Within a group of 5 designers, I conducted in-person interviews, contributed to both lo-fi and hi-fi prototypes, tested and iterated on our final app design, and presented our designs within a design competition.

The process

Online misinformation was affecting my peers

I conducted an online survey with over 200+ participants and we found that a majority of students or early career adults in their early to mid 20s are affected by this problem.


57%

Participants that were fooled by fake news

89%

Participants use social media as their primary source


At least 57% of participants have reported that they believed something was true, but later found out was false (fake news). To note, most of these people also use social media as their primary source for information.

Research papers confirmed the problem

Given our limited research timeline, we looked to published research papers and confirmed our results.

From a published research paper with over 400+ participants, we confirmed that misinformation is an ongoing problem that starts at identification - 62% of people are unable to identify if information is not reputable.

Learning how to fact-check from experts

I interviewed 5 audience members to understand their perspective, but given the previous research on how this group misidentifies fake news, we also looked to experts. We consulted my university research professors on how to critically evaluate information.

Insights

  • There were two general areas to consider: fact-checking methods that included the source of the information or fact-checking methods that looked at the content.

Integrating our app into their flow

We were worried about adoption. From my user interviews, we knew that our audience already has an established flow. Our solution would need to fit seamlessly into that.

Insights

  • Since users already have an established flow, it would take extra effort to add a behavior change to this flow.

Design principles

From our findings, we decided on the following design principles.

Key components of the final design

The final product and design process was presented to a panel of IBM design experts and fellow contestants. Our product achieved 2nd place in the design competition.

Testing the notification

From a number of solution options, we tested the notification approach as it seemed most feasible for development.

Testing Insights

  • Using a notification to deliver our credibility score was received and adopted easily
  • The information in the extended notification was hard to understand. Testers were getting confused by the information hierarchy


Notification final iteration

Key Design Decisions

  • The main, average score is the largest number and is moved to the left. This clarified the visual hierarchy of the multiple scores.
  • Added a title for “Related Articles” section

Testing the credibility score

Testing Insights

  • A lot of information at once, users feel reluctant to look through it all - it feels like "work"
  • Users are confused as to how these scores are calculated, “why is something 74% vs 70%?”


Credibility score final iteration

Key Design Decisions

  • Implemented gradual disclosure in the form of drop down menus to remove more detailed, less relevant information from the screen
  • Included a score breakdown system to show exactly how scores are calculated


Testing in-app navigation

Our app had two main features: searching for articles, or, browsing your history of articles. Through user testing we found that students were repeatedly having problems finding where to complete these tasks.

Testing Insights

  • It's unclear what the search bar is searching
  • The history list of articles consistently gets mistaken as search results


App navigation final iteration

Key Design Decisions

  • Separated the 2 functionalities into their own pages, this is consistent with other app navigation
  • Replaced the “Smart Read” title to reflect the current page title and help with navigation
  • Added page navigation at the bottom of the screen to easily access these different pages


New Article History page

Key Design Decisions

  • Page title now reflects the current page
  • Search bar hint text indicates what this search bar is searching for
  • Currently selected page is indicated by a lighter color on the navigation bar


New Search Database page

Key Design Decisions

  • Search bar hint text indicates what this search bar is searching for
  • Initial, empty search page illustration gives a suggestion on how to use the search bar and or how to use this Search Database page

Impact

🏆2nd Place

This project was presented in front of a panel of IBM design experts, and placed second!

Challenge: Avoiding information overload

How to present an abundance of information without overwhelming our users? Our credibility report had a lot of information that needed to be presented. Leveraging progressive disclosure elements and prioritizing information according to our users' needs were all very important aspects of this challenge.



Looking forward: Other audiences & AI?

Going forward, I'd love to consider other target audiences of interest. In this project, we targeted young adults in their early 20s. However, I wonder how this may be changed for older adults? There is a lot of potential to expand this project, especially when considering how we can best make an impact on fake news as well.


Edit (Dec 2022):

Now with AI becoming much more accessible as a content generator, how would a misinformation app scale to address AI applications?

← Back to Case Studies