Modular Product Detail Page Framework

Streamlining Business Configuration and Customization with Scalable Card Variants

Overview

When designing a complex app with multiple product categories and business types, we needed to establish a unified page structure to maintain a cohesive user experience across the platform. This structure, serves as the backbone for the app’s layout and content, ensuring consistency in the overall experience.


Further, to accommodate the unique business needs of each business unit and brand, we developed configurable variants for each card. These variants are tailored to meet the specific commercial goals of different business units while still aligning with the platform’s overarching experience. By consolidating similar business requirements, we designed a flexible yet efficient system that delivers the maximum amount of customization with minimal variations—ensuring scalability, ease of implementation, and consistency across the app.

Team

Lead UX Designer

UX Designer

UI Designers

Business units

Skills

  • Cross-Functional Communication

  • Designing Scalable System

  • Design Operations

Timeline

2023 Q3-Q4

Genre

Product Detail Page,

Design Framework

Tool

Figma

Planning for the Framework

With my lead UX designer, I helped break down the overall goal into three focus areas — business goals, user experience, and agility — and translated them into tangible UI guidelines.


We built a three-tier page structure: page sections, cards, and variants, creating a modular system that scales across business units and supports flexible customization.

Overall Goal

A flexible, adaptable page layout that serves the diverse needs of different business units while maintaining overall consistency and efficiency

Goals

Business Flexibility

Ensure each business unit can highlight their unique products and promotions while supporting the platform’s overall objectives.

Iteration Agility

Facilitate data-driven iterations and optimizations that align with user behavior, driving higher conversion rates.

Development Efficiency

Design with scalability in mind, ensuring UI components are reusable and easy to maintain, reducing development time and cost.

Design Breakdown

Page Section

The page is divided into several sections, each designed to fulfill different user and business needs by presenting specific information:

Page Section 1: Key product info. to drive initial user engagement

Page Section 2: Specs and platform services for trust-building and guiding the user towards a decision

Page Section 3: Reviews, pricing, , and add on services to facilitate the final conversion decision

Card in each screen

The page is divided into multiple floors, each representing a section of the content:

Card 1: Contains high-priority content, including product images and promotional banners.

Card 2: Focuses on category-specific product information (e.g., specifications, customer reviews).

Card 3: Provides additional information, such as related products and offers.

Option1

Option2

Card Variants

Within each floor, variants are created to accommodate the unique needs of different business units, enabling tailored content display while maintaining the overall design consistency.

Page Section & Cards

This framework ensures overall unified user experience across categories (business unit’s products) & brands.

[Note]

For clarity, I’ve translated all UI elements into English. In the actual app, the typography and layout follow the Chinese characters.

Card in each screen

Page Section

Page Section 2

Product-related details

Page Section 3 - n

Third-party information and add-on shopping

Page Section 1

Key product information

images

price

discounts

brand

Product Name (Title)

Sales Ranking*

specifications

shipping info.

Tailored Shopping Guidance

platform and merchant services

buyer reviews

images and video reviews

buyers Q&A

Platform Salesperson Reviews

Cards Variants

Based on Data research and user testing insights, we structured the three key variable cards and aligned them with category-specific display, tailored to different decision-making scenarios. The following are some example categories’ page design.

Complex decision-making

Product specifications & Comparison

Fit & Size Guide

Multiple packaging views

Online-only offer

Package size & Unit Price

Trade in Service

Moderately complex decision-making

Simple decision-making

The Analysis Artifact

Blurred due to disclosure reasons

Full Template

Ralated Projects

Contact Me

Email:

Mobile:

Social:

annyjialuli01@gmail.com

(+1) 778-697-4718 Canada

Create a free website with Framer, the website builder loved by startups, designers and agencies.