The Chinese University of Hong Kong (Shenzhen) 10th Anniversary Website

Challenges

The project is a representation of the university’s overall image and has set high standards for design, development quality, security, and other aspects. Additionally, the project timeline is extremely tight, with the project officially starting on September 4th and scheduled to go live on December 12th. In just three months, the whole process from creativity to design, development, integration, testing, content publishing, and deployment needs to be executed.
Technically, The Chinese University of Hong Kong (Shenzhen)'s website cluster is built using Drupal 8, and there are plans to upgrade to Drupal 10. As a newly constructed site, this project has decided to directly adopt the Drupal 10 version for development, which requires solving the data interaction between the university’s other Drupal 8 sites and the Drupal 10 anniversary site. Furthermore, the animation portion of this website includes not only common display animations but also story-led guiding animations and step-by-step interactive animations, highlighting the complexity of the animations themselves. Drupal’s data rendering is in the form of PHP+Twig templates to render pages, and this rendering method, combined with animation preprocessing, lacks a good solution for simultaneously implementing animations and carrying dynamic data on a canvas. Compared to pure front-end framework development, front-end development has higher complexity in terms of DOM binding and control, loading preprocessing, and the spatial and temporal complexity of animations.

Our Solutions

Relying on Davyin Internet Solution’s more than ten years of experience in website development, the work was divided into reasonable tasks, with multiple tasks starting in parallel. For time-consuming tasks such as design, video production, and animation, the framework was confirmed early on, and preliminary work was carried out. We adopted a 3-2-1 design strategy (that is, providing three design options, the client chooses two design directions for further exploration, and ultimately confirms one design plan) and designed and confirmed the website creativity and style within a week. At the same time, the development team had already adjusted the data interaction between the school’s existing Drupal 8 website and Drupal 10. The front-end and back-end development were completed within six weeks. In the last month, content upload and testing were carried out simultaneously, and the website was successfully launched on December 12th.

Design

We provided the university with three design concepts, including “Outstanding Achievements” presented in a traditional Chinese ink wash style, “Farsightedness” with a modern aesthetic, and “Building on the Past, Forging into the Future” combining modern art with traditional elements. After reviewing the various options, the university ultimately chose “Building on the Past, Forging into the Future” as the theme for the design and development.

Front-end

For front-end development, after thorough research, we decided to break down the content into multiple segments and integrate it with a designed animation process. We will use Blocks to customize the animation logic, carry the dynamic content, and publish it to specified pages. Furthermore, we will manage the currently split animation clips with a timeline, deeply integrating dynamic data segments to realize a complete storyline. The primary front-end technology frameworks include Tweens, Timeline, Swiper, Masonry, among others.

Back-end

For the back-end development, we upgraded the modules from each Drupal 8 site to the latest version and adjusted the module’s code in Drupal 10 to achieve compatibility between Drupal 8 and Drupal 10. At the same time, in order to meet the audit requirements, we established two audit pathways: one with a 2-steps approval process and another with a 3-steps approval process, distinguished by content types. To better handle the large number of photo displays for the anniversary celebration, we also developed a module for batch photo importing, which has been released to the Drupal community.

Outcome

After the website launched on December 12, 2023, it received numerous positive reviews. The university received blessings from people from all over the world and various sectors, and the website achieved the desired effect.