SmartIntellect
Project Overview
Business goal
Improve the conversion rate of merchants
Transition the product from a Minimum Viable Product (MVP) to a pre-release version, increase the number of merchants applying for it, and ultimately improve the conversion rate of potential paying merchants.
My contributions
User-centered design rooted in business goals
I streamlined workflows and refined prompts to lower the learning curve, introduced new functionalities like dashboard creation to expand product value, and built a cohesive visual system through reusable components and design guidelines.
Impact
Driving higher paid conversions
7 out of 9 trial participants showed interest, and 80% of potential merchants expressed willingness to pay — an increase from the original 3 who had previously indicated purchase intent.
12%
Feature Satisfaction
48%
Task Completion Time
40%
Paid Conversion Rate
Highlights
Create Event Analysis Report:
Add Analysis Report to Dashboard:
Identify the Problem
It's a good start
The product has successfully developed an MVP version
SmartIntellect aims to help merchants drive sales and conversions more efficiently. It has since successfully launched an MVP and passed market validation.
The challenge is
The merchants' potential willingness to pay is not evident
Although most merchants acknowledge that SmartIntellect can bring value to their business, their intentions regarding future subscriptions and usage remain unclear, even as the product is about to enter the formal pre-sales stage.
Because they feel
The productis hard to use, lacks key features and looks inconsistent
This was distilled from a large amount of valuable feedback collected by our research team through in-depth user interviews with our merchants.
Insights from user research
Low Product Usability
The product lacks clear feedback, has cumbersome processes and redundant information, resulting in high learning costs for users, low operational efficiency and a frustrating user experience.
Limited Features
Some merchants feel the product lacks key features compared to similar competitors and find its flexibility limited, making it harder to meet their specific business needs effectively.
Inconsistent Visual Design
The product's visual design feels inconsistent and cluttered in some areas, giving an unprofessional impression. Additionally, the product's iteration cycles are quite long.
Design challenge
How might we create a seamless and intuitive user experience by simplifying workflows, expanding essential features, and unifying visual design, ultimately increasing the conversion rate of potential paying merchants for SmartIntellect?
Define Design Direction
Identify the target user
Business Operator
Data Analyst
To better understand how users interact with our product and the key tasks faced by different roles, we conducted an in-depth analysis of user personas and identified two key roles: Business Operator and Data Analyst.
Business operators care about fast, smooth execution with clear, actionable 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: Customer Management
Focus on connecting and managing customer data — requiring 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.
Click the image to view it
I further analyzed the key stages of this scenario and mapped out the core tasks undertaken by the business operator within each stage
Click the image to view it
Scenario analysis: View Analytics Reports
Focus on creating and comparing reports — requiring 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.
Click the image to view it
I further analyzed the key stages of this scenario and mapped out the core tasks undertaken by the data analyst within each stage:
Click the image to view it
Design direction
Three design goals, each backed by a set of design strategies (12 in total)
Based on these insights and analyses, I set three clear design goals and developed corresponding strategies to ensure our core challenges were effectively addressed.
The following showcases how I applied three design strategies to specific scenarios, aligning them with users flows to create practical solutions.
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.
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
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.
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 Goal Ill
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
The primary colors are dark blue (#07012F) and purple (#664EFD)
In certain cases, text buttons, navigation links, and general alert and message notifications should avoid using the brand color and instead utilize blue (#356DFF). Blue serves as a standard, universally recognized color in the interface, providing clear meaning. Replacing blue with non-blue tones in these elements could introduce additional cognitive load for users.
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.
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.
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.
Data Validation
The product is currently in the MVP stage and has been released to a few merchant users for beta testing and trials. Data has been collected through internal testing and usability assessments.
Ultimately, 80% of potential merchants showed interest in the redesigned product and expressed a willingness to pay, compared to only 3 who had clearly indicated a willingness to pay before.
