The Hong Kong Trade Development Council (HKTDC) is a statutory body, established in 1966 as the international marketing arm for Hong Kong-based manufacturers, traders and service providers. They are the trade and development council for the city-state of Hong Kong, with more than 40 offices around the world, including 13 on the Chinese mainland.

The HKTDC wanted to create an unparalleled, robust and highly scalable Portal, that provides various resources on the Belt and Road Initiative (also known as “One Belt One Road” or the “Silk Road”) spearheaded by the Chinese. Ultimately, the HKTDC needed to improve the quality, functionality and reliability of their website, and decided that the best way forward was with a D8 migration.

Having consulted closely with the client, to establish deliverables, and finalize technical and functional requirements for the new site, Appnovation’s D8 team set about delivering the reimplementation of HKTDC’s Belt and Road portal.

As well as the overall Drupal migration work, a sizeable task in itself, the project also included a complete rebranding of their legacy website. Alongside this, Appnovation were tasked with implementing a wide-ranging number of new functionalities, improvements on existing functionalities, as well as migration of content from multiple sources, including internal and external web sources.

With the newly revitalized, robust and highly scalable portal, HKTDC’s brand was given a more modern and clean design.

Why Drupal was chosen: 

Drupal was already prescribed by the client, and they chose to go with Drupal 8. Although, had they not wished to go down the Drupal 8 route, we would have definitely recommended it, due to the nature of API integration, and their need for future proofing the solution.

Describe the project (goals, requirements and outcome): 

The Belt and Road initiative is a development strategy and framework launched by the Chinese Government that aims to foster growth and development between China and the rest of Eurasia. Appnovation’s D8 team was tasked with delivering the full reimplementation of HKTDC’s Belt and Road portal, including a complete rebranding of their website with new functionalities, and migration of content from different sources.

This initiative encompasses around 60 countries, and has been contrasted with trading agreements like the Trans-Pacific Partnership. HKTDC’s Belt and Road website is one of the earliest websites providing official information and resources on this large-scale initiative.

Appnovation’s D8 experts delivered the reimplementation of HKTDC’s Belt and Road portal, including complete rebranding of their legacy website with new functionalities, and migration of content from different sources including external web sources:

• Implemented new website with emphasis on Drupal 8’s core functionalities

• Clean and simple site architecture

• Content migration of 9,000+ pieces of content in multiple languages (English, simplified Chinese, traditional Chinese)

• Hosted on Acquia Cloud, allowing team to push code quickly (less than 5 minutes), and without disrupting the live website’s functionality

• Initial implementation completed within 3 weeks (for initial soft launch)

Organizations involved: 
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

Bootstrap (https://www.drupal.org/project/bootstrap)

The reason we used Bootstrap can be summed up as:- "Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.".

Admin Toolbar, Module Filter (https://www.drupal.org/project/module_filter, https://www.drupal.org/project/admin_toolbar)

As the client had never used Drupal before we wanted to make the administration some what easier to navigate hence the addition of some backend modules to the solution. This minor enhancements make a big difference to new comers to the Drupal CMS backend.

Config Split (https://www.drupal.org/project/config_split)

We used config split module to handle segmentation of "feature" config during the development cycles of the project. We only have 3 weeks effectively to create and push to production so things had to be kept in order to ensure fast paced development, feature completion cycles.

Ultimate Cron (https://www.drupal.org/project/ultimate_cron)

We needed to employ ultimate cron to ensure that our custom cron jobs could run at certain times of the day as they were imported content from an existing central CMS.

Search API, Facets and Search API DB (https://www.drupal.org/project/search_api, https://www.drupal.org/project/facets)

Limited budget and time required us to use Search API with DB but at least bring to the table facets and possibility of in the future of moving into Solr or alike.

Views Data Export, CSV Serialization (https://www.drupal.org/project/csv_serialization, https://www.drupal.org/project/views_data_export)

It was necessary on this project to provide a mechanism for exporting users to import into a in-house email marketing tool and this was achieved easily using the views data export module.

Along side this we were required to provide CSV exports of data of projects for user consumption; this feature was enabled through implementation of the CSV serialization module which is used by views data export anyway, savings us time to implement on this feature.

Webform (https://www.drupal.org/project/webform, https://www.drupal.org/project/webform_ui)

Webform module was key to providing various forms for communication with HKTDC backend office staff. The capabilities of webform allowed us to take existing hardcoded forms and revamp to "dynamic" managed forms very easily and in 3 languages including English, Simple and Traditional Chinese. With is powerful config management; and plugin architecture would could extend were necessary for additional feature handling easily.

A great module which will feature heavily in forms for future projects.

Default Content (https://www.drupal.org/project/default_content, https://www.drupal.org/project/default_content_extra)

Default content module was instrumental to us for being able to manage "static" content which could be pre-loaded into a freshly built site or transported to various environments intact.

Page Manager (https://www.drupal.org/project/page_manager)

In order to provide future proofing and ability for client to extend layout in future Page manager was used for key pages on the website i.e. homepage and section pages.

IMCE (https://www.drupal.org/project/imce)

At time of building the website, the media module was not quite stable enough so we opted to move forward with IMCE for media, file management solution. Editors are able to upload, find and attached images to WYSIWYG fields which has served the solution well thus far.

Project team: 

Phase 1

John Macpherson (Project Manager)
Colin McClure (TL / Senior Developer)
Paulo Gomes (Senior Developer)
Makan Houston (Senior FE developer)
Shiva Tangella (Quality Assurance)

Phase 2

Victoria Marcos (Project Manager)
Swapna Pawan (Business Analyst)
Paulo Gomes (TL / Senior Developer)
Colin McClure (TL / Senior Developer)
Ian Clelland (DevOps / AWS Infrastructure)
Alex Farr (Senior Developer)
Oliver Davies (Senior Developer)
Makan (Senior FE Developer)
Shiva Tangella (Quality Assurance)

Drupal 8 Mobile First
D8 Search Functionality
D8 Development
D8 Functionality
D8 Development HKTDC
D8 Development Project HKTDC County Profile
HKTDC D8 Development Project

Comments