03Mobile App

1 op 1Dieet

Een dieetcoachingsbedrijf had geen digitale aanwezigheid voor hun klanten. Wij bouwden een mobiele app waarmee klanten én coaches alles op één plek konden beheren.

1op1dieet.nl
Klant
1 op 1 Dieet
Rol
Frontend Developer & UI/UX Designer
Jaar
2021 – 2022
Duur
1 schooljaar (teamproject)
Het probleem

Het bedrijf begeleidde klanten volledig persoonlijk — via WhatsApp, telefoon en papieren plannen. Er was geen centrale plek waar klanten hun voortgang konden bijhouden, coaches hun klanten konden beheren, of communicatie gestructureerd kon verlopen. Onze opdracht: bouw dat platform.

Aanpak

Voordat er één regel code werd geschreven, begonnen we in Figma. Samen met het team bracht ik de gebruikersflows in kaart: welke schermen had een klant nodig, welke een coach, en waar overlapten die? Het resultaat was een duidelijk design system dat we consistent konden doorvoeren in de hele app.

De app had twee duidelijke werelden: de klantomgeving en de coachumgeving. Klanten konden hun gewicht, waterinname en maaltijden bijhouden, recepten en voedingsplannen bekijken, en bij het eerste gebruik een onboarding-flow doorlopen die hun profiel opbouwde. Coaches zagen een dashboard met al hun klanten, konden berichten sturen en voortgang monitoren.

Bouwen in React Native met Expo betekende dat we één codebase konden gebruiken voor zowel iOS als Android. Door Expo's managed workflow te gebruiken, hielden we de development-setup eenvoudig en konden we snel itereren op basis van feedback uit het team.

Proces
01
Design system in Figma
Gebruikersflows, schermen en componenten uitgewerkt voor zowel de klant- als coachumgeving.
02
Onboarding flow
Nieuwe klanten doorlopen bij eerste gebruik een stapsgewijze intake die hun profiel en voorkeuren vastlegt.
03
Klantomgeving
Dagelijkse tracking van gewicht, water en maaltijden. Recepten en voedingsplannen inzichtelijk per gebruiker.
04
Coachdashboard
Overzicht van alle klanten, voortgang per klant, en directe berichtenflow.
Technische keuzes
📱
Cross-platform met één codebase

React Native + Expo zorgde ervoor dat we iOS en Android tegelijk konden bouwen en testen zonder twee aparte codebases te onderhouden.

React NativeExpoiOSAndroid
🎨
Design-first aanpak

Door het volledige UI/UX design in Figma te doen vóór de bouw, hadden we een duidelijk component-systeem dat consistentie in de hele app afdwong.

FigmaUI/UX DesignDesign System
👥
Twee gebruikerswerelden

De app bediende twee heel verschillende gebruikers — klant en coach — met eigen navigatie en schermen, maar gedeelde componenten en één design taal.

React NativeNavigationAuth
Resultaten
iOS + Android
Platform
Eén codebase voor beide platforms
2
Gebruikersrollen
Klant én coach in één app
Design-first
Aanpak
Volledig Figma design vóór de bouw

"Als je zelf designt én bouwt, vervalt de ruis tussen designer en developer. Dat levert snellere beslissingen en een consistenter eindresultaat op."

— Luuk van Dijk, over 1 op 1 Dieet

De sterkste apps beginnen niet met code —
ze beginnen met een helder design.

💡

Design en development lopen het beste parallel, niet na elkaar. Door zelf het design te maken én te bouwen, konden we snel beslissingen nemen en hadden we geen vertalingsproblemen tussen designer en developer.

🔍

Twee gebruikersrollen in één app vraagt om scherpe keuzes in navigatiestructuur en rechtenmanagement — vroeg nadenken hierover bespaart veel refactoring later.

Expo's managed workflow is krachtig, maar kent grenzen zodra je native modules nodig hebt. Weten wanneer je die grens raakt, is waardevol.

Volgend project
VanHelder