Are you struggling to turn your web app into a mobile one? Do investors want a mobile version of your app, but you're running out of time and money? You're not alone. In this article, we'll share a real-life example of how to give investors what they want without breaking the bank or wasting precious time.
The Challenge: EvTrip's Mobile App
EvTrip is an app for European electric car owners that helps them find charging stations. The company hired us to create the UI/UX design for their mobile app, which was a game-changer. But things didn't go as planned. The initial design wasn't perfect, and it took users 5 steps to accomplish their goal (find a charging station) when it should have taken only 3.
The Solution: Redesigning the Interface
We rebuilt the design system from scratch, focusing on core functions like searching and booking a charging station. We also identified areas for improvement, such as displaying different types of charging stations. After studying pictures of chargers and drawing on personal experience, we created a visually recognizable design.
Competitive Analysis: What Sets EvTrip Apart
We conducted thorough research to understand what would differentiate the EvTrip app from similar services and what it could adopt from them. Our findings led us to suggest adding features like route building, billing history, and vehicle addition, which reduced the number of steps for users.
Designing the Visual Identity
We designed a visual identity for EvTrip that included two core colors: black and yellow. We experimented with different tones, fonts, buttons, and brand elements until we found the perfect combination. The client was thrilled with the results, and we created a new brand identity to maintain UI consistency.
From Design to Development
We handed over the design files to developers in Figma, and they started coding. The client was extremely happy with the results, and we received positive feedback. But then, things took an unexpected turn. A year later, EvTrip asked us to develop their mobile app, only to discover that they had developed a web app instead.
The Compromise: Reusing the Web Version
We suggested using React Native to develop a cross-platform app, but it didn't fit into their schedule. Instead, we offered a compromise – reusing the web version and wrapping it in a mobile-like app using WebView. This allowed us to reuse most of the existing code and still meet the client's deadline.
The Benefits: A Mobile-Like App
Our solution worked like this: we installed a WebView component in the mobile app, which opened an inside 'browser' when users signed in. The rest of the app was technically a web app, but we built registration and authorization forms in React Native to ensure native push notifications.
Conclusion: Turning Your Web App into a Mobile One
Turning your web app into a mobile one doesn't have to be a daunting task. With creativity and compromise, you can give investors what they want without breaking the bank or wasting precious time. By reusing existing code and leveraging technologies like React Native and WebView, you can create a mobile-like app that meets your needs and exceeds user expectations.