Как разработка дизайн-системы помогла концерну «Калашников» удвоить число посетителей сайта, завоевать мобильную аудиторию и добиться прироста продаж по ряду направлений на 30–40%, рассказывает гендиректор AIC Антон Виноградов.
Ситуация с концерном «Калашников» не уникальна для российского рынка. Компании-тяжеловесы со сложной структурой хотят идти в ногу со временем, занимаются цифровизацией, но их сайты оставляют желать лучшего. Для таких компаний (как и для среднего бизнеса, особенно если он не монопродуктовый) показательна практика внедрения дизайн-системы, которую мы в качестве подрядчика разработали для концерна «Калашников».
Что представляет собой концерн «Калашников»
Концерн «Калашников» (КК) — системообразующая структура стрелкового сектора оборонно-промышленного комплекса России. Зонтичный бренд объединяет несколько менее крупных. На момент создания дизайн-системы это были:
Izhmash и Baikal (производство оружия),
ZALA Aero (производство беспилотников и дронов),
Рыбинская верфь,
судостроительный завод «Вымпел» (гражданские и военные корабли).
Эти компании, в свою очередь, делятся на подразделения, которые часто носят собственные имена. Кроме того, у концерна есть информационный ресурс Калашников Media.
С какими проблемами столкнулся концерн
У многих структур концерна были устаревшие сайты, не объединенные общей концепцией. Часть продукции была представлена только офлайн. В результате бренд столкнулся с проблемами.
1. Пользователи не идентифицировали подразделения «Калашникова» как части единого концерна.
По данным опроса на сайте концерна, доля новых пользователей, знакомых с брендами Baikal и Izhmash, составляла 17 и 6% соответственно.
2. Разработчики не могли масштабировать цифровые сервисы (личный кабинет, программа лояльности, стрелковый клуб, сервисы для охотников и т.д.) с появлением новых суббрендов.
3. Формат подачи информации на сайтах устарел.
По данным опроса, пользователям не хватало информации о продукции концерна, адаптивного дизайна под мобильные устройства, видеообзоров и актуальных цен на оружие.
4. Концерн испытывал большие затруднения с интеграцией онлайн-сервисов, CRM-систем и программ лояльности в единую цифровую экосистему.
5. Посетители сайтов проявляли низкий уровень вовлеченности, слабо реагировали на активности, новости и специальные предложения.
Решение проблем
Решено было разработать дизайн-систему — своеобразный конструктор, который содержит строго зафиксированные правила оформления цифровых продуктов компании, вплоть до кнопок, шрифтов и отступов.
Дизайн-система включает:
ценности компании, которые отражаются в конечных элементах дизайна;
визуальный язык продуктов, или сторибук — все, что входит в брендбук (лого, слоганы, фирменные шрифты, цвета) и гайдлайн (рекомендации от разработчиков по внешнему виду элементов и пользовательскому опыту);
готовые элементы — все кнопки на сайте, поля опросников, шапки и подвалы, элементы навигации и анимации и т.д. — не просто графические макеты для дизайнеров, но и коды для разработчиков;
дизайн-документацию, которая описывает технические стандарты и концепцию применения этих инструментов.
Главной задачей дизайн-системы было донести до пользователя, что концерн производит не только автоматы Калашникова, но и множество другой продукции.
Этапы внедрения дизайн-системы
Этап № 1. Аналитика
В ходе качественных (очное интервью) и количественных исследований (анализ показателей сайтов с помощью систем Google Analytics, «Яндекс.Метрика», проведение онлайн-опросов, сегментация аудитории и кластерный анализ)
определили основные пользовательские сценарии на сайте концерна и в интернет-магазине,
выяснили, какой продукцией и контентом интересуются пользователи,
проанализировали воронку оформления заявок,
оценили узнаваемость брендов.
В итоге получили главный инсайт: посетители не ассоциировали многие виды продукции с концерном «Калашников».
В соответствии с этим было сформулировано главное требование к дизайн-системе: посетитель любого из сайтов концерна должен понимать, что суббренд принадлежит «Калашникову».
Этап № 2. Разработка дизайна
Одновременно с общей стратегической задачей по внедрению дизайн-системы перед разработчиками поставили задачу: в кратчайшие сроки (четыре месяца на создание каталога товаров и три месяца на создание личного кабинета и программы лояльности) запустить интернет-магазин.
После того как эта задача была выполнена, рабочие элементы интернет-магазина взяли за основу для других площадок бренда и закрепили на уровне дизайн-документации.
В соответствии с составными частями дизайн-системы был составлен сторибук — специальный документ, которым разработчики могут пользоваться для быстрого конструирования новых сайтов и размещения на них контента. В этот сторибук вошли готовые элементы дизайна, правила использования шрифтов, заголовков и цветовых комбинаций.
Таким образом, разработчики на стороне концерна получили все необходимые компоненты, чтобы впоследствии собирать готовые сайты в рамках единой дизайн-системы.
Этап № 3. Тестирование гипотез
До того как дизайн-система была закреплена на всех уровнях концерна и получила статус единого закона, отдельные ее компоненты были протестированы на аудитории. Аналитики замерили реакцию пользователей на нововведения.
По результатам исследований был выдвинут ряд гипотез, в дальнейшем получивших свое подтверждение. Например:
доля мобильного трафика сайтов будет расти.
В соответствии с этой гипотезой была предложена стратегия mobile first, которая учитывает поисковые интересы пользователей мобильных устройств на сайте концерна.
Пользователей больше всего интересуют обзоры флагманов и новостные сводки.
Разместили на главной странице линейки флагманских продуктов, новостей и анонсов.
Помимо основного интереса — поиска оружия — аудитория ищет близкие по тематике товары.
В каталог интернет-магазина добавили навигацию, позволяющую пользователям переходить в другие разделы товаров.
Раздел «О концерне» вызывает мимолетный интерес из-за большого объема текста.
Чтобы удержать внимание пользователя, историю компании перевели в вовлекающий таймлайн-формат.
Цены в интернет-магазине отличаются от цен в офлайне, что вводит людей в заблуждение.
Порекомендовали разместить плашку «цена при оформлении покупки на сайте» рядом с ценами на продукцию и т.д.
Эти и другие инсайты стали основой для составления списка рекомендаций по оптимизации сайта концерна. Предложенные решения протестировали и претворили в жизнь. Теперь разработанные элементы навигации и интерфейса, логика выделения разделов сайта будут использоваться в любых цифровых продуктах компании.
Что разработка дизайн-системы дала концерну «Калашников»
Ясное и понятное представление всех компаний, объединенных брендом. Теперь пользователь быстрее понимает, какие суббренды входят в концерн «Калашников», и может моментально попасть на сайт любого из них (все сайты концерна объединены единой навигацией, вне зависимости от того, на сайте какого бренда ты находишься). При этом на поиск нужной информации тратится вдвое меньше времени, чем раньше (здесь и далее сравниваются периоды с 1 июня по 31 октября 2018 года и с 1 июня по 31 октября 2017-го) — 1 минута 47 секунд вместо 3 минут 22 секунд.
Единообразие. Какой бы контент ни появлялся на сайте, дизайн остается цельным и непротиворечивым, в результате пользователям легче идентифицировать бренд.
Простота наполнения. Для большинства стандартных операций на сайте (анонс маркетинговой акции, замена информации, новый контент) дизайнер уже не нужен — любой сотрудник может разместить контент, руководствуясь правилами, прописанными в сторибуке.
Повышение скорости запуска новых сайтов суббрендов. Имея полноценную коллекцию систематизированных шаблонов, компания способна выводить целые направления новой продукции и знакомить с ними аудиторию онлайн в самые сжатые сроки. Так, новый сайт бренда Baikal был разработан за две недели, при этом один день занял сам запуск и девять дней — наполнение контентом.
Моментальное тестирование гипотез. Если на запуск нового сайта теперь уходит две недели, то для любой продуктовой гипотезы требуется один час, что дает возможность быстро проверять разные предположения и проводить A/B-тесты.
Повышение лояльности аудитории. Доля пользователей, вернувшихся на сайт спустя определенное количество дней, существенно возросла. По данным концерна «Калашников», число визитов на новый сайт выросло за четыре месяца на 40%, по сравнению с тем же периодом годом ранее, просмотры страниц — на 10%, а показатель отказов снизился на 2%.
Появление новых сервисов и систем. Полностью пересмотрена концепция коммуникации с клиентами в онлайне. Внедрены масштабируемая CRM-система, программа лояльности, интернет-магазин, сквозная аналитика.
Онлайн-продажи. Разработка дизайн-системы позволила реализовать саму возможность интернет-продаж массовой продукции, а также получения онлайн-заказов на оружие, профессиональные станки и сервисы. Продажи онлайн по отдельным направлениям растут на 30–40% в квартал.
Рост онлайн-аудитории. Совокупная аудитория обновленного сайта концерна «Калашников» увеличилась на 30%, а численность мобильных пользователей за четыре месяца — более чем в три раза, с 10 тыс. до 33,8 тыс. Это произошло благодаря mobile first — подходу к созданию сайтов, учитывающему характеристики мобильного устройства и скорость подключения к Сети для каждого пользователя.
«Перед нами стояла амбициозная задача — объединение всех брендов группы компаний под единую айдентику, которая отражала бы диверсификацию бизнеса «Калашникова» и объединила бы новые бренды, присоединившиеся к компании за последние годы. На всех крупных общественных мероприятиях мы выступаем под условным хештегом #большечемАК, именно это и должна была отражать дизайн-система: мы больше, чем лишь автомат Калашникова или же стрелковое оружие в принципе. Вместе с коллегами нам удалось разработать такую систему, которая не только стала поворотной в имидже компании, но и предложила нашим клиентам удобные онлайн-сервисы. Это, в свою очередь, позитивно отразилось на b2b-процессах и e-commerce», — отмечает Софья Иванова, заместитель генерального директора по маркетинговым и внешним коммуникациям группы компаний «Калашников».
Добавить комментарий