Smilefresh
What is the best cart experience
What is the best
cart experience
for easy all-day shopping?
for easy all-day shopping?
Users don’t spend much time deciding before clicking the order button. Given that the cart is used as a wishlist and delivery availability varies, a customized user experience is essential.
I designed the cart ordering experience for the fresh produce launch project named SmileFresh.
My Role
1. Conducted an in-depth analysis of problems within the parent company’s service.
2. Iteratively tested various scenarios based on research findings.
3. Developed design guidelines and monitored user feedback after launch.
Type
Native Application (IOS and Android)
Mobile Web
Team (32)
Project Manager , AOS / IOS Engineers
Publishers, QA Team
Date
Febuary 2022 - August 2022
7 months
Challenge
This is a project to launch a fresh produce brand from another company ‘SSG’ on our product. As we use the same delivery system as SSG, our corporate company, it's crucial to examine the previous pain points of SSG users and prevent similar issues from occurring in our new service, SmileFresh.
Preview : The Product
Users select the product and delivery time
they want and add it to the cart.
Getting this today! It's in my cart, now time to check out other items.
It’s already evening! I better order my items quickly.
Users can find their items in the cart available
for
both daytime and early morning delivery options.
The item I want to buy isn’t available? Oh, I just need to toggle it!
Even if they initially select daytime delivery, if the same item is also available for early morning delivery, it will be automatically shown as the early morning option as well. The items available for only one delivery option are displayed with a different UI design and sorted to the bottom.
When users click 'Proceed to checkout,'
items available
for the current delivery time zone will be organized.
The last item is out of stock. I’ll order it later.
Users select the product and delivery time they want and add it to the cart.
Users can find their items in the cart available for
both daytime and early morning delivery options.
Even if they initially select daytime delivery, if the same item is also available for early morning delivery, it will be automatically shown as the early morning option as well. The items available for only one delivery option are displayed with a different UI design and sorted to the bottom.
When users click 'Proceed to checkout,' items available
for the current delivery time zone will be organized.
Overview
Here is the story
The fresh grocery service from SSG has been introduced on Gmarket as "Smile Fresh." While product inventory, delivery schedules, store locations, and data structures are shared with SSG, the focus was on customizing the user experience to fit Gmarket's platform.
About our delivery system
We have separate store for
both daily and early morning deliveries.
Our products are categorized for two types of delivery: early-morning and daily, as two different stores handle the delivery. For example, if the user wants to receive their products in the early-morning, our system automatically uses the store that is able to ship at that time.
< What the users see >
Just an apple
< Actual Data >
Accordingly, our ux starts
with selecting a delivery time first.
User problem
Researching SSG Users
The delivery system of Smile Fresh is the same as that of the partner company SSG. Therefore, by researching users who have been using SSG's delivery service, it was able to identify the product's advantages and disadvantages.
Users want to change delivery time frequently,
but it takes too much interaction cost.
The most significant pain point for users was the high interaction cost of changing delivery times. Users often attempt to change the delivery times in their shopping cart but always have to go through many time-consuming steps. Also, checking if the selected delivery time is available for the items requires several additional steps, and this physical task counts against efficient user experience.
42%
It's difficult to manually switch between 'SSG delivery(Daily delivery)' and 'Early morning delivery.' It would be more convenient if the system could switch automatically.
14%
I'd like to know the chances of my delivery arriving at the requested time. Can I receive notifications through a messenger if there are changes in the delivery status?
8%
Separating 'SSG delivery(Daily delivery)' and 'Early morning delivery' is inconvenient, and scrolling becomes too long when there are many products.
Changing the delivery time is a common action,
But inconvenient in cart was high.
Selecting a delivery time and then selecting products follows the same flow from the home to the cart. However, the usability challenge was most significant in the cart. To fix this usability issue, researching the unique aspects of the shopping cart's design was necessary.
< The interaction cost of each page for completing the main task >
Goal setting
Specialized usability design in the cart enables users to freely select any type of Smile Fresh delivery.
The key is not to create problems that users have to solve themselves. Regardless of changes in available delivery times over time, users want the items in their cart to be delivered promptly. Streamline the transition from cart to checkout, minimizing user effort.
Early Research Finding
How was the design strategy established?
To avoid the pain points experienced by SSG users, it's essential to analyze the unique shopping cart usability of our customers.
Our consumers tend to use
their shopping cart as a wish list.
Sixty-three percent of Gmarket users tend to save the products they want to buy. Among them, even 31% of users keep their selected products for more than one week.
The available delivery time for items
in the shopping cart can change.
The advantage of our product is
that it has two sets of location data for each item.
Therefore, regardless of user choice, automatically including products
from daytime and early-morning stores makes ordering easy at any time.
Testing & Iteration
Drawing freely lead to insights.
Insight 1
Delivery time options :
It should not look as a category.
Instead of showing daily and earlymorning delivery as separate menus,they should be combined into themain menu as filter options.
Insight 2
Free shipping threshold :
It should be easily perceptible for users.
Free shipping is offered for purchases over a certain amount, and it's crucial to communicate this clearly to customers from a business perspective.
Insight 3
Delivery ETA :
Showing users with clarity and accuracy.
The estimated arrival time varies depending on the delivery time, and it's important to make this clear to users.
Established criteria
based on the first draft.
Do : Use a toggle
Use a toggle that includes wording for both
daily delivery and early-morning delivery options.
Don’t : Use tabs or chips.
Do not use UI elements that convey a sense of independent categories.
Do : use a gauge bar.
Use visual elements to display the remaining
amount needed for free shipping.
Don’t : use text alone.
Do not use price text alone without other graphical elements.
Do : use a separate space.
Design a separate space using lines or borders, which is dedicated to displaying the expected arrival date.
Don’t : group with other factors.
Do not group the expected arrival date with other information that may affect readability.
Use usability testing to select the design
from multiple drafts.
Final design
Home~Item detail page
The previous pages before the shopping cart display only the items that match the delivery time chosen by the user. Smile Fresh shows items that can be delivered either day or in the early morning. However, since the user has already chosen a specific delivery time, they need to return to the previous page if they want to show items available at a different time.
Cart
In the cart, there is an advantage in using both day and early morning store data. For instance, even if a user already selects items available for early morning delivery, they can change their choice. In this case, the user can simply touch the toggle above the list to switch the delivery time. If the items can be delivered during both the day and early morning, they will appear with the same UI. However, if such dual delivery is not possible, they will be displayed as 'disabled' in the UI.
Also, when the user clicks "Order", only the items available for the current delivery time will be shown as a final order list. An unavailable one will be excluded from the list when the user selects the "Select all" check box.
Make a new sorting criterion for products.
To clearly indicate whether a product is available for delivery at the moment users are seeing it, a new sorting criterion needs to be designed. The items that are unavailable at the current time ( either day or early morning) will be sorted below the list of currently available products. At the same time, the items that cannot be delivered to the current shipping address will be grouped and sorted at the bottom of the list.
Outcomes
The redefined usability
proved to be effective for the users.
The toggle was more usable in the cart than in the predicted search stage, indicating that the expected usability was correct.
The click rates of toggles on each page
Users of Smile Fresh
made purchases more frequently.
As a newly launched service, 75% of SmileFresh's customers are first-time buyers. However, their repurchase rate is relatively high. According to real-time consumer satisfaction surveys conducted after the launch, the overall shopping experience in the cart was rated as convenient, indicating that UX is contributing to actual sales improvement.
Reflection
Even small actions can become
significant UX references.
Throughout my involvement in the Smile Fresh project, I came to realize the importance of designing delicate usability that corresponds to the purpose and function of each page. And the usability improvement work this time was something I couldn't have done without the help of my colleagues. I am grateful to the project manager and developers who positively reviewed all possibilities for a better user experience in all aspects. Even after the launch, we will continue to monitor and ensure the best possible experience for users.
Copyright © 2022 Dawoon Kang. All rights reserved.
