The goal of Kesko's self-checkout is to provide users a fast and effortless payment 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 leveraged the knowledge I gained through direct user feedback and observation of real users interacting with the self-checkouts in their intended environment. I gained insights into the self-checkouts' functionalities and areas for improvement. Even though I focused on the visual side of this project, I also needed to prioritize accessibility since the self-checkout has a wide range of users with different needs regarding their age and disabilities.
I created a user flow map and mock-ups of the current self-checkout in Figma, which helped me to gain a deeper understanding of the functionalities and areas for improvement. I directly modified the mock-ups to the new visuality. Upon reviewing my design process, I realized I hadn’t given sufficient consideration to problem-solving which is why after completing the design, I revisited the initial problems and iterated my design to address them more effectively.
Because the project is a personal project, I didn't sufficiently test my redesign. However, I conducted a small usability test with four participants. The participants were tasked with completing a self-checkout process from start to finish following the provided instructions, similar to how they would use a regular store self-checkout. The test revealed a few points that needed adjustments, leading to a a second round of iteration.
In my redesign, I added the missing features and addressed challenges to enable users to perform desired actions 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
