Smile English School

Сайт школы английского языка

Цель:  Сделать полный редизайн сайта

Предыстория

Школа Smile English School обратилась к нам, когда у неё уже был сайт, сделанный другой фирмой. Но после разработки сайта фирма куда-то исчезла, а сайт школы нужно было развивать. Поэтому Школа обратилась к нам за помощью - мы занялись поддержанием работы старого сайта и внедрением в него новых функций.

Но со временем стало очевидно, что со старым сайтом пора расставаться. Многие страницы содержали много визуального шума, иерархия страниц местами выглядела нелогично, сайт не был адаптирован для мобильных платформ, а многие дизайн-решения предыдущих сайтостроителей вызывали большие вопросы. 

Так было принято решение переработать сайт с нуля. 

Структура сайта

Старый сайт обладал рядом навигационных проблем. Например, чтобы посмотреть курсы для взрослых или для детей, было необходимо спуститься на третий уровень иерархии. Некоторые посетители не справлялись с этой задачей и терялись в промежуточных разделах, поэтому мы подняли страницы "Детям" и "Взрослым" в главное меню, сделав их доступными в один клик. Мы устранили все барьеры на пути к важной информации.

Шапка сайта сделана максимально воздушной, в ней размещены телефоны офисов и кнопка для отправления заявки в Школу. 

SmileEnglish Header
Шапка сайта. Навигация сделана максимально простой.

Подвал был полностью переработан. В нём мы разместили ссылки на самые важные страницы сайта, а также ссылки на соцсети. Помимо этого, он стал играть важную функциональную роль для клиентов школы: в подвале размещены адреса всех офисов компании в виде ссылок. При переходе по ссылкам можно перейти в раздел контактной информации, где можно посмотреть интерактивную карту с адресами и телефонами всех офисов. 

SmileEnglish Footer
Подвал содержит ссылки на все важные страницы, включая ссылки на подробные описания офисов

Главная 

Главная страницу мы реализовали в виде классической посадочной страницы (landing page). Иконки, красивые фотографии и краткие, но ёмкие тексты призваны привлечь пользователей и объяснить им преимущества обучения в школе. Сайт стал более интуитивным и дружелюбным для новых посетителей.

SmileEnglish Home Page elements
Элементы главной страницы

Страницы курсов

Smile English School предлает широкий спектр образовательных курсов как для взрослых, так и для детей. Мы хотели, чтобы перечень курсов выглядел информативно, но при этом зрелищно. Поэтому навигацию на страницах "Детям" и "Взрослым" мы реализовали через комбинацию слайдеров и навигационных вкладок - это позволило оживить страницу, но при этом не раздуть её по вертикали.

SmileEnglish Visual Navigation
Визуальная навигация

Основное достоинство этого решения - оно автоматически масштабируется в зависимости от размера устройства. Например, если вы зайдёте на страницу курсов на ноутбуке, три основные программы будут показываться в один ряд по горизонтали.

Но на небольших экранах все три курса не уместились бы, и поэтому на мобильниках строчка с программами автоматически превращается в слайдер, который можно прокручивать "свайпом" или стрелочками.

SmileEnglish slider md
Слайдерная навигация на экранах среднего размера (некоторые планшеты и ноутбуки)

И чем меньше устройство, тем компактнее слайдер

SmileEnglish slider xs
Слайдерная навигация на малых экранах (мобильники)

Цены

smileenglish.ru - страница цен 2
Блок цен

Для цен мы использовали аналогичное решение. Пользователь может отфильтровать, какие именно занятия его интересуют. Если он зайдёт на страницу с мобильного устройства, то блок цен автоматически превращается в слайдер.

SmileEnglish price xs 2
Так цены выглядят на мобильных телефонах

Адаптивная вёрстка

Приведённые выше примеры наглядно показывают, какие технические решения позволяют нашим сайтам хорошо выглядеть на всех устройствах. Все наши сайты мы делаем с помощью адаптивной вёрстки, что делает их красивыми и удобными как на компьютерах, так и на планшетах и мобильниках. 

Стилистические решения

Старый сайт изобиловал громоздкими боковыми панелями, всплывающими элементами и другими "дизайнизмами", которые мешали комфортному восприятию сайта. Все лишние элементы мы убрали и сделали сайт воздушным и лёгким. Мы подобрали шрифты, которые хорошо читаются на любых экранах, что упростило тексты для восприятия.

SmileEnglish old home 2
Старый сайт был перегружен визуальным шумом

Интеграция технологий

Школа Smile English - это современный бизнес, а современному бизнесу требуются современные технологии. Мы реализовали множество интеграций с различными сервисами, необходимыми для эффективной работы Школы: 

  • Заявки клиентов отправляются в CRM-систему, чтобы администраторам было удобно с ними работать; 
  • Пользователи могут подписаться через сайт на почтовую рассылку; 
  • Оплатить занятия можно через форму на сайте (подключена интеграция с Яндекс.Деньгами); 
  • Все звонки клиентов проходят через цифровую АТС, автоматически регистрирующую обращения в CRM.

Выводы

Хотите быть такими же прогрессивными? Обращайтесь к нам!