PocketCloset - Chrome Extension

PocketCloset
Purpose

Many people share the tendency to buy too many clothes (with online shopping being the main culprit), thus inspiring us to ideate a solution that would help us limit our clothing purchases. Goals for the project included developing more sustainable shopping habits, saving money, and reducing clutter in our closets.
This Chrome extension 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) and reminds & 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.

Design System

As a Chrome extension, user interactions should be minimized due to the visually small nature of the application, encouraging a more straightforward user flow. To attain these goals, we reduced the amount of button clicks required for each user operation. Operations include adding a new article of clothing to the user’s closet and managing the pop-ups. To simplify the clothing addition feature, a common form was implemented, accessed by a single button click, with the option to select the type of clothing, with the rest of the fields remaining the same. Another design decision made in the creation of the form was to exclude the need for typing, allowing users to select options from a dropdown menu or radio buttons. To manage pop-ups, navigational buttons were designed to stand-out against the background and take users directly where they want to be.

PocketCloset

Pop-up notifications and some sample components

Primary Themes, Logo, & Typography

The primary identity colours were to go for a soft, reliable shade of brownish-pink symbolizing reliability, and financial stability. As a supplementary accent colour, a deep green was chosen to hint at the environmental and monetary nature of the product. We decided on designing a small and simple logo as it will be displayed in smaller areas of the application. The design resulted in a clothes hanger, turned to emphasize the “C” in “Closet”.

PocketCloset Typography

Primary identity colours and logo

The extension was created and designed to give an air of simplicity – for easy use, and reliability – so users trust this application and it’s suggestions to limit consumption. To accomplish this, Montserrat was selected. It has high legibility in small sizes and is widely used making it a strong choice.

PocketCloset Typography
Utilized: React, Figma, Chrome, Javascript