Optimizing TikTok Shop Experience — UI/UX case study

Disclaimer: The concept was proposed before the update of v24.2.0

Introduction

TikTok is one of the fastest-growing social media platforms recently. It already has 1 billion users worldwide. This fast-growing app is consistently adding new features. Bytedance, the developer of TikTok, is starting to see the commercial potential of this app. TikTok launched TikTok Shop in Indonesia at the end of 2021.

As a TikTok user, I was excited to try this new feature. But when I try to find the video content that sells items, I can not easily find it. Besides live streaming sessions and paid ads, it’s difficult for users to find a TikTok Shop content video. After I paid for my orders, at first I also get confused about where should I check my order status.

Before I jumped to the conclusion based on my assumptions. I did some research to know better about how other users experience this feature.

Process

Now I will go through the process of how I discovered the problem and how I segmented the ideas and solutions for the problem.

Research

To understand the users better, I want to know if there’s another pain point that users feel besides what I had encountered. So I tried to not direct users to feel my pain but to be more general when asking about their experience in TikTok Shop.

The objectives for this research are:

1. Understand user’s habits when shopping online
2. Observe user’s behavior and needs towards TikTok Shop
3. Find out user’s pain points when exploring TikTok Shop

I did quantitative and qualitative research methods to get better insights. For Quantitative, I go with a close-ended survey. For the qualitative methods, I choose to do some interviews and usability tests.

1. Close-ended survey

After collecting a total of 53 survey data, here are some key takeaways

1. 78,4% of participants have not shopped from TikTok Shop yet. Most of them say it’s because this feature looks like it’s not highlighted by TikTok
2. Most of the participants usually shopped online min. 2 times a month and they buy personal care and apparel
3. Tokopedia and Shopee are their favorite e-commerce and they usually use e-wallets as their payment options

From the results, we can see that TikTok Shop has huge potential because most users buy personal care and apparel. These two categories will more likely lead to a conversion with real review videos.

2. Usability testing

I investigated how users shop in TikTok Shop, from watching the content video to checking their order status by conducting a remote moderated usability study via zoom.

The sample criteria were participants have to be familiar with the TikTok app. Then I grouped them into 3 new TikTok Shop users and 3 existing TikTok Shop users. A total of 6 users who participated were recruited via voluntary survey sampling.

I gave the UT participants a TikTok Shop video link for them to complete the UT tasks. Why do I give them the link from the start? Because it will take a longer time if I asked them to scroll until they find a TikTok Shop video

Scenario: You’re scrolling through TikTok, then suddenly you see a TikTok video promoting something you like. Finally you decide to buy the product from TikTok Shop

Task 1: How do you buy the product through TikTok Shop?

Task 2: Where do you check the status of your order after making payment?

From this UT, here are some key takeaways

1. 83% of the participants accomplished those two tasks. 1 of them failed because there was a bug when the user was trying to connect her e-wallet.
2. 2 of 6 users questioned the shipment options because they can’t change it
3. Most of the participants get confused about the hidden order status details

3. Interviews

I interviewed the same UT participants about their experiences in TikTok Shop. My goal was to learn about how users interact with TikTok Shop, especially when purchasing item flow.

Here are the main pain points and insights in a form of an affinity diagram and customer journey map:

Disclaimer: The diagram and flow are not in full version, please take a look at the details here

Part of Affinity Diagram

Part of Customer Journey Map

Define

Persona

Now that I am aware of what the problem areas were, I created a persona to create a clearer vision of users’ goals and frustrations and how these translate to their everyday behaviors.

Solution Opportunities

Then in the opportunities section, I put every design opportunity based on the customer's problem I mapped out, to be prioritized in the next step

This is supposed to be a collaborative process. But since I am the only one who mapped this out, I put my judgment to prioritize based on what the participants emphasized during the interview and also based on what I went through.

I tried to consider the project's timeline and impact when choosing which opportunities can be developed. Then I came up with these two opportunities that need low effort but will give high impacts on the users.

1. Make a dedicated page for TikTok Shop

2. Make the order status page flow more clear

There’s also another reason why these two opportunities were selected. One day I discovered that there are many tutorial videos on Youtube about how to check TikTok Shop orders and how to find items in TikTok Shop.

The videos also have quite significant views. So I assumed that many users are struggling to discover TikTok Shop.

