Назад Korzinka · Дизайн-студия

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

Редизайн КСО для крупнейшей продуктовой сети Узбекистана. Флоу собран с нуля с учётом местных особенностей: два терминала оплаты и кешбэк 1% по QR-коду.

Роль
Продуктовый дизайнер, полный цикл
Команда
Арт-директор, PM, команда клиента
Домен
Ритейл, платежи
Платформа
Сенсорный киоск
Проект в цифрах
8

касс самообслуживания изучил в поле за один день

2

платёжных терминала в одном сценарии оплаты

1%

кешбэк по QR-коду, встроенный во флоу

60+

экранов за 140 часов работы

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

Задача была не обновить визуал, а сделать кассу удобной и быстрой для всех. Главная местная особенность — два терминала оплаты на одной кассе. В российских КСО такого нет.

Старый дизайн КСО: три экрана
Касса до редизайна: стартовый экран, выбор товара без штрихкода — сетка одинаковых зелёных плиток без фото и цен — и корзина.

Работал в дизайн-студии с арт-директором и проджект-менеджером и отвечал за весь цикл.

  • Встречи с клиентом дважды в неделю. Разработчики, владелец продукта, бизнес. Презентовал решения, уточнял цели и требования
  • Защита решений. Показывал job stories и объяснял, как они ложатся в пользовательские пути
  • Погружение в контекст. Технические ограничения, локальные и культурные особенности, реальные сценарии

Основная аудитория — люди до 40 лет, привычные к цифровым сервисам. Но касса должна быть удобной и пожилым.

  • Запутанная структура старого интерфейса
  • Непонятная оплата, особенно с картой лояльности и QR-кодом
  • Мало подсказок и визуальной поддержки на каждом шаге
  • Штрихкод вводится вручную, без фото товара и поиска по категориям
  • Непонятно, сколько баллов начислится и что делать при ошибке
2 терминалаДля разных видов банковских карт
Много способов оплатыКарта, QR, бонусы
Без весовКонтроль через видеонаблюдение и персонал
Гипотеза

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

Чтобы не гадать, как должна работать идеальная КСО, я пошёл смотреть на живых людей у касс.

За день посетил 8 точек: Перекрёсток, Пятёрочка, Лента, О'Кей, Леруа Мерлен, Бургер Кинг, KFC и «Вкусно — и точка». Наблюдал, где люди тормозят и какие экраны вызывают затруднения. Всё сфотографировал, записал и перенёс в Figma.

Леруа Мерлен: Ввод кода вручную без фото товараЛеруа МерленВвод кода вручную без фото товара
Пятёрочка: Весы и товар без штрихкода прямо на стартеПятёрочкаВесы и товар без штрихкода прямо на старте
Перекрёсток: Помощь ассистента: как пользоваться кассойПерекрёстокПомощь ассистента: как пользоваться кассой
Перекрёсток: Оплата улыбкойПерекрёстокОплата улыбкой
Бургер Кинг: Выбор языка меню в отдельном окнеБургер КингВыбор языка меню в отдельном окне
Вкусно — и точка: Баллы по QR и языки прямо на стартеВкусно — и точкаБаллы по QR и языки прямо на старте
Фото из полевого исследования: снимал кассы и то, как ими пользуются люди.
Бенчмаркинг: Перекрёсток
Бенчмаркинг по каждой сети: путь покупателя по экранам, зелёные точки — удачные решения, красные — проблемы. Нажмите на доску, чтобы открыть крупно.

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

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

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

УдачноПомощь прямо на кассеКнопка помощи и пошаговое объяснение на старте. Важно для пожилых и тех, кто впервые на КСО.
УдачноОплата улыбкойБиометрия снимает лишние шаги и ускоряет оплату.
ОшибкаТри QR-кода на одном экранеНепонятно, какой код за что отвечает. Люди растеряны и ошибаются.
ОшибкаШтрихкод без фото и ценыКод вводится вручную, а человек не видит, что добавляет в корзину.
Доски с зелёными и красными точками
Банк решений целиком: зелёные точки — практики, которые стоит взять, красные — ошибки, которые нельзя повторять.

