Our partner MAGO approached us to design a user-centered interface for their CLEVER Smart Trolley. By investigating the trolley in a real store and formulating user flows, we were able to deliver a new UX/UI that allows customers to scan products and check-out without waiting.
Retailers, particularly in the FMCG space, have increasingly adopted smart self-service solutions to streamline checkout and reduce queuing time. The CLEVER Trolley by MAGO, a Polish shop-fitting manufacturer, takes this a step further by combining self-checkout with the shopping cart.
Their breakthrough solution empowers shoppers to complete the entire shopping experience with minimal assistance from sales associates.
Conduct market research and analyze the existing trolley flow and GUI for usability issues and opportunities.
Design a new user flow and digital experience for customers
Prepare a new UI component library for the CLEVER GUI
The interface needed to be user-friendly and intuitive, even for users who are not tech-savvy. We had to keep in mind physical factors like store environments and accessibility, as well as EU requirements relevant to certified scales.
Smart trolleys have a limited amount of space to accommodate the interface and hardware. We had to optimize the small screen while maintaining the usability of the interface.
There were multiple ways of adding products, each requiring a dedicated flow. This includes scanning, weighing, adding by quantity, and age-restricted products.
During our visit to a grocery store where the initial version of Clever had been implemented and put into operation, we observed that while the checkout function was not yet available, the scanning, weighing, and integration with the self-checkout service were functioning smoothly.
However, we were quick to notice certain problems, not only concerning the trolley features but also with physical aspects such as the LED lighting and trolley onboarding process. Complications arose when attempting to remove items from the trolley and when purchasing alcohol, as the required ID verification posed additional challenges.
We developed a new user flow that encompasses the entire customer journey, from entering the store and noticing the trolley to the end of their visit. By mapping the flow, we ensured user goals were met, detected potential bottlenecks, and minimized the need for external assistance.
These flows also served as a structured framework for user testing, gathering feedback, and improving usability. Additionally, user flow diagrams are effective communication tools, fostering collaboration and alignment among designers, developers, product managers, and stakeholders during discussions and decision-making processes.
We identified multiple opportunities for stores to leverage user scanning data to offer complementary or alternative products. By identifying what items users have scanned or searched, stores can suggest products that pair well with the selected item. Additionally, they can display price promotions, such as bulk discounts for purchasing larger quantities.
This approach can be extended to recommend products based on the contents of the user's cart, enhancing the main scanning view. By capitalizing on these strategies, stores can enhance the overall shopping experience and increase customer engagement.
In preparing the UI components, graphics, and interface design, our focus was on ensuring that the essential functions remained highly prominent on the trolley interface, while also maintaining compliance with regulations.
We meticulously designed the user interface elements, keeping in mind the importance of clear visibility in a store environment and intuitive placement of key functions, such as scanning, weighing, and payment options. Our goal was to strike a balance between a user-friendly interface and adherence to regulatory requirements, ultimately providing a seamless and trustworthy experience for trolley users.
Our team has successfully developed a comprehensive user journey and interface that enhances the shopping experience by integrating product scanning, weighing, search and checkout functionalities into a single smart trolley, all aimed at enabling users to shop more efficiently.
We emphasized the importance of customization when preparing this design; it is adaptable and can be tailored to suit the specific needs of any business. Additionally, we have created an assistant panel and implemented a streamlined flow to promptly address any concerns or problems that may arise, empowering store staff to provide quick resolutions whenever necessary.
Tell us more about your project
and find out how we can help you.
