Smile English School

Website for English teaching school

Goal:  Completely redesign website

Back Story

Smile English School contacted us when they already had a website built by another company. Soon after website completion, the company mysteriously disappeared, while the website desperately needed some improvement. The School turned to us for help, and thus we started supporting the old website and introducing new features to it.

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.

Thus we and Smile English School made a decision to redo the whole website from scratch.

Website structure

The old website had a number of navigation of problems. For instance, to browse courses for adults or for children, one had to go down the third level of hierarchy. Some visitors couldn't make it - they would usually get lost in other sections of the website. For that reason, we moved "For Adults" and "For Kids" pages up one level and made them available from the main menu, thus making them accessible in one click. We removed all obstacles on a way to important information.

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

SmileEnglish Header
Website header. We radically simplified navigation for the new website

The footer was completely redesigned. We 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 addresses of School's offices. Each address is a link that leads to a full description of the office. Also, 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.

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

Home Page

Home Page is styled as a classic landing page. Icons, beautiful 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

SmileEnglish Home Page elements
Home page elements

Course Pages

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

SmileEnglish Visual Navigation
Visual navigation

The main advantage of this navigational solution is that it scales automatically, depending on the 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.

SmileEnglish slider md
Carousel navigation on medium-sized screens (some tablets and laptops)

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

SmileEnglish slider xs
Carousel navigation on small screens (mostly on cell phones)

Pricing page

smileenglish.ru - страница цен 2
Pricing module

We applied a similar solution for pricing page. User can filter which particular courses he is interested in. If user visits this page from a cell phone, the price container will automatically turn into a carousel

SmileEnglish price xs 2
This is how pricing module is displayed on cell phones

Responsive web design

Examples above demonstrate which technical solutions allow our websites to look great on any device. We make all our websites responsive, which makes them beautiful 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. We got rid of all the redundant elements and made the website light and radiant. We chose fonts that are comfortable to read on any kind of device, to make reading more pleasant for customers.

SmileEnglish old home 2
The old website was full of visual noise

Technology integration

Smile English School is a modern business, and modern business needs to rely on modern technology. We implemented a number of integrations with various web services which are essential for effective operation:

  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 calls to School managers.

Conclusion

Want to have a modern beautiful website and to be as progressive as Smile English School is? Contact us!