SmartIntellect

Customer Data Platform Redesign

Customer Data Platform Redesign

ToB

ToB

SaaS Platform Design

SaaS Platform Design

Project Type

Project Type

B2B Product Version Iteration

B2B Product Version Iteration

Company

Company

SHOPLINE in JOYY Inc

SHOPLINE in JOYY Inc

Role

Role

Product Designer

Product Designer

Industry

Industry

Cross-Border E-commerce

Cross-Border E-commerce

Tools

Tools

Figma, Jira, Notion, Zoom

Figma, Jira, Notion, Zoom

Timeline

Timeline

2024.06 - 2024.09 (3 months)

2024.06 - 2024.09 (3 months)

Project Type

B2B Product Version Iteration

Company

SHOPLINE in JOYY Inc

Role

UX Designer

Industry

Cross-Border E-commerce

Tools

Figma, Jira, Notion, Zoom

Timeline

2024.06 - 2024.09 (3 months)

SmartIntellect is a data-driven Customer Data Platform (CDP) product that powers e-commerce merchants using SHOPLINE(An all-in-one commerce SaaS platform). It enables merchants to build omni-channel customer profiles, and gain actionable insights by analyzing behavior, preferences, and purchase history, execute targeted marketing.

SmartIntellect is a data-driven Customer Data Platform (CDP) product that powers e-commerce merchants using SHOPLINE(An all-in-one commerce SaaS platform). It enables merchants to build omni-channel customer profiles, and gain actionable insights by analyzing behavior, preferences, and purchase history, execute targeted marketing.

Overview

Background

The product launched its MVP

SmartIntellect aims to help merchants drive sales and conversions more efficiently. It has since successfully launched an MVP and passed market validation.

Business goal

Increase merchant paid conversion rate

Although most merchants recognize the value SmartIntellect brings to their business, their intention to subscribe and use the product remains unclear.

Therefore, the business goal is to transition the product from MVP to pre-release, attract more merchant applications, and increase potential paying conversions.

My contributions

Streamlined workflows, added dashboard features, and rebuilt the design system

Most merchants felt the product was difficult to use, missing essential features, and visually inconsistent, leading to high learning costs and low operational efficiency.

After identifying these needs, I conducted competitive analysis and mapped design strategies. I streamlined workflows and prompts to lower the learning curve, introduced new features like dashboard to expand product value, and rebuilt an new design system with design guidelines and reusable components.

Impact

Redesigned Version Boosted Merchant Paid Conversions by 40%

Merchant satisfaction reached 80% for usability and 79% for completeness, while tasks such as creating segments and comparing data were completed in nearly half the time.

7 of 9 trial participants showed strong interest, and 80% of potential merchants expressed willingness to pay — up from only 3 before.

12%

Feature Satisfaction

48%

Task Completion Time

40%

Paid Conversion Rate

User Insights

To better understand the tasks, needs, and pain points users face when using our product, I identified the core target users and, based on real scenarios, broke down their key tasks and pain points.

Business Operator

Care about fast, smooth execution with clear steps

Click the image to view it

Data Analyst

Care about clarity, customization, and real-time accuracy

Click the image to view it

By analyzing the tasks and needs of these two key roles across different scenarios and integrating previous research findings, I identified two key scenarios: Customer Management and View Analytics Reports.

Scenario Analysis I

In Customer Management scenario

Users require smooth, efficient flows and clear feedback

In the Customer Management scenario, the business operator is the primary user. They focus on connecting customer data to SmartIntellect, as well as viewing, managing, and editing that data.

This process allowed me to uncover potential optimization opportunities and define corresponding solution.

Problem I

The current segmentation workflow is too time-consuming

Although the current process allows them to fulfill the requirement of creating new customer segments, it is widely regarded as overly cumbersome. Operators often need to repeatedly make selections, leading to a prolonged process.

Current segmentation workflow

The current rule layout creates high cognitive load

All rules are stacked in creation order as a flat list, regardless of type — forcing users to scroll and review with high cognitive load.

Current page display

