Shun Tak Ferry Terminal in Hong Kong

Chung & Ng Consulting Engineers

Case Study:

Chung & Ng Consulting Engineers Ltd is an established engineering consultancy in Hong Kong and Asia with over 30 years of structural and civil engineering experience. With a varied portfolio of projects spanning across Asia, and their own engineering software to boot, Chung & Ng is a powerhouse in Hong Kong and Asia's engineering scene.

As much as Chung & Ng are engineering experts, they admit themselves that they are not digitally astute, and in fact, their website hadn't been touched since 2008. They've been so successful with existing clients, they didn't even need a website to draw in new business, but in this digital age, they decided they wanted to revive their website presence, and so they turned to Mpowering Solutions to bring this to life.

Background

Brief

  • Recreate their old bilingual website (English and Chinese)

  • Utilise existing content and information

  • Modernise the website design

shallow focus photo of brown ship on body of water
shallow focus photo of brown ship on body of water
Laptop on desk with camera and mug
Laptop on desk with camera and mug

The Result

We used the existing content from their previous website, but had to retype and rewrite the text as we were only provided with images and screenshots. We created a website that has a clean but clear layout while utilising Chung & Ng's company colours, and the website is now mobile responsive to keep up with modern requirements.

Icon of a speedometer with a needle
Icon of a speedometer with a needle

Page Speed Insights

Icon of pencil and ruler to denote design
Icon of pencil and ruler to denote design

Design

Updated and modern while maintaining traditional identity

High score of 99

Source: Google

Icon of stopwatch
Icon of stopwatch

Time Taken

2 weeks

Laptop on desk with camera and mug
Laptop on desk with camera and mug

Use the slider to compare Chung & Ng's old and new homepage

Icon of gears
Icon of gears

Platform

Coded with HTML, CSS and Javascript

The Process

Step 1

Convert images to usable content

Chung & Ng's website has not been updated since 2006, so much so that it actually got taken offline after Netvigator stopped web hosting. While this had no effect on their business (impressive!), they have decided they want to revive their website, and the only proof of previous content and design were various JPEGs!

This meant we couldn't just copy and paste the text from a Word or HTML document, but no matter, that didn't stop us! We typed up the English content and handwrote the Chinese version, as we needed the foundational content before we could start shaping the website.

JPEG screenshots of old Chung & Ng website
JPEG screenshots of old Chung & Ng website

Step 2

Recreate original design

The very first brief was actually to just recreate the old website based on the JPEGs and screenshots provided. Now that we had our baseline content, we began coding the website to recreate the old design and aesthetic as closely as possible, but with some tidying up.

This was also a good opportunity for us to test our coding knowledge and experiment. After all, we only started seriously learning coding in 2023!

Screenshots to show the original JPEG homepage recreated with HTML
Screenshots to show the original JPEG homepage recreated with HTML

Step 3

Redesign and modernise

The brief then evolved to a redesign to modernise the website. After all, it was last updated in 2008! We agree that the website had more potential, so we cracked our knuckles and pushed our coding to the next level to create a website that is clean, modern but still retained Chung & Ng's identity and heritage. We also made sure the website is mobile optimised, so users on-the-go or those who have accessibility challenges can have the same experience.

Screenshot of old and new Chung & Ng homepages
Screenshot of old and new Chung & Ng homepages

The Updates

A lot of changes were made, but here are some of the key updates we implemented.

#1

Streamline navigation

Screenshots of old and new Chung & Ng website to show reduction in size of navigation
Screenshots of old and new Chung & Ng website to show reduction in size of navigation

The old navigation bar took up around 30% of the browser space, making it clunky and, more importantly, reducing the space for the actual website content. We reduced the navigation to a single bar across the top so it takes up around 5% of the window, freeing up space for content display.

We also added hover effects to utilise the red and gold of the Chung & Ng brand and maintain their identity, so the hover page name highlights in gold.

Screenshot of old and new Chung & Ng website to show difference in What We Do pages
Screenshot of old and new Chung & Ng website to show difference in What We Do pages

#2

Overhaul Chung & Ng's "What We Do" page

Chung & Ng's expertise spans a wide range of services and disciplines. In their old design, it was all laid out neatly but was very text-heavy, which can cause users to lose interest, resulting in a drop in engagement.

We added dynamic hover effects on the different services, so the details appear when the user hovers over the image. Not only to add some fun and interesting interaction to the page, it enables us to provide users with as much information as possible without overwhelming them with text.

#3

Bilingual content and SEO settings

Screenshots of Chung & Ng "Software" pages in English and Chinese to show bilingual content
Screenshots of Chung & Ng "Software" pages in English and Chinese to show bilingual content

As the original website was last updated in 2008, we're pretty sure SEO was not a priority! Since we were given the website JPEGs, there was no way for us to check either. Regardless, we added meta titles and descriptions to provide search engines with the information they need.

In addition, as the website is in both English and Chinese, we made sure the meta titles and descriptions were in the respective languages to help with localisation. We also added the hreflang in the header to help with geographical targeting.

#4

Increased use of imagery

In the original Projects page, the images and the names were laid out in separate cells in a table. Great for clarity, but it resulted in too much whitespace, making the design look too simple and dated. It also wasn't very visually engaging or appealing.

By incorporating the images as a background to the project title, it engages the visual side of the brain so users can immediately visualise and understand Chung & Ng's portfolio. The gradient overlay helps the title pop, as the gradual black overlay makes the text clearly visible for all users and ensuring sufficient contrast according to WCAG standards.

Screenshot of Chung & Ng website in desktop and mobile screens
Screenshot of Chung & Ng website in desktop and mobile screens

#5

Mobile optimisation

In order to make the website fully mobile optimised, we paid close attention to the smaller viewport of different mobile phones to ensure the layout was tailored to a smaller screen. Some differences include:

  • Shrinking of navigation bar to a dropdown format on mobile

  • Change of grid layouts for better mobile viewing experience

  • Removal of decorative imagery on mobile to maximise space for relevant, important content

These changes are responsive, thus the changes in layout are automatic dependent on the device being used.

Screenshots of old and new Chung & Ng Projects page to show use of images
Screenshots of old and new Chung & Ng Projects page to show use of images

Ready for a (re)launch?

Ready to discuss your digital vision? Send us a message and see how we can help you realise your business's digital potential.