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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Адаптив:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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