Как разработать UIKit для сети гипермаркетов. Часть первая

Привет, мы команда цифровой трансформации «Ареал». Помогаем бизнесу создавать и развивать цифровое взаимодействие с клиентами, партнерами и сотрудниками. В первой части кейса мы подробно расскажем, как провести агрегацию требований, чтобы разработать UIKit.

Большинство читателей безошибочно определят новую рекламную кампанию, лендинг или рассылку от Яндекса, Google, Икея: цвета, стилистика, детали интерфейсов, расположение блоков. У брендов сильный и узнаваемый визуальный образ, который прочно закрепился в нашем сознании.

Как правило, за единообразие стиля отвечает отдел маркетинга с продуманным брендбуком и гайдлайном. В случаях с разветвленной системой цифровых каналов, как у «Глобус», когда много сайтов, внутренние площадки, социальные сети, мобильное приложение — нужен UIKit. База-знаний, которая объясняет принципы стилистического единообразия, построения, работы и взаимодействия мельчайших элементов дизайна. С ним создавать и обновлять интерфейсы в едином стиле удобнее и быстрее.

Мы понимали, что качественный UIKit невозможно сделать без проработки новых интерфейсов. Нужно идти от общего к частному — разобрать новые интерфейсы на атомы. Новое нужно создавать на основе требований пользователей, бизнеса, поисковых систем, современного подхода «Глобус» к цифровой системе. Иначе на руках окажется оторванный от жизни UIKit, основанный на дизайнерских идеях, а не аналитике.

«Глобус» — международная розничная сеть продуктовых гипермаркетов. Магазины представлены в Германии, Чехии и России. Сегодня торговая сеть «Глобус» насчитывает 17 гипермаркетов, расположенных в Центральном Федеральном округе.

У компании есть конгломерат ресурсов — цифровая система:

globus.ru — маркетинговый, коммуникационный сайт;
online.globus.ru — e-commerce платформа;
my.globus.ru — промо-сайт и личный кабинет бонусной программы;
rabota.globus.ru — предложения по работе в сети гипермаркетов;
scanandgo.ru — сайт о новой системе самостоятельного сканирования товаров;
электронная торговая площадка;
мобильное приложение;
собственная платформа по исследованиям;
Wi-Fi портал;
социальные сети.

За их работу отвечают разные отделы. Результат — сайты разрознены визуально.

Также «Глобус» размещает брендированную информацию на сайтах с вакансиями и объявлениями, выгружает каталог в Едадил и iGooods. На территории гипермаркета присутствуют instore носители — кассы, прайс-чекеры, информационные табло в зале, ТВ доски в кассовой зоне, в ресторане, анкеты на планшетах работников. Перечислять можно долго.

Корневая проблема — нет системы, с единым стилистическим образом.Группа сервисов работает в одной структуре, решает одни задачи, оперирует одним брендбуком, но на выходе получаются абсолютно разные продукты, связанные лишь несколькими элементами брендинга. Так как цифровые площадки поддерживают разные компании, то нет единого холдера стилистической основы. Поэтому при посещении сайтов возникает диссонанс.
Елена Вальтер, руководитель отдела маркетинга «Глобус»

Перед нами стояла цель — сформировать систему и правила использования брендбука для цифровых каналов «Глобус». Создать UIKit.

Начальный этап – обозначить чёткие задачи. Они помогли определиться с проектной группой и выделить ключевые шаги работы:

Собрать бизнес-требования. Понять, какие задачи разных департаментов должна решать цифровая система, как она поможет работе «Глобус» внутри.
Собрать требования от пользователей. Посмотреть на объективные данные, проанализировать отзывы, провести электронный опрос.
Исследовать существующие цифровые каналы. Как они решают бизнес-задачи по взаимодействию с потребителем и задачи самого потребителя.
Проанализировать референтные проекты. Какими способами пользователи решают свои задачи на сайтах конкурентов. Выделить лучшие практики.
Проработать целевое состояние. Как должны выглядеть интерфейсы «Глобус» для наиболее эффективного взаимодействия с потребителем.
Консолидировать рекомендации. Составить общий список рекомендаций для проектирования функциональной части и информационной структуры интерфейсов.
Создать прототип и дизайн. Выработать ключевые интерфейсы на примере 10 страниц.
Создать UI Kit. Декомпозировать макеты до мельчайших деталей, оформить базу-знаний с примечаниями и инструкциями.

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

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

