Sherry Wang
UX designer

TikTok Shop - Sign Up Process Redesign

An optimization of the seller center to get sellers onboard easier

My Role

UX/UI Designer

UX Researcher

Duration

July 2021 (3 weeks)

Team

ByteDance Monetization - Design - International eCommerce

Project Overview

TikTok Shop is a social commerce solution allowing TikTok creators to promote and sell products. TikTok Shop's Seller Center is a merchant platform for business owners (mostly located in Indonesia, the United Kingdom, and mainland China) to publish products, track orders, and earn money.

For this project, I re-evaluated the current process of creating a seller account and improved the sign-up procedure to increase the number of users registered in TikTok Shop and reduce the time and effort they put in during registration.

Discover

During a weekly meeting at work...

Some product managers and operations managers said that they received disappointing user feedback on the seller sign-up process. They hoped to make the entire process less confusing and more attractive, and I was assigned to this task.

Original User Flow

I started by mapping out the original user journey of registration. It was pretty obvious that the goal of this process was to create an account to sell goods and earn money. To do so, users needed to complete eight steps in total 👈

Besides, an immense amount of documents and input boxes was also required 👇 The entire process seemed tedious and time-consuming from a user's perspective.

This funnel has all sections of the onboarding process

This funnel has all sections of the onboarding process

Disappointing Feedback

Instead of recruiting participants to do a usability testing, I pulled up the event tracking data of the original design since it launched. This way, the results were from real users and of real time, making them more reliable. I mainly focused on the click-through rate and conversion rate of each section in the onboarding process. On the right is a conversion funnel 👉 and the bottom the conclusion👇

19.72%
Overall Conversion
37
Input Boxes
8
Steps
7
Sections

Qualitative Data

First, I talked to the previous designers why they landed up with this existing design. Here were some insights:

  • TikTok Shop used to be an MVP feature for business owners with invitation codes, so user experience was not a priority.

  • The deadline of this project was also too tight.

  • Most documents were needed for legal reasons, so they could not be reduced.

Then, I went on to interview some existing users. Here were some frustrations:

  • Every step was extremely long with so many contents to fill out.

  • They didn't understand some of the explanations under the input boxes.

  • They believed many requirements were repetitive.

Define

Pain Points

Based on both quantitative and qualitative data, I did some task analysis and came up with reasons why the original design was not satisfying:

  • The original logic flow was too complicated with so many sections for users new to the platform or e-commerce in general.

  • Each step of the flow required too much information.

  • All the information had to be put in by hand.

  • Some input boxes required repetitive information.

  • Some input boxes lacked the explanation of requirements.

  • Other input boxes had too many explanations.

  • The process required many documents.

  • The lengthy sign-up process kept users away from making money easily, which was their main goal.

TikTok Shop - Sign Up Process Redesign

Categorization

After recognizing the drawbacks of the original design, I decided to use the card sorting method to categorize these pain points for redesign purpose.

Develop

Revised User Flow

I came up with a new flow of which users would take fewer and easier actions.

One major change was breaking down the original process. Instead of finishing all 8 steps at once, users would now be able to come back to upload documents and bind bank accounts in the future when needed.

Other changes include providing a new user onboarding tutorial, eliminating unnecessary input boxes, giving accurate explanations and samples, and improving the user interface visually, all to make the user journey smoother and faster.

TikTok Shop - Sign Up Process Redesign
Design
TikTok Shop - Sign Up Process Redesign

User Interface

Once the logic flow was revised, I started designing the final screens in Figma. I continued using the TikTok Shop visual style and design system due to company requirements. I also stuck with designing for desktop device for consistency.

Later we revised the entire product into H5 and eventually made a mobile app, but that's a different story.

See the full and revised sign-up process in this video 👇

More Details

The redesign of Seller Center's home page provides more freedom to users when choosing their next steps, as shown below👇 They still have to finish all sections eventually, but the process is less tedious and tiresome when being divided.

(Scroll up to the

(Scroll up to the "Discover" section to see the previous design)

Deliver
The final design file with edge-cases and UI instructions

The final design file with edge-cases and UI instructions

Results

This redesign of the sign-up process of TikTok Shop's Seller Center was approved in the critique meeting within the design team of International eCommerce at ByteDance and the review board meeting with PMs, RDs, FEs, and QAs.

It was launched in August 2021 and is still being enhanced in each sprint. You can find it at https://seller-id.tiktok.com/account/welcome.

Reflect

Conclusion

  • The internship ended before I could get much data of this revised version from users, but based on internal feedback and a small portion of business owners that were in regular contact with the company's operations managers, it was definitely an improvement of the original process.

  • One limitation is about the design consistency of the platform. The website was restricted by the original design system such as leaving wide margins on both sides and using section dividers.

What have I learned from this project?

  • An actual project is very different from group projects in class. Users are still the priority, but other issues including technology, legislation, and expenses should be considered too.

  • Being an UX designer means to keep on designing new products and redesigning the existing ones. There is no perfect solution.