Карта-сайт для Ильи Варламова

Заказчик: Илья Варламов

Исполнитель: Атвинта

vimeo.com

Главное о кейсе

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

Бизнес-задача и ее решение

Задача - создать промо-сайт с интерактивной картой, на которой выводятся посты из блога. Цель разработки - представить посты в удобном для читателей виде с геопривязкой, повысить вовлеченность и глубину просмотра постов из блога.
На первом этапе изучили, как люди читают блог, продумали навигацию и разработали дизайн-концепцию сайта.
Читатель может попасть на сайт напрямую из поиска или из блога Ильи Варламова на LiveJournal. Для этого на портале с блогом реализовали виджет, который отображает запись из блога на карте. При клике на виджет пользователя редиректит на промо-сайт, тем самым повышая глубину просмотра записей блога и продолжительность визита пользователя.
В дизайне интерфейса придерживались принципа минимализма, удобства навигации и акцент на главное - публикации блога.
Экран состоит из карты с геометками, к которым привязаны посты по тегам, и информационной панели с постами из блога в левой части экрана. В информационной панели дополнительно реализованы фильтры по тематикам и выбор города из списка, а не на карте.
По умолчанию посты расположены в хронологическом порядке: сначала новые, ниже - более поздние. Материалы, которые пользователь еще не читал, отмечены статусом “Новые”.
В дизайне реализовали два режима просмотра: дневной и ночной. Цветовая схема карты меняется на ночную с помощью переключателя в верхнем правом углу или автоматически, если пользователь зашел на сайт, когда в его часовом поясе ночь.
Сайт разработан на основе Google Maps. Для привязки публикаций к карте мы разработали парсер, который собирает посты из LiveJournal по тегам городов и стран и размещает их пинами на карте.

К некоторым городам привязано много постов. Чтобы пины не загораживали всю область на карте, они собираются в кластеры. При клике на кластер в левой части экрана появляется список постов, привязанных к этой локации.
Кроме этого было обнаружено много небольших населенных пунктов в различных странах, названия которых соответствуют названиям крупных мировых столиц или неодушевленным предметам и явлениям природы. Чтобы посты не привязывались к ним, мы создали дополнительные фильтры, которые исключают подобные города из привязки. Один из фильтров отсеивает города с малой численностью: например, город Зима в Иркутской области или город Чай в Турции. Другой - привязывает посты только к конкретным городам: например, Москва, Санкт-Петербург, Париж.
Пользователю доступны только посты, привязанные к карте в видимой части экрана. Если приблизить Московскую область, то слева отобразятся только посты, привязанные к городам в этой области. Пользователь выбирает интересующий его пост и читает на сайте, без перехода в LiveJournal.