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
- 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 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.
Workshops
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.
Solution
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
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
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.
Testimonials
Vijay G
Head of IT, Jaygee Group of Companies
Recognitions
- WINNER
Rising Star Partner of the Year
- RUNNER UP
Adobe Experience Maker of the Year 2021
Results
- Boosted conversions with lightning fast website that loads in under 200ms
- Mobile-First UX and PWA capabilities
- Zipcode based availability check to handle perishable items
- Scalable headless frontend on NexPWA (ReactJS)
- Headless CMS for the merchandising team to manage content on a daily basis without depending on developers
