PocketCloset | Sustainable shopping to help your wallet and the environment
💼 Role(s): UI Designer, Software Developer 🛠️ Languages and Tools: Figma, Chrome Dev Tools, Javascript 🗓️ Timeline: 36 hours | August 2022 👥 Team: Catherine Burns, Ena Manjgo, Hannah Hepburn and Tara Rao-Pandit
Inspiration
Since we all related through our tendency to buy too many clothes (with online shopping being the main culprit), we decided to ideate a solution that would help us limit our clothing purchases. Our goals for the project included developing more sustainable shopping habits, saving money, and reducing clutter in our closets. Impulse buying accounts for 40%-80% of online purchases and the fashion industry contributes to 10% of global carbon emissions. This combination of impulse purchases in the fashion industry weighs heavy on both your wallet and the environment.
What it does
PocketCloset is a Chrome extension that allows you to enter the clothes you own into your online closet with some identifying features like colour, fit, and length (in the case of pants). This extension reminds and encourages users to make smart and sustainable purchases through popup notifications at "Add to Bag" events comparing the current item to similar articles of clothing stored in their browser's 'pocket' closet. These prompt you to view your closet or head over to your cart to remove the recently added item.
How we built it + Challenges we ran into
We designed our wireframes and high-fidelity mock-up in Figma and built the chrome extension using React JS in VS Code. Prior to this experience, no team members had developed a chrome extension or ran scripts to read web pages, and hence it was a challenge to get the initial set-up working as well as to understand the structure of an extension. In addition, due to working with an extension, we were limited in ways of handling routing making it challenging to trigger various views of the pop-up.
Learnings + Accomplishments
Through this project, we were able to get experience building chrome extensions and learned about the differences between chrome extensions and regular web platforms. In addition, we learned how to construct scripts to read web page data.
Our proudest accomplishments included:
Being able to get a functioning closet manager in our pop-up, allowing users to add new items and easily view existing ones.
Developing a script to read the current URL of a page in order to pull clothing item details.
Successfully building an MVP that could be demoed within the 36 hour hackathon timeframe.
Being selected as one of the best overall winners for the hackathon.
Future iterations
While we were able to successfully build a working prototype, there is still room for multiple rounds of iterations and future instalments. Below is a list of ideas for additional functionality, that if given more time we would aspire to include in the product:
Further implement the extension notifications to accurately match webpage data with closet item details.
Use chrome storage API to fully develop a backend for users to store closet data and link it to their Google account.
Implement a money tracking feature that keeps track of how much a user saves from making more informed spending decisions. Users would also be given metrics on spending habits as well as be able to set time-specific spending and budgeting goals.
Build a wider variety of sorting options for clothing items.
Add product image tiles for the closet items to visually remind users of existing clothing pieces.
