Привет, Хабр! В этой большой статье расскажу о причинах и целях редизайна интерфейса касс самообслуживания в «Магните», а также об основных результатах, достигнутых за полтора года. Мы провели серию исследований, обновили парк касс и внедрили ключевые улучшения, которые уже изменили работу магазинов. Поехали! ?

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

Что мы делали после исследований

Догнали конкурентов

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

  1. Возможность сканирования бонусной карты на старте и в корзине.

  2. Выделение на экране товаров со скидкой по программе лояльности.

  3. Упрощенная система печати чеков.

  4. Отказ от весовых платформ.

  5. Сокращение участия сотрудников — только подтверждение возраста при продаже алкоголя, табака и получение скидки пенсионера.

Новый функционал

В первую очередь мы доработали возможность отсканировать бонусную карту Магнит Плюс перед началом покупки и при формировании корзины. Это нововведение позволило улучшить пользовательский опыт: покупатели стали в полтора раза чаще использовать карту Магнит Плюс, что привело к росту среднего чека на 10%. Повышение удовлетворенности клиентов отразилось на лояльности и выручке.

В корзине добавили акцент на промо-товарах и отображение цены со скидкой. Это дало прирост в чеках с добавленной бонусной картой. Появилось дополнительное окно с вопросом «Печатать ли чек?». Это добавило лишнее нажатие, но зато облегчило жизнь сотрудникам, так как чеки перестали копиться у касс самообслуживания, а покупатели стали проявлять заботу о природе.

Чтобы уменьшить время покупки, убрали платформы контроля веса товаров. Это позволило сэкономить пространство магазина и установить больше касс самообслуживания.

Участие сотрудников в зоне касс самообслуживания теперь требуется лишь для подтверждения возраста при продаже алкоголя, табака и для проверки пенсионного удостоверения. Этим мы минимизировали ручные процессы со стороны сотрудников, поскольку доверяем нашим покупателям. Теперь сотрудник не нужен для снятия ошибок, которые блокировали работу кассы. Редкие ошибки и диалоги с системой покупатели стали обрабатывать сами и, как следствие, кассы стали меньше простаивать в состоянии «не готовым к покупке» в тех магазинах, где наблюдался дефицит кадров. Тут случился win-win по многим параметрам. Влияния на операционные потери пока не выявлено, следим за ситуацией.

Полноценный процесс Discovery

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

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

Помимо вопросов о жалобах покупателей, мы также отслеживали лояльность сотрудников к кассам самообслуживания. Вот как изменились их мнения до и после внедрения новых функций. Мы спросили, как они отреагируют, если кассы самообслуживания уберут завтра. В начале года результаты распределились следующим образом: 17% сильно расстроятся, 40% немного расстроятся, а 43% не испытают никаких эмоций. После внедрения новых функций картина изменилась: 47% сообщили, что будут сильно расстроены, 36% — немного расстроены, и лишь 15% не будут обеспокоены вовсе.

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

Экспансия, оборудование и бизнес

Дарья Низамова, владелец продукта в команде развития касс самообслуживания:

В конце 2022 году Магнит принял решение о первой волне оснащения магазинов у дома — покупке 10 000 касс. В адресную программу оснащения вошли более 2500 магазинов, или 13% от всей сети. Это означало запуск большого проекта по закупке оборудования, редизайна и переоборудования кассовой зоны по всей сети.

Кассы самообслуживания в гипермаркете Магнит
Кассы самообслуживания в гипермаркете Магнит

Непростым был выбор производителей и поставщиков оборудования — нужно было найти партнеров способных давать массовый продукт со стабильным качеством за минимальную стоимость. При этом оборудование должно быть стандартизированным по сети, быть адаптивным к стандартам мебели и сопутствующего оборудования для касс, быстро монтироваться и быть заменяемым. Выбирали между 10 поставщиками и более чем 15 моделями.

Выбор пал на двух крупных китайских производителей, модели которых стали стандартом восточного рынка. Они имели привычный вертикальный экран диагональю 21”, напоминающие пропорции экрана смартфона. Такой выбор синхронизировался со стратегией дальнейшего редизайна продукта, который должен стать консистентен цифровым продуктам Магнит. Обе модели в России дополнительно комплектуются весами.

Новые кассы самообслуживания Магнит
Новые кассы самообслуживания Магнит

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

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

С конца 2023 на кассах самообслуживания уже стояло ПО Магнит, но оно все еще имело устаревший дизайн, который не отвечал запросам бизнеса и клиентов. Точечные изменения в сценариях работы прикладного ПО давали улучшения, но не меняли отношение клиентов и сотрудников к новому оборудованию. Мы видели много барьеров для использования КСО. Нужны были большие изменения, но они требовали значительных инвестиций в развитие продукта и рост затрат на продуктовые команды.

 Редизайн зон с кассами самообслуживания
 Редизайн зон с кассами самообслуживания

