Оставить заявку

Разработка лендинга с картой научного туризма Science Slam

В 2022 году к нам обратилась Ассоциация граждан и организаций по популяризации и продвижению науки и инноваций «Сайнс Слэм» за разработкой сайта с картой объектов для научного туризма. Расскажем, что интересного было в этой разработке, какие решения использовали и немного о взаимодействии с заказчиком как о важном факторе успеха проекта.

Задача

С чего начинается разработка любого сайта? Правильно! С понимания, для чего нужен сайт, какую проблему он должен решить. И с этим в данном случае всё было отлично.

Запрос от клиента звучал так:

«В России есть разные классные научные, научно-технологические объекты, но о них мало кто знает. Иногда и сами жители не в курсе о существовании таких у них в городе. При этом растет спрос на внутренний туризм, растет интерес к науке. Нам нужно систематизировать такие объекты, помочь людям легко подобрать научный объект по интересам, географическому расположению, а также, при желании, договориться об экскурсии по этому объекту».

Есть сформулированная проблема. Сайт способен ее решить. Приступаем.

Начало работ

На начальном этапе у клиента не было четкого понимания, каким должен быть функционал сайта. 

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

До проектирования сайта мы выяснили ряд принципиальных моментов, от которых зависел функционал сайта и его структура. Например, мы задали клиенту такие вопросы:

  • Как много объектов планируется к размещению? Будет ли изменяться их количество в будущем?
  • Каким образом планируется добавление объектов на сайт?
  • Какая информация об объекте будет размещаться? В каком виде она существует сейчас?
  • Кто будет актуализировать информацию в дальнейшем и наполнять новыми объектами?

И тут сайт начал обрастать функционалом😀

Обсудив проект, мы утвердили, что помимо основного элемента — карты с расположенными на ней объектами, на сайте необходимы:

  1. Фильтр по параметрам объектов, включая фильтрацию по нескольким параметрам одновременно.
  2. Функционал для внесения предложений по добавлению новых объектов, внесению изменений в текущие объекты посетителями сайта через его интерфейс.
  3. Функционал для внесения предложений посетителями сайта себя в качестве экспертов по научному объекту.
  4. Синхронизация с сервисом Airtable, парсинг данных по объектам;
  5. Административная часть сайта, через которую клиент самостоятельно сможет управлять сайтом без привлечения программиста.

Для реализаций идей приняли решение делать сайт на фреймворке Yii

Перед клиентом были поставлены следующие задачи:

  • Собрать информацию об объектах и предоставить ее нам в едином формате с помощью таблиц в сервисе Airtable.
  • Собрать фотографии объектов и предоставить их нам, разместив определенным образом на Google Диск.
  • Сгруппировать объекты по тематикам и типам, предоставить нам значения параметров для фильтрации.
  • Пригласить специалистов, ученых для участия в проекте в качестве экспертов по объектам, предоставить нам информацию об экспертах с помощью таблиц в сервисе Airtable по согласованному образцу.

Вся команда включилась в процесс, работа закипела🚀 

Дизайн сайта

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

Прототип sciencetourism.ru

Получили от клиента хорошие и конкретные замечания и предложения по прототипу:

Обсудили, наметили правки, взяли в проработку.

Надо заметить, что:

Со стороны клиента была выстроена очень грамотная коммуникация и обратная связь, были назначены ответственные люди, обсуждение велось чётко, по делу, оперативно предоставлялась необходимая информация, что благотворно влияло и на соблюдение обозначенных сроков, и на продуктивность работы над проектом в целом.

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

Так, в одной из итераций и в процессе получения нами информации о бОльшем количестве объектов, мы поняли, что места под детальное описание объекта слева на карте недостаточно, и приняли решение об использовании модальных окон.

Информация об объекте - первая и третья итерации

Ниже покажем итоговые дизайн-макеты, которые были утверждены клиентом. 

Итак, макеты для десктопной версии сайта (листайте слайдер👉, чтобы посмотреть всё):

 

sciencetourism.ru
sciencetourism.ru
sciencetourism.ru
sciencetourism.ru
sciencetourism.ru

Адаптив:

Несмотря на то что целевая аудитория сайта — это люди, которые увлекаются наукой, мы решили уйти от строгости и сделать сайт теплым, уютным.

