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

В этом проекте мы обновили UI/UX для касс самообслуживания компании Resol Software. Ребята более 10 лет занимаются самообслуживанием, а сейчас разрабатывают собственное ПО, среди их клиентов — крупнейшие ритейлеры России.

По данным Resol, сейчас через КСО проходит от 5 до 80% трафика крупных ритейлеров. Но UI/UX для касс остаётся устаревшим: в них не реализованы многие сценарии покупки, визуальное оформление мешает сориентироваться в интерфейсе, значение кнопок не всегда ясно. Над этими проблемами нам и предстояло поработать.

Клиент:
Resol

Клиент:
Resol

Категория:
Дизайн интерфейсов

Экспертизы:
Design
UX/UI design
UX/UI research
Analytics

Дата:
2023

Мы проработали все пользовательские сценарии в ходе покупки, разработали визуальный стиль и адаптировали UI/UX под два популярных формата — 9:16 и 4:3.

Клиент уже представил новый UI на выставке RetailTECH 2023 и собрал позитивные отзывы.

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

Особое внимание было уделено UX и UI — они должны были быть понятны и удобны аудитории.

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

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

По итогу аудита мы сформулировали вместе с клиентом ключевые задачи. Мы должны были учесть все нюансы и сделать дизайн:

  1. Интуитивно понятным и максимально простым — сохранить в нём путь «сканируй — клади — оплати»;
  2. Достаточно контрастным и приятным глазу, чтобы все детали были различимы;
  3. Адаптируемым под различные бренды.

Мы создали карту пользовательского пути при использовании кассы и на её основе разработали прототипы для всех сценариев.

Прототипы мы накладывали на КСО двух форматов — 4:3 и трендовый в последние 2–3 года 9:16. Кассы с этими вариантами пропорций экранов вы можете встретить в магазинах чаще всего.

При этом каждый формат диктует свои условия размещения элементов: например, на кассах 9:16 больше места для контента, но они неудобны для детей и пользователей с небольшим ростом.

Теперь посетители ритейлеров, которые сотрудничают с Resol, могут быстро и комфортно купить любые товары. Мы разработали семь экранов для шести популярных сценариев: поиска товара, удаления, покупки товаров 18+, оплаты картой и наличными и многих других.

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

Всего мы создали:
— 7 экранов;
— 2 разноформатных фона;
— более 30 функциональных иконок.

Ритейлерам, с которыми работает Resol, нужна возможность адаптировать интерфейс КСО под свой фирменный стиль — и её мы тоже предусмотрели.

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

Дизайн интерфейсов
Следующий проект: