Bluewatt - en innovativ app för laddningsstationer för elfordon

Bluewatt, ett Stockholmsbaserat startupbolag, hade som mål att revolutionera laddningsindustrin för elfordon genom att skapa en plattform som skulle fungera som ett Airbnb för billaddare. Visionen var att göra det möjligt för elbilsägare att enkelt hitta och använda laddstationer samtidigt som privata laddstationsägare skulle kunna hyra ut sina tillgångar. Under 2021 samarbetade Bluewatt med UKAD för att förverkliga denna innovativa idé och utnyttjade UKAD:s expertis inom React Native-utveckling, UI/UX-design och affärsanalys.

Bluewatt gick in i projektet med endast ett koncept och en beslutsamhet att skapa en sömlös användarupplevelse. Flera utmaningar uppstod:

1. Utforskande fas: Bluewatt gick in i projektet med endast ett koncept. Den första utmaningen var en utforskande fas, där UKAD samarbetade nära med kunden för att brainstorma idéer, definiera användarflöden och förfina den övergripande visionen. Detta samarbete var avgörande för att lägga grunden till en fullt fungerande plattform och säkerställa att alla aspekter av appen var i linje med Bluewatts innovativa mål.

2. Komplexa UX-krav: Appen behövde inte bara vara funktionell utan också intuitiv och visuellt tilltalande. Detta var viktigt för de centrala funktionerna, som att boka laddtider och navigera på en integrerad karta.

3. Konsistens mellan olika plattformar: Dessutom måste applikationen vara plattformsoberoende, vilket innebär att den måste fungera smidigt på både iOS- och Android-plattformar med hjälp av en enda kodbas.

4. Integration av tjänster från tredje part: En viktig del av utvecklingen var att integrera tredjepartstjänster som Stripe för att behandla betalningar och säkerställa sömlös interaktion mellan användare, stationsägare och appen.

5. Samordning med intern utveckling: UKAD ansvarade för frontend, medan Bluewatts interna team hanterade backend med hjälp av Node.js. En effektiv samordning mellan dessa team var avgörande för projektets framgång.

Lösningar

UKAD levererade heltäckande lösningar som var skräddarsydda för Bluewatts behov:

1. Design och UI/UX-utveckling:

   • Inledande design och varumärkesprofilering: Vårt team inledde projektet med att skapa ett designutkast baserat på Bluewatts UX-vision. Efter diskussioner färdigställdes designen med en blå färgpalett och typsnittet IBM Plex Sans. Den här kombinationen gav en välbalanserad, stark och strikt design, men samtidigt har den en rytmisk och dynamisk estetik som passar bra ihop med Material-ikonbiblioteket.
   • Design av användargränssnitt: Vår UX-designer införlivade stora, lätta skuggor i användargränssnittet för att framkalla en känsla av rörlighet och lätthet. Eftersom kartan var en viktig del av appen bestämde vi oss för att använda en förhöjd layout av elementen ovanpå kartan. Alla element var alltså inte fästa vid skärmens kant, utan i stället hängde de ovanpå kartan.
   • Användarflöden: Vår UX fokuserade på att skapa intuitiva flöden för viktiga användaråtgärder, t.ex. registrering, onboarding, sökning och bokning av laddstationer, hantering av laddningssessioner, feedback och hantering av betalningar. Dessa flöden säkerställde användarvänlighet och en sömlös användarupplevelse.

2. React Native-utveckling:

   UKAD utvecklade appen med hjälp av React Native, som möjliggör en effektiv plattformsoberoende driftsättning på iOS och Android. Detta val säkerställer konsekvent prestanda och användarupplevelse på olika enheter.

   • Kartintegration: Med hjälp av paketet react-native-maps utvecklade vi ett intuitivt kartgränssnitt där användarna kunde söka efter och välja laddningsstationer. Kartgränssnittet var utformat för att vara interaktivt och lättnavigerat, med funktioner som markörer och polygoner integrerade som barn till MapView-komponenten.
   • Formulärhantering och validering: För att hantera formulär och säkerställa datavalidering använde vi paketen formik och yup. Dessa verktyg effektiviserade insamlingen av användarinmatning och valideringsprocessen, vilket förbättrade den övergripande användarupplevelsen.
   • Tillståndshantering: För att hantera applikationens tillstånd på ett effektivt sätt använde vi redux och redux-thunk. Dessa verktyg säkerställde att datalagringen i användargränssnittet var konsekvent och responsiv, vilket gav en smidig användarupplevelse även när appen hanterade komplexa interaktioner.
   • Spårning av fel: För robust felspårning och rapportering integrerade vår utvecklare @react-native-firebase/crashlytics och @sentry/react-native, vilket gjorde att eventuella problem snabbt kunde identifieras och åtgärdas.

3. Betalningsintegration:

   • Vi lyckades implementera Stripes betalningssystem med hjälp av @stripe/stripe-react-native-paketet, så att användarna enkelt kan betala för laddningssessioner direkt via appen. Denna integration var avgörande för appens funktionalitet och underlättade smidiga finansiella transaktioner mellan användare och laddstationsägare.

Samarbetet mellan Bluewatt och UKAD ledde till en framgångsrik lansering av en POC 2021, som fick många positiva recensioner för sitt användarvänliga gränssnitt och sömlösa funktionalitet. Appen gjorde det möjligt för elbilsägare att enkelt hitta och boka laddstationer samtidigt som den underlättade smidiga transaktioner. Trots den inledande framgången och valideringen av konceptet lyckades projektet inte säkra tillräckliga investeringar för att skala upp offline-aspekterna av verksamheten, vilket ledde till att det lades ner. Projektet visade ändå UKAD:s förmåga att omvandla komplexa idéer till funktionella, väldesignade applikationer och belyste värdet av UKAD:s tjänster inom React Native-utveckling, UI/UX-design och affärsanalys.