Из интервью с бизнесом и болей покупателей собрал job stories, а из них — набор UX-гипотез. На них опирался каждый экран.

Выбор языка→ Штрихкод или поиск без него→ Корзина и пакет→ Карта лояльности и баллы→ Оплата: терминал или QR→ Чек и кешбэк

Товар без штрихкода ищется по категориям и названию. Если что-то пошло не так, в шапке всегда есть «Инструкция» и «Вызов сотрудника».

Из интервью с бизнесом и болей покупателей собрал job stories. К каждой — гипотеза, как изменить опыт, и метрика, на которую она влияет.

Job stories и гипотезы в Notion. Нажмите, чтобы открыть крупно.

Собрал интерактивный прототип и проверил сценарии ещё до финального дизайна.

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

Экраны прототипа
Прототип для тестов: выбор товара без штрихкода, корзина и поиск по коду. На этих экранах люди проходили сценарии.

Концепцию строил на брендбуке сети, чтобы касса стала частью экосистемы бренда.

  • Подобрал размеры элементов и шрифтов под быстрое восприятие
  • Выделил ключевые действия цветом и визуальными маркерами
  • Учёл тех, кто пользуется КСО впервые
  • Проработал все состояния, включая ошибки и нестандартные сценарии
  • Подготовил UI-кит и спецификации, провёл ревью с разработкой и проконтролировал внедрение
Слева старая касса, справа новая. На старте одно главное действие и два запасных пути, а товар без штрихкода ищется по фото, категориям и названию.
Основной сценарий: скан, корзина, пакет, карта лояльности, способ оплаты, подсказка с нужным терминалом и чек с кешбэком. Экраны из финальных макетов.
Товар без штрихкода: из каталога по категориям или поиском по названию с экранной клавиатуры.
UI-кит КСО
UI-кит: кнопки, карточки товаров, поля, клавиатура и поп-апы. Передал его в разработку вместе со спецификациями.
  • Меньше нагрузки на персонал. Покупатели быстрее проходят сценарии и реже зовут помощь
  • Короче очереди. Сократилось общее время обслуживания, что важно в часы пик
  • Больше успешных транзакций. Понятная оплата и подсказки снизили ошибки при сканировании и оплате
  • Местные особенности стали преимуществом. Два терминала, кешбэк и многоязычие помогли быстрее привыкнуть к кассе
  • Поле быстрее отчётов. Один день у чужих касс дал больше, чем неделя разбора скриншотов
  • Локальный контекст меняет продукт. Два терминала — это не деталь, а другой флоу оплаты
  • Киоск читают на бегу. Размер, контраст и одно главное действие на экране важнее декора
Смотрите также

Другие кейсы

B2B CRMFinTechAdTech

Russ Online: запуск кампании на федеральной сети — за минуты

Дизайн-система с нуля, финансы, креативы и транзитная реклама для крупнейшего оператора наружной рекламы в России.

Минуты вместо часов на запуск креатива
DevOpsEnterpriseДашборды

Купол. Контейнеры: уязвимости и кластеры в одном окне

Продукт с нуля: JTBD, прототипы, A/B-тесты и 250+ экранов.

−25% время обработки уязвимостей
Web + MobileUI-китЛояльность

MGN: сайт из 2000‑х, пересобранный под задачи строителей

Аудит по Baymard, бонусная программа и оформление в три шага.

−35% время оформления заказа
NDAДизайн-системаWeb + Mobile

MON's: крипта без порога входа для обычных игроков

Лутбоксы, аналитика рынка и обучение новичков: год работы до закрытой беты.

180+ страниц в двух темах
FinTechMobileИсследования

Ozon Банк: с 9 до 29 млн пользователей за год

Онбординг, оформление карты в ПВЗ и QR-оплата вместо курьера как единственного канала.

40% новых карт — оформление в ПВЗ