Foodbag is one of the largest players in Belgium when it comes to mealboxes. They focus on high quality and local food providers and have a team of in-house chefs who create amazing dishes. Customers can select a number of dishes every week in several delicious categories which will be home delivered with fresh ingredients and clear preparation instructions.

They came to us in 2022 with the question if we could help them develop a mobile app for their business. Our first challenge was understanding how to integrate with their operational backbone. Their business relies on a sophisticated Salesforce ERP system managing everything from inventory and supplier relationships to customer orders and delivery logistics. With thousands of weekly orders and a complex network of local food providers, we needed to ensure our solution could seamlessly plug into this ecosystem without disrupting their day-to-day operations.

Our team worked closely with Foodbag's stakeholders to design an integration approach that struck the perfect balance between security and scalability. We developed a flexible backend architecture that not only connected reliably with their Salesforce environment but was also built to handle future growth.

Designing the Foodbag mobile app meant finding the right balance between new and familiar. Many customers were already used to the mobile website and had their own ways of using it. We wanted to make things better without changing too much of what people already liked. Our team used well-known design patterns that users expect from modern day applications - things like consistent navigation, clear visual feedback, and intuitive gestures.

We carefully adapted the website's ordering experience for mobile, ensuring everything worked seamlessly despite the smaller screen constraints. By combining established mobile best practices with what made Foodbag special, we kept the parts that users valued while making everything simpler and more user-friendly.

The result was an app that felt both current and familiar – giving existing customers an improved experience that met the expectations of today's app users while remaining easy for newcomers to understand. By focusing on cutting-edge UI design and straightforward navigation, we created an app that showcased Foodbag's offerings while making the ordering process smoother than ever, helping propel Foodbag confidently into the mobile-first world.

Mobile App Development

For the development of Foodbag's mobile app, we chose React Native as our framework of choice, allowing us to efficiently build for both iOS and Android platforms simultaneously. The development process was highly collaborative, with the Foodbag team deeply involved every step of the way. We established a tight feedback loop where new features and updates were regularly shared, tested, and refined based on their input. This iterative approach meant that issues were caught early and the app continuously evolved to better meet both business requirements and user needs.

After months of dedicated work, including rigorous testing across different devices and scenarios, the app was released in August 2023. The effort seemed to have paid off - not only was the initial reception from users overwhelmingly positive, but Foodbag also reached record order numbers in the weeks following the release. The seamless mobile experience clearly resonated with both existing customers and newcomers, validating our approach and the close partnership we maintained with the Foodbag team throughout the development journey.

Our approach to the website redesign built upon our mobile app strategy – keeping familiar navigation patterns while introducing modern touches for a more intuitive experience. However, the website project was significantly larger in scope and carried higher stakes, as it serves as Foodbag's primary business driver.

From a design perspective, this project required extensive collaboration. We essentially built a team that bridged business, design, and development to elevate the Foodbag website experience. We began by migrating existing designs from Adobe XD to Figma, which offered greater flexibility, enabled the creation of component libraries, and streamlined the development handoff process.

With dozens of pages requiring careful consideration, we established a cohesive design system to ensure consistent use of components, color palettes, and typography throughout the site. This foundation allowed us to take a deep dive into UX, systematically redesigning the entire web experience in close partnership with Foodbag's head of marketing and their team.

We developed a flexible content block system that empowered Foodbag's marketing team to build new pages and edit existing content without developer assistance. This gave them unprecedented control over their digital presence while maintaining design consistency across the site.

Our collaborative approach resulted in multiple iterations as we fine-tuned the user experience based on stakeholder feedback and user testing. No detail was overlooked in creating a refined and seamless experience. The investment in this detailed process paid off, delivering a website that looked visually cohesive with the app while providing both an improved experience for customers and a powerful marketing tool for the Foodbag team.

Fully custom e-commerce website development

The website development phase presented an exciting but difficult technical challenge. We chose NextJS as our frontend framework to prioritize server-side rendering (SSR) capabilities, which provided significant SEO advantages crucial for Foodbag's online visibility. NextJS also allowed us to implement various caching strategies for faster loading times, all supported by a strong and active community that ensured we were using current best practices.

For content management, we implemented Strapi – an open-source, flexible CMS that gave Foodbag's team the control they needed while providing developers with a robust API. This combination of technologies created a solid foundation for the site's performance and maintainability. Our development approach mirrored the collaborative process we established with the app, but with an intensified parallel workflow, since we were under a deadline to release the new website. We tested and refined completed units with the Foodbag team while simultaneously developing other sections, allowing us to maintain quality while accelerating delivery.

The stakes were considerably higher for the website compared to the app launch. While the app started from zero users, the Foodbag website already served millions of pageviews monthly with over 100,000 unique monthly visitors. To ensure the new site could handle this traffic and future growth, we implemented comprehensive load testing using Locust, simulating various user scenarios and traffic patterns. Our infrastructure leveraged Google Cloud to create a scalable, containerized backend that could automatically adjust resources based on demand. This meticulous attention to performance and scalability ensured that when we flipped the switch to the new website, Foodbag's customers experienced a seamless transition with improved speed and reliability.

The new website launch was a success, with a smooth transition process and positive reception from users. Before delivering and releasing the website we took steps to ensure Foodbag would not be dependent on us by helping them establish their own internal development team. Throughout the website project, we worked to onboard their team members, sharing knowledge and best practices that would allow them to take ownership of their digital platforms. This approach ensured Foodbag maintained full control of their systems while we transitioned to a supporting role.

It was an intense but incredibly rewarding experience for our team to see our code powering a platform that helps thousands of Belgian families access fresh, local, healthy, and delicious food each week. The technical challenges, tight deadlines, and collaborative process all contributed to a project we're deeply proud of. We look forward to continuing our support of Foodbag's software stack in the months and years ahead, helping them evolve their digital presence as their business grows and customer needs change.

PS: If you made it all the way to the end of the story, feel free to treat yourself to some healthy and savory meals on foodbag.be