Works | Wingreens

Building a Multi-Brand D2C Platform for Wingreens with Headless Architecture and Persuasive UX

Company Brief

Wingreens Farms, backed by Sequoia Capital, is a fully integrated (farm to retail) food company in the business of making and selling a range of fresh, healthy, tasty and innovative food products. It is the pioneer and market leader in the category of fresh dips and pita chips. They are also the parent company of brands like Raw Pressery, Monsoon Harvest.

Wingreens approached Codilar with a vision of building an ecommerce platform for selling their products directly to consumers and replicate their success in the new digital ventures as well.

Objectives &

Wingreens realized the current Shopify platform did not have the flexibility to achieve the business objectives of the to-be-built D2C platform. They knew migration to a more powerful and flexible platform was inevitable to achieve the current and future plans.

Solution Approach

We knew we were going to be part of something very big, right from our first meeting with ALDO. Adobe Commerce was the no-brainer solution that ALDO needed which could address all their key objectives. Sheer power and flexibility of Adobe Commerce also ensured that it could satiate the future requirements.

We had very short time and had to align all key stakeholders to the project to dig out deep insights and make the project a thumping success.


Our team of Solution Specialists and Business Analysts flew to Singapore for in-person brainstorming with all the key stakeholders. We pulled in people from all Marketing, Brand, Technology and Management and had rigorous sessions to capture priceless insights. We had to ensure all the teams were aligned to the ambitious goal.

6 Weeks Project Plan

We charted out a 6 weeks plan with 3 sprints of 2 weeks each for designing, developing and launching the first Singapore website. The team formation consisted of Product Owner, UX Designer, Magento Backend Developers, Magento Frontend Developers, QA and Scrum-master.


Modular & Scalable Design System

Scalability was critical for Wingreens especially considering their acquisition spree. To achieve this.we created a lean and minimal design system that would dictate the standards for page elements, styles and components while facilitating smooth checkout experience.

The design system ensured

  • Improved usability through a consistent interface
  • Eliminating the need for redesign in the future
  • Simplification of the development and test cycles
  • Reusability of page elements and components
Building the basics with an 8px grid
Pixel perfect rendering is everything, and an 8px system adapts beautifully across multiple devices and screens with varying aspect ratios and PPI. It also works on both iOS and Android, making layouts flexible, consistent and almost invisible, and placing the focus purely on the customer’s shopping experience.
Creating a strong visual hierarchy

For immersive shopping, our visual design had to be intentionally minimal and easy to understand. We created a design language with clear hierarchy and CTAs to enable this and used familiar Iconography for simpler navigation. The new design language was geared to enhance product focus and improve readability.

Adobe Commerce Cloud with Headless Architecture

We chose Adobe Commerce Cloud as the commerce engine for Wingreens considering the power and flexibility the business needed to cater to its current and future requirements. We built the frontend on NexPWA, Codilar’s proprietary PWA Solution which is written in ReactJS. We leveraged the inbuilt GraphQL api and also wrote custom ones to integrate the decoupled frontend and Adobe Commerce backend.

PWA with Lightning Speed

We enabled Progressive Web App capabilities to the frontend leveraging the out-of-the-box features of NexPWA. The PWA offered a mobile-app like experience to the users and also enabled the users to install on their home screen. Also the pages could now load at lightning fast speeds in under 200ms.

Zipcode based availability

Since some of the Wingreens products are perishable, we developed algorithms to check if a product can be shipped to a customer based on the customer location, warehouse location and time to deliver by the logistics partner. Customers can add such products to cart only if it passes through the algorithms. For example, if a customer ordered multiple products from one of the islands in Indonesia, the staff could easily assign the order, create internal transfers, print labels, request for pick-up etc from within the Adobe Commerce platform itself.

Multi-brand Experience

As the new WingreensWorld platform was an umbrella of different brands, it was important to customize the experience for each brand, as the product categories could be totally different. We developed theme-based Product Listing Pages and Product Detail Pages and enabled them depending on the brand and the product type.


We implemented bi-directional integration between the Adobe Commerce platform and the 2 major marketplace platforms Lazada and Shopee. This helped the Wingreens team to further increase stock efficiencies and orchestrate orders across all the 3 channels: Stores, Marketplaces and Ecommerce.

Magento Projects


A reliable, young and vibrant team, guided by seasoned tech leads and architects, is Codilar. We have customized Magento to the highest level to suffice our business needs within a short frame of time. Without Codilar, it would have been improbable…Thanks”

Vijay G
Head of IT, Jaygee Group of Companies


Rising Star Partner of the Year

Codilar won this award as an agency for the successful implementation of ALDO project.

Adobe Experience Maker of the Year 2021

ALDO reaches the Top 3 finalist for the Experience Maker award as an Adobe Commerce merchant, nominated by Codilar.


Request PWA Demo