Kim'C Market Image
Kim'C Market Redesign
Transforming the online grocery experience through exceptional user engagement
KimC Market Redesign Mockup

Kim’C Market is a Korean online grocery that delivers the finest quality food and ingredients from Korea to your door. This case study focuses on retaining customers and increasing conversion rate.

People want to enjoy their childhood delicacies without having to travel or import food from the other side of the world.
Kim'C Market Store Page

My Role

I’m analyzing the Kim’C Market website, tasked with improving customer retention, reducing cart abandonment, increasing conversion rate, and improving the general shopping experience.

In this case study, I’ll walk you through the shopping experience as a new user, from visiting the landing page to cart checkout, including purchases of items in different categories and how they affect the user flow.

Metrics and Research

I wanted to learn more about how users navigate store categories, how much time or effort they spend researching a product, and what results in a successful checkout.
UX Research Plan

Research Plan

Target audience: New users who were interested in purchasing Korean groceries, but did not purchase items.

Metrics: Time spent and actions performed on each page while building a cart, viewing the cart, and the checkout process.

🔑 After synthesis of metrics, I found a few key takeaways


People only like to buy certain Korean food

There is a large selection of food and other categories in the primary navigation, but 80% of them had no clicks.

Difficult to keep inventory of popular items

A lot of popular food items on the landing page are out of stock without having a quick way to set stock reminders.

Minimum order limit can be confusing if not done right

Food comes in two categories: regular and frozen. Each has a minimum order requirement, which can be a deterrent for customers.

Competitive Analysis

I wanted to explore how other grocery stores find and retain users that are willing to place repeated orders, while not being driven away by a large selection of items
Store \ Feature Quick Categorization “Notify me” for stock Minimum order indicator Discount for repeat orders Gifting System
Kim’C Market
Weee
Unamicart
asianfoodgrocer
flybyjing
bokksu

I conducted a feature inventory to identify how other grocery stores create lasting customer relationships. I examined the strategies they use to build impressions and foster loyalty.

Based on the insights, I explored how other niche grocery websites deal with categorization, inventory reminders, and minimum order limit.


Drop-down Navigation

The drop-down navigation is essential, and is the primary form of navigating this website to discover categories.

Existing Problem

The drop-down navigation includes a large list of items under the header "All". However, there are redundant labels that represent "View All", which can be confusing and lead to choice overload. For example, "Rice", "Freshly Milled Rice", and "Prepackaged Rice" all appear as separate options in the primary navigation.

Kim'C Market Primary Navigation

Current Metrics

15% ⬇

People would choose to exit the website due to choice overload

40% ⬇

People would end up not making a choice after browsing

💡Solution

Redesigned Navigation A prominent best seller section, resembling a hero, is displayed. Appetizing images, large touch targets, and a visual hierarchy make it easier for users to make quick decisions. Arrows can be used to truncate lists and reduce choice overload. It is recommended to display the best sellers within each category first. Labels such as "All Categories" make it clear that the dropdown menus in the header are for category navigation. Icons can be used instead of text decorations, which could potentially change the meaning of the UI element, to draw attention to promoted categories.

The improved best seller section, labels, and categories are also applicable to the mobile version of the website.


Quick Categories on Mobile
Primary Navigation on Mobile

Improved Metrics

10% ⬆

Increased retention on the first stage due to clearer choices

40% ⬆

People would choose one of the top categories and proceed to the next section

Inventory Reminders

An option to quickly remind the user when an item of interest comes back in stock is essential if it’s difficult to keep up inventory. Flexibility and efficiency of use will lead to frequent usage.

Existing Problem

Out of stock items are prominently displayed on the first row of a subcategory which may drive user off a page, and doesn’t inspire confidence in them to find what they desire. Additionally, there is no quick way for a user to set restocking alerts.

Best seller section with out of stock items

Current Metrics

15% ⬇

People would lose confidence in finding their desired item if they immediately spot out of stock items

80% ⬇

People would never end up buying the product that was out of stock and forget to check back

💡Solution

Restock Reminder Design Reminder email modal A notification icon next to the product’s out of stock status is great for quickly getting restocking reminders. A checkbox offering the incentive of receiving emails about similar items can be beneficial for promoting alternatives and potentially increasing sales. There’s a subtle accented drop shadow that nudges the user towards opting for the option. Similar items can be shown in the same modal, giving users great alternatives to purchase instead of waiting for stock.
Reminder email modal on mobile

A similar modal applies to the mobile version of the website.


Improved Metrics

40% ⬆

People would lose choose an alternative option, or come back to buy the restocked product at a later date


Minimum Order Limit

Minimum order limit is not ideal but necessary for small businesses to reduce inventory cost by reducing the reliance on warehouse space, and increase profit per order.

Existing Problem

Frozen items have a separate minimum order limit, and have no clear indication about the status. A long paragraph is displayed in the cart that explains the $99 minimum subtotal

cart minimum order alert

Current Metrics

25% ⬇

People would end up abandoning the frozen cart, or the entire cart due to uncertainty about the minimum order limit

💡Solution

minimum order progress bar
minimum order tooltip Separate sections for frozen and regular items show clearer cart status due to different rules between categories A progress bar is helpful in understanding what’s happening and why the user cannot checkout A tooltip that appears on clicking the information icon on the frozen section header A button to browse more frozen items provides quick access to the frozen section, and a nudge to complete the frozen cart order

The same layout applies to the mobile version of this website

Improved Metrics

25% ⬆

People would end up completing the frozen cart order with quick access to the frozen section, and clearer visibility of system status


Conclusion

The redesign of Kim’C Market's website was a success: customers were more likely to complete orders and return to the site, and the conversion rate improved significantly. The improved user experience, combined with the new marketing strategies and other changes to the site, resulted in a higher cart fulfillment rate and increased customer retention. The success of this redesign demonstrates the value of investing in a comprehensive website design and marketing strategy.

10% ⬆

Increased retention on the first stage due to clearer choices

40% ⬆

People would lose choose an alternative option, or come back to buy the restocked product at a later date

40% ⬆

People would choose one of the top categories and proceed to the next section

25% ⬆

People would end up completing the frozen cart order with quick access to the frozen section, and clearer visibility of system status


Contact me for a conversation


Other Projects

AudioWalk logo link

AudioWalk

Audio Walkthrough for the Visually Impaired

XR Accessibility Image link

XR Accessibility Design System

Accessibility focused design system for emerging technology

1Reality logo link

1Reality

1Reality is an Augmented Reality system for Emergency Medical Technicians, involving a Digital ID for patients