Ideate

User Flow

To show how the flow will change, I illustrate the current and my proposal flow below

1. TikTok Shop entry point

Instead of a compiled random content of TikTok and TikTok Shop video on one page, I propose to split it into two different pages. Users can choose from the very start which content they want to see. If they feel like window shopping that time, they can jump to the TikTok Shop page right away

2. Checking order status

TikTok Shop will have its options in the profile section menu

Wireframes

These are several design explorations for the TikTok Shop entry point.

1. The entry point is on the navigation app bar
2. The entry point is on the dropdown menu on the left corner
3. Users can change page by selecting a chips
4. When the user chooses the menu icon on the upper right corner, it will be a) zoom out the page and make it into a carousel selection or b) the screen will be overlayed with page options

For the TikTok Shop page, the design layout follows the chosen design

Chosen design:

Image credits to its owners

Among four ideations, I decided to test out the 1st and 2nd ideas, because those two have the most potential to be easily understood by users.

Testing

#1 Usability Testing

To get better solving solutions, I did the UT twice. The first UT, it’s an unmoderated UT using Useberry as the platform. The participants were divided into two groups, 5 new users and 5 existing users. All of the participants are familiar with TikTok. These UT objectives are:

1. To know which design options are best
2. Figuring out whether the order status entry point at the TikTok Shop page helps users or not

#1 UT Results

1. TikTok Shop Entry Point

90% of the users choose design option 1 with an average score of 9 (between 1–10)

Even though the success rate is 100%, the difference in time completion and misclick rate between design 1/2 is quite significant. So design option 1 wins effortlessly.

But there are still some insights for this design option that can be improved for the next design iteration like:

The solid background will give better visibility for the icons, I think this insight is good so I will implement this insight on the next iteration.

2. TikTok Shop Order Status Page

1 out of 10 participants has no idea where they can track the order status page.

While the other successful participants are being grouped into 2 groups:
Those who click the order status icon on the home page immediately
Those who go through profile and settings to check their order status. User flow below

Some insights for this design:

1. Some users get confused with the icon, so they’re guessing what icon is that for
2. Some users don’t realize they’re already on the TikTok Shop page
3. Users feel like the order status icon on the home page is easy but they’re not familiar with it
4. The failed participants think they can see the order status page from the profile menu
5. Most of the users expect the order status page is on the profile, referring to Shopee

Next action plan:

After having the 1st UT, I make the next action list to prepare for the next iteration before doing the 2nd UT

Major: Differentiate the TikTok Shop page with a different style of the added icon on the TikTok Shop page

Moderate: Let users check their order status from the profile menu only to not confuse them

Minor: Make a solid background for app navigation bottom bar

Design iteration based on the #1 UT results:

Since the entry point to TikTok Shop already has a solution, I make new design options for the TikTok Shop page by differentiating the added icon style on the TikTok Shop page. I have also already added a solid background for the app navigation bottom bar

For the order status page, because many users refer to Shopee user flow the order status page is on the profile. I remove the order status on the TikTok page and move it to the Profile menu.

#2 Usability Testing

For the second UT, I held an offline moderated UT. The participants were also divided into two groups, 3 new users and 3 existing users. All of the participants still are familiar with TikTok. The 2nd UT objectives are:

1. To know which design options are best
2. Icon testing

#2 UT Results

1. TikTok Shop Page

All of the participants choose this design because they don’t need to access the order status page at the front. This design also makes the TikTok Shop page feels more different from the original one

2. Icons Testing

I give the participants 3 options for each icon representation. You can see below which icons are winning

3. Order Status Page

5 users successfully go to the order status page with the newest flow and design, while the other 1 was trying to get to the order status page through the inbox.

Reflections

If I’m being honest, I was a little nervous doing this final project for Dibimbing UI/UX Design BootCamp. But I also knew that it was the perfect opportunity to sharpen my research and design skills. Big thanks to all the participants who kindly responded to me

The key takeaways from this study are:

• Improving user experience doesn’t always need big moves. Sometimes small design changes can make a better whole experience.
• Always start from the users to end for the users. Design based on your assumptions will not solve user’s problems

Thank you for reading until the very end! I had a lot of fun doing this project, and I hope you enjoyed reading it too. Please give some claps if you like this study case!