Bluewatt - en innovativ app for ladestasjoner for elbiler

Bluewatt, en Stockholm-basert oppstartsbedrift, hadde som mål å revolusjonere bransjen for lading av elbiler ved å skape en plattform som skulle fungere som en Airbnb for billadere. Visjonen var å gjøre det enkelt for elbileiere å finne og bruke ladestasjoner, samtidig som private eiere av ladestasjoner kunne leie ut eiendelene sine. I 2021 inngikk Bluewatt et samarbeid med UKAD for å realisere denne innovative ideen, og utnyttet UKADs ekspertise innen React Native-utvikling, UI/UX-design og forretningsanalyse.

Bluewatt gikk inn i prosjektet med kun et konsept og et ønske om å skape en sømløs brukeropplevelse. Det oppsto flere utfordringer:

1. Utforskende fase: Bluewatt gikk inn i prosjektet med kun et konsept. Den første utfordringen var en utforskende fase, der UKAD samarbeidet tett med kunden for å brainstorme ideer, definere brukerflyten og avgrense den overordnede visjonen. Dette samarbeidet var avgjørende for å legge grunnlaget for en fullt funksjonell plattform, og for å sikre at alle aspekter av appen var i tråd med Bluewatts innovative mål.

2. Komplekse UX-krav: Appen måtte ikke bare være funksjonell, men også intuitiv og visuelt tiltalende. Dette var avgjørende for kjernefunksjonene, som bestilling av ladeplasser og navigering på et integrert kart.

3. Konsistens på tvers av plattformer: I tillegg måtte applikasjonen være plattformuavhengig, noe som betyr at både iOS- og Android-plattformene skulle fungere problemfritt ved hjelp av én enkelt kodebase.

4. Integrering av tredjeparts tjenester: En viktig del av utviklingen var å integrere tredjepartstjenester som Stripe for å behandle betalinger og sikre sømløs interaksjon mellom brukere, stasjonseiere og appen.

5. Koordinering med intern utvikling: UKAD var ansvarlig for frontend, mens Bluewatts interne team håndterte backend ved hjelp av Node.js. Effektiv koordinering mellom disse teamene var avgjørende for at prosjektet skulle lykkes.

Løsninger

UKAD leverte omfattende løsninger som var skreddersydd for Bluewatts behov:

1. Design og UI/UX-utvikling:

   • Innledende design og merkevarebygging: Teamet vårt innledet prosjektet med å lage et designutkast basert på Bluewatts UX-visjon. Etter diskusjoner ble designet ferdigstilt med en blå fargepalett og IBM Plex Sans-skrifttype. Denne kombinasjonen ga et velbalansert, sterkt og strengt uttrykk, samtidig som det har en rytmisk og dynamisk estetikk som passer godt sammen med Material-ikonbiblioteket.
   • Design av brukergrensesnittet: UX-designeren vår innlemmet store, lette skygger i brukergrensesnittdesignet for å skape en følelse av mobilitet og letthet. Siden kartet var en viktig del av appen, bestemte vi oss for å bruke en forhøyet layout av elementene på toppen av kartet. Alle elementene var derfor ikke festet til kanten av skjermen, men hang i stedet på toppen av kartet.
   • Brukerflyt: UX-en vår fokuserte på å skape intuitive flyter for viktige brukerhandlinger, for eksempel registrering, onboarding, søk og bestilling av ladestasjoner, administrasjon av ladeøkter, tilbakemeldinger og håndtering av betalinger. Disse flytene sørget for brukervennlighet og en sømløs brukeropplevelse.

2. React Native-utvikling:

   UKAD utviklet appen ved hjelp av React Native, som muliggjør effektiv distribusjon på tvers av plattformer på iOS og Android. Dette valget sikrer konsekvent ytelse og brukeropplevelse på tvers av ulike enheter.

   • Kartintegrasjon: Ved hjelp av pakken react-native-maps utviklet vi et intuitivt kartgrensesnitt der brukerne kunne søke etter og velge ladestasjoner. Kartgrensesnittet ble designet for å være interaktivt og enkelt å navigere i, med funksjoner som markører og polygoner integrert som barn av MapView-komponenten.
   • Skjemahåndtering og validering: For å håndtere skjemaer og sikre datavalidering brukte vi formik- og yup-pakkene. Disse verktøyene strømlinjeformet innsamlingen av brukerinndata og valideringsprosessen, noe som forbedret den generelle brukeropplevelsen.
   • Tilstandshåndtering: For å administrere applikasjonstilstanden effektivt brukte vi redux og redux-thunk. Disse verktøyene sørget for at datalagringen i brukergrensesnittet var konsistent og responsiv, noe som ga en jevn brukeropplevelse selv om appen håndterte komplekse interaksjoner.
   • Feilsporing: For robust feilsporing og -rapportering integrerte utvikleren vår @react-native-firebase/crashlytics og @sentry/react-native, slik at eventuelle problemer raskt ble identifisert og løst.

3. Betalingsintegrasjon:

   • Vi implementerte Stripes betalingssystem ved hjelp av @stripe/stripe-react-native-pakken, slik at brukerne enkelt kunne betale for ladeøkter direkte gjennom appen. Denne integrasjonen var avgjørende for appens funksjonalitet, og la til rette for smidige økonomiske transaksjoner mellom brukere og eiere av ladestasjoner.

Samarbeidet mellom Bluewatt og UKAD førte til en vellykket lansering av en POC i 2021, som fikk mange positive anmeldelser for sitt brukervennlige grensesnitt og sømløse funksjonalitet. Appen gjorde det enkelt for elbileiere å finne og bestille ladestasjoner, samtidig som den la til rette for smidige transaksjoner. Til tross for den innledende suksessen og valideringen av konseptet, sikret ikke prosjektet tilstrekkelige investeringer til å skalere de offline aspektene av virksomheten, noe som førte til at det ble lagt ned. Prosjektet demonstrerte likevel UKADs evne til å omdanne komplekse ideer til funksjonelle, veldesignede applikasjoner, og fremhevet verdien av UKADs tjenester innen React Native-utvikling, UI/UX-design og forretningsanalyse.