Harris Teeter Kiosk Redesign

Harris Teeter Self-Checkout Kiosk Redesign


The aim of this project was to find a kiosk and evaluate its usability, then to create redesigns of the screens which could be improved upon the most.

My goals in this redesign were to improve the groupings and/or locations of the buttons in ways that made more sense, make the buttons easier to read and push, and optimize the use of the space on the screen, in that order. While I implemented all three of my goals on all three of my chosen screens, each of them emphasized one goal over the others.

Overall Changes

I chose to make the accessibility-related buttons located at the bottom of the screen larger so that they would be easier to read and use. I made layout changes to accommodate these larger buttons, and at the same time moved some of the buttons from the bottom bar to sections that are more relevant to their functions. I changed the font sizes to better fit the resized buttons and be more readable, and I matched the current typeface to the best of my ability. I made the buttons on the main section of the screen larger when I was able to as well, so that they would be easier to press and utilize the space on the screen better.

The colors being used in the kiosk currently are readable and correctly emphasize the necessary buttons, so I left them unchanged. This is why my redesigns are in black and white.

While the icons on my prototype differ from the ones used in the original design, this was mostly done due to the selection of icons available to me in making it. I would, however, change the icon on the “Change Volume” button to feature the speaker alone, without the ambiguous-looking level indication next to it. The change of the icon on the “Call Attendant” button, which was renamed the “Help” button, was also intentional. “Help,” to me, is a more direct and readable label than “Call Attendant”.

Screen #1

Optimizing the Use of the Screen Space

For the first screen – which acts as an “open” sign and is the first thing a user interacts with – I saw a need to add buttons for the functions that people typically use before doing anything else at the kiosk. This screen was nearly blank, and served little function other than acting as a barrier to entry.

The “Use My Own Bags” button was hidden on the next screen in the middle of all of the buttons at the bottom of the window. These other buttons were unrelated to tasks done outside of the screen, so it made no sense to have it there. I renamed the “Alternate ID” button to “Rewards ID,” because this is acting as the primary means of entering a rewards number for the majority of people I have observed.

I also included the “Item Lookup” button on this screen to better facilitate using the self-checkout kiosk as a price checker. This was done so that the kiosk can be available more quickly for its intended use following a price check.

Screen #2

Improving the Groupings and Locations of the Buttons

For the second screen, I moved the buttons associated with ringing up items – the “Void Item”, “Large Item”, and “Item Lookup” buttons specifically – beneath the “receipt” section, where feedback for scanning the items is given. In this location, users can see the results of their actions immediately, and they don’t need to look far from where they see an error to find a solution.

I kept the “Use My Own Bags” button out of the bottom section and among the main options. By placing it immediately under the graphic that tells the user to put their item in a bag, I also accounted for this message suddenly reminding someone that they brought their own bag.

The “Rewards ID” button is in a prominent place next to the “Use My Own Bags” button to take advantage of any association between the two caused by the first screen, and I believe they both should remain easy to find for the sake of users who would like to use both functions.

Screen #3

Making Buttons Easier to Read and Push

For the last screen, which is used for checkout and payment options, I moved the “Back” button to the upper left corner of the section where users make their selections. This is the only screen of the three I chose where the “Go Back” button was “press-able” under the original layout, so it made sense to take it away from the bottom bar where it would otherwise be greyed out, and to show it only in sections where it can be used.

I chose the upper left because that location is where people I have interviewed would typically expect a back button to be. There was a lot of empty space on this screen as well, so I enlarged the coupon and receipt buttons to better utilize this space as well as improve accessibility. I left the payment method buttons in their original order because they ran from most to least commonly used in the typical left-to-right reading direction.