This is a redesign of the TikTok seller promotional experience aimed at increasing the tool adoption rate and the promotion creation success rate.
After getting the TikTok e-commerce business running, the next goal for sellers is to increase GMV. Utilizing promotional tools is one of the most direct ways to achieve this goal.
The more sellers are willing to invest in self-promotion, the less subsidy the platform needs to offer to maintain the e-commerce ecosystem.
In 2021, we launched 4 basic tools in Indonesian and UK market. By the end of 2021, the percentage of sellers who actively used the tools was slightly over 15%. The main reason sellers were not engaged is: “They don’t know why they should use the tools, and how to use them. ”
Unlike platform-initiated promotions which are usually guided by account managers, 70% of sellers learn about promotional tools through their own exploration of the e-commerce platform, meaning the platform is the most critical channel for them to learn and understand the promotional tools. Based on user feedback and page data tracking, I mapped out where confusions lie throughout the user journey.
👆 CHOOSING A TOOL
✏️ CREATING A PROMOTION
📊 TRACKING THE PERFORMANCE
The UX design goal is to solve below two HMW questions. Since the pain points occur during the whole user flow, they should be solved at the right touch points as users proceed in the user journey. After balancing development resources, we decided to first focus on the pain points during the promotion creation, do a bit of touch-up before the creation and slot the rest into phase 2 of the project.
What I’m looking for is not only a fix for a particular use case, but a scalable and reusable solution that can be applied as a rule of thumb. The goal is to keep a consistent experience across all promotional tools.
In the previous version, there were plenty of hints hidden in a link or a question mark throughout the form page. The intent was to make the interface clean and avoid information overload, however the strategy increased cognitive costs and failed to deliver the message.
I first went through the tool manual to identify the types of rules we have for promotional tools and listed out the UI components we have for information display. I matched each rule type with the UI components using metrics of importance and volume of information.
Use case 1: Flash deal requirement
This is a flash deal promotion creation page, the key information we want to convey is how flash deals will be reflected on the consumer end and what are the restrictions for the promotional price of participating products.
The information is put into the section panel since they fall in the range of high volume and high importance, and they are instructions for the whole section.
When users have products selected, the space will be taken by the product list, yet we still need to provide an access to trace back the requirements.
Use case 2: Pre-filled criteria
Besides the volume and importance, trigger timing and placement are also key to increasing the effectiveness of displaying the information to users. In this case, when sellers are invited to a campaign, operators will pre-fill the campaign price and stock based on certain criteria. We need to inform sellers of these criteria.
My first thought was to address the information before users land on the page so they won't be surprised seeing the pre-filled data.
Sellers may want to trace back to see the criteria, therefore I shifted the information onto the page.
To build the connection between the information and the data, I tried to move information onto the table.
In the end, I chose the middle ground of putting a collapsable notification card above the data table.
Sometimes It’s not enough to only rely on word-to-word instructions. When rules are very crucial or users require more information for decision making, using feedback can effectively fulfill the need without harming the overall experience.
When it comes to feedback, finding the right touchpoint to trigger is crucial. We have fewer UI components for feedback than for direct information display, and what / when to use feedback components is highly dependent on the use case.
Case example
We received user complaints about the discrepancy between promotion prices being set and taking effect. The confusion was caused by not being aware of: “When products participate in multiple product discount promotions, the lowest price takes effect.”
USER TYPE A
🤔 What are the products with overlapping promotions?
They select products targeting promotional periods without knowing some of them have already participated in other product discount promotions.
USER TYPE B
🤔 What is the lowest promotional price for a product?
They intentionally set a promotional price for a long-term period and lower prices for special occasions.
We enable users to quickly exclude products with overlapping promotions. On the other hand, we allow users to freely choose products with awareness of how the price will be calculated.
FOR USER TYPE A
By default, disable products with discounts.
FOR USER TYPE B
Once unchecking the filter, all products are selectable. An alert bar will be shown on top indicating how the promotion takes effect.
If users have intentionally selected products with overlapping promotions, they need to make sure the price they set this time is lower than what's been set in previous promotions.
PROPOSED SOLUTION
Provide a filter to sort the products that need attention so that users don't need to go through all pages.
Provide reference of the existing highest discount so that users know how much they need to set in order for the promotion to take effect.
IMPLEMENTED SOLUTION
Due to engineering restrictions, “existing prices” can only be pulled up after submission to the server.
I added a submission confirmation modal and shifted the price check step to the end. Ideally, we should still enable users to edit prices after comparing them with the existing ones. In order for a quick launch and consider that type B users are not the main users, we decided to only offer the delete function and optimize the feature in a later phase.
Even though we didn't have enough development resources left for the tools collection page, I still wanted to do some optimizations since this is the first touchpoint in the entire user journey. This phase's goal was not to do a huge revamp for the page but to implement quick fixes on the most concerning issues to reduce users' confusion and hesitation when they land on the page.
NO DIFFERENTIATION
The only way to differentiate the tools is by titles.
HIGH COGNITIVE COST
Users are not able to form a basic understanding of the tools with the information provided.
NO PROMOTIONAL VIBE
Lack of emotional engagement
When it comes to quick fixes, one of the best ways is to reference the solutions that have been tested in the market and tailor it to our own needs. I looked into competitive products targeting the Southeast Asian market where promotional tools are broadly used and came up with the proposal below that successfully helped increase the tool adoption rate.
OPTIMIZATION
Address the strength of each tool, and make connections with applicable scenarios.
Introduce labels for highlights.
Provide access to hands-on educational materials.
Use illustrations to bring out the excitement about promotions
Introduce a dashboard and showcase for performance tracking. (Phase 2)
The redesign has helped increase the adoption rate by 7% and the promotion creation success rate by 13%. There is also a 25% drop in sellers asking account managers for guidance on promotional tools.
The goal for the next phase is to continue increasing the adoption rate. We’ll be looking at increasing the discoverability of the whole module and enriching the content on the tool collection page such as showcases and dashboards to convince sellers of the effectiveness of adopting the tools.
