Inleiding

The Butler Carwash is een app die het mogelijk maakt om vanaf elke locatie een luxe carwash te bestellen. In dit artikel neem ik je mee langs de verschillende fasen die dit project heeft gekend. We kijken eerst naar hoe de samenwerking tot stand is gekomen en vervolgens werpen we een blik op de verschillende onderdelen van het proces. Van ontwerp tot ontwikkeling en uiteindelijk het publiceren richting de verschillende app stores.

Context

In maart 2020 spreken mijn opdrachtgever en ik voor het eerst af. Op het moment van afspreken was het bedrijf nog niet actief. Veel informatie zat bij de opdrachtgever verborgen en enige vorm van documentatie ontbrak. Dezelfde avond heb ik een eerste opzet van de documentatie samengesteld en opgestuurd. De opdrachtgever was hier zeer over te spreken en heeft vervolgens een tweede afspraak ingepland. We spraken af en ik herhaalde het proces: documenteren van de besproken zaken en opsturen voor feedback. Mijn opdrachtgever zag zijn idee voor het eerst tot leven komen. Na de vierde afspraak kreeg ik te horen het project te mogen uitvoeren. Het snelle handelen en direct vertalen van zijn eisen naar een overzichtelijke eerste opzet is de doorslaggevende factor geweest.

Producten

Het werd al snel duidelijk dat de applicatie niet zou kunnen bestaan zonder de ondersteuning van een aantal andere producten. Na goed overleg is de keuze gevallen op de zestal producten die hieronder staan opgesomd. Achter elk product staat de technologie benoemd die is gebruikt om het product te ontwikkelen. Wat elk product precies inhoudt wordt toegelicht tijdens het bespreken van de bijbehorende fase.

  • Interactief ontwerp (Adobe XD)
  • Backend (Firebase/Typescript/ExpessJS)
  • Mobiele gebruikersapplicatie (Flutter)
  • Mobiele werknemersapplicatie (Flutter)
  • Dashboard webapplicatie (VueJS)
  • Website (Webflow)

Ontwerpfase

Een goede voorbereiding is het halve werk! Niet bepaald, maar wel van essentieel belang om alle neuzen dezelfde kant op te krijgen. In de volgende alinea's beschrijf ik hoe de voorbereiding tot stand is gekomen en hoe dit project een uitstekende start heeft kunnen maken.

Flowcharts

Allereerst hebben we bepaald en geprioriteerd welke functionaliteiten de eerste versie van ieder product zou moeten bevatten. Op basis hiervan zijn verschillende flowcharts ontwikkeld die laten zien hoe je binnen de applicaties zal navigeren. Na een aantal feedback sessies en het verhelpen van de eerste knelpunten is vervolgens het interactieve ontwerp in het leven geroepen.

Interactief Ontwerp

Het interactieve ontwerp staat toe tussen verschillende schermen te navigeren en heeft exact hetzelfde uiterlijk als de productie versie van de applicatie. Het ontwerp laat goed zien hoe de uiteindelijk werking in elkaar steekt, hierdoor kan er in een vroeg stadium waardevolle feedback worden vergaard van testers, stakeholders en de opdrachtgever.

API-definitie

Na het vaststellen van de definitieve versie van het interactieve ontwerp ben ik aan de slag gegaan met het ontwerpen van de database. Op zorgvuldige wijze is er gekeken welke informatie belangrijk is voor verschillende gebruikers binnen de applicaties. Vervolgens is op basis hiervan een API-definitie gemaakt. Een API-definitie beschrijft precies op welke manier de applicaties toegang willen hebben tot de database en wat er moet gebeuren zodra er informatie wordt opgevraagd, opgeslagen, bewerkt of verwijderd.

Samenwerking

In verband met tijdsdruk is er besloten om de daadwerkelijke ontwikkeling van de API en het dashboard uit te besteden aan een derde partij. Deze keuze en het voorbereidende werk dat in de voorgaande stappen is uitgevoerd zorgde voor een uiterst aangename samenwerking en heeft voor beide partijen veel tijdswinst opgeleverd.

Ontwikkelfase

Na een succesvolle ontwerpfase begint het echte werk, de ontwikkeling van de producten. De fase waarin de opdrachtgever voor het eerst een tastbare versie van de applicatie in handen krijgt en ik als ontwikkelaar mijn passie mag uitoefenen. In de volgende alinea's vertel ik hoe we dit hebben aangepakt en waar we op hebben gelet. Vervolgens laat ik een aantal functionaliteiten van de gebruikersapplicatie zien waar we trots op zijn.

