Bluewatt - en innovativ app til ladestationer til elbiler

Bluewatt, en Stockholm-baseret startup, havde til formål at revolutionere industrien for opladning af elbiler ved at skabe en platform, der ville fungere som en Airbnb for bilopladere. Visionen var at gøre det muligt for elbilejere nemt at finde og bruge ladestationer, samtidig med at private ejere af ladestationer kunne udleje deres aktiver. I 2021 indgik Bluewatt et samarbejde med UKAD for at føre denne innovative idé ud i livet og udnytte UKAD's ekspertise inden for React Native-udvikling, UI/UX-design og forretningsanalyse.

Bluewatt gik ind i projektet med kun et koncept og en vilje til at skabe en sømløs brugeroplevelse. Der opstod flere udfordringer:

1. Den undersøgende fase: Bluewatt gik ind i projektet med kun et koncept. Den første udfordring var en eksplorativ fase, hvor UKAD samarbejdede tæt med kunden om at brainstorme ideer, definere brugerflows og forfine den overordnede vision. Denne samarbejdsindsats var afgørende for at lægge grunden til en fuldt funktionel platform og sikre, at alle aspekter af appen var i overensstemmelse med Bluewatts innovative mål.

2. Komplekse UX-krav: Appen skulle ikke kun være funktionel, men også intuitiv og visuelt tiltalende. Det var afgørende for kernefunktionerne, som f.eks. booking af opladningspladser og navigation på et integreret kort.

3. Konsistens på tværs af platforme: Desuden skulle applikationen være cross-platform, hvilket betyder, at den skulle fungere problemfrit på både iOS- og Android-platforme ved hjælp af en enkelt kodebase.

4. Integration af tredjepartstjenester: En vigtig del af udviklingen var at integrere tredjepartstjenester som Stripe for at behandle betalinger og sikre problemfri interaktion mellem brugere, stationsejere og appen.

5. Koordinering med intern udvikling: Mens UKAD var ansvarlig for frontend, håndterede Bluewatts interne team backend ved hjælp af Node.js. Effektiv koordinering mellem disse teams var afgørende for projektets succes.

Løsninger

UKAD leverede omfattende løsninger, der var skræddersyet til Bluewatts behov:

1. Design og UI/UX-udvikling:

   • Indledende design og branding: Vores team indledte projektet med at lave et designudkast baseret på Bluewatts UX-vision. Efter diskussioner blev designet færdiggjort ved hjælp af en blå farvepalet og IBM Plex Sans-skrifttypen. Denne kombination gav et velafbalanceret, stærkt og stringent udtryk, men samtidig har det en rytmisk og dynamisk æstetik, der passer godt sammen med Material-ikonbiblioteket.
   • Design af brugergrænseflade: Vores UX-designer indarbejdede store, lette skygger i UI-designet for at fremkalde en følelse af mobilitet og lethed. Da kortet var en vigtig del af appen, besluttede vi at bruge et forhøjet layout af elementerne oven på kortet. Derfor var alle elementer ikke fastgjort til skærmens kant; i stedet hang UI-elementerne oven på kortet.
   • Brugerflows: Vores UX fokuserede på at skabe intuitive flows for vigtige brugerhandlinger, såsom registrering, onboarding, søgning og booking af ladestationer, styring af opladningssessioner, feedback og håndtering af betalinger. Disse flows sikrede brugervenlighed og en problemfri brugeroplevelse.

2. React Native-udvikling:

   UKAD udviklede appen ved hjælp af React Native, som giver mulighed for effektiv udrulning på tværs af platforme på iOS og Android. Dette valg sikrer ensartet ydeevne og brugeroplevelse på tværs af forskellige enheder.

   • Integration af kort: Ved hjælp af pakken react-native-maps udviklede vi en intuitiv kortgrænseflade, hvor brugerne kunne søge efter og vælge ladestationer. Kortgrænsefladen blev designet til at være interaktiv og nem at navigere i, med funktioner som markører og polygoner integreret som børn af MapView-komponenten.
   • Formularhåndtering og validering: Til håndtering af formularer og sikring af datavalidering brugte vi formik- og yup-pakkerne. Disse værktøjer strømlinede indsamlingen af brugerinput og valideringsprocessen, hvilket forbedrede den samlede brugeroplevelse.
   • Tilstandsstyring: For at styre applikationens tilstand effektivt brugte vi redux og redux-thunk. Disse værktøjer sikrede, at datalagring på brugergrænsefladen var konsekvent og responsiv, hvilket gav en jævn brugeroplevelse, selv når appen håndterede komplekse interaktioner.
   • Fejlsporing: Til robust fejlsporing og -rapportering integrerede vores udvikler @react-native-firebase/crashlytics og @sentry/react-native, hvilket sikrede, at eventuelle problemer hurtigt blev identificeret og løst.

3. Betalingsintegration:

   • Vi implementerede Stripes betalingssystem med succes ved hjælp af @stripe/stripe-react-native-pakken, så brugerne nemt kunne betale for opladningssessioner direkte via appen. Denne integration var afgørende for appens funktionalitet og muliggjorde smidige finansielle transaktioner mellem brugere og ejere af ladestationer.

Samarbejdet mellem Bluewatt og UKAD førte til en vellykket lancering af en POC i 2021, som fik mange positive anmeldelser for sin brugervenlige grænseflade og problemfri funktionalitet. Appen gjorde det muligt for elbilsejere nemt at finde og booke ladestationer og samtidig lette transaktioner. På trods af den indledende succes og validering af konceptet sikrede projektet ikke tilstrækkelig investering til at skalere offline-aspekterne af virksomheden, hvilket førte til lukning. Ikke desto mindre demonstrerede projektet UKAD's evne til at omdanne komplekse ideer til funktionelle, veldesignede applikationer og fremhævede værdien af UKAD's React Native-udvikling, UI/UX-design og forretningsanalysetjenester.