Концепция нового интерфейса

Консистентность

После Discovery с гипотезами на руках я спроектировал концепцию нового интерфейса используя общую дизайн-систему, которую используют команды мобильного приложения и web-a Магнит. Важно было соблюсти узнаваемость и преемственность интерфейса. Это помогает быстрее понять, что пользователю нужно сделать на каждом экране и снижает стресс от использования нового устройства, а также формирует привычку. 

Версии сайта и приложения актуальны на июнь, 2023 г.
Версии сайта и приложения актуальны на июнь, 2023 г.

Особенности проектирования интерфейсов устройств самообслуживания

Размер экранов

Многие конкуренты грешат тем, что устанавливают кассы самообслуживания с огромными экранами 24”, где покупатели делают шаг назад, чтобы охватить взглядом весь экран в поиске нужной информации. Я настоял, чтобы в Магнит закупали экраны не больше 21” и не меньше 15”, потому что такими экранами удобнее пользоваться — в фокусе больше информации на экране, меньше движений головой для поиска информации глазами, при этом размеры элементов и шрифтов не страдают. Такое ограничение снизило косты на закупку оборудования. Например, в магазины с небольшой проходимостью, где большая часть корзин содержит 3–7 товаров, лучше ставить компактные 15” экраны. На таком экране вся нужная информация находится в фокусе зрения покупателя.

 Новая модель касс самообслуживания Магнит с экраном 15” в своей естественной среде обитания
 Новая модель касс самообслуживания Магнит с экраном 15” в своей естественной среде обитания

Фокус внимания 

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

Бенчмарки и референсы

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

Помимо бенчмарков я изучал референсы и исследовал зарубежный опыт. У касс самообслуживания нет своего сервиса типа «Моббина». Я просил друзей и знакомых из разных стран ходить на кассы и снимать видео процесса покупки. За год скопилась приличная база — что-то раздобыл сам на просторах разных форумов и редитах, что-то прислали друзья и знакомые. Когда-нибудь я выложу этот архив в открытый доступ…

Фотографии и видео экранов конкурентов со всего мира по месяцам
Фотографии и видео экранов конкурентов со всего мира по месяцам

Формирование привычки

Касса самообслуживания — это не персональное устройство, покупатель взаимодействует с ней всего 30 секунд, до 15 минут в неделю. У него нет времени на изучение экранов, процессов и сценариев. Привычка и паттерн поведения формируются через несколько использований, и даже один негативный опыт может серьёзно повлиять на то, вернётся ли покупатель к кассе в следующий раз. Поэтому важно действовать осторожно, постепенно улучшая восприятие продукта и добавляя новые функции. Это поможет максимально приблизить кассу самообслуживания к опыту оплаты покупок на обычной кассе, что в будущем обеспечит плавный переход от касс с кассирами к кассам самообслуживания.

Тестирование нового интерфейса

Подготовка

Вместе с исследовательницей Дашей Смольской, с которой мы проводили первые оффлайн исследования (о них я рассказывал в прошлой статье), инициировали первые в Магните оффлайн UX-тесты кассы самообслуживания. Подготовили тестовый стенд с прототипом, имитацию сканера и добавления товара, включили звуки кассы и магазина, сделали бутафорские товары со штрихкодом и принесли настоящие. Это позволило погрузить респондента максимально глубоко в контекст.

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

Тестирование

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

После выполнения заданий проводили интервью. Чтобы проанализировать сценарии и удобство весь процесс покупки записывался на видео.

Сначала протестировали систему на коллегах, выявили все недочёты и ошибки, которые быстро исправили. После этого приступили к тестированию с респондентами.

Чеклист с вопросами до и после всех интервью
Чеклист с вопросами до и после всех интервью

Респонденты

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

 Помимо записи на камеру велась запись звонка в тимсе, чтобы потом расшифровать диалоги
 Помимо записи на камеру велась запись звонка в тимсе, чтобы потом расшифровать диалоги

Результаты

По результатам UX-тестов, 95% гипотез показали высокую степень достоверности. Среди ключевых выводов респонденты особенно отмечали:

  1. Преемственность дизайна — «Это то, что я вижу у себя в приложении!».

  2. Процессы стали намного понятнее, а интерфейс — интуитивнее.

  3. Отметили «фишечки», которых нет у конкурентов: подтверждение веса при взвешивании, картинки товаров в списке в корзине, информация по акционным товарам.

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

После презентации результатов UX-теста стейкхолдерам многие гипотезы превратились в идеи и истории в беклогах Discovery и Delivery. Далее вместе с продактами приоритизировали беклоги по фреймворку ICE, который подкорректировали под свои потребности.

Целевой дизайн

Защита концепции развития продукта

