The goal of Kesko's self-checkout is to provide users a fast and effortless check-out experience. I've noticed the need for improvement, which lead me to redesign the interface as a personal undertaking. My goal was to create a modern and user-friendly interface that also ensures accessibility. This project was designed in Figma.
I aimed to understand the users' issues during interactions with the self-checkout system to identify areas for improvement of the user experience. I leveraged the knowledge I gained through my observations while working at Kesko with these self-checkouts. I had the opportunity to observe real users interacting with the interface in their intended environment. This provided valuable insights into users’ behaviors, pain points, and needs. Additionally, I created a user flow map and a mockup of the current self-checkout’s interface to gain a deeper understanding of its functionalities and UI elements. Through these activities, I developed an understanding of the self-checkout's functionalities and identified key areas for improvement.
From my observations, I noticed that the users varied widely in age and capabilities, so the interface needed to be accessible and easy to understand, even when used in a hurry. I noticed pain points contributing to user confusion, particularly in the areas of CTAs and layout in addition to some missing features that, once added, would enhance the user experience. Therefore, I set a goal to create a user-friendly interface that could provide a seamless checkout experience without requiring assistance from a salesperson. Additionally, I aimed to upgrade the visual aspect of the interface to be more vibrant and modern-looking, while still fitting within the existing branding. Reflecting on my process, I could have created user personas or scenarios to support my findings.
I began by creating different wireframes and simple mockup ideas for the new interface I intended to design. However, starting from scratch did not lead to great results. Therefore, I decided to work with the mockup I had already created for the existing interface. I modified the UI elements and explored new layout options and different calls-to-actions. Since this project is personal, I did not conduct sufficient testing of my redesign. However, I conducted a small usability test with four participants. They were tasked with completing a self-checkout process from start to finish following provided instructions, similar to how they would use a regular self-checkout. The test identified a few areas needing adjustments, leading to one round of iteration.
User feedback from the small-scale usability test guided the final adjustments, supporting the goal of creating an accessible and user-friendly experience. In my redesign, I addressed challenges, added missing features, and improved the interface’s visual appeal to enable users to perform actions effortlessly and enjoyably without assistance. If the redesign were applied, it would enhance user experience, potentially increasing the number of customers in the future. The enhanced user experience could lead to a rise in self-checkout usage, potentially reducing checkout queues and the need for cashiers, thereby potentially cutting department expenses.
The layout in my redesign follows a top-to-bottom and left-to-right construction, aligning with a natural reading pattern. For instance, instructions are positioned on the left side of the interface, while the receipt. The main CTA, the 'proceed to pay' button, is placed beneath the receipt since users review it before paying. Less critical elements are positioned to the bottom corners with less contrast in the coloring and sizing relating to the other elements.
Related elements are grouped together in my redesign. For example, the plastic bag buttons are grouped with their position, size and color. Different groups are clearly differentiated from each other. All instructions and buttons are grouped to the left side of the interface. However, the main CTA, ‘proceed to pay’ button, is positioned to the right side of the interface to differentiate it from other buttons.
I chose to keep the background color as orange to match Kesko's branding but made it more vibrant. I made it also a gradient with a lighter shade of orange to enhance contrast between background and other orange elements. I would now choose a different color for the orange buttons since their contrast against the background is not high enough. Since I positioned the main CTA on the gray background under the receipt, I colored it bright orange to make it stand out from the background and draw attention to it.
The redesign's visuality communicates Kesko's brand, also having a modern and professional feel to it. I enhanced clarity in success messages by having a transparent background (consistent across elements with additional information) and adding an icon to signify task success. Icons are also added to all buttons to indicate the CTAs visually. The K-plussa membership card logo is placed in necessary screen views to remind users to scan it.
© Niina Nummela
