yellow sunflowers during daytime

English All The Way

Case Study:

With over 20 years' experience, English All The Way (EATW) is an English tuition centre in Hong Kong, where English is a highly sought-after skill and so parents are eager to ensure their children have a good level of English for their future prospects. Having taught hundreds of students--both children and adults alike--EATW is a highly-respected and hugely successful ESL teaching centre, trusted by parents across the spectrum and endorsed by many leading schools in Hong Kong.

When the client reached out to us, the website design hadn't been updated since 2008. In fact, they were still using Microsoft Expression 4, which was discontinued in 2012. But this is a common issue with small businesses, as SME owners are busy--rightly so!--running their own business, so the digital admin gets left behind. That's where Mpowering Solutions came into play.

Background

Brief

  • Modernise the EATW website

  • Overhaul the design

  • Improve SEO performance

sunflower field under blue sky during daytime
sunflower field under blue sky during daytime
Laptop on desk with camera and mug
Laptop on desk with camera and mug

The Result

We carried out a full redesign of the website, from the front-end design such as getting rid of the frames layout and implementing a modern, familiar navigation bar, to the back-end functionality like updating the meta titles and headers for improved SEO performance. This was done fully with code, so it was more time-consuming, but it was a project we were happy to undertake!

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

Google SEO Score

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

Design

Fun, bright and energetic to reflect the EATW spirit, but remain professional, informative and educational

High score of 92

Source: Google PageSpeed

Icon of stopwatch
Icon of stopwatch

Time Taken

3 week

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

Use the slider to compare EATW's old and new homepage

Icon of gears
Icon of gears

Platform

Coded with HTML, CSS and Javascript

The Updates

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

#1

Remove frames layout and modernise design

Screenshot of old and new EATW homepage to show the change in layout from old frames to modern
Screenshot of old and new EATW homepage to show the change in layout from old frames to modern

The old EATW website was built using frames, a design tag that is now obsolete with modern HTML5. The thick borders of the frames gave the website a rigid and dated feel, immediately ageing the page.

We updated the homepage to show a conventional top navigation bar, which is comfortable and familiar to visitors and in turn instils confidence and trust, and it also makes navigating the site easy without losing screen space, which the previous side bar navigation did. We ensured the navigation bar was fixed, so it can be accessed even if they have scrolled down the page.

This design also allowed us to utilise the above the fold (ATF) space more efficiently, to immediately show the visitor what services and qualifications EATW has.

Screenshot of old and new EATW website to show consistent font and theme
Screenshot of old and new EATW website to show consistent font and theme

#2

Ensure consistency in colour and theme

EATW has a very striking colour palette of sunny yellow and green, but it wasn't well utilised on the old website other than in the logo. Furthermore, there was an inconsistency in fonts, font sizes and theme in general.

We harnessed the bright and fun colour palette, especially on the homepage, to convey the message that EATW is a fun place for students to learn English, while maintaining a sense of professionalism through consistent font faces and sizes, as well as the use of icons and graphics to convey messages in a succinct and engaging manner.

#3

Implement mobile responsiveness

Desktop and mobile screenshot of EATW homepage to show mobile responsiveness and the change in layout
Desktop and mobile screenshot of EATW homepage to show mobile responsiveness and the change in layout

With the ever-growing traffic on mobile devices, it is vital that the website is optimised for mobile viewing. The old EATW website had the same format and layout on mobile devices. Given the old frames design, it made it even harder to view and navigate on smaller, portrait-oriented mobile screens.

We ensured the design was responsive to mobile devices by tweaking the layout without losing out on important information and content. We shrunk the navigation bar into a burger menu on mobile screens, and the menu options slide smoothly into view when the menu button is clicked for slick user experience.

Screenshot of EATW Testimonials page
Screenshot of EATW Testimonials page

#4

Implement testimonials & reviews

Given EATW's outstanding history of teaching students and making a difference not just in the level of English but also students' attitude to life and etiquette, they have received hundreds of glowing testimonials and praise from both students and parents alike. However, it was never displayed onsite.

UGC is one of the most effective forms of marketing, and within that, reviews and testimonials are the best forms of UGC. Therefore, we felt it was only right for EATW to get the praise it deserves!

By displaying the testimonials onsite, it adds social proof that EATW's methodology is a success for students of various schools, background and ability, which in turn allows potential clients to make an informed decision about whether to proceed with enrolling with EATW.

Screenshot of EATW favicon and updated meta titles and descriptions
Screenshot of EATW favicon and updated meta titles and descriptions

#5

Improved SEO performance

In addition to updating the frontend of the website to make it more aesthetically modern, we implemented a lot of changes in the backend for better SEO performance. Our changes include:

  • Adding unique meta titles and meta descriptions for each webpage

  • Ensure only one H1 heading to avoid confusion

  • Adding favicon so a thumbnail image shows up on the browser tab for easy identification

  • Utilised key words such as "English teaching", "English teaching" and "ESL" within content and meta descriptions to hit high volume search terms

  • Compressing images and files for quicker loading times

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.