Новый UI/UX касс самообслуживания: больше никаких «а куда жать?..»

Главное о кейсе

2020 год стал прорывным для рынка касс самообслуживания — через них проходит от 45 до 80% трафиков крупных ритейлеров.
Но, несмотря на растущую популярность этого способа покупки, UI/UX ПО для касс остаётся устаревшим: в них не реализованы многие сценарии покупки, визуальное оформление мешает сориентироваться в интерфейсе, значение кнопок не всегда ясно.
В этом проекте мы обновили UI/UX для компании Resol Software. Ребята более 10 лет занимаются самообслуживанием, а сейчас разрабатывают собственное ПО для касс самообслуживания, среди их клиентов — крупнейшие ритейлеры России.
Мы проработали все пользовательские сценарии в ходе покупки, разработали визуальный стиль и адаптировали UI/UX под два популярных формата касс. Кроме того, мы добавили мелочи для ещё большего комфорта и покупателей, и консультантов. Клиент уже представил новый UI на выставке RetailTECH 2023 и собрал позитивные отзывы.

--
2020 was a breakthrough year for the self-checkout market - from 45 to 80% of the traffic of large retailers passes through them.
But, despite the growing popularity of this method of purchase, the UI/UX of checkout software remains outdated: many purchase scenarios are not implemented in them, the visual design makes it difficult to navigate the interface, and the meaning of the buttons is not always clear.
In this project we updated the UI/UX for Resol Software. The guys have been engaged in self-service for more than 10 years, and are now developing their own software for self-checkouts; among their clients are the largest retailers in Russia.
We worked through all user scenarios during the purchase, developed a visual style and adapted the UI/UX for two popular checkout formats. In addition, we have added little things for even greater comfort for both buyers and consultants. The client has already presented the new UI at RetailTECH 2023 and received positive feedback.

Как проект изменил жизнь пользователей

Теперь посетители ритейлеров, которые сотрудничают с Resol, могут быстро и комфортно купить любые товары. Мы разработали семь экранов для шести популярных сценариев: поиска товара, удаления, покупки товаров 18+, оплаты картой и наличными и многих других.
Анимации подсказывают, что именно нужно сделать на конкретном этапе — с интерфейсом смогут разобраться посетители разных возрастов. А если касса не работает, на экране горит привычный всем «кирпич».
Ещё мы добавили несколько деталей. Например, на кассах появились часы, которые помогают сориентироваться, успеет ли гость купить алкоголь. Для удобства консультантов на экран мы поместили цветной индикатор — он сигнализирует, что нужно подойти к покупателю, и дублирует светофор над самой кассой. Теперь консультант заметит, что нужна его помощь, и издалека, и рядом с кассами.

--
Now visitors to retailers who cooperate with Resol can quickly and comfortably buy any goods. We have developed seven screens for six popular scenarios: searching for a product, deleting, purchasing 18+ products, paying by card and cash, and many others.
Animations suggest what exactly needs to be done at a particular stage - visitors of different ages will be able to understand the interface. And if the cash register does not work, the familiar “brick” lights up on the screen.
We also added a few details. For example, clocks have appeared at the checkout counters that help determine whether the guest will have time to buy alcohol. For the convenience of consultants, we placed a color indicator on the screen - it signals that you need to approach the buyer, and duplicates the traffic light above the cash register itself. Now the consultant will notice that his help is needed, both from afar and near the cash registers.

Бизнес-задача и ее решение

По данным исследования самих Resol, сейчас через КСО проходит от 45 до 80% трафика крупных магазинов. Этот показатель продолжает расти — после пандемии люди всё активнее ими пользуются, не желая стоять в очереди к единственной рабочей кассе. Несмотря на то, что решений для КСО на российском рынке предостаточно, для клиента было важно выйти на него со своим уникальным решением, качественно отличающимся от того, что делают конкуренты. Особое внимание было уделено UX и UI — они должны были быть понятны и удобны аудитории.

