TomboyX

Tomboyx is a non-binary, size inclusive underwear company. There mission to make underwear that fits you, no matter where you fall on the gender or size spectrum.

I began working at TomboyX in 2021 working on all pieces of the website, from product, to user experience, to automations, to managing engineering projects. Below are some of my favorite projects I have worked while at TomboyX.

Color Swatch Picker

The Initial Problem
The TomboyX website is powered by Shopify. Shopify is an incredibly powerful eCommerce platform, and offers an amazing array of tools and systems; however one limitation of Shopify is you can only have 100 variants on one product. A variant on Shopify is all the potential combinations you can create with size and color options of a product. As TomboyX prides themself on being size inclusive, there are up to 12 sizes on any product, then add in all the color-ways (some up to 20 different colors) and you have over 200 variants. In order to get around this we have to break up our products by color, so every color-way is a new product in the system, with the only option being size, leaving 12 variants on any one product. TomboyX wants a shopper to see all of the color-ways a product comes in when they are shopping on the front-end store, thus leaving us with a challenge of how to show all color swatch options together when we must break up the products.

The First Solve
Shopify has their own app store, with thousands of apps created by individual developers that one can add onto a store. After in-depth research I picked an app that one could create groups of products you want to display together, and then on the front-end you could toggle between the colors of various products. While the logic of this app was great, and this app did help with the problem, the app was severely unstable and forced us to rely on external developers that we had limited communication with. This app crashed during many important sales, confirming that we needed to find a better solution.

The Process to a Better Solution
At this point I had done so much research around the apps within the Shopify app store that I knew a solution did not already exist within the app store and I would need to look into custom development work.

The criteria that I determined was necessary for a successful solution was:
- must be able to keep all products as there set up currently
- show every color-way on the product detail page (PDP)
- must be able to be manage and update swatches after the initial build without developer
- be able to break the swatches into groups solids and prints (this was from previous user testing on how customers are shopping the product)
- be able to automate the swatch grouping process to help save time in the long run

I looked through other Shopify eCommerce sites, to find if this type of custom development was possible, and found Girlfriend Collective (below). After reading through their code I could tell they were not using an app and had found a custom solution showing that this was in fact possible.

At this point I had to interview potential developers considering cost, experience, background, and future capabilities. Using Storetasker, I was able to meet with multiple developers and vetted the best developer for the job.

The Final Solve

The project finished with custom developed that hit everything on my criteria. I set up the automations on the back-end of Shopify to automatically group like products and separate into prints and colors. Perhaps the best outcome of this project was we have no had a single outage or downtime with out swatch experience since launching, this solution is much more stable and allows customers to shop better. Several customers have written in to express how much they enjoy the new swatch experience when shopping.