После UX-тестов у нас появился «идеальный» образ кассы самообслуживания — такой, какой её хотят видеть и стейкхолдеры, и покупатели. Параллельно с продактами мы сформировали стратегию продукта на ближайшие годы, где я принимал активное участие.

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

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

  1. Продолжаем закупать только вертикальные экраны.

  2. Предрелизы — показываем стейкхолдерам готовые end-to-end сценарии, чтобы на ранних этапах отловить всю критику (забегая вперёд — ничто не заблокировало раскатку редизайна на всю сеть, все пользователи тепло приняли изменения).

  3. До, во время и после релиза редизайна активно валидируем новые фичи в Discovery.

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

Сборка макетов для разработки

Но есть один нюанс!

Размеры элементов и типографики в дизайн-системе, которая использовалась для web-интерфейсов, совсем не подходили под специфику взаимодействия с кассой самообслуживания. Экраны здесь намного больше смартфонов и ноутбуков — 21” и 15”, находятся на большом расстоянии от глаз. Нужны были большие и жирные начертания шрифтов и огромные кнопки, которые удобно нажимать. В дополнение ко всему у продукта не web-стэк — использовать наработки коллег мы не могли. Я собрал свою дизайн-систему с блэкджеком, токенами и адаптацией под разные форматы магазинов и размеры экранов.

 У кассы самообслуживания своя дизайн-система
 У кассы самообслуживания своя дизайн-система

Улучшения пользовательского опыта

С разработкой договорились — аннигилировать старый фронт и собрать новый, на свежей дизайн-системе. Основные сценарии не меняем, но максимально фиксим всё, что недорого и недолго. Так обновилась навигация — теперь кнопка «Назад» ведёт на предыдущий шаг или отменяет действие, а раньше она вела в корзину. Многие сценарии сократились: удаление товара уменьшилось с 5 до 1 нажатия, и изменение количества превратилось из сложного сценария в одно нажатие. Улучшили сценарии работы с бонусами и картой Магнит Плюс, сократив лишние действия. 

Корзина

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

Размер шрифта в строке добавленного товара адаптируется под размер экранов диагональю 21” и 15”. Там появились кнопки удаления и изменения количества товара. Чтобы добавить сразу 10 одинаковых товаров теперь можно ввести вручную количество между кнопкой удаления и плюсом. Если покупатель добавляет больше трех товаров — нажатием на плюс или сканируя, — то появляется подсказка о ручном вводе количества, рассказывая о новом функционале. Блок быстрого добавления с карточками товаров пока решили не убирать, оценим востребованность и будем решать его судьбу.

Кнопка перехода к оплате стала главным объектом на экране. Выделил кнопку поиска весовых товаров и товаров без штрихкода: выпечку, хлеб, горячие напитки и готовая еда. Появилось состояние пустой корзины, в него можно попасть нажав на стартовом экране кнопку «Начать покупки» (от которой мы пока не можем избавиться) или отсканировав бонусную карту Магнит Плюс. Иконка бонусной карты Магнит Плюс плавно анимируется, призывая покупателя отсканировать её, чтобы получить дополнительную выгоду. Появились всплывающие подсказки и лейблы у акционных товаров, по нажатию на которые открывается подробная информация об акции. Если требуется подтвердить возраст или покупатель нажал кнопку «Позвать сотрудника» появится ненавязчивое уведомление о том, что перед оплатой подойдёт сотрудник.

Корзина с обновлённым списком добавленных товаров и новым функционалом
Корзина с обновлённым списком добавленных товаров и новым функционалом

Поиск весовых товаров и товаров без штрихкода

Каталог обновился. Появилась удобная клавиатура, которую можно скрыть. Картинки и названия товаров стали больше. Размер шрифта в названиях товаров адаптируется под экраны разных размеров — 21” и 15”. Если поиск по названию не дал результатов, то система предлагает поискать по штрихкоду товара. Здесь исключён любой фрод, так как поиск штрихкода происходит только по актуальной базе товаров.

 Поиск по штрихкоду стал более очевидным
 Поиск по штрихкоду стал более очевидным

Взвешивание

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

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

 Новый сценарий взвешивания товара
 Новый сценарий взвешивания товара

Выбор из нескольких видов пакетов и условия предложения пакета перед оплатой

В больших магазинах Магнит и гипермаркетах на кассах самообслуживания два вида пакетов: большой и маленький. В остальных — только один. Теперь появилась возможность настраивать этот параметр. Также появилась кнопка добавления пакета на разных этапах: стартовый экран, корзина, в конце покупки, если забыли добавить пакет в корзине.

Теперь система анализирует корзину, и если в ней уже есть пакет или менее 4 товаров, или вес добавленных товаров меньше 2 кг, то система не предлагает пакет перед оплатой. Это сократило общее количество нажатий в усредненном сценарии покупки до трёх и уменьшило время покупки.

Система предлагает на выбор нескольких видов пакета и учитывает состав корзины
Система предлагает на выбор нескольких видов пакета и учитывает состав корзины

