COLAB27 - Web App


Bargain is a web application that helps you shop smarter by offering real-time price comparisons and a budget management tool on a centralise platform.

Problem Background  

Since the pandemic, the emergence of online shopping is at an all time high. Before the pandemic, the predicted e-commerce sales in America would go up to $674.88 billion. However, the actual number because of the pandemic turned out to be $799.18. United States alone had almost a staggering 16% out 20% among the top 10 countries with the highest growth in online shopping since the pandemic. 

There are many reasons why online shopping became more popular since the pandemic — social media, waiting in long lines, accessibility, and more. However, due to the convenience of online shopping, there has been an influx of impulse buying behaviour, where individuals are purchasing without considering the ramifications on their savings. This result of excessive buying behaviour has resulted in individuals unable to manage their shopping habits. In addition, with the emergence and enhancements of smart phones every year, with just one click, consumers are able to make purchases within seconds without conducting proper research, compare prices from different retailers, and have an efficient method of managing their budget. A survey conducted by AICPA & CIMA, half of Americans (52 percent) say buying things when they want, without thinking too much about how much they cost, makes them feel good. In addition, nearly 41% of the Gen Z and millennial populations make an impulse purchase online every two to three weeks, rising to 48% among daily TikTok users.

Furthermore, each e-commerce platform has their own unique infrastructure. And due to this infrastructure, prices on items are constantly changing, due to stock promotions, deals, and other various factors. This makes it difficult to manually keep track of and compare prices for the same item across different stores in-real time. We have identified that there are multiple platforms available that give the opportunity to compare prices across different retailers. However, one major component of each ecommerce platform lacks is the ability to effectively manage one’s budget to control compulsive buying disorder (CBD). Approximately, 2 in 5 Americans say they often don’t realise the total amount they have spent on their credit or debit card until they see their monthly statement. 

Problem Statement

Due to the convenience of online shopping, there has been an influx of impulse buying behaviour, where individuals are purchasing without considering the ramifications on their savings. 

Research Insights

1st round of surveys: Our first round of surveys consisted of 75 survey responses and revealed 4 major points 

  1. 79.7% of respondents revealed that they wished to have a price comparison tool when shopping online
  2. 54.1% of respondents revealed that they would like to have an alert notification for when items go on sale to be embedded into an applicatio
  3. 32.4% have an online wishlist but tracking process is manual (use amazon wishlist, save to cart/wishlist app, google sheets to track)
  4. 80.3% of respondents do not have a method to track for when items go on sale

Forms response chart. Question title: What features would you find important in a price tracking tool or platform?. Number of responses: 74 responses.
Forms response chart. Question title: What is your system on tracking when to purchase items on your wish list? . Number of responses: 74 responses.

After conducting more research and discovered that there are 4 major platforms available that our respondents were unaware of that compare prices across different retailers such as Klarna, Honey, Karma, Pricegrabber, and Google, we conducted a second round of surveys to validate our research findings about the influx of impulse buying behaviour. We received about 50 responses and conducted 4 user interviews in our second round of validating our research. From these responses, we identified 5 major pain points:

  1. 59.6% of respondents mentioned they have temptation to overspend when they shop online 
  2. 53.8% of respondents mentioned they are finding it challenging to compare prices for items across different retailers
  3. 26.9% of respondents mentioned they find it challenging to shop online with the lack of tools to help with budgeting
  4. Users complained about online shopping being time-consuming and inefficient methods currently used for comparing and budgeting for shopping online
  5. 38.5% of respondents mentioned they find it difficult to track for when items go on sale

Forms response chart. Question title: What challenges do you face when trying to stick to a budget while shopping online? (Select all that apply). Number of responses: 52 responses.


Our research insights validated our target audience to those who were budget conscious and consistent online shoppers (students, early professionals, grad students). 

User Stories

  • As a user, I want to be able to compare prices from various retailers, so that I can make the best financial decision. 
  • As a user, I want to have an alert notification when a price changes, so that I am aware when an item goes on sale and not make an impulse purchase. 
  • As a user, I want to visualise prices all in one spot without tracking them on a spreadsheet, so that I can save time when shopping
  • As a user, I want to be able to visualise how much money I have left to spend, so that I can be aware of making my next purchase. 

