Why a Progressive Web App?
The future of mobile web was staring down the abyss of uncertainty when Google introduced Progressive Web Apps to the world and suddenly there was light. Progressive Web Apps or PWA enabled multiple brands to resurrect their mobile platform through web technology thanks to these key features:
- Faster page load
- Offline mode
- App like experience
- Lighter on device storage
- Smarter data usage
- App icon on home-screen
- Animations upto 60fps
- Push notifications
The story has been great so far with popular brands like Twitter, Uber, Google(I/O) and many e-commerce players like AliExpress & Flipkartstepping up. It was a great opportunity indeed and we wanted to seize it in order to reach out to the long forgotten segment of casual fashion aspirants.
The Key Aspects
While PWA is a purely tech-driven advancement that aims to achieve high performance, we took the opportunity to create a new experience that set it apart from existing thematics of the brand. It offered fresh grounds to explore aesthetic and performance improvements through quicker deployments. Here are few things about the contribution of design to the overall success:
Light & Space
A larger portion of users in India use lower end smartphones with low storage thus leading to a lot of app uninstalls. As the whole theme of PWA revolves around performance & lightness, to impart this light-weight-ness as a character we gave it a lighter, spacious and more minimal look as compared to its Android & iOS counterparts.
This style was applied all across to help users focus on content without clutter. The core shopping experience was the one and only focus across PWA which aimed at customer acquisition primarily. The goal was to help the brand reach out to the unaware and casual fashion aspirants who could be potential customers.
Font Icons
We designed a whole new set of iconography to go with the light theme and converted them to a font. This helped us reduce the size of assets loaded and improved load-time significantly. During this exploration, we also tried focussing on the semantics of few icons by adding extra detail to them. For example the Bookmark or Save icon (in Myntra’s context) had different variants like default, active & navigation-link depicted by a plus, check & notch respectively.
To learn more on how to design & use font icons you may check this.
System Fonts
In order to achieve optimum performance without having to substantially compromise on aesthetics, we reconsidered the use of the right font on PWA. While the Myntra brand typeface adds character, it did happen to be one of the heavier assets to be loaded on our PWA.
With the slight tradeoff on brand, we went ahead and employed system default fonts i.e. Roboto & San Francisco as per target device. This contributed to the overall performance of the flow significantly. This is one of the classic examples of how UX is never a one-size fit all practice.
Primary Actions
A primary aspect of the redesign was the downright simplification of UI. This involved reducing clutter, applying a simplified palette and typographical hierarchy. We took this opportunity to revisit our style for primary call-to-action “Add to Bag”. We wanted to move away from the existing design because of it’s lower contrast and weak connotation to the brand.
The objective was to have a bolder action and a higher recall to brand. We also wanted to tilt the balance towards the primary action as compared to the secondary action in this case.
The New Look
The tweaks and improvements across the PWA led to the new theme that was perceivably lighter and fresh. But no design change is done without validation. Hence extensive A/B tests were conducted and each tweak was weighted against its predecessor to ensure the outcome was either positive or neutral.
The Design Framework
The process of redesigning for PWA involved taking a step back from the existent patterns of the brand. Everything was questioned, analysed and iterated upon as it helped us rebuild the foundation of design across platforms. It provided us with the opportunity to initiate a larger project of building the design language system (buzzword alert!) for Myntra. We followed the Atomic Design approach and started building a framework based on a new language at its sub-atomic level. The latest redesign of Home, Navigation & Profile are few instances of how the platform is reshaping itself steadily.
Read more about how we unearthed aspects of the popular card-based pattern while redesigning the homepage feed on our app here.
The Future of Mobile Web
The combined efforts of developers & designers resulted in the face-lift of mobile web experience that performs better. The load time improved on an average 30% across all pages and this pushed the retention & conversion numbers. PWA helped us set up a platform to not only reach out to the forgotten segment of users but also enable quick iterations for product enhancement. Few of the problem statements that are helping define the future path for PWA are:
- How to improve conversion across the funnel?
- How do we retain users and keep them engaged?
- How to help users find the right items to shop?
In addition to the key metrics for e-commerce like click-through rate & conversion, Myntra PWA had to focus on acquisition & retention primarily for the untapped segment of users. The behaviour of the target segment has been complacent towards the adoption of new product platforms, hence the objective was to offer a fast & fresh perspective to casual fashion browsing tendencies.
Special thanks to Mohammed Shaheen, Vijay Krishna, Harshdeep Sinha for helping design & build the PWA. Cheers.