How Cloutfit got started

How an afternoon of online shopping led to the birth of Cloutfit

It all started one day while I was browsing through thousands of shirts, jackets, and pants that just didn’t quite do it for me, hopping from store to store, wishing someone (or something) could filter all that clothing and show me only what truly suited my style. It was in that moment of frustration, with twenty tabs open and zero items in my cart, that the idea hit me: what if there were an app that could save me from all this hassle?

The concept was simple: an app that gathered all my favorite stores in one place and, even better, recommended clothes based on my tastes, sparing me the agony of sifting through items I knew I’d never wear. That’s how Cloutfit was born, an app designed to make clothes shopping faster and more effective.

The First Step: Am I a genius, or does this already exist?

With a coffee in hand, I did what any sensible developer would do: a quick search to see if someone else had already had this “brilliant idea” That’s when I stumbled upon Shopstyle, an American platform that also collects fashion items from various stores. Demotivation? Not really. What I had in mind was a step further: an app that not only gathered stores but also understood my preferences and could suggest items with great accuracy.

Since no app combined both approaches (store aggregation and personalized recommendations), I decided this was my chance to fill that gap in the market. So, I began developing Cloutfit.

The Magic Behind Cloutfit: A Stylish Algorithm

The key to Cloutfit was going to be its ability to recommend. That’s where the recommendation algorithm came into play. From the outset, I aimed to make this experience fun and intuitive, far removed from the typical long forms that require you to remember and detail every aspect of your style or physical characteristics.

Drawing inspiration from current entertainment trends, like infinite scrolling, I thought: why not let users visually decide their preferences? Instead of asking them to explain their style, we would show them directly items they could “like” or “dislike” It’s like a “thumbs up/thumbs down” game where the more you play, the better Cloutfit gets to know you. Although it’s not technically infinite scrolling (since the images displayed are finite and appear on the screen as they’re tagged) it creates the same interactive and fun feeling that turns the customization process into a stylish game.

As shown in the Figure 1, the final result is an interface that displays all the relevant information for each item. This includes images (which can be viewed through horizontal scrolling), the name of the item, its price, the store it belongs to, and buttons that allow users to tag the items according to their preferences.

How does CloutFit know what you’ll like?

The answer lies in the recommendation algorithm, designed to suggest images similar to those you’ve liked while avoiding those that resemble images you didn’t like.

To measure the similarity between images, I decided to use embeddings, which are lower-dimensional numerical representations that capture key features of each image. To generate these embeddings, I employed a pre-trained convolutional neural network called ResNet50, applied to all the garments in the app. It’s important to note that for each item, we use an image showing the garment head-on against a white background, allowing for more accurate comparisons by minimizing noise.

Once the embeddings were calculated, we could start measuring the distance between the images that users have tagged and the new images they haven't interacted with. This meant comparing each new image with all the images tagged by the user, which would create a significant computational burden. Therefore, I decided to use clustering to group the items tagged by the user, significantly reducing the amount of computation needed.

Clustering is applied to the embeddings of the images that the user has tagged, and once the groups are formed, comparisons are made with the new items in the app. While one might think a cluster represents a single preference, tastes can be quite varied. For this reason, I decided to calculate two centroids for each cluster: one for the items the user likes and another for those they don’t. These centroids are used to measure the distance between the embedding of the new image and the two centroids.

Thus, for a new set of images, we select those with embeddings close to the "likes" centroids and far from the "dislikes" centroids. This will give us a numerical value representing the algorithm's confidence that the user will like the image. We then present the items to the user, sorted by this level of confidence.

But which clothes would be recommended?

For the app to be truly useful, it’s essential to offer clothing that genuinely appeals to consumers. That’s why I decided the best strategy was to provide product recommendations from the most popular stores and brands in Spain. To achieve this, I implemented web scraping techniques using Python.

The final product

CloutFit is a mobile app developed with React Native, designed to make finding clothes that match your style easy, without wasting time jumping between multiple stores. As we’ve seen, the app has two clear goals: centralize fashion searches and personalize them. On the one hand, it offers an extensive catalog of items from different stores and brands, allowing users to browse a wide variety of products without opening twenty tabs. On the other, it features an algorithm that “learns” from each user’s preferences to suggest clothes that align with their style, keeping out items they’d never wear.

There are two types of users on CloutFit, with different levels of access:

1. Unregistered users. For users without an account, CloutFit works as a visual fashion catalog. They can browse all available items, view each item’s details (name, price, store), and access the purchase link for each store. They also have a filter menu to adjust their search by type and category. Figure 2 shows an example of how unregistered users experience the app.
2. Registered users. Users with a CloutFit account have access to the catalogue, the recommendation system and the possibility to save items as favourites. Figure 3 includes a video showing the experience for users who log in.

This concludes our journey through the development of CloutFit. Currently, the app is not published, and I have no immediate plans to continue the project, as I am focused on other initiatives. However, in the future, with careful consideration of the legal aspects of using data from different shops, I might take it up again.

Thank you for reading, and I hope you enjoyed learning about CloutFit!