Руководитель проекта (менеджер продукта) — стратег. Принимает решение что и в какой последовательности делать, корректирует выбранный курс, контролирует и верифицирует результаты.
Менеджер проекта. Управляет непосредственными исполнителями, сбором данных, встречами и согласованиями.
Группа аналитиков (UX/UI, seo, системный аналитик, бизнес-аналитик). Собирают, агрегируют и изучают полученные данные, делают выводы и дают рекомендации
UX-дизайнер. Проектирует целевые пути следования, структуру интерфейсов.
UI-дизайнер. Накладывает визуал, декомпозирует и структурирует UIKit, описывает правила использования.

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

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

Первый шаг — составить для отделов индивидуальные анкеты из 20-40 вопросов. Отправлять опросники для письменного заполнения необязательно. В конечном счете, интервью переходит в живой разговор, а заранее подготовленные вопросы помогают придерживаться значимых блоков:

Каналы коммуникации. Важно узнать про все цифровые каналы, которые используют департаменты. В особенности про «свой» канал: аудитория, цели, сложности. Чем довольны, что не нравится и что хочется добавить, есть ли планы по развитию. Так мы посмотрим на реальную работу цифровой системы и популярные инструменты.
Текущий брендбук и будущий UIKit. Как и в каких ситуациях сейчас используют брендбук, какие сложности возникают, как с ними справиться. Чтобы создать рабочий UIKit, нужно понять задачи его будущих пользователей.

Второй шаг — очный устный брифинг.

Мы выезжали в «Глобус» командой из четырех человека на два дня. Провели шесть встреч и брифинг нон-стоп с девяти до семи. С некоторыми разговор был короткий, потому что мало взаимодействуют с цифросистемой. А с другими наоборот, как с отделом клиентского сервиса и исследований или отделом маркетинга, мы встречались два-три раза.
Максим Щенников, коммерческий директор, Ареал

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

Ключевые требования к интерфейсам. Какие функции, связи и возможности хочет видеть бизнес в цифровых ресурсах «Глобус», чтобы успешно решать свои задачи.
Ключевые требования к дизайн-системе. На какие элементы обратить внимание, что стоит учесть.
Данные отделов. Исследования, отчеты, презентации, брендбук, наработки, референсы, шаблоны, которые помогут в работе.

Четвертый шаг — получить согласие от бизнеса на использование агрегированных требований. Ответственные лица «Глобус» подтвердили, что отчет по агрегации можно и нужно использовать в дальнейшей работе над UIKit-ом.

Артефакт этапа — перечень бизнес-требований от значимых подразделений «Глобус».

В исследовании «Бонусная программа», проведенном «Глобус» в сентябре-октябре 2018 года, нас заинтересовал блок с оценкой интерфейсов сайта my.globus.ru, аудит личного кабинета и мнения потребителей. Наработки использовали в своем исследовании, но их было катастрофически мало, поэтому мы обратились к колл-центру.

Требования от колл-центра поделились на два блока:

Данные от самих сотрудников. Часто поступают звонки с простыми вопросами о графике работы или адресе гипермаркета. Сотрудники ищут информацию на сайте фактически становятся пользователями. Мы спросили, чего на их взгляд не хватает сайтам, как сделать их исчерпывающей и актуальной базой знаний.
Обращения пользователей. «Глобус» предоставил выгрузку из 400 сообщений, которые мы разбили на следующие категории:
- по группам-проблемам: авторизация, регистрация, поиск, описания, загрузка;
- по частотности упоминаний;
- по критичности.

Изучив все материалы мы выработали рекомендации по решению этих проблем в интерфейсах.

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

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

Совместно с «Глобус» мы сформировали вопросы по блокам:

Портрет пользователя.
Достижение цели сеанса.
Возможности сайта globus.ru.
Информация о местном гипермаркете.
Дополнительные услуги.
Факторы, которые влияют на покупку в гипермаркете.
Факторы, которые влияют на онлайн-покупку.
Личный кабинет.
Доступность информации на сайте.

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

Вопросы были как со свободным полем или выбором ответа, так и с выставлением оценок разным возможностям цифровой системы.

Мы много общались с представителями компании и выявляли их приоритеты в цифровой системе «Глобус».Так выстроились бизнес-требования. Электронный опрос помог сопоставить требования пользователей, бизнеса и посмотреть насколько они совпадают.
Анастасия Лебедева, менеджер проекта, Ареал