Solution Explanation

Based on our survey responses, interviews, target audience, research findings, the features we identified users wanted in an application:

  1. Price Comparison Tool
  2. Real-Time Price Tracking System
  3. Historical Trend of Prices
  4. Item Reviews and Ratings
  5. Deal Alerts
  6. Financial Wellness Tool
  7. Spending Analytics 
  8. Item Recommendations

After careful consideration and analysing our research, we chose to prioritise features that would solve the core problems - compulsive buying disorder (CBD) and difficulty to manually keep track prices for the same item across different stores in-real time. From this, we decided on focusing on:

  1. Incorporating a price comparison tool
  2. Integrating a financial wellness tool

Our proposed solution is creating a web application that centralises price structure from different major retailer stores and incorporating a sophisticated budget feature. This solution offers users a seamless way to search for products, aggregating information on a single page for easy comparison across different retailers.

Furthermore, the integrated budget feature will offer the opportunity for a real-time tracking of expenditures, enhancing users' experience to make purchases that align with their financial goals. This solution not only streamlines the shopping experience, but allows for users to make smarter, more informed financial decisions, making smart shopping simpler than ever.

Low-Fidelity Mockup

High-Fidelity Mockup

Iterative Design Learnings And Usability Testing

Positive Feedback:

  • “Straightforward, he liked that he can sort from different retailers from lowest to highest”
  • “ 5/5 it would be very helpful especially when shopping for clothes”
  • “Yes it will save time however save money will depend on the user’s psyche, the price comparison tool was 5/5 because it saved time”
  • “Yes, it will help me save money. Having a budget feature helps you have a stricter requirement and will help save money and time because it's all in one platform”
  • “Yes I would recommend price tracking and budgeting. If you struggle with budgeting, this product is perfect for those who have trouble with budgeting”

Constructive Feedback:

  • “Knowing that you clicked on an items, no feedback that you saved an item to your budget, specifically the bookmark button was found unappealing”
  • “Unappealing was how he had to scroll down and side to side. Also he would have totally ignored the bottom page. Having an option where it scrolls, or having a tab of “how it works” it scrolls down to show how to use the product”
  • “ I want an indication or a pop up that an item was added”
  • “Enhance the user journey, when you add an items”
  • “Message that shows that bookmarks items”

Bargain, a shopping assistant app, demonstrated considerable strengths in its user interface and functionality, receiving positive feedback for its ease of use and intuitive design. Users found the app straightforward to navigate, and praised for its price comparison features, allowing sorting from different retailers based on price. In addition, the budgeting feature was highlighted as highly effective, especially in managing finances while shopping for categories like clothing. The overall aesthetic of the app, including its colour scheme and logo, was also well-received, contributing to a pleasant user experience. 

However, the usability testing also revealed areas where Bargain could enhance its functionality and user interaction. Users mentioned that the "My Budget" feature, although useful, lacked visibility and engagement, suggesting the need to improve on this feature. Furthermore, the feedback on features like saving items to a budget or bookmarking them led to some confusion because users were unaware if the action to save an item was registered. Users also expressed difficulties with navigation, such as unnecessary scrolling and suboptimal placement of search features. Feedback on how Bargain could improve included redesigning certain interface elements for more effectiveness, ensuring features like "My Budget" are not only visible but also interactive and engaging.

Implementation Details

Technical implementation:

Our price comparison app, “bargain”, will be hosted on either Vercel or Netlify, we ensure optimal performance and reliability for our users. We have created a web-based platform that not only simplifies price comparison but also sets new standards for usability and functionality in the market.

Our tech stack is built on the robust foundation of the MERN stack: MongoDB for flexible and scalable database management, Express for streamlined backend development, React for dynamic and user-friendly front-end interfaces, and Node.js for fast and efficient server-side scripting.

Technical challenges:

