Foodbag is een van de grootste spelers in België op het gebied van maaltijdboxen. Ze focussen op kwalitatieve en lokale voedselleveranciers en hebben een team van in-house chefs die geweldige gerechten creëren. Klanten kunnen elke week een aantal gerechten kiezen in verschillende heerlijke categorieën die thuisbezorgd worden met verse ingrediënten en duidelijke bereidingsinstructies.

Ze kwamen in 2022 bij ons met de vraag of we hen konden helpen met het ontwikkelen van een mobiele app voor hun bedrijf. Onze eerste uitdaging was te begrijpen hoe we konden integreren met hun operationele backbone. Hun bedrijf vertrouwt op een geavanceerd Salesforce ERP-systeem dat alles beheert, van voorraad en leveranciersrelaties tot klantorders en leveringslogistiek. Met duizenden wekelijkse bestellingen en een complex netwerk van lokale voedselleveranciers, moesten we ervoor zorgen dat onze oplossing naadloos kon aansluiten op dit ecosysteem zonder hun dagelijkse activiteiten te verstoren.

Ons team werkte nauw samen met de belanghebbenden van Foodbag om een integratieaanpak te ontwerpen die de perfecte balans vond tussen veiligheid en schaalbaarheid. We ontwikkelden een flexibele backend-architectuur die niet alleen betrouwbaar verbinding maakte met hun Salesforce-omgeving, maar ook gebouwd was om toekomstige groei aan te kunnen.

Het ontwerpen van de Foodbag mobiele app betekende het vinden van de juiste balans tussen nieuw en vertrouwd. Veel klanten waren al gewend aan de mobiele website en hadden hun eigen manier om deze te gebruiken. We wilden dingen beter maken zonder te veel te veranderen aan wat mensen al leuk vonden. Ons team gebruikte bekende ontwerppatronen die gebruikers verwachten van moderne applicaties, zoals consistente navigatie, duidelijke visuele feedback en intuïtieve gebaren.

We pasten de bestelervaring van de website zorgvuldig aan voor mobiel, zodat alles naadloos werkte ondanks de beperkingen van het kleinere scherm. Door gevestigde best practices voor mobiel te combineren met wat Foodbag speciaal maakte, behielden we de onderdelen die gebruikers waardeerden terwijl we alles eenvoudiger en gebruiksvriendelijker maakten.

Het resultaat was een app die zowel actueel als vertrouwd aanvoelde - waardoor bestaande klanten een verbeterde ervaring kregen die voldeed aan de verwachtingen van hedendaagse app-gebruikers, terwijl het voor nieuwkomers makkelijk te begrijpen bleef. Door ons te richten op geavanceerd UI-ontwerp en eenvoudige navigatie, creëerden we een app die het aanbod van Foodbag liet zien en het bestelproces soepeler dan ooit maakte, waardoor Foodbag vol vertrouwen de mobile-first wereld in stapte.

Mobiele app ontwikkeling

Voor de ontwikkeling van de mobiele app van Foodbag kozen we React Native als het framework van onze keuze, waardoor we efficiënt konden bouwen voor zowel iOS als Android platforms tegelijk. Het ontwikkelproces was zeer gezamenlijk, met het team van Foodbag nauw betrokken bij elke stap. We zorgden voor een nauwe feedbackloop waarbij nieuwe functies en updates regelmatig werden gedeeld, getest en verfijnd op basis van hun input. Deze iteratieve aanpak betekende dat problemen in een vroeg stadium werden opgemerkt en dat de app zich voortdurend ontwikkelde om beter te voldoen aan zowel de zakelijke eisen als de behoeften van de gebruikers.

Na maanden van toegewijd werk, inclusief rigoureuze tests op verschillende apparaten en scenario's, werd de app in augustus 2023 uitgebracht. De inspanningen leken vruchten af te werpen - niet alleen was de eerste ontvangst van gebruikers overweldigend positief, maar Foodbag bereikte ook recordbestellingen in de weken na de release. De naadloze mobiele ervaring sloeg duidelijk aan bij zowel bestaande klanten als nieuwkomers en bevestigde onze aanpak en de nauwe samenwerking die we tijdens het ontwikkelingstraject met het Foodbag-team hebben onderhouden.

Onze aanpak voor het herontwerpen van de website bouwde voort op onze strategie voor de mobiele app: vertrouwde navigatiepatronen behouden en tegelijkertijd moderne accenten introduceren voor een meer intuïtieve ervaring. Het websiteproject was echter veel omvangrijker en stond meer op het spel, omdat het de belangrijkste zakelijke drijfveer van Foodbag is.

Vanuit een ontwerpperspectief vereiste dit project een uitgebreide samenwerking. We bouwden een team dat een brug sloeg tussen business, design en ontwikkeling om de Foodbag-website te verbeteren. We begonnen met het migreren van bestaande ontwerpen van Adobe XD naar Figma, wat meer flexibiliteit bood, het creëren van componentbibliotheken mogelijk maakte en het ontwikkelingsproces stroomlijnde.

