6 apps. 1 codebase. Van lage beoordelingen naar marktleider op de mobiele markt.

Intergamma is het moederbedrijf van GAMMA Nederland, GAMMA België en Karwei; samen goed voor bijna 400 winkels en meer dan 10.000 medewerkers. Als marktleider in de doe-het-zelfsector in de Benelux hadden ze hun zaken zowel online als offline goed op orde. Op mobiel vlak lag dat anders: bestaande apps werden slecht beoordeeld, de codebase was gefragmenteerd en er ontbrak een samenhangende strategie om klanten via de app door een volledig project te begeleiden.

De uitdaging was veelzijdig. Het betrof drie merken, elk met een eigen propositie, visuele identiteit en doelgroep, die echter dezelfde behoefte hadden aan een technische basis die het onderhoud vereenvoudigt en de ontwikkeling versnelt, voor zowel iOS als Android.

Elements kreeg de opdracht om de volledige mobiele strategie te ontwikkelen, de apps volledig opnieuw op te bouwen en de ontwikkelomgeving voor de lange termijn in te richten.

Een mobiele strategie rondom de doe-het-zelf-reis

Samen met Soda Studio ontwikkelden we een mobiele strategie op basis van gebruikersonderzoek: interviews, winkelbezoeken en het in kaart brengen van het volledige scala aan doe-het-zelfactiviteiten. Het resultaat was een 'user journey' van zes stappen, van het eerste projectidee tot de uiteindelijke voltooiing. Die reis vormt de ruggengraat van de apps en bepaalt welke functies in elke fase zichtbaar zijn.

Eén technische basis voor drie merken en zes apps

We herbouwden alle apps in React Native met een gedeelde codebase voor GAMMA NL, GAMMA BE en Karwei. Dankzij 'feature flags' kan functionaliteit per merk worden in- of uitgeschakeld zonder de kerncode aan te passen. Een uitgebreid Figma-designsysteem, ontwikkeld in samenwerking met Soda, zorgt ervoor dat elk merk zijn eigen visuele identiteit behoudt, terwijl ontwerpers en ontwikkelaars werken vanuit één centrale bron van waarheid.

CI/CD-inrichting voor snelle releases met kwaliteitscontrole

Naast de apps zetten we de volledige mobiele ontwikkelomgeving op: GitHub, CircleCI en Fastlane voor geautomatiseerd bouwen, testen en releasen. Aan elke update gaat gebruikersonderzoek via Milkshake Research vooraf, zodat releases gebaseerd zijn op daadwerkelijk gedrag in plaats van aannames.

Waarom React Native en waarom één gedeelde codebase?

Drie merken, twee platforms, continue doorontwikkeling: een native aanpak zou de onderhoudslast hebben verdrievoudigd, zonder dat de gebruiker daar iets van zou merken. React Native bood de vereiste prestaties en 'native' gebruikerservaring, gecombineerd met de efficiëntie van een gedeelde kern.

De lastigere vraag was hoe je drie merken met elk een eigen identiteit vanuit één codebase kon bedienen, zonder concessies te doen. Het antwoord ligt in de architectuur: een solide, gedeelde kern voor navigatie, datastromen, analytics en foutafhandeling, gecombineerd met 'feature flags' per merk en een systeem van 'design tokens'. Elk merk behoudt zijn eigen uitstraling. Eén team onderhoudt één codebase.

Intergamma werkt samen met diverse externe partners: Soda Studio voor het ontwerp, Milkshake Research voor gebruikersonderzoek, en Resoluut en Mr. Koreander voor aanvullende expertise. Elements trad op als technisch regisseur: verantwoordelijk voor architectuurbeslissingen, coördinatie tussen de verschillende partijen en het volledige beheer van de bouw- en ontwikkelomgeving. Ook na de lancering van de MVP bleven we betrokken om nieuwe functionaliteiten toe te voegen, gebruiksgegevens te analyseren, feedback te beoordelen en elke update vóór de release via gebruikerstests te valideren.

Met feature flags kan nieuwe functionaliteit per merk, land of gebruikersgroep worden uitgerold zonder de kern van de applicatie aan te passen. De volgende stap is diepgaandere personalisatie op basis van projecthistorie en aankoopgedrag, waardoor de app bij elk gebruik relevanter wordt.