Chung & Ng

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

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.

Page Speed Insights

Design

Updated and modern while maintaining traditional identity

High score of 99

Source: Google

Time Taken

2 weeks

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

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.

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!

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.

The Updates

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

#1

Streamline 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.

#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

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.

#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.

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.