Scam Guardian
Scam Guardian is a browser extension that aims to help users protect themselves from online scams by monitoring eCommerce websites and educating users on how to identify and avoid online shopping scams.
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:
- Elderly people are the most affected population while young adults are not greatly affected by scams due to their technical knowledge
- The largest scams are credit card fraud and emails
- People believe they are smart enough to never fall victim to a scam
Key Insights
- Scams affect everyone. While elderly lose more money in a scam, young adults are more frequently scammed.
- 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.
- 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?
- The developers have the skills necessary to build websites and extensions but not mobile apps
- Online shoppers use websites predominantly which an extension can be used with
- An extension allows our solution to provide real-time and proactive education based on the content on the website
The current features include:
- 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.
- 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.
- 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.
- 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:
- 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.
- Using URL scanning technology to detect unsafe links within otherwise safe websites and notifying users of the unsafe links that were found.
- 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:
- 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.
- 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.
- 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.
- 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.
Learnings
Product Manager Learnings:
Nmesoma Akwajah
COLAB has given me the opportunity to work on a real team of people with the same goal of building a real product. The past 8 weeks have been instrumental in building my confidence as a Product Manager and I have learnt that:
- Part of being a PM involves learning everyday so being teachable and open minded is key to being a great PM.
- Being a product manager is more than ensuring a successful product launch. Part of the responsibilities involves carrying all team members along during the product development process.
- Having a product that does one thing well is a lot better than spending more time than is necessary trying to launch a product that does everything. It is important to not get caught up in the loop of trying to add as many features as possible before initial product release.
Designer Learnings:
Jamison Cote
- PMs, designers, and developers all communicate differently so I learned to adjust my communication to match theirs.
- Chrome extensions are capable of many features and enhance user’s experience on the Chrome browser. They are also accessible on mobile too.
Designer Learnings:
Jo Sturdivant
- Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
- Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
- Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.
Developer Learnings:
Shreyaan Seth
I experienced significant growth in my software development skills and gained valuable insights into best practices. Here are some of the key learnings I acquired:
- I learned software development best practices, such as writing clean, modular, and maintainable code.
- I worked in sprints using Agile methodologies, which taught me the importance of iterative development, regular feedback, and continuous improvement.
- I learned the importance of effective teamwork, such as communicating effectively, delegating tasks, and collaborating on code reviews and problem-solving sessions.
- I learned the importance of selecting the right database technology and using appropriate tools and techniques to maintain code organisation and improve performance.
Developer Learnings:
Vanady Beard
&
As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.
Developer Learnings:
Stephen Asiedu
&
As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.
Developer Learnings:
Krunal Gupta
&
At the conclusion of 8 weeks, I have encountered numerous significant changes in my life that have contributed to gaining valuable experiences. Some of them are as follows:
- During the development of the product, I improved my code quality, structured planning and efficient code.
- I have experienced Agile methodology, including concepts like product backlog, sprint planning, and team meetings, in practical ways that I had previously only read about in books.
- In just 8 weeks, I have learned, gained experience, and successfully implemented new technologies that I had never used before. This rapid acquisition of knowledge stands out as a significant part of my learning journey.
- I have gained experience in working within a team and establishing effective communication among the Product Manager, Designer, and Developer.
- Learning new technologies, methodologies, different ways of thinking, and mastering the art of product development have been the most rewarding aspects of these 8 weeks.
Developer Learnings:
Maurquise Williams
&
- Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
- Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
- Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.
Developer Learnings:
Jeremiah Williams
&
All in all this experience was very awesome I learned that in coding with others being transparent is key
Developers Learnings:
Justin Farley
&
I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.
Full Team Learning
As a remote team, coordinating meeting and working times was initially a challenge but we were soon able to get into a flow that worked for everyone. All team members have stated that the biggest learning from this bootcamp is that clear communication is very important throughout the product development lifecycle; learning to adjust communication styles in order to communicate in a way that each member would understand. The COLAB experience of working with other cross-functional team members has allowed all of us to learn a bit more about what other product team members do and has helped us gain a better understanding of what it takes to launch a product.