Acorn learning center

Разработка сайта для сети детских учебных центров ACORN в San Francisco by Area.

acorn macbook

Задача, которая стояла перед нашей командой:

  • "Реанимировать" устаревший сайт, разработав новый современный дизайн;
  • Подобрать удобную CMS для управления сайтом;
  • Увеличить конверсию сайта, а именно, увеличить количество заявок на "бронирование тура" Учитывая учебного центра;
  • Поднять узнаваемость учебного центра и доверие родителей к бренду "ACORN".
acorn tree

Посмотреть как сайт выглядел до нашего редизайна можно ниже:

acorn site before acorn site before

Наша стратегия:

Дети для родителей - самая большая ценность, поэтому покажем на страницах нового сайта счастливых учеников центра "ACORN", это улучшит доверие родителей к нашему бренду. Когда видишь счастливых детей, улыбаются и хорошо проводят время, ты хочешь этого же для своего ребенка. Забегая вперед, скажем, что это дало хороший результат нашему клиенту.

Цветовая гамма для разработки веб-сайта

Детство ассоциируется с чем-то веселым и ярким, все мы в детстве любили рисовать красками или фломастерами, читали различные яркие комиксы и любили одевать цветные вещи. Детство - это радуга, поэтому мы решили, что нам нужно несколько ярких основных цветов, которые сформируют новую палитру. Это не совсем стандартно, целевая аудитория не дети, а их родители, но мы были уверены, что таким решением обращаемся к "детской подсознания" в головах взрослых людей, и однозначно подталкиваем их выбрать для своего ребенка не «черно-белый» заведение без эмоций , а веселое место, где дети могут развиваться, учиться и хорошо проводить время. Именно таким мы хотели показать бренд "ACORN learning center" в глазах потенциальных клиентов

Хотим поблагодарить "имя клиента" - владелицы сети центров ACORN за то, что доверились нам, и смело приняли нашу »не стандартную" концепцию

Acorn Color Palette

Работа с контентом сайта

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

Для создания макетов дизайна веб-страниц мы используем Adobe XD, и демонстрируем его заказчику с помощью онлайн сервиса Invision

Acorn Responsive Design

Дизайн мобильной версии сайта.

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

Хотим подчеркнуть! - Мы разрабатываем вебсайты, которые обязательно оптимизированы под мобильные устройства, для этого мы отдельно разрабатываем дизайн мобильной версии сайта, и тестируем Frond End на всех популярных мобильных девайсах и расширениях.

Acorn Responsive Design

Техническая сторона разработки

Мы выбрали CMS WordPress, она удовлетворила все наши требования и потребности клиента. WordPress довольно гибкой платформой и позволяет разработчиками быстро построить beck-end, что в свою очередь положительно влияет на конечную стоимость разработки.

Мы используем версию 5.3.2, которая содержит в себе SEO модуль Yoast (очень крутой модуль, который дает возможность каждому контролировать оптимизацию каждой страницы на своем сайте, быстро прописывать все meta данные и соблюдать все требования создания статей для блога.), неплохой бонус, не так ли?

Для построения удобной админ-панели управления сайтом команда наших разработчиков использовала плагин ACF (Advanced Custom Fields) для администраторы "ACORN Learning center", имели возможность легко обновлять контент на сайте, писать публикации в блог и т.д.

Acorn locations desktop Acorn locations mobile

Получение заявок на сайте

При разработке перед нами стоит задача - "Как удобно реализовать функционал бронирование туров?", И обеспечить высокую конверсию. На сайте должно быть представлено три локации в пределах Bay Area, каждая из них имеет своих менеджеров, которые должны получать заявки с сайта - каждая индивидуально для своей локации.

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

Мы разработали страницу "Locations", на которой каждая локация была представлена индивидуальным блоком, и содержал следующие элементы:

  • Слайдер с реальными фото центра;
  • Контакте данные;
  • Краткое описание;
  • Стилизованная карта с возможностью быстро начать навигацию по Google maps;
  • Кнопка "Book a Tour".
Acorn locations desktop Acorn locations desktop

Мы решили реализовали подобный блок на главной странице, с возможностью переключать локации с помощью "tabs". Это позволило сэкономить место, и пользователям детально просмотреть локации не покидая главной страницы.

Кнопка "Book a Tour» , которое является основным Call to Actions, мы разместили в хедере, чтобы иметь возможность быстро перейти к заполнению заявки, была под рукой на каждой странице сайта.

Acorn locations mobile Acorn locations mobile

Результат

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

conversions increase

Сроки разработки

Нам удалось реализовать проект «с нуля» менее чем за месяц. Команда потратила:

0 часов

на дизайн двух версии сайта (основной и мобильную)

0 часов

на front end и beck-end

0 часов

на тестирование и размещение сайта на рабочем домене

В этом проекте мы использовали следующие программы:

  • Adobe XD

  • Adobe Photoshop

  • HTML

  • Sass

  • Java Script

  • Wordpress

СВЯЖИТЕСЬ С НАМИ

Заполните форму, и мы свяжемся с Вами.

    ЗвонокTelegramViber

    Как удобно общаться?