Большинство читателей кейса безошибочно определят новую рекламную кампанию, лендинг или рассылку от Яндекса, 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.
Загрузка...
