How Hopscotch built India's largest online Kids' fashion brand with ImageKit

Aditya Ramakrishnan -

Background

The online apparel sales market is as competitive as it gets. Everyone from global brands like H&M and Zara to marketplaces like Myntra vies for a presence alongside numerous "direct-to-consumer (D2C)" brands at various stages in their growth journey.

In this competitive diaspora, Hopscotch is a unique story. Founded in 2012, Hopscotch was a D2C brand well before the business model became commonplace. From day one, Hopscotch has differentiated itself from other fashion marketplaces by building a unique collection of apparel for kids with new releases every week, built on a deep understanding of its customers.

Today, Hopscotch is one of the leading D2C destinations in India for stylish, fashion-forward kids wear. The app and website receive an average of 2,50,000 unique visitors daily. Hopscotch has built enormous loyalty with its audience, with 80%+ of its sales coming from repeat buyers.

Among ImageKit's first enterprise customers, Hopscotch's growth over the last 6+ years has been built on a robust foundation of media optimization, compression, and delivery by ImageKit.

Quality visuals and a high-speed experience: The heart of the growth challenge

Online shopping is an exploratory process, with customers looking at multiple products before purchasing. Consequently, a key business metric for Hopscotch is the "Average number of products viewed per visitor." The higher this metric, the higher the sales.

This created a dual challenge for the Hopscotch tech team to solve. On the one hand, the site needed to be fast - the faster, the better. The quicker images are loaded, the faster people can browse and see more products in a given time, increasing their likelihood of purchase.

On the other hand, Hopscotch's differentiation in the market was quality, and their buying audience - parents buying for their kids - had high expectations. Low-quality images would not showcase high-quality products properly, so there was no room for compromise.

Problems with the existing solution

Things came to a head in 2018. Hopscotch was using a 3rd party CDN provider with a global presence and reputation for supporting businesses of large scale but ran into the following roadblocks:

  • High Cost: The cost of the CDN continued to escalate as Hopscotch's traffic and business increased, reaching a point where it impacted the overall business health.
  • Poor Developer Experience: The existing solution's capabilities were complex for developers to access and use. Image optimization and resizing configurations were baked into the CDN configuration, making it only accessible to the DevOps team. It was cumbersome and risky to update it directly on the production website should developers require a change.
  • Inefficient workflow: The Hopscotch team needed first to take photos of each product, then manually convert, compress, and optimize the images for the web, and then additionally create thumbnails for different device sizes. All this increased the workload on the team, increased turnaround times on an already hectic weekly release of new products, increased image storage costs, and created extra work for the team to manage the entire catalog of images.
  • Poor visual quality across a diverse userbase: Especially true for iPhones and high-end Android devices, the manual creation of optimized images and thumbnails did not showcase Hopscotch products well. Such devices had high-density displays and ideally would need images tailored for them.

Adopting ImageKit: Three-phase pilot

Having decided to move away from their existing provider, switching to ImageKit had to be considered carefully, given Hopscotch’s scale. ImageKit was evaluated in a three-phase pilot for load time performance, its ability to handle Hopscotch traffic and deliver assets at scale, the richness of features available, and the visual quality it could deliver.

ImageKit not only met but surpassed expectations on every evaluation parameter. With a unified API for all transformations and delivery configurations, the developer experience was also significantly improved.

After this thorough testing, Hopscotch switched to ImageKit for the entirety of their digital asset optimization and delivery.

Migration itself was a simple matter for Hopscotch. They connected their external cloud storage to ImageKit, a capability available to all ImageKit customers, and changed their image subdomain to make a seamless switch.

Results

The implementation of ImageKit delivered strong and immediate results for Hopscotch, with the value of the relationship increasing further over time.

  • Simpler media workflow across teams: Since ImageKit handled all the image resizing, conversion, and compression in real time, Hopscotch stopped needing to create optimized and resized versions manually. They could directly store the highest-quality images from product photoshoots, which were then optimized for delivery in real-time by ImageKit, preserving maximum visual quality.
  • Better visual quality across devices: ImageKit provided Hopscotch with a feature to specify the Device-Pixel-Ratio (DPR) in addition to height or width. This helped Hopscotch maintain visual quality even on the highest-end mobile phones.
  • Network-aware image optimization: ImageKit allowed Hopscotch to format, resize, and compress images in real time. Hopscotch could now vary compression across devices, handle various network connections, from 2G to Broadband, and deliver all users a fast and high-quality experience.
  • Format optimization on mobile apps: Hopscotch switched from using PNG to WebP without changing its image creation workflow, leading to a 30+% improvement in the mobile app's image loading speed.

Conclusion

Hopscotch's business and traffic have grown multifold in the last half-dozen years, and ImageKit has kept up with the increases in scale without challenges. In addition to controlling costs and simplifying its entire digital asset lifecycle, Hopscotch has been able to rapidly and easily explore new image formats to accelerate its website and app further. Efforts continue to be underway to explore and adopt the latest image formats and compression protocols.

Through its partnership with ImageKit, Hopscotch tackled its media delivery challenges and elevated user experience and website performance to new heights, leading to a direct and lasting business impact. This successful collaboration is a testament to the significance of choosing the right technology partner to drive business growth and innovation amidst the dynamic and ever-evolving market landscape.

If your company faces a similar challenge and wants to improve its media management, optimization, and delivery with minimal effort, contact us at support@imagekit.io for a quick consultation session. You can also try out the product by creating a free account here.