Innovative Gamified App for Veolia Niukouyu Wetland Park

In this IT Consultis case study, we will show you our latest digital project for Veolia. It is a mobile app powered by iBeacons, React Native, and Laravel to educate visitors on ecotourism and nature protection and help Veolia and Sinopec boost social responsibility.

About The Client: Veolia

Veolia Group is one of the world-leading resource management organizations with a team of nearly 180,000 people worldwide. Overall, the Group designs and provides solutions for water, waste, and energy management to tackle humanitarian, social, and environmental issues.

With its 3 complementary business activities, Veolia helps enhance resource accessibility, preserve available resources, as well as replenish them.

Since its entry into China in the 1990s, Veolia has already covered over 80 projects in 40 cities across the country. The list includes waste management and water and energy activities.

And one of its most outstanding projects is with Sinopec, Asia's largest refiner. In 2016, Sinopec chose Veolia China to manage the whole water cycle of its enormous Yanshan petrochemicals complex in Beijing. As a result, this partnership has successfully implemented the best environmental standards on the Yanshan site.

This also includes rehabilitation programs for the wetlands of the area, leading to the introduction of the Niukouyu Wetland Park to improve the local natural ecological environment and highlight Veolia and Sinopec's social responsibility.

The park is a unique entertainment and leisure venue that processes industrial wastewater from the Yanshan plant and responsibly complies with the ecological normative.

Objectives

Veolia and Sinopec’s main goal was to bring sustainable development opportunities to the local communities. Thus, they decided to create a bespoke and interactive journey to educate visitors about ecotourism and natural habitat protection.

However, Veolia also needed a partner to consult and holistically execute that vision - a captivating digital journey within the physical environment. And this is where IT Consultis (ITC) stepped in!

To better showcase their expertise and efforts in terms of environmental protection, our team detected one main objective after a consultancy phase:

We needed to create an interactive, personalized O2O experience. As visitors move inside the physical park, we would guide and educate them throughout the journey in an engaging way. The experience would be powered by an app, connected with multiple beacons.

Solutions for Veolia

1. The Beacon Technology

The backbone of the experience is connecting a mobile app with multiple beacons.

Beacons are small, wireless transmitters that use a technology called BLE - Bluetooth Low Energy. With this protocol, they can broadcast a unique identifier to nearby smart devices and make location-based searching and interaction easier and more accurate. Once connected, the beacons would perform a programmed function.

iBeacon - a protocol developed by Apple - was selected to make this experience possible. iBeacon would interact with users’ smart devices when they come into beacon domain areas guided by GPS across the structure. When a user reaches proximity to a specific beacon, content is pushed to the dedicated app automatically.

2. The Application

As previously mentioned, users could enjoy the O2O experience via a bilingual mobile application.

When they enter a beacon-integrated area, the app would showcase content retrieved from the beacons. This could be information about a specific species in the park, quizzes, or audio recordings with which users can interact and learn more about the topics of environment and habitat.

Moreover, the app employs GPS to help users navigate beacon-integrated areas with an illustrated map of the Wetland Park. And with the help of GPS, users can receive guidance at any stage of their journey.

Additionally, users can get news and updates about Veolia or Niukouyu Wetland Park on the app’s news page.

Finally, visitors can send feedback about their journey at the end of the visit directly from the app as well as share their experience with friends on their WeChat accounts.

3. The Design

Overall, the User Interface design is simple yet eye-catching with light turquoise and white as the main colors, coupled with a clean and consistent illustration style to create a pleasant and consistent user journey.

Moreover, the app’s navigation is intuitive with a smooth, streamlined User Experience.

Besides the main app, ITC also helped create a “Lite” version for older mobile devices. The main difference is that the Lite version is not connected with GPS and the Beacon technology.

Since it displays content without connecting to beacons, it uses less data, saves space on users' phones, and works well across all network conditions.

4. The Journey

How does this work step-by-step? In particular, the user journey takes place right when the visitor enters the Park entrance and unfolds as below:

1. The user scans the QR code at the Park entrance, leading them to the App download page.
2. The Welcome Page introduces the park, the security rules, and various different features.
3. The map available on the app enables the users to locate 15 interactive areas across the wetland.
4. Once the user enters a zone covered with beacons, their phone vibrates and a push notification appears to display a specific type of content related to the area and the selected journey.
5. Next, users can enjoy quizzes that appear along with the experience.
6. At the end of the journey, visitors can leave feedback and share their experience at Niukouyu Wetland Park with their friends through WeChat.

4. The Architecture

On top of the iBeacon, the project utilized a headless architecture, featuring Laravel as the backend and React Native as the frontend framework. Therefore, this guaranteed full flexibility, scalability, and performance.

Gia, our lead front-end developer of the project, shared his thoughts:

"Our team chose React Native on the frontend and iBeacon and Laravel on the backend for Veolia Niukouyu Wetland Park to increase its visitor interactions.

Laravel was mainly used to update content (quizzes, images, and beacon information). React Native is natively cross-platform between iOS and Android. This meant that we save a large amount of time developing two platforms at the same time.

We are happy to have delivered this challenging project and helped Veolia in their educational goal."

Results

The final result is a stunning mobile application connected with iBeacon for an innovative visitor experience at Niukouyu Wetland Park.

The Beacon technology made it easy for Veolia to create an interactive learning opportunity that is both interesting and easily digestible by automatically pushing educational content to users’ smart devices throughout their journey. In turn, users could enjoy a gamified educational experience with a seamless user journey.