White Square | Белый Квадрат

Entries

Name

Resol — the new UI/UX of self-service checkouts

Advertised product

Resol — self-service checkouts

idea

The year 2020 was a breakthrough year for the self-service checkout market, with 45-80% of traffic in large retailers passing through them. However, despite the growing popularity of this method of shopping, the UI/UX of checkout software remains outdated: many shopping scenarios are not realized in them, the visual design makes it difficult to navigate the interface, the meaning of buttons is not always clear. In this project we updated the UI/UX for Resol Software. They have been working in the field of self-service for more than 10 years, their clients include the largest retailers in Russia. We worked out all user scenarios during shopping process, developed visual style and adapted UI/UX for two popular cash register formats. In addition, we added small things to make it even more convenient for both shoppers and consultants. The client has already presented the new UI at the RetailTECH 2023 exhibition and received positive feedback. Despite the fact that there are a lot of CSR solutions on the Russian market, it was important for the client to enter the market with its own unique solution, qualitatively different from what its competitors are doing. Special attention was paid to UX and UI - they had to be understandable and comfortable for the audience. We had to make the design - Intuitive and as simple as possible for different segments of the CA - keep the "scan - deposit - pay" path in it; - Sufficiently contrasty and pleasing to the eye so that all details could be distinguished; - Adaptable to different brands. In order to make our interface more user-friendly for end users, we conducted a usability study of several checkout systems and identified a few problem areas: - The functionality of not all buttons was immediately understandable at a glance - increasing the risk of scenario breakdown; - The way to buy a bundle consisted of three steps: you had to enter the quantity, confirm it, and agree to increase the purchase amount. The only way to cancel the package was to select 0, which was not at all obvious; - The colorful background distracted from the quick purchase process - it was hard to focus on details on the screen; Gradients made it hard to distinguish product photos. - We needed to create a UI/UX that would solve these problems. When we were selecting interface references, we realized that self-service checkouts are like a big smartphone or tablet. People are already used to the minimalist, tiled interface of most mobile applications, where accent tiles are placed on a background of distinctive corporate colors. This design is easy to customize for a specific brand, and there are no buttons to confuse users - nothing to stop them from following the script. That's why we chose white stripes and black background for our interface, with drawings that can be easily changed to the desired color. We placed all the main semantic elements and buttons on the 9:16 format cash registers in the middle and bottom part of the screen - again by analogy with smartphones. This way, the user doesn't have to spend a lot of time figuring out where to click and reach for the top of the cash register. The customer was very actively involved in the project. We constantly sent the interface with backgrounds and icons to be "tried on" at real cash registers. Resol managers actively shared their impressions: they told us what they associated with the icons and which solutions they liked best. Now visitors to stores that work with Resol can buy any product quickly and conveniently. We developed seven screens for six popular scenarios: product search, deletion, purchase of 18+ products, card and cash payment, and many others. Animations tell you what to do at each stage, so visitors of different ages can understand the interface. And if the checkout is not working, the familiar "brick" lights up on the screen. We also added a few details. For example, there is a clock on the cash register to help the customer decide if he has time to buy alcohol. For the consultant's convenience, we put a color indicator on the screen - it signals that you need to approach the buyer and duplicates the traffic light above the cash register. Now the consultant will see that his help is needed, both from a distance and near the cash register.