Arrow Left

TikTok Group-Buy UI Iteration

Description

Iterated the TikTok Group-Buy UI to enhance user experience by optimizing layouts, simplifying navigation, and introducing features like tailored recommendations, to address user preferences and improve engagement.

Infromation

Date
October 16, 2024
Producer
25003
Project type
App
Part I

Preliminary Preparation and Planning

Current Group Purchase Interface Analyze

Enhancing the User Experience for Seller and Product Search.

The interface is likely to undergo significant updates and iterations. Therefore, the update is divided into two key phases:

  1. Minor Adjustments to the Existing Layout
  2. Redesign of Key Sections and Overall Structure

Utilize Figma's Auto Layout and components to build responsive interfaces, making future adjustments more efficient and scalable.

Layout Refinement Strategy

Refinement Approach

For frequent group-buy users, the primary motivation is saving money. Thus, the core design goal can be defined as:

  • Reduce unnecessary distractions in the interface.
  • Visualize cost-saving information clearly to enhance the user experience.

Without introducing new elements, adjustments should focus on optimizing existing content.

Strategy

Using a card-based layout ensures low design cost while highly matching data delivery, maximizing the content’s coverage and impact.

Next Steps

While the design is in a good state, further optimization can be applied to small elements and component sizes for improved balance and clarity.

Revision Details

Part II

App's Logic Revision

Current Design Flaw Analysis

With the support of powerful algorithms, the waterfall flow layout has become a cost-effective, highly efficient recommendation solution for apps like Taobao, retaining users by offering a continuous browsing experience.

However, this design is not suitable for all product categories. Unlike Taobao’s broad range of products, which encourage exploration similar to short video scrolling, group-buying is focused more on lifestyle service products.

Key Issues Identified

  • Users often purchase the same items repeatedly, reducing the need for extensive browsing.
  • The interface is cluttered with well-known brands and store products, which users do not engage with visually.
  • When users scroll without a clear goal, they become disengaged, leading to slower decision-making and ineffective recommendations.

Alternative Plan

Consider upgrading the recommendation unit from single products to product categories to improve relevance and engagement.

  • Quickly identify user interests, offering related content and products immediately below.
  • Increase transparency for users by labeling recommendation categories, making them feel more secure and in control of what they see.

Improvement

Through observation, it was found that after users scroll down multiple times to refresh, group-buying content is replaced with live streams and lifestyle-related posts. As such, the original structure will be retained and placed under the "Featured" tab.
However, I believe that inserting such content into a need-driven group-buying service is not a good idea, as users who enter the group-buying section are naturally looking to directly browse low-priced items they are interested in. Therefore, this page will not be set as the default tab.

New Tab - Know You Better

Ad Campaign Card Section

Retain "Super Deals" as an ad slot and introduce a new style of ad card that displays a collection of four recommended items at once, adding diversity to the interface.

Timely Recommendations

Recommend relevant and familiar content based on the current time and user preferences, helping to quickly address users with clear, goal-oriented needs (e.g., finding lunch options).

Categorized Waterfall Flow Cards

Shift from the original single-item-based layout to a category-based structure, making it easier to understand user needs and provide faster recommendations.

Project PDF

Arrow Left
Arrow Right
No items found.

View More