How we helped Hoppa widen
their user base with

a new Mobile Application

01. Project Overview

Hoppa at a glance

Previously known as Resorthoppa, Hoppa is a worldwide airport centric transport provider. The company, headquartered in the UK, provides a cost-effective solution to searching, comparing, and booking transport from airports to resorts or hotels and vice versa across the world.

It compares more than 1000 transport providers so that customers can make the right choice. Customers would have the option to select taxis, cars, shuttle services, and even minibuses.

02. Project Goals

Navigating the
project goals

Hoppa had a clear vision when they approached Virtual Employee. They wanted to develop a mobile application to expand their user base. This app would help users book transport for immediate pick-up and drop along with their existing pre-booking services.

By analyzing the requirements, we developed a clear strategy for project execution. By incorporating the Agile methodology in the project cycle, our expert resource enabled swift development and easily incorporated feedback at any stage. We achieved this by establishing transparent communication using MS Teams which led to seamless app development.

Establishing project specifications

Creating app wireframe using InVision

Commencing development with React Native

Launching the hybrid application

Conducting tests using React Testing Library

03. Project Journey

How we began
our journey

Before we started the project, we established
the following app specifications:

Location tracking

Chat support

User-friendly design

Complete development

Stage 1:

By keeping these specifications in mind, we began creating the wireframe of the mobile app. We brought in our in-house designer who used InVision, an online tool to create a mock-up for app visualization.

Stage 2:

Our designer helped in creating the complete project base; starting from deciding the color palette of the app to understanding where each button would redirect. To make it easier to find the desired vehicle types, our designer implemented a color-coded categorization system based on vehicle availability. Teal was used to label the private vehicles whereas orange was used for economy vehicles and purple for luxury vehicles.

Stage 3:

We moved to the next phase of the project as soon as Joan, the Project Manager at Hoppa approved the wireframe. After app set-up, our developer utilized React Native Paper to craft the UI of the app and JavaScript for frontend development using mock-up data.
We utilized React Native to accomplish the complete coding process and build the app in command line interface (CLI) for quick development. Since various components could be easily customized in CLI, we used this to our advantage to curate the mobile app as per client's needs.

Stage 4:

With API integration, we were able to bring the app to life by connecting it with data and server. Consecutively, we also checked the functionalities of the app followed by app testing and debugging. By meeting all requirements, we were finally able to launch the mobile app.
04. Integrated Features

Assembling the
key features

Assembling the
key features

Comparative pricing

We developed a comparative pricing list to help customers compare and select any vehicle of their choice.

Geolocation

With the geolocation setting, we enabled users to select the exact location of the airport and resort for their pick-up and drop-off.

Track bookings

Two separate categories were created under this option. These enabled customers to track upcoming and past trips under each category.

Payment option

We developed a React Native library for payment integration in this app. It facilitated a seamless payment process.

24/7 help & support

By enabling an in-app chat option using the Hooks library, users could connect with Hoppa’s customer care in case of any issue.

05. Our Resource

Meet the project's
guiding force

Just like how Hoppa offers their users the right transport provider, we also provided them with a reliable resource, Rocky Verma.

Rocky is a senior developer with 7.5 years of experience in various frontend and backend technologies including React Native, PHP, ReactJS, JavaScript, etc. He has worked on multiple domains like eCommerce, Resource Management Systems, and Booking Systems.

06. Technologies Used

Gearing up with the right
technologies

As a senior developer, Rocky not only recommended specific technologies for robust app development but
also provided his suggestions on app set-up and building APIs.

Framework- React Native:

He opted for React Native since it allows the superfast performance of mobile applications. This hybrid technology enabled our developer to write one combined code that helped the app to operate in both iOS and Android. Its live reload feature helped in speeding up the development process since Joan could directly see the latest changes made to the code.

Programming Language- JavaScript:

JavaScript allowed our expert resource to speed up the client-side script since it accelerated the execution process. It further helped in the process of data validation since it could be accomplished within the browser itself.

Key libraries used:

React Navigation:

This library enabled navigation of the app from one screen to the other.

React Redux:

The React Redux library facilitated easy state management for this hybrid mobile application.

Axios:

This HTTP client library helped maintain seamless communication between the app and API.

07. Reaching the Goal

Reaching the target
destination

From selecting the right technology to incorporating the necessary features, we were able to create a mobile application exactly as required by the client. With a user-friendly interface and geolocation option, users could now book vehicles on the spot in addition to the existing pre-booking facility.

Discover the secret
to our clients’ success

Check out how we helped them
in multiple domains