Met tientallen pagina's die zorgvuldig overwogen moesten worden, stelden we een samenhangend ontwerpsysteem op om consistent gebruik van componenten, kleurenpaletten en typografie op de hele site te garanderen. Deze basis stelde ons in staat om een diepe duik te nemen in UX, waarbij we systematisch de hele webervaring opnieuw ontwierpen in nauwe samenwerking met het hoofd marketing van Foodbag en hun team.

We ontwikkelden een flexibel contentbloksysteem waarmee het marketingteam van Foodbag nieuwe pagina's kon maken en bestaande content kon bewerken zonder hulp van een ontwikkelaar. Dit gaf hen een ongekende controle over hun digitale aanwezigheid terwijl de consistentie van het ontwerp op de hele site behouden bleef.

Onze gezamenlijke aanpak resulteerde in meerdere iteraties waarbij we de gebruikerservaring verfijnden op basis van feedback van belanghebbenden en gebruikerstests. Geen detail werd over het hoofd gezien bij het creëren van een verfijnde en naadloze ervaring. De investering in dit gedetailleerde proces wierp zijn vruchten af en leverde een website op die visueel samenhing met de app en tegelijkertijd een verbeterde ervaring voor klanten en een krachtig marketinginstrument voor het Foodbag-team opleverde.

Ontwikkeling e-commerce website volledig op maat

De ontwikkelingsfase van de website vormde een spannende maar moeilijke technische uitdaging. We kozen NextJS als ons frontend framework om voorrang te geven aan server-side rendering (SSR) mogelijkheden, wat aanzienlijke SEO voordelen opleverde die cruciaal zijn voor de online zichtbaarheid van Foodbag. Met NextJS konden we ook verschillende cachingstrategieën implementeren voor snellere laadtijden, allemaal ondersteund door een sterke en actieve community die ervoor zorgde dat we de huidige best practices gebruikten.

Voor content management implementeerden we Strapi - een open-source, flexibel CMS dat het team van Foodbag de controle gaf die ze nodig hadden, terwijl het ontwikkelaars voorzag van een robuuste API. Deze combinatie van technologieën zorgde voor een solide basis voor de prestaties en onderhoudbaarheid van de site. Onze ontwikkelingsaanpak weerspiegelde het samenwerkingsproces dat we voor de app hadden opgezet, maar met een intensievere parallelle workflow, aangezien we onder een deadline zaten om de nieuwe website uit te brengen. We testten en verfijnden voltooide onderdelen met het Foodbag-team terwijl we tegelijkertijd andere secties ontwikkelden, waardoor we de kwaliteit konden handhaven en de levering versnellen.

De inzet was aanzienlijk hoger voor de website dan voor de lancering van de app. Terwijl de app startte met nul gebruikers, bood de Foodbag website al miljoenen pageviews per maand met meer dan 100.000 unieke maandelijkse bezoekers. Om ervoor te zorgen dat de nieuwe site dit verkeer en toekomstige groei aankon, voerden we uitgebreide belastingtests uit met Locust, waarbij we verschillende gebruikersscenario's en verkeerspatronen simuleerden. Onze infrastructuur maakte gebruik van Google Cloud om een schaalbare, gecontaineriseerde backend te creëren die automatisch resources kon aanpassen op basis van de vraag. Deze nauwgezette aandacht voor prestaties en schaalbaarheid zorgde ervoor dat toen we de schakelaar omzetten naar de nieuwe website, de klanten van Foodbag een naadloze overgang ervoeren met verbeterde snelheid en betrouwbaarheid.

De lancering van de nieuwe website was een succes, met een soepel overgangsproces en een positieve ontvangst van de gebruikers. Voordat we de website opleverden en lanceerden, namen we stappen om ervoor te zorgen dat Foodbag niet afhankelijk van ons zou zijn door hen te helpen hun eigen interne ontwikkelingsteam op te zetten. Gedurende het hele websiteproject werkten we aan het inwerken van hun teamleden, het delen van kennis en best practices, zodat ze eigenaar konden worden van hun digitale platforms. Deze aanpak zorgde ervoor dat Foodbag de volledige controle over hun systemen behield terwijl wij overgingen naar een ondersteunende rol.

Het was een intense maar ongelooflijk lonende ervaring voor ons team om te zien hoe onze code een platform aandrijft dat elke week duizenden Belgische gezinnen helpt om toegang te krijgen tot vers, lokaal, gezond en heerlijk voedsel. De technische uitdagingen, strakke deadlines en het samenwerkingsproces hebben allemaal bijgedragen aan een project waar we erg trots op zijn. We kijken ernaar uit om de software stack van Foodbag de komende maanden en jaren te blijven ondersteunen en hen te helpen hun digitale aanwezigheid verder te ontwikkelen naarmate hun bedrijf groeit en de behoeften van hun klanten veranderen.

PS: Als je het helemaal tot het einde van het verhaal hebt gered, voel je dan vrij om jezelf te trakteren op een aantal gezonde en hartige maaltijden op foodbag.be