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
