-
-
Thumbnail
Inspiration
Premise:
Tiktok For You page, a powerful recommender: Currently, Tiktok For You page effectively curates content catered to each users’ interests and preferences ahead of competitors. The algorithm is particularly effective in correctly recommending based on factors like interest areas, emerging and mainstream trends, style, and location.
Tiktok Shop and Creator Landscape:
Building upon the well established trend of haul and product recommendation videos, Tiktok affiliate commissions programme incentivises creators to promote products from Tiktok shop – thereby driving traffic to the Tiktok Shop.
Joining Forces:
These two forces are currently at play in Tiktok’s For You page. Users are exposed to new and interesting products that match their taste (the current season, or what is hot in the region and the world) through haul and product recommendation videos. From here, creators bridge the gap between interested buyers and sellers on TikTok shop through affiliate links in video description.
The gap and the opportunity
Our group has identified gaps to address. Here are several ‘what if’ scenarios to consider:
- What if the user is interested in products not explicitly mentioned by the creator?
- What if the user is interested in products mentioned in a video that is not linked with the Tiktok affiliate commissions programme?
Users are introduced to products they are interested in buying through 'For You' page's powerful algorithm, but identifying and searching for the products is inconvenient and difficult. Users would resort to hopping onto other platforms to reverse search and be potentially led to competitors’ platforms. There is a need to address these potential purchasers who ‘have fallen through the cracks’. We aim to increase the convenience and ease of product discovery and purchase all on Tiktok, ultimately converting browsers to purchasers, while leveraging and staying true to hyperpersonalised core experience.
Problem Statement
Putting the premise, gap, and opportunity derived by our group as well as the brief provided into consideration through the lens of the brief main objective outlined, we come to the problem statement:
How might we enrich the Tiktok Shop experience by closing the gap between Tiktok Shop and For You page to achieve hyperpersonalised experience?
What it does
When users watch a video on our platform, if specific products are detected, a prominent shop icon flashes to capture their attention. Clicking on this icon reveals three distinct cards: Featured in the Video, showcasing products directly highlighted in the content, Similar to Those Found, offering related items, and an option to explore further on TikTok Live.
Design Considerations
We first add a new ‘Shop’ button that is located with the regular buttons on videos (e.g. Likes, Comments, Share, etc). Since these buttons are the most interacted in the core Tiktok browsing experience, it makes sense to have a shop button here to increase user traffic.
We want to avoid compromising the core experience of Tiktok, thus this button should follow the main simplistic aesthetic of current buttons. Yet, we also want to make it standout to notify users of a new opportunity to interact with Tiktok. A mild halo effect is added to the button to achieve this intent. This halo will be activated when there are products identified in the video.
When pressed, the ‘Shop’ button pulls up a side drawer containing cards of all products identified in the video – both those inputted by the creator (for the affiliate programme) and those identified automatically. When pressed, the cards bring users to the Tiktok shop. We effectively bridge curious users to the Tiktok shop via appealing uniquely to their interests.
Benefits of the Design
Our solution provides value to 3 main identified stakeholders:
- Users: Easily discover new intriguing products and conveniently learn more about these products or even purchase them solely on the Tiktok platform. All past viewings and purchases help to further curate recommendations further enriching discovery journey.
- Creators/Sellers: Enjoy more traffic to their listings leading to more purchases.
- Tiktok: Further cement expansion from a short video content platform to the e-commerce field via prevention of customer churn.
How we built it
We started by curating 20 TikTok videos across different makeup content types: 5 makeup reviews, 5 'get ready with me', 5 makeup hauls, and 5 'what's in my bag' videos. Each video was analyzed to capture creator_name, sound used, description, tags, and featured products.
We then established a dedicated product database to store comprehensive information such as product name, price, category, and description. This structured approach provided a solid foundation for seamless data integration and efficient retrieval, enhancing user experiences with targeted content delivery.
Next, we set up our web server using Flask and utilised MongoDB to build the necessary databases. Using Figma, we conceptualised our solution and designed detailed wireframes for the frontend interface.
Our development followed an iterative approach, with carefully crafted frontend designs to ensure a seamless and engaging user experience. Throughout development, we coded the entire solution, conducted debugging and quick testing.
Accompanying our app is a product identification visual model, which can detect items featured in TikTok videos that are available in TikTok Shop.
Concurrently, we began producing a video outlining our solution's functionality.
In the final stages, we addressed minor issues and refined our code, culminating in the successful submission of our completed project.
Challenges we ran into
- Time Constraints: Balancing our participation with internships during the hackathon posed significant time limitations.
- Routing Issues: We encountered challenges with routing during the development process.
Accomplishments that we're proud of
- Successful Conversion of Figma Designs to Frontend: Achieving seamless integration from initial design concepts in Figma to the final frontend implementation.
- Development of a Satisfactory Solution: Creating and implementing a solution that met our objectives and user needs effectively.
What we learned
Several team members had the opportunity to delve into new technologies for the first time during this project.
What's next for TikTok-TechJam_Group-JamJam
- Completion of the Project: We plan to finalise the project, focusing on enhancing it beyond its current temporary state.
- Integration of Real-time Computer Vision for Product Identification: Implementing computer vision to identify products in real-time during live sessions.
Log in or sign up for Devpost to join the conversation.