Редизайн сайта API Яндекс Карт. Рост среднего времени посещения сайта на 39% и увеличение конверсии на 1,1 п. п.
Привет! Это — pinkman. Рассказываем, как сделали дизайн нового сайта геосервисов Яндекса для бизнеса и помогли превратить продукт из чисто технологического решения в полноценную бизнес-платформу.
Кто мы
Мы в pinkman делаем дизайн коммуникаций, интерфейсов и сайтов для больших компаний. Например, больше 3 лет создаем и поддерживаем главный сайт ВТБ.
Про продукт
API Яндекс Карты — B2B-сервис Яндекс Карт, который предлагает набор программных библиотек, позволяющих бизнесу использовать актуальные картографические данные, встраивать карты на сайты и в приложения, а также решать задачи, связанные с маршрутизацией и навигацией. Решения API Яндекс Карт используют компании из самых разных отраслей: от логистики, ритейла и электронной коммерции до финтеха и телекома.
С чем пришёл заказчик
- Продукт компании развивался без чёткого позиционирования на рынке.
- Предыдущий сайт бренда представлял собой набор страниц с документацией на поддомене Яндекса. Он был неудобным, а навигация — сложной. При этом сайт был основным каналом для осуществления продаж и обработки входящих обращений.
- Было две группы целевых аудиторий: разработчики и бизнес-заказчики. Последним было трудно находить нужную информацию из-за сложной навигации и неудобной структуры контента на сайте
Что мы сделали
- Разработали с нуля новый сайт в концепции self-service. Ориентировались при этом на новое позиционирование API Яндекс Карт как самостоятельного бренда и сфокусировались на привлечении новых клиентов — лидогенерации.
- Адаптировали структуру и контент под две целевые аудитории. Для разработчиков — подробная документация, гайды и примеры кода. Для бизнеса — лендинги с описанием возможностей и сценариями использования.
- Добавили инструменты, которые позволяют быстро познакомиться с продуктами: блоки с ценами, калькулятор тарифов и формы обратной связи.
Результаты
Благодаря редизайну мы не просто обновили упаковку, но заново выстроили коммуникацию с разными аудиториями — теперь гораздо проще доносить ценность продуктов и узнавать, как встраивать их в существующие бизнес-процессы клиентов.
Аналитика
На старте было понятно, что у сайта есть две основные задачи — позиционирование API Яндекс Карт как отдельного бренда и рост конверсии за счёт разделения аудиторий.
Помимо разработчиков, продуктами API Яндекс Карт интересуются и бизнес-заказчики, многие из которых вообще не имеют штатных программистов и хотят получить готовые решения.
Представьте себе директора транспортной компании, который ищет систему для отслеживания грузов. Вряд ли он будет разбираться в тонкостях программных методов и протоколов. Ему нужно, чтобы сайт на простом языке объяснил, как продукты API Яндекс Карт решат конкретную проблему бизнеса.
Работу над проектом начали с глубокого исследования. Провели конкурентный анализ — посмотрели, как устроены сайты других геосервисов.
Изучили паттерны взаимодействия пользователей со старым сайтом и провели серию интервью с клиентами, чтобы узнать об их проблемах и ожиданиях. Так нам удалось сегментировать аудиторию и понять, какая информация нужна каждой группе.
На основе этих данных мы спроектировали логику взаимодействия пользователей с платформой, подготовили новую карту сайта и описали ключевые пользовательские сценарии.
Прототипирование и дизайн
Для быстрого масштабирования сайта в будущем мы создали гибкую дизайн-систему на основе обновлённого фирменного стиля бренда. Она включает в себя набор готовых блоков в едином стиле, а также иконки, иллюстрации и микроанимации для привлечения внимания к важным деталям.
Раздел «Продукты»
В этом разделе сайта описываются продукты API Яндекс Карт, при этом у каждого из них есть своя страница с описанием возможностей, примерами использования, формами подбора решений и обратной связи.
Информация по каждому из продуктов адаптирована под потребности конкретных целевых групп. Бизнесу мы рассказываем про кейсы использования и ценность внедрения того или иного решения. Разработчикам даём всю необходимую техническую информацию
Раздел «Решения»
- Подробно описывает возможности продуктов API Яндекс Карт для бизнесов из разных отраслей: логистики, электронной коммерции, телекома и других
- Показывает примеры использования решений с конкретными интерфейсами
- Предлагает готовые шаблоны интеграции и кастомизации под задачи бизнеса
Раздел «Разработчикам»
- Содержит исчерпывающую техническую документацию по всем продуктам
- Описывает процесс интеграции API для разных платформ
- Приводит подробные примеры кода и возможных кастомизаций
- Даёт ответы на самые частые вопросы при разработке
Подборщик решений
Мы понимали, что у бизнес-клиентов нет времени разбираться в деталях различных API и SDK. Им нужен простой и быстрый способ понять, какой продукт решит конкретную задачу их бизнеса. Так родилась идея подборщика решений.
Пользователь просто выбирает задачу, а сайт предлагает ему конкретное решение. За основу мы взяли самые популярные кейсы использования API Яндекс Карт в разных отраслях.
Калькулятор цен
Интерактивный калькулятор позволяет быстро рассчитать стоимость внедрения, что экономит время клиентов и разгружает техподдержку.
Клиент пошагово выбирает нужный продукт, вводит планируемый объём запросов и видит итоговую цену. Тут же можно отправить заявку на подключение.
Языковые версии
Сайт изначально разрабатывался как глобальная платформа, рассчитанная на клиентов из разных стран. Он доступен на четырёх языках: русском, английском, казахском и турецком.
При локализации мы не только учли специфику языков, но и адаптировали дизайн всех элементов под разную длину текстов.
Что в итоге
Новый сайт API Яндекс Карт удобно и доступно предоставляет всю важную информацию о продуктах для обеих целевых аудиторий: разработчики теперь быстрее находят нужную документацию, а бизнес-клиенты легче понимают возможности решений.
Статистика показывает улучшения по ключевым показателям: выросла конверсия, увеличилось среднее время на сайте, снизился процент отказов. Редизайн помог четче позиционировать API Яндекс Карт на рынке и создал основу для дальнейшего развития продуктового сайта.
Спасибо, что прочитали до конца. Ещё можно сделать две вещи:
1) Подписаться на наш телеграм (там больше кейсов и много красивого 3D каждый день)
2) Оставить заявку, чтобы обсудить ваш проект (быстро ответим, обсудим условия и детали)