Опрос разместили на сервисе fabuza.ru. Параллельно на цифровых площадках «Глобус» были запущены CTA баннеры для привлечения внимания, в том числе через аккаунты «Глобус» в социальных сетях. Буквально за 9 дней поступило 3 000 анкет.

Первой появилась таблица с простым подсчетом голосов. Но основой стал анализ, где значимость сортировалась по проценту ответов «Очень важно» и сумме долей «Важно» и «Очень важно». Так мы смогли понять уникальное отличие «Глобус», на что покупатели обращают особое внимание. Например, пункт проверки техники.

Артефакт этапа — рекомендации по приоритетности функций и информации в интерфейсах на основе данных от пользователей.

Держим в голове цель проекта — разработать единый UIKit. Для этого необходимо проработать 10 интерфейсов.

Изначально мы построили небольшую карту текущей цифросистемы. Она отражала интернет-площадки только самого «Глобус»: globus.ru, my.globus.ru, rabota.globus.ru, online.globus.ru, социальные сети, мобильное приложение и т.д. Однако, это не всё.

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

Поэтому сначала мы определили топовые разделы и страницы входа. К этой базе добавились пожелания «Глобус» — например, отдельно проанализировать раздел Поставщики.

Для анализа страниц брали данные за год:

Трафик и аудитория. Зафиксированы пол, возраст, число визитов, географию, топ часы посещения и ряд других показателей. Кроме анализа всего трафика, разделили его по источникам — поисковой, переходы с рассылок, с рекламы, с социальных сетей.
Переходы между каналами. Для каждого канала определены самые популярные страницы перехода. То есть, на какой сайт внутри цифровой системы пользователи чаще переходят с текущего. Там мы нашли ключевые точки перехода на globus.ru.

Популярные пути. В специальном инструменте Google analytics «Карта поведения» прослежены четыре первых шага пользователя на каждом канале. Так мы выявили, что цели пользователей со смартфона и ПК различаются. С мобильного на globus.ru активно интересуются разделами «Успей купить», «Другие акции», а на ПК такого интереса к ним нет. Этот факт впоследствии учтен при проектировании мобильного форм-фактора сайта.

Важнейший показатель — отказ. Насколько быстро посетители уходят, на каком этапе возникает проблема. Выделены страницы с высоким процентом прерывания, а значит с наибольшими сложностями в логике и контенте.
Вебвизор, карта кликов. По списку страниц входа и выхода на сайты «Глобус» собраны точки наибольшего интереса и стоп-факторы. Часто пользуются хлебными крошками в карточке товара, перелистывают баннеры, ищут гипермаркет на карте. Но уходят из раздела «собственное производство», потому что он не оправдывает ожидания.

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

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

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

И «Ключевые точки входа на globus.ru» с других каналов цифровой коммуникации «Глобус».

Артефакт этапа — рекомендации проектировщику по структурированию разделов и отдельных интерфейсов.

Главный вывод — аудитория по запросам «гипермаркет Глобус» ищет не просто витрину товаров, а интернет-магазин, возможность заказать. Основные составляющие сайтов: каталог, информация по гипермаркетам, личный кабинет и программа лояльности, должны работать в единой процедуре для пользователя.

«Глобус» не существует в вакууме. Вокруг множество конкурентов. Их слабые и сильные стороны помогут идеями для развития, поэтому детально анализируем и фиксируем лучшие практики.

Первое — составить список конкурентов:

Прямые. Азбука Вкуса, Утконос, ВкусВилл, Лента, Пятерочка, Ашан и другие. Они же перекликаются с поисковыми — конкуренты по набору ключевых фраз.
Референтные проекты. Агрегаторы, с хорошими интерфейсами и собственными командами разработки. Комус, Оzon.ru, beru.ru.
SEO-конкуренты. Выделенные на основе анализа поискового спроса.

Каналом для сравнения стал https://online.globus.ru. Именно там каталог открыт для индексации.

Свободно доступна часть важных параметров конкурентов:

ИКС;
внешние ссылки;
сайты доноры;
возраст;
индекс Яндекса, Google.

Сопоставив их, определились три ключевых поисковых конкурента — Перекресток, Утконос, Азбука Вкуса.

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

Характеристики сайта, которые влияют на поведенческие факторы, чаще касаются его внешности. Есть ли на главной странице выборка товаров, отзывы. Есть ли в карточке товара информация о наличии или дополнительные товары, рейтинг. Реализованы ли ЧПУ адреса, поддомены для регионов. По этим характеристикам мы построили сопоставительную матрицу. Дали рекомендации, какие изменения помогут «Глобус» подняться в выдаче.

