Bluewatt — an innovative electric vehicle charging station app

Bluewatt, a Stockholm-based startup, aimed to revolutionize the electric vehicle (EV) charging industry by creating a platform that would function like an Airbnb for car chargers. The vision was to enable EV owners to easily locate and use charging stations while allowing private charging station owners to rent out their assets. In 2021, Bluewatt partnered with UKAD to bring this innovative idea to life, leveraging UKAD’s expertise in React Native development, UI/UX design, and business analysis.

Bluewatt entered the project with only a concept and a determination to create a seamless user experience. Several challenges arose:

1. Exploratory phase: Bluewatt entered the project with only a concept. The initial challenge was an exploratory phase, where UKAD collaborated closely with the client to brainstorm ideas, define user flows, and refine the overall vision. This collaborative effort was crucial in laying the groundwork for a fully functional platform, ensuring that every aspect of the app was aligned with Bluewatt’s innovative goals.

2. Complex UX requirements: The app needed to be not only functional but also intuitive and visually appealing. This was essential for the core features, such as booking charging slots and navigating an integrated map.

3. Cross-platform consistency: In addition, this application had to be cross-platform, meaning smooth functioning of both iOS and Android platforms using a single code base.

4. Integration of third-party services: An essential part of the development was integrating third-party services like Stripe to process payments and ensure seamless interaction between users, station owners, and the app.

5. Coordination with in-house development: While UKAD was responsible for the front end, Bluewatt’s in-house team managed the backend using Node.js. Effective coordination between these teams was crucial for the project’s success.

Solutions

UKAD delivered comprehensive solutions tailored to Bluewatt’s needs:

1. Design and UI/UX development:

   • Initial design and branding: Our team initiated the project by creating a design draft based on Bluewatt's UX vision. After discussions, the design was finalized using a blue color palette and IBM Plex Sans typeface. This combination provided a well-balanced, strong, and strict enough, but at the same time, it has rhythmic and dynamic aesthetics that fit well with the Material icons library.

   • User interface design: Our UX designer incorporated vast, light shadows into the UI design to evoke a sense of mobility and lightness. Since the map was an essential part of the app, we decided to use an elevated layout of the elements on top of the map. Hence, all the elements were not attached to the edge of the screen; instead, UI elements were hanging on top of the map.

   • User flows: Our UX focused on creating intuitive flows for crucial user actions, such as registration, onboarding, searching and booking charging stations, managing charging sessions, feedback, and handling payments. These flows ensured ease of use and a seamless user experience.

2. React Native development:

   UKAD developed the app using React Native, which allows efficient cross-platform deployment on iOS and Android. This choice ensures consistent performance and user experience across different devices.

   • Map integration: Using the react-native-maps package, we developed an intuitive map interface where users could search for and select charging stations. The map interface was designed to be interactive and easy to navigate, with features like Markers and Polygons integrated as children of the MapView component.

   • Form handling and validation: For handling forms and ensuring data validation, we utilized the formik and yup packages. These tools streamlined the user input collection and validation process, enhancing the overall user experience.

   • State management: To manage the application state effectively, we employed redux and redux-thunk. These tools ensured that data storage on the UI was consistent and responsive, providing a smooth user experience even as the app handled complex interactions.

   • Error tracking: For robust error tracking and reporting, our developer integrated @react-native-firebase/crashlytics and @sentry/react-native, ensuring any issues were quickly identified and addressed.

3. Payment integration:

   • We successfully implemented Stripe's payment system using the @stripe/stripe-react-native package, allowing users to conveniently pay for charging sessions directly through the app. This integration was essential for the app's functionality, facilitating smooth financial transactions between users and charging station owners.

The collaboration between Bluewatt and UKAD led to the successful launch of a POC in 2021, receiving numerous positive reviews for its user-friendly interface and seamless functionality. The app allowed EV owners to easily find and book charging stations while facilitating smooth transactions. Despite the initial success and validation of the concept, the project did not secure sufficient investment to scale the offline aspects of the business, leading to its closure. Nonetheless, the project demonstrated UKAD’s capabilities in turning complex ideas into functional, well-designed applications, and highlighted the value of UKAD’s React Native development, UI/UX design, and business analysis services.