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 & Challenges
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.
Fast & friction-less: Being a D2C platform selling food products meant the user experience has to be top-notch allowing customers to have a superfast and smooth buying journey.
Multi-brand Experience: Wingreens keeps acquiring other brands in the packaged food space. The vision for the D2C platform is to be a marketplace of such brands offering a customized experience for each brand.
Frontend freedom & scalability: The frontend needed to have the flexibility and scalability to ensure we could add multiple channels and touch-points in the future like mobile apps, kiosks, smart-watch, TV etc.
Advanced Product Bundles: Simple product bundling system to ensure merchandisers can roll out bundled options to increase AOV.
Solution Highlights
We built a headless Adobe Commerce Cloud solution with PWA capabilities designed specifically for Wingreens' multi-brand food business. Our implementation focused on fast performance, scalable architecture, zipcode-based delivery for perishable items, and seamless multi-brand experience.
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.
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.
Modular & Scalable Design System
Scalability was critical for Wingreens especially considering their acquisition spree. 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 and eliminating the need for redesign in the future.
Integrations
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.
Results
Boosted conversions with lightning fast website that loads in under 200ms thanks to NexPWA implementation.
Mobile-First UX and PWA capabilities providing a mobile-app like experience for food product purchases.
Zipcode based availability check to handle perishable items with intelligent logistics algorithms.
Scalable headless frontend on NexPWA (ReactJS) enabling multi-brand experience and future channel expansion.
Headless CMS for the merchandising team to manage content on a daily basis without depending on developers.