Подтверждение возраста и контур сотрудника

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

Белые полосы анимируются, это хорошо заметно из зала
Белые полосы анимируются, это хорошо заметно из зала

Чекаут, оплата и конец покупки

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

Необязательно списывать все бонусы сразу
Необязательно списывать все бонусы сразу

Улучшения UI

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

Тексты

Дмитрий Лазарев, UX-редактор Магнит ОМНИ. Tone of Voice, специфика КСО, дизайн словами:

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

В процессе работы мы корректировали сценарии, учитывая технические ограничения. Коридорные тесты и UX-исследования помогли выявить проблемные моменты: например, кнопку “Поиск” заменили на “Найти товар”, что устранило путаницу. Первые отзывы после раскатки редизайна подтверждают, что мы добились значимых улучшений, и это круто.

Иллюстрации

Екатерина Хлёсткина, иллюстратор Магнит ОМНИ:

Сначала я создала пакет иллюстраций для редизайна касс самообслуживания в старой стилистике, но после обновления мобильного приложения Магнит их пришлось переработать. Это было необходимо для поддержания единого стиля: покупатели редко взаимодействуют с кассами, поэтому знакомый интерфейс помогает избежать стресса. Я адаптировала иллюстрации под новые требования, подогнала их под размеры экранов, убрала «светящиеся» элементы, так как фронт кассы не «кушал» их в формате .SVG, и добавила больше деталей. Метафоры стали точнее, а общий стиль сохранился единым с приложением OMNI, что упростило использование касс и поддержало согласованность всех точек контакта с брендом.

Адаптация под форматы магазинов и размеры экранов

Кассы самообслуживания устанавливаются в магазины Магнит разных форматов: Магнит у дома, гипермаркеты Семейный, Экстра, магазины Магнит Косметик и хард дискаунтеры. У каждого формата свой брендовый цвет (красный, розовый и зеленый). При разработке мы заложили разделение по форматам и унифицировали добавление новых форматов, как со стороны дизайна, так и на стороне фронта — описали требования и процессы по добавлению новых форматов. При смене формата магазина в интерфейсе адаптируются логотип, цвет главных (Primary) кнопок и некоторые картинки — на стартовом экране и иллюстрации пакетов.

Помимо формата ПО адаптируется под диагональ экрана кассы самообслуживания — на маленьком экране 15” кегль шрифта больше, на 21” «стандартный». Кассы с маленьким экраном 15” стоят в зонах выпечки и горячих напитков, в формате Магнит Косметик, где пользуются большим спросом.

Улучшения Happy Path

В рамках редизайна мы сократили количество обязательных нажатий при средней покупке до трёх для трети корзин. Стандартный сценарий включает: сканирование товара на старте, сканирование до 3 товаров в корзине, которые не требуют дополнительного взаимодействия с экраном, и выбор способа оплаты. Использование карты Магнит Плюс и списание бонусов остаётся опциональным, что ускоряет процесс для тех, кто этим не пользуется.

Для сравнения, в аналогичных сценариях у других крупных сетей требуется больше действий: в одном случае — 4 обязательных нажатия, в другом — 5, а у некоторых игроков рынка — более 6. Мы добились оптимизации взаимодействия без ущерба для удобства, что позволило нам улучшить пользовательский опыт и выйти вперёд по этому показателю. Мы планируем выпустить доработку, которая ещё больше упростит процесс, сократив количество нажатий до двух, что сделает покупку на кассах самообслуживания ещё быстрее и удобнее.

Разработка

Для такой объёмной задачи в команду вливались свежие силы фронтов и тестировщиков, в том числе из других команд, которые проходили ускоренный онбординг. Я записал видео о нашей дизайн-системе и атомарном подходе, объяснил, как и куда мы движемся и на что закоммитились. Разработчики фронта собрали свой Story Book для демонстрации работы элементов и токенов дизайн-системы.

Вместе с релизом основного ПО (да, мы не останавливали работу над основной веткой ПО), мы выпускали предрелиз редизайна с частью бизнес-процесса и демонстрировали его стейкхолдерам на тестовом стенде, делясь успехами и обсуждая сложности. Я менеджерил редизайн как деливери-менеджер, направлял разработчиков, отвечал на вопросы по дизайну и демонстрировал финальный предрелиз руководству и топ-менеджерам.

Карта экранов всех сценариев кассы самообслуживания без корнер кейсов
Карта экранов всех сценариев кассы самообслуживания без корнер кейсов

Пилотный запуск

