Design Strategy 1
Optimize interaction flow and simplify cumbersome tasks
What‘s the problem?
The current segmentation workflow is too time-consuming
When business operators create new customer segments, their top concerns are task efficiency and page clarity. In real-world usage, operators often need to set up multiple rules and conditions at once—driven by specific marketing campaigns, product complexity, or targeting needs.
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
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
Simplified segmentation with grouped structure
Based on this usage feedback, I designed a clearer, more modular customer segmentation interaction method.
Before
After
/ 01
Reduce steps
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.
Users can click 'Add new rule' to add new rules and conditions within the same Segment rule category.
/ 02
Logical grouping
Rules within the same category will be connected using 'and,' with a nested card design to ensure readability.
When 10 rules have been added in the same category, the button will be disabled, and a tooltip will appear when hovered over.
/ 03
Conditional display design
The 'Add property' button will only appear when the selected event has properties, reducing unnecessary actions
Impact
Enabling faster, clearer, and more confident segmentation
The original five-step process was streamlined into three, allowing users to configure complex rule sets more quickly and clearly. Page readability and information clarity were significantly improved, reducing cognitive load.
Design Strategy 2
Enhance the existing page to support additional data displays
What‘s the problem?
Customer page capabilities are limited
During our research, many merchants told us that the customer profile page didn't seem to contain much information.
When a merchant selects a customer on the Customer List page, the system displays the Customer Purchase Path Timeline. However, for merchants, merely presenting this information is insufficient.
Current Customer-List feature
This leads to low feature usage
“
The limited types of customer data available made me feel the customer page was not useful, so I stopped using it.
Insight: Merchants want to see more comprehensive and multidimensional customer data.
Solution
Redesigned customer view with richer data dimensions
Based on research and competitor analysis, I identified five key data dimensions most valued by merchants, and redesigned the information architecture of the customer detail part to make it more comprehensive, clear, and actionable.
Before
After
/ 01
Multi-dimensional data display
Enable users to switch between content modules via navigational tabs and access more dimensions of customer information, forming a more comprehensive user profile.
Why choose tabbed navigation?
Tabbed Navigation:
Allows users to freely select content and engage in non-linear browsing, minimizing perceived interruptions.
Infinite Scroll:
Excessive content increases cognitive load, making it hard for users to get started.
Prioritize actions based on user expectations and competitive analysis, displaying them from high to low frequency.
Enabled on-demand loading for each tab to avoid performance lag from loading all data at once, ensuring a smoother and more seamless browsing experience.
/ 02
Customer–Segment Linking
When viewing a customer's segment list in the customer detail part, merchants can click on any segment to navigate to the full list of customers within that group. From there, they can further access the detailed profile of any customer in the list.
This “segment-to-individual” linkage enables seamless switching between group-level and individual-level analysis.
Impact
Increased feature adoption and user engagement
This upgrade significantly enhanced the completeness and usability of the customer list feature, enabling merchants to better understand their user base and ultimately increasing feature adoption and user engagement.
Design Strategy 3
Add key features to help users quickly analyze and compare data
What‘s the problem?
No centralized workspace for report comparison
In user research, one of the most consistent requests from merchants was the need for a centralized workspace to manage and compare analysis reports.
“
Every time I want to compare charts, I have to click back and forth across multiple pages.
User pain points
1
Dispersed Data, Low Analysis Efficiency
Fragmented information
High operational burden
Complex coordination
2
No Real-Time Feedback, Slower Decisions
Delayed response
Poor market sensitivity
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
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.
/ 01
Add dashboard feature
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.
Empty data state page: a 'No dashboard available yet' message prompts users to click the 'Create' button to set up a new dashboard. This approach prevents users from feeling lost on an empty page and provides a clear next-step prompt.
A simplified interaction path allows users to quickly modify and manage dashboards without navigating to sub-pages.
Provide instant feedback after actions, such as ‘Resume successful' toast or an error message with details, 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.
Clicking the 'Delete' icon triggers a deletion confirmation pop-up. Exiting the pop-up (via cancel, 'esc,' or clicking on the overlay area) cancels the deletion.
/ 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 such as chart type, metrics, dimensions, and time range.
Why choose this design method?
Option A: Drawer Design
The drawer design offers a smoother experience for this lightweight operations, simplifying the interface and making actions more intuitive. It keeps the visual style consistent with the main interface, creating a seamless flow with fewer transitions and interruptions
Option B: Modal Popup Design
The modal popup requires users to leave the current task, which can disrupt workflow, especially for frequent actions like adding or editing cards. The repetitive opening and closing of popups feels redundant, and users may lose context, adding extra steps and reducing efficiency.
/ 03
Flexible chart layout
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.
Impact
Improved Analytical Efficiency and Flexibility
From a product perspective, this module closes a key data visualization gap versus competitors. For users, it boosts analytical efficiency and reduces cognitive load, helping merchants access insights faster while enhancing professionalism and overall appeal.
Design System
Improve the product's visual presentation, strengthen market competitiveness
Design Principles
Efficiency & Intuitive
SmartIntellect product users operate in markets with audiences from the UK, USA, and China, primarily serving key account (KA) clients with brand and user operations needs. For them, efficiency is the highest priority.
Therefore, in design, it is essential to maintain Western Standards, ensuring the product remains simple, restrained, and efficiently delivers data and information to users. Enhancing scalability and optimizing the framework presentation is also key.
Color
Typography
Rounded Corners
Increased corner radius
To align with design trends and improve display on low-resolution screens, the new components and page elements feature larger rounded corners.
All single-line components, such as buttons, input fields, tags, and tooltips, adopt fully rounded corners at both ends.
For other elements, corner radii follow a 4px increment system. For example, 16px is commonly used for page-level cards.
12px is applied to nested components within cards, such as message boxes.
Spacing
Multiples of 8px
Most spacing follows multiples of 8px, while the spacing between titles and descriptions is set to 4px.
Components
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.
Impact
50% Time Savings in Design & Dev
The component library unified the product’s visual style and improved team efficiency, cutting design and development time by ~50%. It also enhanced the user experience, making the interface clearer and easier to use.
