Scam Guardian

Product Experience

Problem Background  

In 2021 alone, losses to scams in the US totaled $5.8 billion, a 70% increase from losses reported in 2020 (CNBC). Our research found over 35% of people surveyed had personally experienced scams three or more times in the past five years, with online shopping scams being the number one method that claimed 20-29 year olds as victims.

While anti-fraud software exists, these solutions such as Fakespot and Trend Micro Protection rely on known scam patterns, leaving users vulnerable to new and sophisticated fraud. Ultimately the responsibility falls on individuals to avoid scams.

Scam Guardian takes a different approach by training online shoppers to spot red flags themselves. By building risk awareness and vigilance, shoppers can take precautions before becoming victims. Our interactive education prepares consumers to outsmart scammers, not just detect them. With proactive insights and notifications to users,, Scam Guardian aims to curb the rise of online shopping scams.

Research Insights and Pain Points

Our initial hypotheses were:

1. Elderly people are the most affected population while young adults are not greatly affected by scams due to their technical knowledge
2. The largest scams are credit card fraud and emails
3. People believe they are smart enough to never fall victim to a scam

Key Insights

1. Scams affect everyone. While elderly lose more money in a scam, young adults are more frequently scammed. 
2. Scammers are successful because they target people who are psychologically vulnerable. The victim may be desperate or believe that the product/opportunity is worth the risk.
3. The largest scams are online shopping and employment scams.

Pain Points

Users were initially contacted via a survey to gain insight on pain points experienced by our target audience. Analysis of data from the survey provided the following insights:

1. Younger audiences are very vulnerable to online shopping scams

• We had started out with the assumption that we would be building for older audiences since research has shown that older people lose more money to online scams. However, this assumption was refuted by the data gathered from initial user research as the majority of survey respondents were young internet users between the ages of 18 - 40. This caused us to shift our focus to building for a younger target audience.

2. People are not aware because they believe they are too smart

• A police officer we spoke to said that education and awareness is the most effective way to prevent scams. Scammers are always changing their tactics and use sophisticated methods. 

3. Most users were not willing to read long articles with scam prevention and online safety tips

• A user interview with a bank employee highlighted the fact that bank customers do not read scam prevention tips posted on bank websites/blogs. Most users do not believe they will become a victim so they do not put in the effort to educate themselves.

This research led us to the following problem statement: How might we help online shoppers become smarter about online shopping scams?

Solution Explanation

ScamGuardian is a browser extension that aims to address the problems faced by internet users by monitoring their web activity and proactively protecting them from scams. The extension maintains a database of suspicious sites and warns users if they attempt to access a known scam site. Additionally, it provides educational resources to help users become more aware of common scams and protect themselves while shopping online. 

Why a browser extension?

1. The developers have the skills necessary to build websites and extensions but not mobile apps
2. Online shoppers use websites predominantly which an extension can be used with
3. An extension allows our solution to provide real-time and proactive education based on the content on the website

The current features include:

1. Real time education: The extension includes a sidebar with digestible educational content (risks and tips related to the specific website and scenario that users are facing). This helps users be equipped with the necessary knowledge to identify and avoid potential scams. 
2. Suspicious Website Notification: When you encounter a suspicious website, the extension will identify it and trigger a pop-up. The pop-up will promptly notify you of the potential threat. You will be given the choice to either leave the website immediately or to trust the website. Choosing to leave the site will cause your browser to redirect you back to the previous page. 
3. URL Scanning: By right-clicking on a webpage, users can choose the "Scan All URLs on This Page" option. The extension then scans all the URLs on the page and checks if any of them are blacklisted. This feature helps users identify potentially harmful secondary links on sites.
4. Website Recognition: The extension only appears on sites that are recognized as eCommerce websites. This helps to prevent it from getting in the way of the users when it is not beneficial.

MVP Goals

For the Scam Guardian MVP, we had 3 main goals we planned to achieve:

1. To provide real-time scam education to users by providing them with educational content in the form of short and easy to digest information on risks of  using particular websites and tips to stay safe on these sites.
2. Using URL scanning technology to detect unsafe links within otherwise safe websites and notifying users of the unsafe links that were found.
3. Notifying users when they accessed a site that has already been reported as a scam and prompting them to leave the site to protect their information.

Lo-Fi & Hi-Fi Mockups

Website

Tech stack

• Frontend: HTML, CSS, JavaScript, React, Next.js, and Tailwind CSS are used for the landing page.
• APIs: Next.js, JavaScript, and Postgres are used for the APIs.
• Extension: JavaScript, HTML, CSS, and Webpack are used for the extension.
• Code Management: GitHub is used to store code, collaborate, and GitHub Actions are used to release the extension

High level journey of a request

SG Button and Popup: The SG button is designed to provide a seamless user experience. If the button happens to hide any elements on a webpage, it can be easily moved up or down by the user. This allows users to access any obscured content without any inconvenience. Additionally, to give users the flexibility to hide the button temporarily, they can double press the SG button. This action will hide the button until the next 12 hours. After the specified time, the button will automatically reappear, ensuring that users do not forget about its availability.

Scan Current Url: Upon loading, the page triggers a request to the /check-domains API endpoint with the current URL. This Next.js serverless API then calls two separate APIs: /check-domainsBlacklist and /check-domainsWhitelist. These APIs perform the necessary checks and comparisons, returning an array with the scan results. If the website is blacklisted, a modal is displayed.

Technical challenges

During the development process, we encountered several challenges. One of the most difficult aspects was dividing the workload efficiently among the development team. However, we were able to overcome this challenge through effective collaboration and communication.

Another significant challenge we faced was managing the growth of the extension's ‘content.js’ file. As the codebase expanded, it became increasingly difficult to maintain and optimise. To address this, we utilised the power of Webpack. By leveraging Webpack, we were able to split the code into smaller, manageable files and bundle them together, resulting in improved performance and maintainability.

Key Takeaways

Throughout the development process, we gained valuable insights into various aspects of software development:

1. Choosing the Right Technology Stack: Our experience with using MongoDB initially and then switching to Postgres taught us the importance of selecting the right database technology for specific use cases. By choosing Postgres, we achieved significant improvements in speed and performance.
2. Effective Collaboration: The challenges we faced in dividing work among team members highlighted the importance of effective collaboration and communication. Clear task allocation and regular updates helped us overcome these challenges and maintain a smooth development process.
3. Utilising Webpack: The use of Webpack to split and bundle code proved to be crucial in managing the growth of the extension's codebase. This experience highlighted the importance of utilising appropriate tools and techniques to maintain code organisation and improve performance.
4. Leveraging GitHub Releases and Actions: Our adoption of GitHub Releases and GitHub Actions provided us with valuable automation capabilities. We learned how to streamline the release process and automate various tasks, saving time and improving efficiency.

These key takeaways have not only helped us overcome technical challenges but also enhanced our understanding of software development best practices and improved our overall efficiency as a development team.

‍

‍