ShopSwipe

Inspiration

With online clothes shopping becoming more and more prevalent in modern life, Australians are always browsing the web for their next big buy.

We get it, the internet is frustrating sometimes, and wouldn't be more convenient for everyone if you could just buy one outfit on one website?

Enter: ShopSwipe!

A website that can build your dream outfit, all in one place. ShopSwipe is a unique, integrated platform that is inspired by apps such as Tinder and TikTok which use swiping and an AI algorithm as addictive mechanisms for social media. So we thought, why not apply these properties to a shopping website?

What it does:

The Product ShopSwipe is a website platform that displays multiple clothing items to the user. Its entire selling point is to streamline the experience of shopping for an outfit.

The Design ShopSwipe is designed in an interactive grid, in which the user engages with. The user can then either like a specific item or dislike it by swiping it off the screen. Upon doing this, that item disappears and a new item materialises in its place, in an endless cycle. We hope to weaponise user's addictive tendencies, to spend as much time on our website, and therefore buying more product.

The Algorithm ShopSwipe constantly web scrapes the internet for products and integrates them into the grid, displaying the product image. In addition, as the user interacts with the website, information is fed into the algorithm, which stores the user preferences and provides further recommendations. The current items on the screen are then displayed on an avatar, being the user's "outfit". From there, the user can purchase the entire outfit on the website.

How we built it

With the majority of our team being first timers/beginners, we relied mainly on the knowledge of our more experienced members. Furthermore, the web and AI services were vastly useful for learning more essential concepts and filling gaps in our knowledge.

Conceptualising our Idea ShopSwipe, being a website, is built on a 'Frontend'/'Backend' structure. It was easy to assign people to each part of the project, based on the coding language they are most familiar with (Frontend(HTML5 CSS3 JAVASCRIPT) Backend(Python)). Given our experience, we decided it was best to keep it simple, adding bare minimum features, with the capacity to add more if we have time:_

A 2 page website that displays 4 clothing items, in a grid like format, hosted on Glitch, using Flask.
An algorithm, that can give the user a recommendation based only on colour.

These points are the main goals for our project.

Storing Item Data All clothing data taken from websites, using an in-house web scraper, we were able to extract important parameters like image links, website links, clothing descriptions and their price and store them into a SQLite3 database file. Owing to the SQLite3 file's versatility we used our machine learning code to go through the database and recommend items to the user on the basis of colour. However, due to complications with the web scraper, we will use a manually entered data base for demonstration purposes.

How the Algorithm works The current algorithm is a similarity based system coded in Python. Using a json file, each item has an RGB values assigned to it. The program works on taking the RGB values of the product chosen by the user, and doing a 3D vector calculation, to find the most similar colour within the database. It then choses an item in the database that has that similar colour, and then displays the new item to the user, waiting on the next input.

Challenges we ran into

Ideation The biggest challenge for our team was deciding on an idea. We spent a lot of time brainstorming and only settled on ShopSwipe around 2:00pm on Saturday. In hindsight, if we decided on an idea early, we would have had much more time to code.

Learning New Coding Languages Some of us had to learn new coding languages or libraries we were unfamiliar with, which definitely slowed down the progress of the project. In the end, we had to omit certain features due to time constraints.

Integrating Our Code Together Due to the project being contracting with multiple languages, we found integrating all of it into the website to be particularly challenging. Working with Flask, it was hard to get our code up and running smoothly, especially with some languages not being native to each other.

Accomplishments and What We Learnt

Coding an Website

For many of us, this is the first time coding website, so to get anything at all on the web is an accomplishment to us.

Working as a Team

We all learned the importance of delegating responsibilities and playing to our individual strengths

What's next for ShopSwipe

In the future, we hope to implement more complex features that are required for ShopSwipe to become a successful product. These include:

A more complex algorithm or dedicated AI for recommending and recording user preferences.
A better designed and more stylised website.
A integrated mobile app in the style of social media companies, to increase the addictive aspect.