Fashion: anytime, anywhere.
Established as a website to sell personalised gift items, Myntra today is India’s largest fashion and lifestyle e-commerce store that serves millions of fashion enthusiasts every day. With the onset of smartphones and rapidly increasing product sales, building a mobile presence seemed like a natural next step.
However, the idea of selling and buying clothes through a 3.5” screen was unfathomable at the time. To re-imagine a new reality that shrunk the online website into the palms of millions, the team needed to transform their bold strategy into tangible outcomes in order to achieve their vision of a consumer-first mobile platform.
Engagement Stage
Transform
Define 01
Defining business KPIs like "Good performance in poor network situations" to preemptively resolve problemsPlan 02
Accounting for an ever-changing interface to provide a consistent and dynamic Myntra experience on mobileEquip 03
Equipping teams with collaborative practices between product, design and engineering for quicker delivery
Define 01
Defining business KPIs like "Good performance in poor network situations" to preemptively resolve problems
Back in the day, when mobile penetration was only beginning to gain velocity and a playbook for best mobile practices did not exist in India, it was necessary for Myntra to define mobile-first business KPIs to resolve issues preemptively.
With its web store predominantly depending on showcasing rich visual content, videos and images, Myntra aimed to keep up with the evolving market.
But one of the most prominent challenges at that time was that Android smartphones faced major battery drain and performance issues due to lower RAM. Mobile networks were also unsatisfactory and riddled with spotty connectivity. This meant that high-resolution media did not load fast enough in cases where the network or smartphone's capabilities were weak.
To achieve good performance in poor network conditions, the team tweaked back-end services to prevent disruption and make as few network calls as possible from the app. Important data, including high-resolution images, were also cached on devices beforehand to reduce dependency on carrier coverage and conserve power. This guaranteed high performance even on low-end smartphones and provided all the information needed for consumers to make informed purchasing decisions.
Ensuring high performance in low network connectivity
Plan 02
Accounting for an ever-changing dynamic storefront experience right from the beginning
To provide a consistent experience on mobile and live up to its reputation, the team needed to champion the brand front and centre. This entailed planning in such a way that it could focus on building features that reflected the consumers’ expectations and delivering a vibrant, innovative and appealing platform.
Designing a dynamic storefront to make the app vibrant
To present a new experience to the consumers every time they opened the landing page, a dynamic storefront was made based on their past preferences, topical events and current offerings. The storefront was architected to allow new content to be published and updated in the background, without issuing app updates.
This allowed managers to design the storefront easily in their content management systems and publish files directly to devices via silent push notifications. The devices then read these files in the background and cached the media beforehand. This created a fresh new landing screen for consumers every time they opened their app.
Highlighting Myntra’s product range through a seamless search
To provide consumers with a seamless display under a particular category, the team transformed the search experience to be more intuitive. The new design allowed for easy viewing of multiple options on the same page. All images, once loaded, remained and adjusted their quality according to the device.
Network requests were made simultaneously to fetch more results at the bottom. By minimising the number of times images needed to be downloaded, the app optimised memory utilisation and never stuttered.
Creating a cohesive visual design with a minimalistic interface
A new minimalistic interface was designed by the team to primarily highlight the fashion brands. The interface complemented each new product by borrowing its primary colour for all important information on the screen. This innovation emerged before Google’s material design was developed, pioneering a design change that stood out from cookie-cutter templates of other e-commerce apps at the time.
Equip 03
Equipping teams with collaborative practices between product, design and engineering for quicker delivery
To ensure that a small team could deliver such a large project on time, there was a need for strong collaborative practices between product, design and engineering. This required continuous sharing of insights and faster incorporation of feedback in tight iteration cycles to avoid costly mistakes.
To achieve this, the team was equipped with the right resources and practices. Product managers, designers and engineers worked hand-in-hand to understand real-world feasibility of features before building any of them out.
The wireframes were iterated several dozen times to arrive at a mobile prototype that fit the requirements. This was tested with target consumers through guerilla usability testing studies which enabled the team to be a part of more realistic tests, leading to quicker turnarounds during the development phase.
