With Drupal 8 CMS and React as core technologies, HyChinese has a complete revamp of its website, bring a more customized experience with a bounty of certified recommendation on where to stay, eat and visit during your trip.

China is the world’s largest outbound tourism source market, with 62.03 million of Chinese nationals traveling abroad and spending USD 109.8 billion. This flow of tourists demands reputable sources for outbound travel recommendations that are dedicated to Chinese travelers. HyChinese was created to help these travelers have the best experience when traveling abroad.

HyChinese is a dynamic website showcasing a varietyof certified hotels, restaurants, airlines, museums, etc. Its target users are Chinese travelers looking for recommendations for where to eat, stay, and visit when traveling abroad.

The certification system is what sets HyChinese apart from other travel recommendation platforms. HyChinese gives certifications to hotels and restaurants and grade them with different ratings: Gold, Jade, Red, etc. These certifications are called "Welcome China" and are developed and provided by the China Tourism Academy: whichever spots are granted with certifications from such a prestigious institution have a higher chance to be trusted and gain more customers. The criteria for these certifications are based on different benefits that these places provide, for example Chinese channels broadcast, Chinese speaking staff, Chinese payment being accepted, Chinese food availability, etc.

The Challenge

HyChinese understands that online visibility is essential to the success of its business. However, at that time, HyChinese website did not perform as it had expected. With the aim to attract more traffic, improve customer experience, as well as increasing brand awareness, HyChinese decided to have a complete revamp of its website.

For a Chinese dedicated website, HyChinese needed to adapt all the UI/UX to fit Chinese preference, bring a localized and personalized experience to Chinese travelers.

The second challenge was to manage the current database structure effectively and efficiently. HyChinese runs two websites:

B2B website: the site for HyChinese to manage its partners, including their offerings, prices, activities, etc.

B2C website: the site where users can look for information and suggestions for restaurants and hotels, etc.

With these two sites, the most challenging task was to unify and control them at once, so that any information changed in the B2B website could be automatically be updated in the B2C one. Without the proper technologies, this process takes a lot of effort and raises expenses.

The Solution

After carefully researching the user behavior, an improved design for HyChinese was proposed. Red was used as the main color for HyChinese website: this color not only reflects HyChinese brand identity but is also well-received by Chinese people for cultural reasons. Flat design, large visuals, and seamless toggle effects are the latest digital design principles that have been applied to HyChinese website.

Certifications on HyChinese are provided by the Chinese Tourism Authority and identified by a colored squared icon at the corner of each hotel, restaurant, etc. The design of those certification icons was inspired by the design of a Chinese seal, bringing a sense of trust to the customers.

In order for Chinese users to get a better experience when using the website, WeChat login was integrated. When logged in, users can have their customized profile with some interesting features. By using this feature, HyChinese serves as a “personal tour guide” and “travel diary” that follows the travelers along their trips over the years.

The first one is My footsteps. In this section, there is an interactive world map where users can click on the map of each country and mark that place as "I have visited here" or "I would like to visit here".

The "visited countries" and "would-like-to-visit" countries will be changed in color and appeared in two lists below. From the flags, users can be directed to travel recommendation for those countries.

By allowing customers to personalize their profile, this feature encourages the users to revisit HyChinese regularly to record their achievements and also plan for future trips.

HyChinese gives travel recommendations on several categories such as restaurants, hotels, theaters, museums, themed leisure parks, etc. Each category has several filters to help users choose a customized list based on certification level, destination, prices, etc.

Each recommendation will include a description and real pictures of the place, the services it provides, contact information and a map built on Leaflet. A "Book" CTA will direct the users to the relevant website where they can do the booking. Users can also add a place to their Wishlist, or leave a comment to share their opinion or previous experience.

HyChinese usually distributes vouchers to its user, with multiple benefits, depending on the deal with its partners. A blog featuring topics about traveling is also included for leads generation purpose, as well as inspiring the users during their experience with the website.

Due to the huge amount of information HyChinese is providing to its users, database management needs to be handled effectively and efficiently. HyChinese has two distinct websites, one site to manage information from its partners and the other to show publicly to its users. Making sure that information from these two sites is updated automatically is not an easy task.

To solve this problem, React was applied to develop a connection between these two sites thanks to its efficiency, flexibility, and maintainability. By implementing this connection, all information in the B2B website will be pulled to the B2C website, so that the admin does not need to manually fill in everything again in the back-end. When any content in the B2B website is changed, the content in the B2C website will be updated accordingly. This process helps HyChinese save a lot of time and effort in database management. On top of that, HyChinese website will always be updated with the most recent content, bringing a good impression to its users.

Handling database is a complicated process, but we took the challenge and completely made an automatic system that can keep the content on these two sites aligned when any changes are made on either of those.

Another pillar of the technologies that contribute to the success of HyChinese website is Drupal. The website is built with Drupal 8 as the most suitable CMS for easy management of a large amount of content. One of the Drupal developers at ITC who worked on this project, Bertrand, commented on the choice of Drupal:

"In the case of HyChinese, Drupal can perform up to its potential. Drupal allows admin to easily manage the content, which is of great help for HyChinese since the website is frequently updated with the latest information about its partners. In addition, Drupal is much prefered in terms of customization compared to other CMS. Building API to connect the back-end and front-end is also facilitated with a custom module developed for HyChinese only. With this module, different types of content created on Drupal are ensured to properly uploaded and displayed, guaranteeing the highest performance of the website."

The Result

The complete revamp has brought a brand new feeling to HyChinese website. Menus, layouts, navigations, filters, etc were carefully designed in order to optimize every step of the user journey. This new website, with interesting features and optimized UI/UX, has helped HyChinese attract more users to come searching for travel recommendation, and more partners to have their places featured on the website. Besides, HyChinese is now able to manage its sites with a consistent database. Drupal and React are the powerful technologies behind this project, transforming HyChinese website with a more comprehensive backend, and seamless connection between the database platform and the main website.