Ресайклмап – карта раздельного сбора отходов

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

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

• низкая скорость работы сайта;
• местами неудобный и устаревший пользовательский интерфейс.

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

1. У меня накопилось много отходов, которые можно куда-то сдать.
   
2. Я занимаюсь раздельным сбором, потому что это современно и экологично.
   
3. Я занимаюсь раздельным сбором и хочу, чтобы больше людей присоединялись к моему образу жизни.
4. Мне удобно/я привык к раздельному сбору, не хочу кидать все в одну корзину.

Затем составили список функций, которые пользователи хотели бы видеть:

1. Поиск пункта для сдачи однородных отходов в пределах своего района
Решение:

• фильтры в масштабе района для сдачи одной или двух фракций;
• актуальная информация о работе пункта;
• подсказки о подготовке отходов к сдаче;
• контактная информация оператора пункта;
• возможность проложить маршрут через Яндекс.Карты или Google Maps.

2. Поиск большой площадки для постоянного пользования
Решение:

• поиск по геолокации (или на крупном масштабе карты) для выбора пункта поблизости к дому (или по привычному пользователю маршруту);
• высокая детальность карты;
• подробная информация о пункте на карточке, включая принимаемые фракции и примеры отходов.

3. Возможность добавить новый пункт или внести изменения
Решение:

• возможность удобно вносить информацию о пункте в любое время в любом месте;
• добавление и редактирование пункта в мобильной версии;
• определение местоположения.

4. Поиск единомышленников: возможность поделиться пунктом
Решение:

• удобные механизмы шэринга карточки пункта с определением местоположения и полной информацией о пункте.

5. Правильная сортировка отходов
Решение:

• экосоветы по сортировке и подготовке каждой фракции;
• примеры типов отходов.

Подготовительный этап

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

На мелких масштабах: точки

На мелких масштабах: кластеры

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

Технически, мы заменили формат данных с GeoJSON на векторные тайлы и перевели вычисления кластеров с клиента на сервер с помощью h3 . При достаточно большом объеме данных такой подход позволяет оперативно подгружать, отрисовывать и фильтровать точки.

Карта

Что получилось

Для карты мы адаптировали подложку Mapbox Streets, отредактировав цвета и элементы, чтобы карта выглядела информативнее: появились зеленые зоны парков, повысилась читаемость рек и каналов, обозначение улиц стало более детализированным.

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

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

Главный экран

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

В карточку пункта добавилась возможность сразу построить маршрут через удобное приложение — Google Maps или Яндекс.Карты, а еще появилась информация о том, когда в последний раз обновлялась информация о пункте.

Карточка пункта

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

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

Было:
на главном экране минимум деталей, помогающих пользователю ориентироваться и управлять картой.

Кнопка добавления пункта располагается в нижней части экрана.

Стало:
на главном экране появилась строка поиска, кнопки управления картой, фильтр по фракциям и список пунктов в нижней части экрана.

Кнопка добавления пункта располагается в верхней части.

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

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

Мобильная версия

Было:
После нажатия кнопки "Добавление пункта" открывается форма ввода данных.

Стало:
После нажатия на кнопку "+ Пункт" в нижней части экрана открывается форма ввода данных.

При нажатии стрелки вверх, форма открывается на весь экран.

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

Иконки до редизайна:

Иконки фракций

Мы проработали много эскизов одних и тех же иконок, нередко прибегая к разным формам, чтобы найти идеальное воплощение содержания:

Набор №1: наиболее минималистичный, наименьшее дробление формы.

А затем на основе этих наработок создали несколько наборов иконок:

Набор №2: больше деталей, но все еще минималистичный.

Набор №3: больше пространства внутри иконок, острые углы.

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

Планы

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

Мы продолжаем работу над Recyclemap, и нам важно мнение ее пользователей. Если вы хотите поделиться отзывом о новой версии Recyclemap или столкнулись с проблемой в работе сервиса – заполните форму обратной связи.