H Mart Kiosk | Jeesoo is Kim

Self-Checkout Kiosk

H Mart Manhattan

Overview

As the sole designer, I created the self-checkout Kiosk UI design for H Mart stores located in Manhattan, New York.

This UI design is currently installed at their Columbia University location, and it will be used for the every branches located in Manhattan area soon. The new design increased the total number of transactions by 10% based on data analytics.

Role

UX / UI Design

User Research

Timeline

March 2022 (3 weeks)

Tools

Figma

Illustrator

Adobe XD

Photoshop

After Effects

Background

H Mart is one of the biggest Asian grocery retail stores in the United States. They planned to install Self-checkout kiosks at their branch located in Columbia University, New York, to help their customers save time from long linings, and to increase the number of transactions.

Their initial plan was to use UI designs created by our contract developer. But they eventually decided to create their own design to provide an easy-to-use design to employees and their customers.

Problem Statement

Due to time constraints, I had to ship MVP with the compromise of UX quickly. After I had some quick usability tests, I discovered some complex usability issues and created two personas:

1/3

Old designs by the developer. Users have difficulty finding CTAs on each page due to it's unstable positions.

Persona 1: H Mart Employee

Poor admin function

H Mart employees have to spend a long time in assistance due to the lack of provided direction.

Persona 2: H Mart Customer

Unstable positions of CTAs on each page

H Mart customers are struggling with where to click for the next action.

Missing information causes tracking unscanned items

H Mart employees can easily miss whether items are scanned or not since the number of scanned items are missed.

Poor searching item process

H Mart customers are struggling with searching items since it allows only to search their product numbers, but their names.

Unfriendly design for non-native English speakers

Many of H Mart employees are non-native English speakers and sometimes having difficulty with reading instructions on the screen.

Unfriendly design for non-native English speakers

The majority of H Mart customers are non-native English speakers and are tourists from different countries who may not be familiar with American culture.

Unnecessary steps to proceed to checkout

Welcome to New York City, where is one of the busiest cities in the world. Everything changes and moves quickly in this city and so do our customers. To help H Mart customers save their times, it is necessary to make decrease the number of steps.

Now, here come the design challenges:

Make the checkout processes simple and easy-to-use
Help users feel free from a language and cultural barriers
How to convince both H Mart employees and H Mart customers

Design Process

Creating user flow

At the beginning of the design process, I created the user flows to understand how my future users would interact with the design and to solve my first design challenge, "Make the checkout processes simple and easy to use."

After creating the first user flow, I noticed it didn't solve the challenge I had been struggling with. So I came up with solutions to reduce the number of pages for users to experience an efficient journey:

1. Remove unnecessary pages

2. Combine the pages that include similar content (i.e., Scan your items & Add items)

The first user flow

The second user flow

Wireframing

After the brainstorming process, I experimented with different designs to find what would be the most suitable way for our users.

I started with the "Add items" page since it is where our users will spend the most time with our self-checkout kiosk.

Initial wireframes explored ways to compromise all users

It was a challenging process since I had to consider the employees and customers in the opposite position simultaneously. For example, it would be easier for customers to remove double-scanned items without asking for help, but I also had to consider the cases when they could be misused for theft issues. My initial solution for this was to insert the "remove items" button and make the help screen be opened as the following reaction for pressing the "remove items" button. For this reason, store managers did not want to insert the "remove items" button and wished customers to ask for help. My final solution for substituting the "remove items" button was to make the Help and the Accessibility buttons noticeable.

Another challenging part was creating easy-to-use designs for users with language barriers. Inserting language selections would be the best solution, but due to our technical limits, this function was not available. Accordingly, I created visual images such as short animations and icon images instead to help users understand using the kiosk.

Animation centered design

Moved the position of the Help and the Accessibility CTAs

Used the red colors for accents only

Scanned items on the left top

Prototyped the best way to compromise users

With the considerations listed above, I decided on the fourth design because it had the most effective structure and the least visual clutter.

Design Decisions

There were three factors I essentially focused on while working on this project.

1. Place every CTAs on the right side of the screen

Since most Western languages are written from left to right, we read from up to down and from left to right in Western cultures. Considering this pattern, I devised this solution to avoid situations where users cover instructions while using their hands: Placing every CTAs on the right side of the screen and placing every instruction on the left side to help users read the instructions first, then interact with CTAs.

2. Use graphics to help users understand and follow easily

The way to scan items for this kiosk is quite different compared to typical self-checkout kiosks. In general, we face the barcode down to scan items. In this case, the barcodes need to be faced up. Since we had lots of customers who have backgrounds from other countries, I believed that giving instructions only with texts could make those groups find difficulties in their journeys. Therefore, I decided to use graphics to deliver the instructions much as possible to every user easily understand the instructions on each page.

Add Items Page (Scan Items)

This page,"Add items", is where our users would spend the most time for purchasing their items. I

Add Items Page.

A progress bar
Helps users understand the steps to checkout

A header and a footer
You can see all the key information you need to checkout at a glance and it clearly provides the way to scan items.

Animated instruction
Helps users understand the way to scan items

Add Items Page (Search Items)

After creating the scan items page, I started working with the "Search Items" page thoughtfully because I believed that this page will be one of the trickiest pages for users to use.

Add Items Page.

The most challenging part for creating this page was how to use the Here is a list of the challenging parts I experienced while creating this page:

How to insert a full keyboard including and product images on the same page without switching pages to check availability.
How to help users easy to go back to the previous page.
How to provide images of recommended items in the

My solutions for the challenges listed above were:

Insert the search bar into the keyboard...
- to save the space
- to help users easily check what they typed by using the keyboard

Make the "Scan items" button bigger and noticeable...
- to help users easily go back to the previous page

Visual Style

Here is a quick overview of how I designed the UI for the self checkout Kiosk. I focused on expressing the brand identity and providing the best experiences for our users.

Add Bags Page

Validation

The self checkout kiosks with my design received positively from users and resulted in increasing the total number of transactions by 10% within a month based on data analytics.

jeesoo kim