Прежде чем катить редизайн на всю сеть необходимо было протестировать его на живых покупателях, понаблюдать за ними в естественной среде и собрать фидбек, чтобы понять, а не фигню ли мы сделали. Для этого установили ПО с редизайном на небольшое количество магазинов в трёх городах и группой исследователей сходили понаблюдать в зоны касс самообслуживания за нашими покупателями. У нас была анкета со сценариями, где мы отмечали проблемы и выставляли субъективную оценку. Это было невключенное наблюдение, без вмешательства в процесс покупки. Итоги исследования — всё хорошо: нагрузка на сотрудников снизилась, потому что интерфейс стал интуитивно понятным, редизайн нравится и покупателям (из анализа оценок в конце покупки на кассе самообслуживания), и сотрудникам (ежеквартальный опрос). Негатив был только в сторону тех проблем, о которых мы уже знали.

Заключение

В начале октября 2024 года мы успешно внедрили редизайн системы самообслуживания по всей сети магазинов Магнит. За 4 месяца команда из более чем 15 человек смогла реализовать полное обновление, тогда как аналогичные проекты у других команд могли бы занять до 2 лет. Благодаря нашему подходу и слаженной работе, количество покупок через кассы самообслуживания увеличилось на четверть, а удовлетворённость от взаимодействия с ними выросла более чем в полтора раза.

Этот масштабный и сложный проект был завершён в рекордные сроки, и результаты уже заметны: клиентский опыт стал значительно лучше, работа касс — эффективнее, а интерфейс более удобным для покупателей.

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

Планы на будущее

Далее мы будем реализовывать стратегию развития продукта, не снижая темпы, и продолжим поставлять ценность как покупателям, так и бизнесу. У нас есть амбиции стать лидерами в области оснащения и клиентского опыта. Планируем запустить эксперименты по замене обычных касс в магазинах на кассы самообслуживания с обязательным участием ассистента в зоне касс. Это нововведение позволит улучшить обслуживание и поддержать клиентов в процессе покупок. Будем адаптировать подход в зависимости от обратной связи. Что получится – расскажу в следующих сериях. А за обновлениями можно следить в моём Телеграм-канале — t.me/egorbeliy, где пишу о своём пути из продуктового дизайна в продуктовый менеджмент.