As a result, users struggle to quickly locate, compare, or edit specific rules. The lack of visual hierarchy and grouping not only impacts readability, but also increases the time needed to complete segmentation tasks.

Solution I

Simplified workflow delivers segmentation that’s faster and clearer

I redesigned the segmentation flow by removing the rule selection box and adopting a vertical layout, grouping conditions into three logical categories with a nested card design, and applying conditional displays so options appeared only when relevant. This reduced unnecessary steps, improved readability, and helped users complete segmentation tasks more efficiently.

Before

After

/ 01

Fewer steps to shorten time-to-complete

Eliminate the Segment Rule selection box, and utilize a vertical flow layout to display rules directly on the page, enhancing operational efficiency, Users can click “Add this sort” to configure rules.

/ 02

Logical grouping to improve readability

Rules within the same category will be connected using 'and,' with a nested card design to ensure readability.

/ 03

Use progressive disclosure to reduce friction in event setup

Show ‘Add property’ only when the selected event supports properties and has available slots—which reduces unnecessary actions.

Disable the “Add” button and show a tooltip on hover if the selected event supports properties but has already reached the 10-property limit.

When 10 rules have been added in the same category, the button will be disabled, and a tooltip will appear when hovered over

Scenario Analysis II

In View Analytics Reports scenario

Users require flexibility, clarity, and efficient cross-view analysis

In the View Analytics Reports scenario, the data analyst takes the lead. They are responsible for creating various reports based on business needs and extracting key data from these reports to support business decisions.

This process allowed me to uncover potential optimization opportunities and define corresponding solution.

Problem II

No centralized workspace for report comparison

Although users can analyze data with the current system, dispersed information and lack of real-time feedback make the process inefficient and slow decisions.


Every time I want to compare charts, I have to click back and forth across multiple pages.

Competitive analysis

Dashboards are the standard solution for managing and comparing reports

Based on this situation, we conducted a competitive analysis to explore how other products address these issues.

Design Inspiration

1. Flexible dashboard creation and management.

2. Custom addition of multiple report components.

3. Visual optimization of data presentation.

Solution II

Dashboard MVP version

Based on user needs and competitive insights, I led the design of the Dashboard MVP to provide a more intuitive and flexible way for users to organize and analyze key charts.

The design emphasized flexibility, seamless interaction, and customization—ensuring scalability while addressing core user goals.

Before
Before
Before
Before
Before

/ 01

Centralized dashboard feature to unify access and reduce page switches

To enhance dashboard management efficiency and clarity, a centralized entry point is placed in the side navigation for quick access. Dashboards are listed with their creation date and status, and all action buttons are consolidated on the right for streamlined management.

A simplified interaction path allows users to quickly modify and manage dashboards without navigating to sub-pages.

Provide instant feedback after actions to enhance transparency and user experience. Auto-fill '{Dashboard Name}_copy' in the input field when the 'Copy' icon is clicked to minimize manual input.

/ 02

Drawer-style configuration to reduce context switching

In the chart configuration process, I replaced traditional pop-ups with a drawer-style sidebar design. When users click “Add Chart,” a configuration panel slides in from the right side of the screen, guiding them to sequentially select key fields.

/ 03

Flexible chart layout to enhance user control and support future expansion

The dashboard enhances user control through a draggable, responsive card layout and clear feedback mechanisms (default last-7-day data, instant toast notifications, and double confirmation), while leaving ample room for future feature expansion.

Other Highlights

Redesigning funnels with color-coded steps to reduce visual complexity and cognitive load

By displaying multi-channel funnels separately and color-coding each step, we aim to reduce visual complexity, enhance readability, and lighten users’ cognitive burden.

Before
Before
Before
Before
Before

Strengthening report tables for greater efficiency

I optimized report tables by allowing users to adjust the number of entries per page, sort fields in ascending or descending order. This redesign streamlined data exploration, reduced operational friction.

Before
Before
Before
Before
Before

Design System

Designed 23 Core UI Components

I led the creation of the product’s initial design component library, modularizing common UI elements and interaction patterns. The final output included 23 core UI components along with corresponding usage guidelines.