Бенчмаркинг — сопоставительный анализ на основе эталонных показателей. Мы сравнивали цифровую систему «Глобус» с конкурентами.

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

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

В процессе анализа критерии дополнялись. Если мы замечали у конкурентов интересную, эффективную фишку, то обязательно добавляли ее в анализ. Так, например, было с фильтром по гипермаркетам.

Второй шаг — сравнить каждого конкурента с «Глобус». Анализ включал:

Карту цифросистемы конкурента. Какие каналы коммуникации с клиентом использует конкурент. В сравнение часто попадали отдельные разделы, у многих конкурентов нет такой разветвленной сети отдельных сайтов, как в «Глобус».

Cравнительный экспертный анализ. Аналитики рассмотрели все 17 конкурентов по выработанным критериям. Отдельная матрица сравнения для каждой пары и лучшие практики. Как работает личный кабинет, поиск, как представлена информация о дополнительных услугах.
Лепестковая диаграмма. Наглядный обзор ключевых границ конкуренции. На основе матрицы сравнения мы сопоставили, по каким критериям «Глобус» отстает, а по каким — впереди.
На изображении сравнительный анализ «Глобус» и «Пятерочка». Сектор — группа параметров бенчмаркинга. Отдельные точки — конкретный параметр. Мы выставляли экспертную оценку каждому параметру. Подписаны те, где разница в оценке очень существенная.Например, в «Поиске» у «Глобус» лучше реализован вывод товаров в результатах, а в «Личном кабинете» «Пятерочки» — просмотр истории операций по карте лояльности.

Кроме отдельных сопоставлений, нам все же нужен сводный и удобный анализ по всем конкурентам. Первой появилась результирующая матрица возможностей — сравнение конкурентов по всем параметрам, прописаны интересные фишки. При возникновении вопроса «А как сделать?», мы знаем куда посмотреть.

Матрица — достаточно большое полотно, его тяжело анализировать. Поэтому появился график бенчмаркинга.

Внизу идут те же группы параметров, как на лепестковых диаграммах. Вверху — критерии бенчмаркинга. По вертикали — шкала оценки от «Совсем не представлено» до «Лучшие практики». В кругах указано количество объектов анализа (конкурентов), которые имеют одинаковую оценку по параметру. Оранжевым отмечено, в какой группе оценок присутствует «Глобус». Например, представление собственного производства получило высшую оценку, а информация про расширенную гарантию совсем отсутствует.

Во-первых, так мы понимаем важность отдельного параметра в отрасли. Во-вторых, как эквалайзером, можем играть и решать, как выделится на фоне конкурентов. Таблица полезна не только для построения интерфейсов, но и маркетингу — посмотреть на презентацию своих услуг и как это реализовано в цифровом пространстве.
Дмитрий Баршев, ux/ui-специалист, Ареал

Артефакт этапа — единые рекомендации для проектирования, составленные по блокам, соответственно группам бенчмаркинга.

***

Здесь заканчивается агрегация требований. Мы прошли все шаги по сбору информации и имеем исчерпывающие представление о конгломерате интернет-ресурсов «Глобус».

У нас в руках рекомендации:

От бизнеса. Опрошены все отделы и департаменты, которые как-либо взаимодействуют с цифросистемой, проанализированы собственные исследования «Глобус».
От пользователей. Проанализированы сообщения в call-центр и проведен электронный опрос пользователей.
На основе анализа объективных данных. Проведен SEO-анализ, выявлены барьеры, недочеты текущей цифросистемы.
На основе бенчмаркинга конкурентов. Собрали лучшие практики и посмотрели на место «Глобус» в отрасли.

Осталось эту информацию систематизировать — сформировать целевое состояние новых интерфейсов «Глобус». Об этом расскажем во второй части истории.

Как разработать UIKit для сети гипермаркетов. Часть первая

Зачем «Глобус» UI Kit

Задачи и дорожная карта

Роли в команде проекта

Агрегация требований. Собираем библиотеку знаний

Агрегация бизнес-требований

Агрегация требований пользователя

Текущее состояние цифровой системы «Глобус»

Конкурентная среда продуктовых гипермаркетов

SEO-анализ конкурентов

Бенчмаркинг конкурентов