Implementatie

We zijn simultaan begonnen met het ontwikkelen van de gebruiksapplicatie en de API. Door gezamenlijk te concentreren op dezelfde functionaliteit kunnen moeilijkheden snel verholpen worden en kan er om de paar weken een werkend product worden opgeleverd. Hierna is het proces herhaald met de werknemersapplicatie en het dashboard.

Zonder al te veel in te gaan op de technische details is er bij elk project goed nagedacht over de volgende zaken:

  • Architectuur
  • Schaalbaarheid
  • Security
  • Unit testen
  • Integratie testen
  • CI / CD

Ook is er uitbundig gebruik gemaakt van Firebase, het 'backend as a service' framework van Google. Zaken zoals API's, databases, notificaties en hosting worden door dit framework op een effectieve en schaalbare wijze verzorgd.

Gebruikersapplicatie

Zodra de applicatie opstart wordt je begroet door het 'onboarding process'. Dit zijn een drietal schermen met een warm welkom en korte uitleg over de werking van de applicatie.

Vervolgens heb je de mogelijkheid om via e-mail, Facebook, Google of Apple in te loggen. Na het inloggen worden je gegevens opgehaald en kom je terecht op het startscherm. Vanuit dit scherm kan je direct het boekingsproces instappen of even rondkijken op de map waar jij je bevindt. Het boekingsproces start met het kiezen van je auto. Indien je nog geen auto hebt toegevoegd kan je dit via hetzelfde scherm alsnog doen. Het ophalen van auto gegevens gebeurd middels een kenteken API. Indien dit niet lukt bestaat de mogelijkheid om handmatig een auto toe te voegen.

Eenmaal op het volgende scherm kan je je locatie specificeren. Dit kan op basis van jouw favoriete locaties, huidige locatie of gegevens van een specifiek adres. Vervolgens kan je kiezen tussen de drie verschillende pakketten die The Butler Carwash aanbiedt. Zodra de keuze voor een pakket is bevestigd wordt je gevraagd een keuze te maken uit de beschikbare tijden. Deze tijden zijn gebaseerd op het aantal beschikbare werknemers, werktijden en het soort pakket.

Hierna volgt het betaalproces via iDeal, creditcard of PayPal. Zodra je hebt betaald ontvang je een bevestiging en staat de afspraak tussen je geplande afspraken. Op het moment dat een werknemer jouw opdracht accepteert krijg je een melding binnen en zie je de werknemer zijn/haar locatie. Bij het starten en afronden van de opdracht krijg je eveneens een bericht en vervolgens kan je een recensie achterlaten en/of de foto's bekijken die de werknemer voor jou gemaakt heeft.

Het tweede gedeelte van de app bestaat uit een dashboard waar je je profielgegevens kan bewerken en gemaakte afspraken in kan zien. Daarnaast biedt het dashboard ook de mogelijkheid je auto's en favoriete locaties op te slaan, contact op te nemen met de klantenservice en een mogelijkheid tot uitloggen.

Werknemersapplicatie & Dashboard

In verband met de privacy en veiligheid van het project is het helaas niet mogelijk om uitgebreid in te gaan op de functionaliteiten van deze twee producten. Wel kan ik een globale indruk geven van wat elk product kan:

Werknemersapplicatie
  • Inloggen van werknemer;
  • ophalen en accepteren van nieuwe opdrachten;
  • inzien van informatie met betrekking tot opdrachten zoals afstand, tijd en locatie;
  • navigeren richting opdrachten;
  • starten en stoppen van opdrachten;
  • voor en na foto's maken van opdrachten;
  • opdrachten en recensies bekijken.
Dashboard
  • Aanmaken, bewerken en verwijderen van gegevens;
  • statistieken bekijken met betrekking tot de dagelijkse werkzaamheden.

Productiefase

Naast het ontwerpen en ontwikkelen ben ik ook verantwoordelijk geweest voor het maken van de website en publiceren van de applicaties binnen de verschillende app stores. Google en Apple hebben elk verschillende regels waar een applicatie aan moet voldoen. Daarnaast is het slim om een aantal aantrekkelijke grafische ontwerpen te maken zodat gebruikers zien hoe mooi en functioneel de applicatie is. Dit proces hebben we succesvol af kunnen ronden en op 20 november is het project live gegaan.

Wil je de app downloaden of de website bezoeken klik dan hier. Wil je mij een bericht sturen naar aanleiding van dit project klik dan hier. Bedankt voor je tijd en interesse in mijn project!