Smile English School

Website for English teaching school

https://smileenglish.ru
Goal:
Completely redesign website

Back Story

Smile English School contacted me when they already had a website built by another company. Soon after their original website was built, the company mysteriously disappeared, while the website desperately needed some improvement. The School turned to me for help, and so I started supporting the old website and introducing new features to it.

The old website - this is what the previous developers created

Eventually it became obvious that it's time to say goodbye to the old website. Many of its pages were riddled with visual noise, page hierarchy sometimes seemed illogical, the website was not adapted for mobile platforms, and most design solutions made by the previous team were questionable.

And so Smile English School asked me to redo the whole website from scratch.

Website structure

The old website had a number of navigation problems. For instance, to browse courses for adults or for children, one had to go down to the third level of page hierarchy.

Some visitors couldn't make it - they would usually get lost in other sections of the website. For that reason, I moved "For Adults" and "For Kids" pages one level up and made them available from the main menu, to make them accessible in one click.

I decided to make header as light as possible. Header contains only some general information, phone numbers and "request a callback" link.

Website Header. I significantly simplified navigation for the new website.

The footer was also redesigned from scratch. I filled it with the most important internal links, as well as links to social networks.

Aside from that, it has another important function for School clients: it contains School's office addresses. Each address is a link that leads to a full description of the office.

Footer contains all the important links, including links to detailed office descriptions.

You can easily reach "Contact us" section from there, which has an interactive map with all the important info neatly organized on a single page.

Interactive office map

Home Page

Home Page is styled as a classic landing page. Icons, eye-catching photos and short yet powerful texts attract new customers by explaining the advantages of studying at Smile English School. The website became more intuitive and user-friendly for new visitors

Home page design

Course Pages

Smile English School offers a wide spectrum of educational courses for adults and children. I wanted to make the list of courses both informative and entertaining. That's why I implemented navigation on pages "For Adults" and "For kids" as a combination of carousels and tabs, which allowed me to make it more lively and to prevent it from bloating vertically.

Visual navigation

The main advantage of this navigational solution is that it scales automatically depending on device size. For example, if you visit the course page from a laptop, the three main courses will be rendered as a single horizontal row.

However, all of these three courses wouldn't fit on smaller screens, hence the row automatically turns into a carousel, which you can scroll by swiping, dragging with mouse, or by clicking arrows on its sides.

Carousel navigation on medium-sized screens (tablets and laptops)

The smaller the device is, the more compact the carousel becomes.

Carousel navigation on small screens (mostly on cell phones)

Pricing page

I applied a similar solution for pricing page. User can filter which particular courses he is interested in.

Pricing blocks

If user visits this page from a cell phone, the price container will automatically turn into a carousel.

This is how pricing blocks are displayed on cell phones

Responsive web design

Examples above demonstrate which technical solutions allow the websites I create to look great on any device. I make all my websites responsive, which makes them both visually attractive and convenient to use on desktops, tablets, cell phones and any other devices.

Styling

The old website was full of ginormous side panels, crazy pop-up elements and other examples of bad design. I got rid of all the noisy elements and made the website light and radiant. I chose fonts that are comfortable to read on any kind of device.

Technology integration

I implemented a number of integrations with various web services which are essential for business:

  1. Client applications are sent to a CRM-system over its API, to make School's managers' lives easier
  2. Users can sign up for newsletter
  3. Users can pay for their courses using website (via an integration with Yandex.Money service)
  4. All phone calls from clients go through a virtual phone station, which registers all calls in a CRM system and routes them to School managers

If you like my portfolio and you would like to hire me for your project, feel free to contact me!