Bluewatt - een innovatieve app voor oplaadpunten voor elektrische voertuigen

Bluewatt, een startup uit Stockholm, wilde een revolutie teweegbrengen in de oplaadindustrie voor elektrische voertuigen (EV) door een platform te creëren dat zou functioneren als een Airbnb voor autoladers. De visie was om EV-eigenaren in staat te stellen om oplaadstations gemakkelijk te vinden en te gebruiken, terwijl particuliere eigenaren van oplaadstations hun bezittingen konden verhuren. In 2021 werkte Bluewatt samen met UKAD om dit innovatieve idee tot leven te brengen, waarbij gebruik werd gemaakt van UKAD's expertise in React Native ontwikkeling, UI/UX ontwerp en bedrijfsanalyse.

Bluewatt begon aan het project met slechts een concept en de vastberadenheid om een naadloze gebruikerservaring te creëren. Er ontstonden verschillende uitdagingen:

1. Verkennende fase: Bluewatt ging het project in met alleen een concept. De eerste uitdaging was een verkennende fase, waarin UKAD nauw samenwerkte met de klant om ideeën te brainstormen, gebruikersstromen te definiëren en de algehele visie te verfijnen. Deze samenwerking was cruciaal bij het leggen van de basis voor een volledig functioneel platform en zorgde ervoor dat elk aspect van de app in lijn was met de innovatieve doelen van Bluewatt.

2. Complexe UX-eisen: De app moest niet alleen functioneel zijn, maar ook intuïtief en visueel aantrekkelijk. Dit was essentieel voor de kernfuncties, zoals het boeken van oplaadslots en het navigeren door een geïntegreerde kaart.

3. Cross-platform consistentie: Daarnaast moest deze applicatie cross-platform zijn, wat betekent dat zowel iOS- als Android-platforms soepel moesten functioneren met behulp van één codebasis.

4. Integratie van diensten van derden: Een essentieel onderdeel van de ontwikkeling was de integratie van diensten van derden zoals Stripe om betalingen te verwerken en een naadloze interactie tussen gebruikers, stationseigenaren en de app te garanderen.

5. Coördinatie met interne ontwikkeling: Terwijl UKAD verantwoordelijk was voor de frontend, beheerde Bluewatt's interne team de backend met behulp van Node.js. Effectieve coördinatie tussen deze teams was cruciaal voor het succes van het project.

Oplossingen

UKAD leverde uitgebreide oplossingen op maat van de behoeften van Bluewatt:

1. Ontwerp en UI/UX-ontwikkeling:

   • Initieel ontwerp en branding: Ons team startte het project door een ontwerp te maken op basis van de UX-visie van Bluewatt. Na discussies werd het ontwerp afgerond met behulp van een blauw kleurenpalet en IBM Plex Sans lettertype. Deze combinatie zorgde voor een evenwichtig, sterk en streng genoeg ontwerp, maar tegelijkertijd heeft het een ritmische en dynamische esthetiek die goed past bij de bibliotheek met Material iconen.
   • Ontwerp gebruikersinterface: Onze UX-ontwerper verwerkte uitgestrekte, lichte schaduwen in het UI-ontwerp om een gevoel van mobiliteit en lichtheid op te roepen. Omdat de kaart een essentieel onderdeel van de app was, besloten we een verhoogde lay-out van de elementen bovenop de kaart te gebruiken. Alle elementen waren dus niet aan de rand van het scherm bevestigd; in plaats daarvan hingen de UI-elementen bovenop de kaart.
   • Gebruikersstromen: Onze UX richtte zich op het creëren van intuïtieve flows voor cruciale gebruikersacties, zoals registratie, onboarding, het zoeken en boeken van oplaadstations, het beheren van oplaadsessies, feedback en het afhandelen van betalingen. Deze flows zorgden voor gebruiksgemak en een naadloze gebruikerservaring.

2. React Native ontwikkeling:

   UKAD ontwikkelde de app met React Native, waarmee efficiënte cross-platform implementatie op iOS en Android mogelijk is. Deze keuze zorgt voor consistente prestaties en gebruikerservaring op verschillende apparaten.

   • Integratie van kaarten: Met behulp van het react-native-maps pakket ontwikkelden we een intuïtieve kaartinterface waar gebruikers oplaadstations konden zoeken en selecteren. De kaartinterface was ontworpen om interactief en eenvoudig te navigeren te zijn, met functies zoals Markers en Polygonen geïntegreerd als kinderen van het MapView component.
   • Formulierverwerking en -validatie: Voor het afhandelen van formulieren en het valideren van gegevens hebben we gebruik gemaakt van de pakketten formik en yup. Deze tools stroomlijnden het verzamelen van gebruikersinvoer en het validatieproces, waardoor de algehele gebruikerservaring werd verbeterd.
   • Toestandsbeheer: Om de toestand van de applicatie effectief te beheren, hebben we redux en redux-thunk gebruikt. Deze tools zorgden ervoor dat de gegevensopslag op de UI consistent en responsief was, wat een soepele gebruikerservaring opleverde, zelfs als de app complexe interacties afhandelde.
   • Foutopsporing: Voor robuuste foutopsporing en -rapportage integreerde onze ontwikkelaar @react-native-firebase/crashlytics en @sentry/react-native, zodat problemen snel werden opgespoord en aangepakt.

3. Integratie van betalingen:

   • We hebben met succes het betalingssysteem van Stripe geïmplementeerd met behulp van het @stripe/stripe-react-native-pakket, waardoor gebruikers gemakkelijk kunnen betalen voor oplaadsessies direct via de app. Deze integratie was essentieel voor de functionaliteit van de app en zorgde voor soepele financiële transacties tussen gebruikers en eigenaren van laadstations.

De samenwerking tussen Bluewatt en UKAD leidde tot de succesvolle lancering van een POC in 2021, die talrijke positieve beoordelingen ontving voor zijn gebruiksvriendelijke interface en naadloze functionaliteit. De app stelde EV-eigenaren in staat om gemakkelijk oplaadstations te vinden en te boeken, terwijl de transacties vlot verliepen. Ondanks het aanvankelijke succes en de validatie van het concept slaagde het project er niet in voldoende investeringen te krijgen om de offline aspecten van het bedrijf op te schalen, wat leidde tot de sluiting ervan. Desalniettemin toonde het project aan dat UKAD in staat is om complexe ideeën om te zetten in functionele, goed ontworpen applicaties en het benadrukte de waarde van UKAD's React Native ontwikkeling, UI/UX ontwerp en bedrijfsanalyseservices.