Back

Turning web into mobile: how to save thousands of dollars on development and outsmart App Store

Reading time: 7 minutes

Mobile app development
Table of contens

    You developed a web app, but investors are waiting for a mobile one. How to give them what they want, when all that you have is two weeks and almost no money? Read the answer in the case of Purrweb and EvTrip.

    Hello, I am Sergey Nikonenko, a COO at Purrweb. We design and develop MVPs from scratch with a focus on mobile apps. 

    We regularly get requests from startupers who have projects where ‘something went wrong’. For instance, the app is done, but it didn’t soar. OR the solution is functioning, but it’s completely raw. OR there’s a truly brilliant idea but no competences to turn it into life. Usually, it all pops up when investors are about to submit the second tranche: they refuse to give money until the initial commitments are fulfilled.

    Things were different with EvTrip. At first…

    No sign of trouble: creating mobile app design

    EvTrip is an app for Europeans who own electric cars, motorbikes, and scooters — it helps them find the closest charging station.

    They hired us to create the UI/UX design for the mobile app. It was in the very beginning — our client has just received investments and started working on the first product version. They had a team of developers responsible for the coding and already implemented all features needed, plus, they made a basic layout of screens. It was supposed to act as a focus for redesigning the interface — in reality, it turned out to be pretty much useless.

    The UX part was far from perfect: it took the user 5 steps to accomplish the goal (find a charging station), while it should take only 3:

    1. Find a charging point.
    2. Choose a station.
    3. Book the station.

    That’s why we decided to rebuild the design system.

    We started with defining the core functions for the user — searching and booking a charging station. There were no problems with that, but we faced difficulties with displaying the types of charging stations.

    EvTrip has 5 types of stations with different plug types. They needed to be properly designed so that every plug was visually recognizable. Drawing on personal experience was quite a challenge: it appeared, that none of us has driven a Tesla 🙃  We worked hard, studied pictures of chargers, and in the end we made it:

    mobile app development

    Next step in the plan was competitive analysis: it let us understand what would differ the EvTrip app from similar services and what it could adopt from them. As a result of thorough research, we suggested to add:

    • an ability to build a route to a charging station, 
    • a billing, to monitor the history of all charges,
    • a function that allows adding a vehicle, so that the system would automatically offer the user a suitable plug type and a charging station that serves this type. That’s how we reduced the number of steps for the user.

    The client agreed.

    mobile app development

    When we defined the feature set, we started working on the EvTrip app’s visual design. What you see now are screenshots of the finished app, but in the beginning the colors, fonts, buttons, and other brand elements were different. We just couldn’t find the original version 🤷‍♂️

    So, we decided to use two core colors: black and yellow. Yellow is always associated with energy and black creates a strong contrast.

    mobile app development

    The client didn’t have any specific requirements regarding the logo design, so we relied on common sense and personal preferences: we tried applying different tones of yellow, different fonts, and sizes. The EvTrip team was happy with the results. We also created a new brand identity for the company — it was necessary for maintaining UI consistency.

    mobile app developmentAll possible versions of the logo for different platforms

    We made the templates in Figmahttps://www.figma.com/ and handed them off to developers — our part of the work was done. The client was extremely happy with the results: didn’t want to change anything and left positive feedback. His developers said they had all the necessary design files and started coding.

    Surprise twist – there was no mobile app

    A year later we met again — they asked us to develop the EvTrip mobile app. We were surprised to find out that rather than build a  mobile app (for which we made the design) they developed a web app.

    It turned out that their team only consisted of a web-developer and a Java developer who worked part-time. The Java dev even made a first version of the product, but then just disappeared. We don’t know why they decided not to search for a new developer. Maybe they wanted to take the easiest route — that’s why they developed the web app. The design was as close to our templates as possible.

    Anyway, they promised investors to develop the mobile app, not a web one, that’s why the investors didn’t want to submit a new tranche. It was a classic tale for us: time and money are running out, and the app really needs to be done.

    Turning web into mobile without development. Well, almost

    At first, we suggested using React Native to develop a cross-platform app — it would take 2 months. However, it didn’t fit in the client’s schedule: he had less than a month before the investor report, plus the investments were already running out.

    We offered a workable compromise — reusing the web version and wrapping it in a mobile-like app. WebView helped us do it.

    How it works: we install a WebView component in a mobile app and put there a link to the web version. When a user signs in, the mobile app opens an inside ‘browser’ and the work goes on there. Users won’t even notice that — they think they’re in the app, that is actually a browser 🙂

    In theory, we could turn the whole app into the WebView form. But we were worried that App Store and Google Play won’t approve it — usually, they quickly spot inventive devs like us and ask them to code a ‘decent’ mobile app. That’s why we built registration and authorization forms in React Native, and enabled native Push-notifications — the rest was technically a web app.

    mobile app developmentThat’s how we planned to outsmart the system. And we did it

    The hardest thing was to connect React Native with WebView — when a user signed in the mobile app, we needed to throw an access token in the web version. Practically these are two different frontend architectures, so it took some effort.

    Bonus: making offline charging stations a part of EvTrip brand identity

    After the WebView-app was successfully released, EvTrip decided that the charging points need to have the same visual style.

    Charging stations design

    EvTrip asked us to create a 3D-model of a charging station that they will produce and set up at charging points. Actually, 3D is not our specialty, but it’s a completely new experience for us. We modeled 3D objects for AR projects and interfaces a couple of times, but this time our task was to model an actual device! We were honest with the client and told him that we’ve never done that before, but we can if we have enough time. He relied on us and gave a green light.

    The first version impressed the client: it had a screen with information about the charging process and all wires were hidden under cable channels.

    mobile app development

    mobile app development

    Yet it turned out that such stations would be too expensive to produce. We offered to make the model cheaper: cut out the screen, reduce the station size, and add wires. That’s what we made:

    mobile app development

    It doesn’t look as hi-tech as the first version, but producing a charging device like that is economically reasonable. EvTrip promote it as an innovation in the field of charging devices for private use.

    User manual

    Another task was to design a banner explaining how to use the charging stations. We only had 24 hours to do that. Our client needed the banner almost ‘here and now’ to place it next to the first station.

    You may ask me: why would MVP development agency design banners? The answer is simple: during the production stage, we try to solve most of the client’s problems. We have 4 amazing graphic designers who design marketing materials for internal purposes of our company. We had to mobilize one of them urgently: the working day started at 7 a.m. instead of 11 a.m.

    To create a template, we used colors required for printing. It was important to take it into account, or else we’d get a banner with completely different color tones that don’t fit with the brand identity. Our client wrote the text himself — it greatly sped up the process.

    mobile app development

    Happy End

    So, that’s what we’ve done for EvTrip: 

    1. Developed the mobile app architecture, UI/UX design, and brand identity. 
    2. Turned the web app into the mobile app with React Native and WebView. Both Apple Store and Google Play accepted the app and it works properly.
    3. Visualized a 3D-model of a charging station and designed a user manual. 

    Nowadays EvTrip successfully works in Turin, Pinerolo, Tuscany, and other regions of Italy. They develop the chain of charging stations with the help of partners and private offline businesses with parking lots (cafes, restaurants, shops, etc.) They keep covering more and more of Italy and, possibly, will once appear in other European countries. And here is our banner!

    mobile app development

    A reminder for startupers: even if time and money are running out, it’s always possible to find a way out. Create an MVP that will convince investors that the idea is worth pursuing and turn it into a profitable product and business. By the way, the Purrweb team is waiting for you on the website and on Facebook. 😉

    Management
    • Ekaterina Strokina
    Design
    • Ilya Sablin
    Content
    • Anastasia Khmelevskaya
    With 250 startups under our belt, we’re happy to share the takeaways. Get our MVP launch checklist in your email.

    How useful was this post?

    Rate this article!

    5 ratings, аverage 4.8 out of 5.

    No votes so far! Be the first to rate this post.

    As you found this post useful...

    Follow us on social media!

    Share