Historical Micro Interactions in the Myntra Website

This is a documentation of some of the micro-interactions that we implemented into the early days of the Myntra website. In 2013, we were migrating from a generic CMS to a custom frontend stack with a fresh new design.

Before mobile apps became the main medium of shopping, the desktop website was a large revenue driver for most e-commerce companies. We were doing a re-design for the Myntra website at this time when we decided to go a few steps further and really polish some commonly used interactive elements of the page to add to the delight of purchasing something.

We had the motto “Look Good” and we wanted that ideology to shine in our website experience. Below, I’ll share four examples of these tiny micro-interactions we worked on long back in 2013 (9 years ago since writing).

The top navigation was critical for customers who new what kind of clothing article they were looking for. Here typically the problem is that when switching the menu items, the popup will close for a brief moment.

Typical popup experience when switching menu items.

But in our implementation we ensured that when navigating between the menu items, we are not giving a jarring experience.

1. The popup remains open while the mouse is moving between menu items.
2. The border selection state is moving along with the mouse to highlight very clearly what got selected.
3. The contents inside the popup are animating in the direction from which your mouse if coming. If you come to a menu item left of current, then the animation also follows this. Similarly if you instead go to the same menu but from the other side, the animation is reversed.

These micro interactions emphasize the sense of place in the navigation by constantly giving feedback using animations of what is happening.

Animations in the header navigation.

For the filters on the search page, typically the price and colours are shown as a plain list like this:

Basic list of filters.

The name of the color is not really important when we are shopping for a certain color, the human brain is capable of picking a color much faster when it is shown visually.

Also, for price, we are conditioned to think in units of “ — 99” and hence the price slider selection will always go between units of 99 like 199 to 599. Even if someone did not read the title on top they will understand what is going on here.

Simpler color picker and 99 suffix price filter.

For the final example, when selecting a particular brand in the huge list of brands, we wanted a quick way to jump to a particular alphabet. For this the particular section for the letter is highlighted like below:

Highlighting inside the brand filter.

Often we are too busy implementing the required features but when we take the time to go above and beyond we can end up with truly delightful experiences!

These animations are captured using the historical snapshots of the website, captured by the Wayback Machine run by The Internet Archive.