From Airport Pick-Up to Mobile App Launch: How We Built Hoppa’s Hybrid Booking Experience
Hoppa wanted a mobile app that would let travelers pre-book airport transport or arrange an immediate pick-up and drop-off. The project brought both options together in one mobile booking experience for iOS and Android.
Building it required more than adapting the service for a smaller screen. Vehicle comparison, location selection, payment, booking management, and customer support all had to work as one clear booking journey.
1. A Mobile App Only Made Sense If It Solved a Different Booking Moment
Previously known as Resorthoppa, Hoppa is a UK-headquartered transport provider operating worldwide. Its service helps travelers search, compare, and book transport between airports, resorts, and hotels.
Customers can compare more than 1,000 providers offering taxis, private cars, shuttle services, and minibuses. Hoppa wanted to reach more users by making this network available through a mobile application.
The app needed to support immediate pick-ups and drop-offs without removing the existing pre-booking facility. The challenge was therefore to add more booking flexibility while keeping the experience easy to use.
2. Four Requirements Turned a Feature List into a Booking Journey
Hoppa identified four core requirements: location tracking, chat support, a user-friendly interface, and end-to-end application development. These requirements covered the main stages of booking and managing airport transport.
Travelers needed to choose precise locations, compare available vehicles, complete their bookings, and ask for help when necessary. Defining those needs at the beginning gave the design and development work a clear direction.
3. Testing the Journey Before Writing the Code
An in-house designer used InVision to create a wireframe of the proposed application. The mock-up showed how the screens, buttons, navigation, and color palette would work before development began.
The designer also introduced a color-coded system to make vehicle categories easier to recognize. Private vehicles were labelled in teal, economy vehicles in orange, and luxury vehicles in purple.
Get Virtual Employee’s stories in your inbox
Join Medium for free to get updates from this writer.
Once Joan, Hoppa’s project manager, approved the wireframe, the project moved into development. The team followed an Agile methodology so feedback could be incorporated throughout the build, while Microsoft Teams was used for project communication.
4. React Native Supported Both Mobile Platforms
Senior developer Rocky Verma led the technical work. He brought 7.5 years of experience across React Native, PHP, ReactJS, and JavaScript, along with previous work on eCommerce platforms, resource management systems, and booking systems.
Rocky selected React Native because one combined codebase could support both iOS and Android. Its live-reload capability allowed recent changes to be viewed more quickly during development. JavaScript was used for front-end development, while React Native Paper supported the user interface. React Native CLI also allowed components to be customized around Hoppa’s requirements.
The supporting libraries each handled a specific part of the application. React Navigation enabled movement between screens, React Redux managed application state, and Axios supported communication between the app and its API.
5. Each Feature Supported a Booking Task
Comparative pricing helped customers assess different vehicles before making a choice. Geolocation then allowed them to select exact airport and resort locations for pick-up and drop-off.
After selecting a vehicle, users could complete the transaction through the integrated payment process. Separate lists for upcoming trips and past trips made future bookings easier to track and completed journeys easier to review.
The experience continued beyond payment and booking management. An in-app chat feature allowed travelers to contact Hoppa’s customer-care team whenever they needed assistance.
Together, these features created a connected sequence. Customers could compare vehicles, choose locations, pay, manage their bookings, and request help.
6. API Integration Connected the App to Its Data
After the front end had been developed, API integration connected the application with its data and server. This allowed the interface and booking functions to operate as parts of the same product.
The team then checked each function before testing and debugging the application. React Testing Library was used during the documented testing process before the cross-platform app was launched.
7. The Finished App Added More Booking Flexibility
The completed application combined a user-friendly interface with geolocation, comparative pricing, payments, booking management, and customer support. Travelers could retain the convenience of reserving transport in advance while gaining the option to book a vehicle on the spot.
The project did not simply move Hoppa’s transport service onto a mobile device. It made the booking experience better suited to the reality of travel, where some journeys are planned ahead and others require transport immediately.
Author: Team Virtual Employee