One of the most challenging aspects of our development journey for “bargain” was tackling the intricacies of front-end logic. Balancing user interactivity, responsiveness, and data management in the UI required a meticulous approach and deep technical understanding.

Regarding scaling, we are confident in our architecture's scalability. The design and implementation of our application are structured to handle increasing volumes of data and users seamlessly. Regardless of the number of products being compared, our system architecture ensures efficient performance and reliability.

Some key takeaways from our development experience include the potential benefits of incorporating web scraping technology. This approach could allow us to gather essential information directly from websites without relying solely on APIs. As access to APIs is limited to a few companies, web scraping could provide us with a more comprehensive and flexible data acquisition method, enhancing the depth and accuracy of information available to our users.


Future Steps

Building on the positive momentum from the Co.Lab bootcamp, our team is committed to further developing Bargain, with a focus on refining our product based on valuable user feedback. A key aspect of our next phase will be the expansion of adding shopping categories. We were initially constrained to electronics for our MVP due to time, however now we want to work on introducing apparel shopping to meet the demand reflected in our user feedback. This addition will not only diversify our product offering but also enhance user engagement by catering to a broader range of shopping needs. 

Simultaneously, we are dedicated to improving the overall user interface and interaction with Bargain. We will focus on making the "My Budget" feature more visible and interactive, ensuring that users feel more connected and engaged with the tool. Enhancements will include clear notifications and feedback mechanisms for actions such as saving items to a budget or using bookmarks. These updates are aimed at eliminating any confusion and enriching the user journey. 

Additionally, we plan to streamline the navigation process to reduce the need for excessive scrolling and to optimise the layout for easier access to essential features. By refining these elements, we aim to create a more intuitive and user-friendly experience that aligns with our users' preferences and expectations. With these improvements, we believe Bargain will become an even more powerful tool for savvy shoppers, making it easier than ever to manage budgets and find the best deals online. 


Product Manager Learnings:

Sohaib Hasan

It has been a fruitful 8 weeks being a Product Manager for my team. I was not aware of what to expect when I joined this bootcamp. When I first joined, I was unaware of what Product Managers are, what they do, how they lead a team. Now, having the chance to be the Product Manager for my team, I have a better understanding on what it takes to lead a team and ultimately what it takes to create a successful product. Couple things I learned in this bootcamp were: Strengthened my leadership skills by being the “driver” of the product Understood on what it means to create user stories, how to conduct usability tests, and learned how to pivot a product Learned how to prioritise features, create strategic decisions, and learned how to deliver a MVP that will impact users

Designer Learnings:

Sylvia Tran

This process taught me the value of user research and the importance it has in guiding the decisions we made for our product. Though our research process was far from linear we gathered a good amount of data in a short amount of time which allowed us to feel confident that we were building something that resonated with our users.    

It felt like the sky was the limit when it came to brainstorming ideas for Bargain, but the two month time constraint kept us grounded in designing and implementing solutions that directly solved our core problem.  

Lastly this process taught me first hand what product team collaboration could look like in a real world setting. Overall it was a fun and rewarding experience getting to collaborate with everyone and seeing our idea come to life.

Developer Learnings:

L’Rae Brantley

Throughout this learning process, I've gained knowledge about new coding concepts, web scraping and the Context API. Web scraping involves automating data retrieval from web pages, making it an invaluable skill for data collection. On the other hand, the Context API in React serves as a robust tool for state management and seamless data transfer between components, eliminating the need for manual prop passing throughout the component hierarchy.

Developers Learnings:

Christopher Maduka


The cohort has been a learning experience for me, working with a dynamic team and other developers shaped my view on how company teams operate. Regarding the product, there were technical nuances that I discovered and researched that builds on my technical knowledge of the current stack (MERN) we deployed.

Full Team Learning

From this bootcamp, our team learned the importance of cross-functional collaboration and clear communication. We focused on keeping a user-centric approach, listening closely to user feedback, and conducting thorough research. Navigating challenging conversations also proved crucial. These lessons have greatly improved our teamwork and problem-solving skills, equipping us to tackle future projects more effectively and adapt quickly to new challenges.