Комментарии (47)


  1. MonkeyWatchingYou
    24.10.2024 12:34

    Проделан большой объём работы.

    Я просил друзей и знакомых из разных стран ходить на кассы и снимать видео процесса покупки
    Наверное одно из самых тяжёлых этапов это когда нужно понять к чему и как подступится.
    Знакомо.
    Теперь буду высматривать когда обновится у нас :)))
    Типо - Ага! Я читал про это!


  1. An_private
    24.10.2024 12:34

    В магните у дома уже новый интерфейс. В принципе - стало получше. Но:

    • очень большая разница размера шрифта в списке покупок и информационных сообщениях - чтобы прочитать список покупок надо придвигаться к экрану, но тут же на весь экран выскакивает какая-то информационная надпись просто вылетающая из поля зрения

    • неудобно, что для сканирования скидочной карты надо нажимать лишнюю кнопку. Очень удобно сделано в магазине Верный - в любой момент покупки предъявляешь скидочную карту, он её фиксирует и всё - никаких лишних нажатий

    Что-то еще было, вспомню - напишу


    1. EvgeniyIvanovhabr
      24.10.2024 12:34

      Согласен насчет скидочной карты, в магазинах X5 Ритейл работает также, просканировал в любой момент и карта активирована.

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


    1. beliyyy Автор
      24.10.2024 12:34

      1. Это решение продиктовано разницей объёма информации. Плюс ошибки считывают сотрудники издали, если находятся рядом в прикассовой зоне.

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


  1. Vad344
    24.10.2024 12:34

    Статью не дочитал, слишком много и нудно.

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


    1. beliyyy Автор
      24.10.2024 12:34

      А что конкретно путает? Давайте обсудим.


  1. Vlad-sl
    24.10.2024 12:34

    Прочитал,

    Ничего не изменилось.

    1. Проще купить в обычной кассе выпивку. Чем тут тупить и ждать когда его вкличество сотрудник подойдет.

    1. Нет оплаты наличными.

    И еще часто сталкиваюсь что один и то. Же сотрудник находится на кассе, и бегает решать вопросы с этими балалайками?

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


    1. EvgeniyIvanovhabr
      24.10.2024 12:34

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

      А платежный терминал самообслуживания с возможностью принимать наличку очевидно будет стоить как минимум х10 к безналичному + возня с инкассацией + больше поломок механики, такие могут окупиться только в самых проходных магазинах с круглосуточными очередями, в магазинах «у дома» никто такие ставить не будет никогда.

      Кассы самообслуживания – лучшее что случилось с ритейлом. Я в принципе избегаю магазинов где из нет, к счастью таких становится всё меньше. Вместо абсолютно идиотского стояния в очередях – подошел, пробил, оплатил, ушел. Зачастую ускоряет посещение магазина в несколько раз, особенно если зашел за чем-то мелким, вроде воды и мороженого.

      На всё про всё может уйти меньше минуты – подхватил мороженое, пробил и ушел, а с обычной кассой потратил бы в несколько раз больше времени на ожидание, пока кто-то отсчитывает деньги, ему отсчитывают сдачу + тьма людей, которые сначала все покупки складывают в пакеты и лишь ЗАТЕМ оплачивают, и пусть весь мир подождет. Бррр. И главное, очередь к обычной кассе абсолютно непредсказуема. Может занять и три минуты и пять и все десять.


      1. inkelyad
        24.10.2024 12:34

         Вместо абсолютно идиотского стояния в очередях – подошел, пробил, оплатил, ушел.

        Из занудства - Очереди бывают к любому способу оплаты. От того, что там человека нет, оно не очень зависит.

        На всё про всё может уйти меньше минуты – подхватил мороженое

        Идешь к кассам, а они все заняты людьми с тележками...


        1. EvgeniyIvanovhabr
          24.10.2024 12:34

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

          А вот очереди к обычной кассе – нормальное явление в любое время, особенно на фоне тотальной экономии на персонале. По моему опыту, в подавляющем большинстве случаев к кассам самообслуживания очереди нет или она совсем небольшая.


          1. inkelyad
            24.10.2024 12:34

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

            Это дефект организации предкассового пространства (или как оно правильно называется), а не собственное свойство касс самообслуживания. Вполне возможно все организовать так, чтобы была одна очередь и ко всем кассами с сотрудниками, а не у каждой своя. И именно обслуживание одного человека - у самообслуживания немножко медленней. Кассиры все-таки руку набивают на "взять-просканировать-положить". Плюс этап сгребания товара после оплаты - у автоматических длиннее. Там почему-то корзинок, куда можно товар положить, чтобы потом сразу все схватить и кассу освободить, не предусмотрено.

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

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


        1. Mishootk
          24.10.2024 12:34

          Идешь к кассам, а они все заняты людьми с тележками...

          С живыми кассирами раньше были экспресс-кассы, где "3 товара в тележке". Как это регулировалось не знаю. Можно выделять отдельный пост с уменьшенным монитором, почти без столика для товаров, без продажи сигарет и алкоголя. Наверное, с некоторым ограничением по количеству (в один чек не лезет больше). Поначалу об него будут спотыкаться, но со временем попривыкнут и он будет разгружать потоки.


  1. Yura_PST
    24.10.2024 12:34

    Проблему, что нужно низко нагибаться за пакетом, планируется решать?


    1. 4chemist
      24.10.2024 12:34

      1. Подозвать девочку помогашечку с просьбой достать пакет.

      2. Носить пакетик с собой в кармашке.

      3. Брать столько товара чтобы все распихать по карманам (и за щеку).

      4. Идти на обычную кассу и там на вопрос о пакетике ответить утвердительно.

      5. Отправить маму (отца, жену, сестру).

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

        Накидайте в панамку этому гражданину как планируется решить его проблему с нагибом за пакетиком.


      1. Yura_PST
        24.10.2024 12:34

        1. Роборука к кнопка на дисплее "Подать пакет".


    1. alcanoid
      24.10.2024 12:34

      Авоську с собой надо носить — это экологичнее, и нагибаться никуда не надо.


  1. wolodik
    24.10.2024 12:34

    Здорово, что несмотря на то, что Азбука Вкуса и Перекрёсток сделали всё как надо ещё лет 10 назад, есть магазины, которые проходят весь путь самостоятельно и приходят к тому же результату, хоть и с опозданием, а филиал ада остаётся в Ашане с Лентой, с подходом "мы кассы поставили, но ими не пользуются - заставим, сократив до максимума обычные".
    Т.е. можно было поездить по сетям, попользоваться их кассами, и сделать так же но немного лучше уже давно, но это не путь самурая. Не суть, главное - молодцы, что заморочились тем чтобы сделать хорошо, и довели до конца.


    1. EvgeniyIvanovhabr
      24.10.2024 12:34

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

      А в ленте раньше стояли жуткие, страшно неудобные кассы, согласен, но во всех окрестных магазинах их давно выкинули на свалку истории и теперь стоят практически такие же терминалы как в магазинах x5


  1. Mishootk
    24.10.2024 12:34

    Кстати да, заметил, что теперь пакет на мелкой покупке не предлагает.

    Теперь надо избавиться от шага выбора печати чека. Предлагаю при выборе способа оплаты сразу активировать бесчековый режим (при этом иметь тут же чек-кнопку для включения опции печати), а после успешной оплаты держать на экране кнопку "хочу чек" и "завершить". И это финальное состояние держится с таймаутом (прогресс бежит и виден, чтобы не зевали). Далее касса переходит в режим ожидания новой покупки.

    Тогда мелкие покупки по карте будут вообще в 1 касание: скан товара, кнопка оплаты, поднесение карты.


    1. DrGluck07
      24.10.2024 12:34

      Воооооот! Это моя боль во всех магазинах с такими кассами. У меня в руках 1-2-3 товара, хочется быстро всё это отсканировать, оплатить, и уйти. Но нет, проходи квест из ста тридцати трёх вопросов про количество пакетов, способ оплаты, печать чека, вид бонусной карты, температуру на Марсе, etc. А ежели у тебя недайбох алкоголь, то всё, туши свет.

      Во Вкусвилле ещё можно поучаствовать в квесте "выбери товар дня на завтра". Говорят, что "товар дня" можно выбрать из списка отсканированных товаров. Но, видимо, это какая-то специальная магия, мне ни разу не удалось. Алё, UI-дизигнеры, задумайтесь: программист с 25-летним опытом не сумел воспользоваться вашим интерфейсом.

      upd: Ах да, ещё и в конце просят оценить магазин/кассу/товары. Ибо до пятницы я совершенно свободен (с), поэтому почему-бы не ответить на пару тупых вопросов.


  1. inkelyad
    24.10.2024 12:34

    Появилось дополнительное окно с вопросом «Печатать ли чек?». Это добавило лишнее нажатие, но зато облегчило жизнь сотрудникам, так как чеки перестали копиться у касс самообслуживания, а покупатели стали проявлять заботу о природе.

    Сейчас меня будут бить за просьбу усложнить интерфейс...

    Нужны еще как минимум два режима:

    1) Показать QR из чека на экране

    2) Напечатать только QR

    3) <nice to have>: показать нормальный QR-с URL-ом внутрь сайта ОФД, где этот чек лежит.

    Потому что сама по себе бумага - не так чтобы нужна. А вот информация с чека - полезна.

    И я в курсе, что, якобы, можно сообщить, куда этот чек можно прислать. Но я ни email-ом, ни телефоном с магазином делиться не собираюсь.


    1. alcanoid
      24.10.2024 12:34

      Чеки, если вы не в курсе, можно пробивать офлайн, периодически отправляя информацию в ОФД — как в этом случае QR-с URL-ом внутрь сайта ОФД предполагается сгенерировать? Или представьте сельский магазин со слабой линией связи, где все очень обрадуются замедлению работы касс из-за того, что касса ждёт отклика от ОФД до победного.

      Идея неплохая, но столько всего надо учесть!


  1. pavel_raskin
    24.10.2024 12:34

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

    Но при этом видим:
    "Сколько бонусов списать?" - Спишите возможный максимум! Неужели их реально кто-то копит?
    "Спасибо за покупку. Оцените магазин..." - Какая оценка? Я не хочу задумываться, а хочу просто уйти.
    "Нужен чек? Да/Нет" - Сделайте по умолчанию без чека, т.к. я не хочу задумываться, а хочу просто уйти, а для редких случаев когда он кому-то нужен кнопку после завершения покупки для печати чека (можно вместо "Оцените магазин...").


    1. inkelyad
      24.10.2024 12:34

      а хочу просто уйти, а для редких случаев когда он кому-то нужен кнопку после завершения покупки для печати чека (можно вместо "Оцените магазин...").

      В это случае все равно придется нажимать кнопку перед началом набора товаров. Оставшуюся от предыдущего покупателя.


      1. pavel_raskin
        24.10.2024 12:34

        Ну да, или голосовать в опросе "Оцените магазин", оставшемся от предыдущего покупателя?
        Для таких случаев таймаут есть, что и предложил @Mishootk в сообщении чуть выше.


        1. inkelyad
          24.10.2024 12:34

          Таймаут не очень работает, когда поток покупателей большой. Как отошел один - сразу следующий подходит.


          1. pavel_raskin
            24.10.2024 12:34

            Поток покупателей только в определённые часы. Ну и в конце концов камеру (уверен что она там есть) можно нагрузить банальной доп.задачей по определению смены клиента.


      1. Mishootk
        24.10.2024 12:34

        В это случае все равно придется нажимать кнопку перед началом набора товаров. Оставшуюся от предыдущего покупателя.

        Не надо. Товар или карта в сканере - начало новой покупки с завершением всего от предыдущей. Так сейчас и работает вроде, когда висит окно с вопросом оценки.


  1. kolabaister
    24.10.2024 12:34

    1. А кассы уже научили обрабатывать случаи когда код маркировки находится рядом со штрих-кодом?

    2. А как обрабатывается разрешительный режим?

    Было бы очень интересно почитать статью описывающую разницу в интерфейсах автокасс в разных странах и самые странные интерфейсы.


    1. pavel_raskin
      24.10.2024 12:34

      А кассы уже научили обрабатывать случаи когда код маркировки находится рядом со штрих-кодом?

      Сомнительно. Но многие покупатели уже научились лишний код рукой прикрывать.


  1. NizamovaDarya
    24.10.2024 12:34

    Это огромная работа. Спасибо за статью


  1. damart
    24.10.2024 12:34

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


  1. Smerig
    24.10.2024 12:34

    Три замечания (два из которых точно про ваш UI/UX):

    1. Это скорее не к вам, но тем не менее. Покупал на прошлой неделе зеленый лук, нигде в интерфейсе его не нашел, делал даже поиск по слову ("лук"). В итоге пришлось вводить код товара. После ввода товара на экране появляется... Лук свежий! Внезапно.

    2. Утверждение про пакеты неверное: вы утверждаете, что два вида пакетов, большой и маленький, только в гиперах и больших магнитах. По факту в небольшом магните у дома всегда в наличии 2 вида пакетов: большой и маленький. На старом ПО вообще не было возможности выбрать маленький пакет, поэтому даже при его наличии, если мне нужен был маленький пакет, приходилось брать большой (чё это я буду брать маленький, если плачу за большой). А это дополнительные деньги. Тут, думаю, стейкхолдеры вашу задумку оценили.

    3. Одна из последних картинок в вашей статье: взаимодействие с терминалом в три касания: прямо там уже видно небольшое неудобство в плане слома привычки. Сначала мы тыкаем пальцем правой руки (большинство все же правши) ближе к левому краю экрана. Да, так удобнее правшам. Но на третьем экране, где мы хотим отказаться от чека, и к чему в принципе вы нас хотите побудить (акцент на кнопке об отказе от печати чека), приходится нарушить свою автоматику (тыкать незадумываясь слева), увидеть акцент, затормозить, прочитать, что же это за акцент и потом еще перенести руку к правому краю экрана. Сделайте, что ли, зеленую кнопку слева.


    1. f45d07
      24.10.2024 12:34

      По п.1 тоже недавно вспомнил "добрым" словом в полный голос тех, кто это придумал. С бананами та же проблема. Начинаешь писать в поиске "бан", и никаких бананов оно найти не в состоянии.


      1. inkelyad
        24.10.2024 12:34

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


  1. rPman
    24.10.2024 12:34

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

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


  1. Mishootk
    24.10.2024 12:34

    О, про камеру.

    Уже сейчас весь интернет с любого смартфона умеет распознавать что на картинке. Уже кассы пытаются по лицу распознать человека для "оплаты улыбкой". Я хочу нажать поиск товара, помахать бананом перед кассой, чтобы та предложила варианты. Пусть будут ошибки (дополнительные варианты, например лимон-апельсин-мандарин, или персик-нектарин), это все равно удобнее чем буковками вбивать. Ну, голос, что-ли слушайте. Кассиры и то спрашивают - яблочки сезонные или гольден брали? Конфетки весовые по этикетке вообще милое дело.

    Людям зайдет. Плюс самодообучится - при неправильном распознавании клиент корректирует и это идет в обучение. Центр мониторит новый датасет.

    Чуть в сторону от этой темы. А можно по желанию клиента привязать свою банковскую карту (карты) к карте лояльности? Без лишних вопросов после оплаты, если карта из привязанной клиентом, то бонусы на нее начислять. Да, для списания надо предварительно карту предьявлять. Но списание идет не каждую покупку, а накопление всегда. Как бы после совершения платежа клиент всегда опознаваем. Налички же нет.


  1. inkelyad
    24.10.2024 12:34

    Я хочу нажать поиск товара, помахать бананом перед кассой, чтобы та предложила варианты.

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


    1. Mishootk
      24.10.2024 12:34

      Реально? Вообще ни одной статьи и новости про весы, которые через камеру определяют взвешиваемый товар. Ну и лично с такими не сталкивался.

      Было бы интересно почитать про такие кассы (или отдельные весы).


    1. beliyyy Автор
      24.10.2024 12:34

      В магазинах Магнит новой концепции стоят весы с распознованием товаров, к интерфейсу которых я тоже приложил руку. В Москве их можно «пощупать» по адресу — Малая Пироговская улица, 17


      1. rPman
        24.10.2024 12:34

        @beliyyy, статью как они работают и как это делали напишите?


  1. egribanov
    24.10.2024 12:34

    Сканирование купонов планируется или это привилегия останется только у кассиров?


    1. beliyyy Автор
      24.10.2024 12:34

      Планируется. Усердно работаем над этим


  1. moocluck
    24.10.2024 12:34

    Кассы Магнита все ещё называют терминал устройством ввода пин-кода? Озвучка максимально мерзкая...


    1. beliyyy Автор
      24.10.2024 12:34

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


  1. soroktu
    24.10.2024 12:34

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


  1. alcanoid
    24.10.2024 12:34

    Отличная работа! Сегодня как раз оценил обновление. Было неудобно, стало гораздо лучше.

    В общем, продолжайте в том же духе, не слушайте неконструктивных критиков, а конструктивных слушайте! :)