Identified the most suitable solutions through design optimization and experimental testing to increase section CTR.
Project Background & Issues
As a maintenance role for a mother and baby e-commerce community platform, we observed through data analysis that while the number of new customers each month was high, the conversion and repeat purchase rates did not grow proportionately.
The key challenge we aimed to address was: "How can we encourage new customers to stay and existing customers to make repeat purchases?"
Analyzing user behavior on the app, which has the highest user base, revealed that the most visited section of the navigation bar was the "Home (Shopping)" page. Therefore, we focused our optimization efforts on the homepage first.
Among the various sections on the homepage, we discovered that the click-through rate for the "Explore Categories" section was almost as high as that of the primary section "Latest Group-buys" which is featured prominently on the first screen.
The "Explore Categories" section, however, is not a primary focus; it's a secondary section located on the third screen after scrolling down, designed to provide moms with an intuitive and simple category index amid a wide array of group-buy products.
The high CTR indicates that this section effectively targets users' needs and has the potential to be further enhanced.
Challenge
As mentioned, the key challenge was: how to encourage new customers to stay and existing customers to make repeat purchases.
To address this, we analyzed several factors that drive user purchases:
-
Supply Side: Strategies for product discovery by the business development team → Manually curated group buys.
-
Demand Side: Users' actual conditions → Preferences, background data, etc.
In the mother and baby e-commerce sector, one crucial piece of information is "baby’s age in months." As babies grow, the challenges and needs at each stage vary, making baby’s age a key factor in accurately recommending suitable products to target users.
Currently, the "Explore Categories" section recommends product categories based on the user's baby’s age. However, these recommendations are limited to six fixed categories with no variation, meaning users see the same content each time. This project aims to "redefine the presentation of data" to introduce variety and flexibility in the content, creating a more dynamic and engaging placement to attract users.
Role
Product designer
Deliverable
For the homepage "Popular Categories" section (previously named "Explore Categories"), I:
✔ Led the design of multiple layout variations.
✔ Led the development of the data sourcing method.
The goal of this experiment was to identify the layout with the highest user CTR. During the exploration process, I used design to facilitate information comprehension and proposed two layout designs, each paired with two recommendation logics. These combinations were presented for evaluation and discussion, enabling us to narrow down the variables for the phase 2 experiment into two clear directions:
-
Recommendation Logic: Fixed L1 vs. Adaptive L1
-
Layout Design: 2x3 Vertical Grid vs. 3x1 Horizontal Scroll
Outcome
According to the data, the final version emerged as the winner in the Phase 2 experiment. Its performance across platforms was as follows:
-
iOS: CTR increased by 6.6%. Given that the majority of the brand's users are on iOS, this outcome marked the overall success of the project.
-
Android: The CTR slightly decreased by 4.6%. Although this is a minor setback, it warrants further investigation and follow-up.
Phase 1.
Subheading Experiment
Situation
Objective: To assess the impact of subheadings on CTR when using "non-fixed categories" in future iterations.
As mentioned earlier, the previous "Explore Categories" section used a static recommendation model with six fixed categories for each baby age group, lacking variability. The new version will dynamically recommend non-fixed categories. The experiment aims to determine whether the inclusion of subheadings for each category will influence user engagement and CTR.
Currently, the section elements consist of "category name + subheading + fixed image." With the transition to dynamic categories, all product categories would need to be assigned subheadings. This would require additional resources from the product development team. Therefore, before fully committing to this change, we conducted an experiment to assess the feasibility of the current layout under these new conditions.
Task & Action
Design Considerations
We hypothesize that the simplicity of this section's elements, compared to other group-buy cards that contain more information, may be a key factor driving clicks. Therefore, while maintaining the simplicity of the elements, the following layout adjustments were made:
-
Text Style: Enhanced the visual emphasis on the main headline and ensured longer category names are not truncated.
-
Category Image: Balanced the proportion of image and text to create a more harmonious layout.
-
Background Image: Focused the attention more effectively on the category image by adjusting the background design.
Design Considerations
Inspired by practices on other e-commerce service, where similar sections often include "promotional text" we hypothesized that this could enhance user engagement. However, due to limited resources, we couldn’t update the promotional text dynamically with each promotional period. After considering the options, we decided to use static promotional text, assigning fixed promotional messages to each of the six categories in the various baby age groups (ensuring the discounts and quantities are accurately reflected for each category). This approach led to the creation of version C.
Experimental Variants
-
[A] Heading + Feature Subheading (similar to the old version)
-
[B] Heading Only
-
[C] Heading + Promotional Subheading
Result
The experimental results were somewhat surprising: the variant with only the big heading (Version B) had the highest CTR!
Takeaways
Instead of filling the limited space with various pieces of information (even if it includes appealing promotional content), a more effective approach is to present information simply. Reducing the user's cognitive load makes it easier for them to understand and engage, leading them to be more likely to follow through with the subsequent steps we provide.
Phase 2.
Image Usage and Layout Testing
Situation
Following the insights from the previous experiment on element prioritization, the next step was to explore which "image usage style" and "layout design" would be most effective in attracting users.
→ System-Recommended Categories: "Categories purchased by users of the same baby age group within a certain period"
In contrast to the old "Explore Categories" section, which statically recommended six fixed categories for each baby age group, the new version will dynamically recommend non-fixed categories. The recommendation logic is based on "categories purchased by users of the same baby age group within a certain period," ensuring that the categories users see will vary daily, providing a fresh experience each time.
Issue 1: Fixed Images vs. Dynamic Images
Design Considerations
Image Appeal is Key: One of the primary factors believed to increase CTR is the image itself. If the image is visually appealing, it has a high likelihood of driving clicks. This made me lead to the discussion on optimizing the images used: should we use fixed, existing images for each category, or should we use images of the best-selling products within that category?
The backend engineer suggested using fixed images for simplicity, but I argued that using dynamic images of best-selling products would be more appropriate. Dynamic images can showcase more attractive, seasonally relevant items.
Through mock-ups, we identified the pros and cons of using dynamic images (detailed explanation with illustrations)
Pros:
-
Seasonal Relevance: Dynamic images are ideal for seasonal product categories, effectively showcasing timely or trending items (e.g., children's clothing, trendy women's fashion, disinfectants / antibacterial / protective products).
Cons:
-
Inappropriate for Accessories: Categories with accessory items may not be suitable, as best-selling items like storage bags or straws for children's sleeping bags and water bottles may not be visually compelling.
-
Inconsistent Aesthetics: Some categories with multiple patterns or styles may not benefit from dynamic images. For example, best-selling sun-protective cooling clothing and bedding sets tend to be in simple, understated designs, whereas fixed images might use more vibrant, visually striking images that better capture attention. This suggests that while people are drawn to bold designs, they often end up purchasing safe, basic options.
Issue 2: 6-Grid vs. Horizontal Scroll
In this phase, we explored various layout possibilities, introducing several design variations.
Horizontal Scroll Layout: This design emphasizes images more prominently, which we believe could be a more effective way to attract clicks. We experimented with multiple design styles within this layout, and we're confident that the enhanced versions will perform well!
Action: Experimental Variants
-
Image Usage Comparison:
-
Fixed Images
-
Dynamic Images (Best-Selling Products)
-
-
Layout Comparison:
-
Version A: 6-Grid Layout
-
Version B: Horizontal Scroll Layout
-
Result: Experiment Outcomes
-
Image Usage: The experiment results aligned with expectations—versions with dynamic images featuring best-selling products achieved higher CTR.
-
Layout Design: Surprisingly, the more understated Version A 6-Grid layout outperformed the horizontal scroll layout in terms of CTR, contrary to our initial assumptions!
Lesson Learned
After incorporating feedback and making various design adjustments, we realized that despite our efforts, what truly matters to users is a layout that displays the most products at once. The higher CTR for the 6-Grid layout indicates that users prefer seeing a broader selection of items upfront. The first three visible products are crucial—if they don't capture the user's interest, they're unlikely to continue scrolling horizontally and will instead move down the page.
Result
Mock-up Outcome
Popular Categories
This is a personalized recommendation section on the app's homepage. Our goal was to offer users a different visual experience after scrolling through the lively group-buy activities above—transitioning to a simpler and more straightforward presentation of categorized products.
Through two stages of experimentation, we identified the optimal format that most effectively engages users and drives clicks.
Wrapping Up
Converging Experimental Directions with Design
The goal of these two experiments was to identify the layout that generated the highest CTR. During this exploration, I used design to enhance information comprehension and proposed two layout designs, each paired with two recommendation logics. These combinations were evaluated and discussed, allowing us to refine the variables for the Phase 2 experiment into two clear directions.
Understanding the Necessity of Experimentation
Both experiments yielded unexpected results, challenging our initial assumptions. Each time, the team was confident that version X would be the winner, but instead, version Y came out on top. This demonstrates that developers should avoid overconfidence in their understanding of users. Even if we have personal experience in the user’s industry, we cannot rely solely on the opinions of a few team members. Our role inherently comes with biases!
The path to product development is an ongoing process of understanding real users, with no definitive end point.