Drupal CMS – for the Grofers native mobile app to optimize content authoring experience for marketing teams.
UX & UI Design
We partnered with Grofers to design a CMS solution that would allow their marketing team to control the layout, content, and widgets on their mobile apps. The goal was to empower the marketing team to operate independently and free up the engineering teams to focus on other initiatives.
We delivered a CMS that is optimized for native mobile apps and includes features such as layout control, widget management, content segmentation, A/B testing, and the ability to control app screens with a single click.
The Grofers marketing and category teams depended entirely on the engineering team for widget controls, running A/B tests, and various other tasks which affected the productivity of all teams.
The solution had to be flexible enough to accommodate the advanced marketing needs of Grofers, such as personalizing experiences, running A/B tests, segmenting content and offers, and integrating with the rest of their marketing tech stack.
Another important aspect was that the CMS integration should not affect the performance, aesthetics, or UI integration with native elements of the app.
Our approach was to first understand the engineering infrastructure that powers the Grofers app and analyze the risks. We then presented a solution and a demo that exposed a JSON that could be consumed by mobile apps. With this, we commissioned a proof of concept to validate core integration with the app.
The proof of concept involved controlling banners and a couple of simple widgets on the app with a CMS. Once we validated the POC, we aligned our sprints to business events and short-term team needs.
For example, we focused on performance around GOBD, Grofers' bi-annual Black Friday sale equivalent. This approach allowed us to test our solution very quickly in real-time situations.
We chose Drupal 8 for its CMS, RESTful, and rapid development capabilities. Drupal's role-based access, easy and robust third-party integrations, caching mechanisms, and flexible architecture allowed for deeper integrations as a provider and a consumer in the distributed architecture.
With decoupled Drupal, we were able to get the best of both worlds: the power of a CMS and the performance of a native mobile app.
We built a reusable component library using the paragraphs module. This allowed the marketing team to easily drag and drop components, customize them, and preview the impact before publishing them directly to the app. The component library standardized the markup and schema for the app, making it easier for the team to work and maintain it.
We implemented a moderation workflow and revision-based system to mitigate risk and ensure that configuration mistakes could be tracked and rolled back easily. We also implemented a custom caching strategy with deep CDN integration for all assets to improve performance.
We enabled Widgets Scheduling and Segmentation for the marketing team to schedule widgets, products, campaigns, and promotions well in advance. The CMS also allowed them to personalize the experience by creating variations for different user cohorts.
We implemented Webhooks to post data to various Grofers endpoints on creating and updating a layout. This allowed us to integrate the CMS with other systems to automate tasks and improve efficiency.
By using Drupal 8, Grofers has been able to increase the productivity and communication of its marketing team by giving them the ability to control layout, content, and widgets without development help. The teams were able to reduce the content roll-out time and make changes quickly and easily.
Drupal CMS improved personalization by giving the marketing team the ability to run experiments and personalize experiences for different user cohorts. The CMS canhandle high traffic without any outages or issues, as demonstrated during the GOBD traffic.