We thrilled our shoppers with features like Superfast Delivery, Fynd A Fit, Gravity View and Flashpay. But our hunger for enhancing their shopping experience lead us to conduct a focus group research to understand how we could get better. The results were inclined towards making shopping a ‘styling’ experience. We saw a pattern where most people thought of putting together a look when they browsed through products (before making a purchase). We took a hint from here and started building a feature that would suggest complete ensembles and not just products.
Today, we are happy to beta release the Mix & Match feature.
Mix & Match digs through thousands of styles to create perfect looks for every occasion.
Making the Mix & Match feature was a tough task as we had to marry human expertise with machine intelligence to judge which looks work, and which don’t. Fortunately for us The Closet team provided us all the required fashion inputs that go into our matching algorithms.
The matching algorithms take into account hundreds of product tags and suggests the most stylish looks for our shopper. Over 12 million combinatory rules are in play to serve each match.
We also included a feedback loop for our shoppers to up-vote/down-vote looks. This feedback loop then allows us to crowdsource shopper preferences at an unprecedented scale and improve our matches swiftly!
Here is how each team approached this challenge:
The Closet is Fynd’s fashion editorial arm where we have been developing rich content by curating looks for our audience, based on occasions and trends. Creating articles is a visually enticing process with a blend of words and images. Curating looks for Mix & Match was an entirely different ball game. Not only did it require the human acumen of understanding what goes well with what while putting together an ensemble, but also included classifying products into categories for the algorithms to understand and publish.
We started off classifying products as top wear, bottom wear, outerwear, footwear, accessories and jewellery; essentially the elements that make a complete ensemble. We further mapped 600 product categories into these six classifications. We also put together colour, pattern, occasion, and fit matching, along certain category/brand inclusions-exclusions making a dataset of over 12M combinations! It was a mammoth and extremely challenging task as we were mapping products without even seeing how each product looked.
Once the algorithm was set, we started testing thousands of looks. We then went through multiple iterations, rejigged the mapping and added further parameters to ensure all the style suggestions were impeccable. I believe what we have developed is quite awesome and the team takes great pride to have Mix & Match ‘Powered by The Closet.’
With Mix & Match, we wanted to recreate a real world experience of mixing and matching clothes within our app. The fluid nature of the layout, right from the way images are loaded to how they can be manipulated has been designed to put the user in control from the get-go.
Let’s say you are looking to buy a new shirt and want to see how it goes with blue or a black denims. Before you even try out the item in the real world, you would try placing the the two together to see if they complimented each other. In Mix & Match, we’ve recreated just the same experience. All you have to do is tap an item and drag it so that you place it side by side with another.
Moreover, we also wanted the experience to be as addictive and simple as possible. All the actions you want to perform, right from seeing new looks to buying an item is just a tap away.
The Mix & Match feature was pretty interesting and unique in the way it was perceived. It was not only unique from a user’s perspective, but also very different from what we’ve traditionally seen or built on any shopping app.
In layman terms, it can be seen as something like a recommendation engine where each recommendation flows through a pipeline of recommendations before the actual resultant set is figured out.
The recommendation engine itself was built pretty closely with the suggestions we had from The Closet team, along with the flexibility to change the engine rules on the fly, based on feedback from experts as well as our app users. Our biggest challenge was to ensure that with all these rules kicking in, we wouldn’t compromise on any UX, at the same time taking the complexity of real-time inventory changes for any city. This results in giving our user a fresh fashion feel each time they try it out.
Initially we were clear that we didn’t want to over-engineer the entire process, and so, we prioritised results first from the very beginning. Our initial prototypes were based upon various models ranging from graph databases to non-relational databases to search engine techniques, and even in-memory data stores on top of the rules. Finally, based upon our test results and user feedback, we decided on a hybrid solution with MongoDB and Redis, which leverages vastly upon our rich real-time inventory along with extensive and flexible engine rules.
So, ideally when you view a product and try Mix & Match on it, our algorithm starts looking for another that compliments it immediately. Additionally, these two products lead us to suggest another good match for the previous two selections. Finally, this chaining algorithm provides a set of products that go well together and gives the user a complete & fashionable look.
Harshal, Sr. Engineer, App Team
Mix & Match offers a complete package of beautiful looks, interactive UI, catchy animation, all in the same screen and at a single touch. When Farooq first discussed this feature, I was extremely thrilled. With all the action happening on a single screen with minimum clicks, it surely is a fun experience for the user but a nightmare for a developer!
For such a dynamic UI, we came up with multiple approaches that resulted in either keeping empty spaces on wide screen devices or enlarging centre lane cards. We also had to keep in mind that a variety of android devices with different screen-sizes and aspect ratios would throw different sets of results. After numerous trial and error cycles, we zeroed in on an approach where every dimension was calculated and every card was generated at runtime, rather than having a traditional approach of a predefined xml screen.
We would love to get your feedback, please use the in-app feedback or simply tweet to let us know how we can improve.