Мы должны были сделать дизайн:
- интуитивно понятным и максимально простым для разных сегментов ЦА — сохранить в нём путь «сканируй — клади — оплати»;
- достаточно контрастным и приятным глазу, чтобы все детали были различимы;
- адаптируемым под различные бренды.

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

Нам нужно было разработать UI/UX, который решал бы эти проблемы.

--
According to a study by Resol themselves, now from 45 to 80% of the traffic of large stores passes through CSR. This figure continues to grow - after the pandemic, people are using them more and more actively, not wanting to stand in line at the only working cash register. Despite the fact that there are plenty of solutions for CSR on the Russian market, it was important for the client to enter it with its own unique solution, qualitatively different from what competitors are doing. Particular attention was paid to UX and UI - they had to be understandable and convenient for the audience.

We had to design:
- intuitive and as simple as possible for different segments of the target audience - keep the “scan - put - pay” path in it;
- sufficiently contrasting and pleasing to the eye so that all details are distinguishable;
- adaptable to different brands.

To do this, we conducted a study of the ease of use of various cash registers and identified several problem areas:
- the functionality of not all buttons was immediately clear at first glance - the risk of breaking the script increased;
- the path to purchasing a package consisted of three steps: you had to enter the quantity, confirm it and agree that the purchase amount will increase. You could refuse the package only by selecting 0, which is not at all obvious;
- the colorful background distracted from the fast purchasing process - it was difficult to navigate the details on the screen;
- gradients made it difficult to distinguish between product photos.

We needed to develop a UI/UX that would solve these problems.

Крафт (мастерство), реализация, технические детали

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

Прототипы мы накладывали на КСО двух форматов — 4:3 и трендовый в последние 2-3 года 9:16. Кассы с этими вариантами пропорций экранов вы можете встретить в магазинах чаще всего. При этом каждый формат диктует свои условия размещения элементов: например, на кассах 9:16 больше места для контента, но они неудобны для детей и пользователей с небольшим ростом.
Также мы разработали набор иконок и фон для устройств. Обычно на экранах можно видеть фото продуктов, но они довольно пёстрые и мешают сориентироваться. Мы нарисовали для фона цветные дудлы продуктов, и на самих устройствах они выглядели очень контрастно — взгляд цеплялся.

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

--
We created a map of the user journey when using the checkout and, based on it, developed prototypes for all scenarios.

We applied prototypes to CSR in two formats - 4:3 and the trendy one for the last 2-3 years, 9:16. You can most often find cash registers with these screen aspect ratios in stores. Moreover, each format dictates its own conditions for the placement of elements: for example, at 9:16 checkouts there is more space for content, but they are inconvenient for children and short users.
We also developed a set of icons and backgrounds for devices. Usually you can see photos of products on the screens, but they are quite colorful and make it difficult to navigate. We drew colored doodles of products for the background, and on the devices themselves they looked very contrasting - they caught the eye.

In total we have developed:
- 7 screens;
- two different format backgrounds;
- more than 30 functional icons.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

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

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

--
When we were selecting interface references, we realized that self-service checkouts are like a large smartphone or tablet. People are already accustomed to the minimalistic tiled interface of most mobile applications, with accent tiles placed against the backdrop of characteristic corporate colors.

This design can be easily customized for a specific brand and does not allow you to get confused in the buttons - nothing prevents the user from following the script. Therefore, for our interface we chose white tiles and a black background with drawings, which can easily be replaced with the desired color.

We placed all the main semantic elements and buttons at the 9:16 format cash registers in the middle and bottom of the screen - again, by analogy with smartphones. This way, the user doesn’t have to spend a long time looking for where to click and reaching to the top of the cash register.

The client was very actively involved in the project. During the process, we constantly sent the interface with backgrounds and icons “for testing” at real cash registers. At the same time, managers from Resol actively shared their impressions: they told what associations the icons evoked in them, what solutions they liked best.

Скриншоты