Что еще важно?

  • При заходе на сайт, пользователь сразу понимает, куда он попал, что с этим можно делать, кто собирает и предоставляет информацию.
  • Большое количество объектов (более 800) и массив данных о них уместили на одной странице, позволили сайту «дышать», удобно и компактно уложив максимум возможной информации об объектах. Фильтр по параметрам помогает отобрать объект по географическому положению, интересам, типу объекта, а также выбрать объект с экскурсией от эксперта. Смотрите, как это работает, на слайдере ниже:

 

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

Программинг сайта

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

Парсинг данных об объектах и экспертах на сайт

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

Наша задача была спарсить эти данные в базу данных сайта и настроить их работу. 

Изначально нам нужно было наполнить сайт 400 объектами, но в процессе клиент собрал почти в 2 раза больше. Благодаря парсеру, все новые данные и изменения в текущих попадали в БД сайта автоматически, что сильно ускорило наполнение сайта.

Интеграция API Яндекс Карт

Основная техническая изюминка этого сайта — карта с фильтром. Ведь практически все сайты имеют формы, админку и этапы подготовки данных. В этом наш сайт на них похож. 

И карты есть у многих, но как правило, это просто точка с адресом и телефоном. А нам предстояло разместить на карте 800 точек сразу, каждая точка — это название, описание объекта, наличие экспертов и слайдер с изображениями, то есть информации много. 

Ставили перед собой задачу, чтобы это работало быстро на любых устройствах и не тормозило с развитием проекта, когда точек будет 1000, 1500, 2000....


Обычный конструктор карт нам не подходил, мы использовали всю мощь API Яндекс Карт:

На стороне сервера сайта формируется JSON-описание объектов, которое можно фильтровать, используя наш непростой фильтр. 

Итоговые данные попадают через Менеджер объектов ObjectManager API уже визуально на карту. 

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

Это позволило нам не закачивать 800 таких модальных окон сразу (на это ушло бы немало времени, и пользователь успел бы выпить чашку кофе😨).

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

Админка сайта

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

Мы сделали простое и интуитивно понятное управление сайтом, с помощью которого клиент самостоятельно может:

  • редактировать весь контент на странице сайта;
  • заводить новые объекты и редактировать текущие;
  • модерировать предложения пользователей;
  • заводить новые параметры для фильтрации и редактировать текущие, привязывать параметры к объектам;
  • добавлять новых экспертов-ученых и вносить изменения в уже размещенных, привязывать экспертов к объектам;
  • управлять блоком видео со СЛЭМов;
  • заполнять и редактировать SEO-параметры.

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

Ни одного вопроса мы не получили, а это значит, что задача — сделать удобное, понятное управление сайтом, — выполнена на отлично.

Настройка сервера

Так как сайт разрабатывался «с нуля», сервер под него тоже нужно было приобрести. 

Мы помогли клиенту подобрать провайдера (остановились на FirstVDS), определиться с характеристиками сервера под задачи сайта, настроили работу сервера, подключили домен, подключили автоматически пролонгируемый сертификат безопасности ssl. 

Клиенту осталось только своевременно вносить оплату хостеру.

Базовое SEO

Перед релизом сайта настроили базовое SEO, а именно:

  • Проставили редиректы с www на без www, с без слэша на слэш.
  • Заполнили Title и Description, а также добавили параметры с количеством объектов на карте и количество объектов с экспертами, чтобы эти данные подтягивались в сниппет

  • Разместили коды верификации Яндекс Вебмастер и Google Search Console.
  • Разместили счетчики Яндекс.Метрики и Google Analytics.
  • Добавили цели в Яндекс.Метрике и Google Analytics.

Заключение

Мы достигли поставленных целей и сделали быструю карту с быстрым фильтром. 

Надеемся, что пользователи получат удовольствие от ее использования и путешествия по научным объектам России тоже =)

Благодарим команду «Сайнс Слэм» за прекрасный опыт сотрудничества и невероятно приятный отзыв о нашей работе!

Нужно увеличить количество заказов с интернета?

Обращайтесь, приведем клиентов с рекламы и SEO сайта

Рекомендуем почитать

Хотите попробовать с нами?

Оставьте заявку или позвоните нам по номеру 8 (800) 775-67-49.

Оставить заявку
след самолета
Нажмите и держите для максимального увеличения