Phase I: Identify the problem
Phase I: Identify the problem
Since its inception, the SmartIntellect product has been dedicated to helping merchants increase their sales and customer conversion rates in a more seamless and efficient manner. Currently, it has successfully developed an MVP version and has passed market validation.
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.
Since its inception, the SmartIntellect product has been dedicated to helping merchants increase their sales and customer conversion rates in a more seamless and efficient manner. Currently, it has successfully developed an MVP version and has passed market validation.
😮💨 However, 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.
We conducted user research to find out what was going on. Fortunately, we gathered a lot of valuable feedback during the user interviews.
We also did some competitive product analysis... of course not just this.
🔎 We got some insights from user research
We also did some competitive product analysis... of course not just this.
Three factors are influencing merchants' decision on whether to pay for SmartIntellect:
Three factors are influencing merchants' decision on whether to pay for SmartIntellect:
🔎 We got some insights from user research
We conducted user research to find out what was going on. Fortunately, we gathered a lot of valuable feedback during the user interviews.
Three factors are influencing merchants' decision on whether to pay for SmartIntellect:
😮💨 However, the merchants' potential willingness to pay is not evident
Phase III: Designing the Solution
Phase III: Designing the Solution
💡 How Might We Achieve Design Goal I?
💡 How Might We Achieve Design Goal I?
KR 1. Make statuses clear, provide users with real-time feedback
KR 1. Make statuses clear, provide users with real-time feedback
When business operator connect channels, they pay close attention to the real-time connection status, as it helps them confirm whether the connection was successfully completed. Therefore, this aspect of the design needs improvement by clearly feedback on connection status.
01. On the list page — Display real-time connection status for each source channel
01. On the list page — Display real-time connection status for each source channel
Differentiate between connection statuses and provide users with displays and feedback
Differentiate between connection statuses and provide users with displays and feedback
Use the card-style design to display the connection status of different sources, and provide users with feedback based on each status.
Use the card-style design to display the connection status of different sources, and provide users with feedback based on each status.
Provide users with simple and efficient feedback through a lightweight design. Use commonly recognized alert colors to reduce cognitive load
Provide users with simple and efficient feedback through a lightweight design. Use commonly recognized alert colors to reduce cognitive load
02. On the details page — Provide real-time feedback based on this source connection status
02. On the details page — Provide feedback based on this source connection status
When users click on a card to enter the details page of the connected channel, the system provides appropriate feedback based on the connection status of the source channel
When users click on a card to enter the details page of the connected channel, the system provides appropriate feedback based on the connection status of the source channel
For internal channel(The product developed by the company) connections:
For external channel(Like Meta, Google) connections:
KR 2. Optimize interaction flow and simplify cumbersome tasks
KR 2. Optimize interaction flow and simplify cumbersome tasks
When business operators attempt to create new customer segments, they are highly concerned about the time required to complete the task and the readability of the entire page.
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. Additionally, the layout of the page is somewhat cluttered, which further impacts the overall user experience.
The existing process is not fundamentally problem, but it does not fully align with the core needs of business operators. I need to optimize this process to better meet their requirements for shorter task completion times and improved readability.
In real-world scenarios, most business operators need to configure multiple Segment rules and conditions simultaneously to achieve more refined customer segmentation, influenced by factors like marketing campaigns and product volume. The current solution is complicated, lacks readability, and is time-consuming, resulting in low efficiency for business operators when configuring customer segments
The content is displayed from top to bottom in the order users set the rules. However, when business operators select too many rules, the page becomes cluttered and hard to read because of the high-density text display.
Finally, I successfully optimized the entire process, reducing the number of steps to make it simpler and more user-friendly. As a result, the overall completion time was significantly shortened.
KR 3. Shorten steps by creating user-centered interaction paths
KR 3. Shorten steps by creating user-centered interaction paths
After completing customer segmentation, business operators often need to view details and make timely edits to define new segments. However, the current path is long and requires multiple steps, leading to high effort and extended time for updates and adjustments
While viewing customer segments, business operators can directly edit segmentation rules. This reduces the cost of managing customer segments and shortens the time needed to update and edit the rules
KR 4. Provide help near actions to minimize cognitive load
KR 4. Provide help near actions to minimize cognitive load
The Report feature enables merchants to analyze various behavioral events by utilizing metrics, attribute grouping, and conditional filtering to create diverse visual charts for multidimensional analysis of customer behavior.
Most merchants expressed interest in this feature. However, as first-time users, they also felt unsure about how to use it effectively. The feature lacks adequate guidance and support.
I designed three types of assistance based on the confusion moments of Before the task, During the task, and After the task, to help users better utilize the feature
01. On the list page — Display real-time connection status for each source channel
01. Guided Assistance — Interpret concepts to help users understand them
Differentiate between connection statuses and provide users with displays and feedback
Pain Point: “Unable to understand these terms and how to use them”
01. On the list page — Display real-time connection status for each source channel
02. Responsive Assistance — Status feedback to keep users informed
Differentiate between connection statuses and provide users with displays and feedback
Pain Point 1: “Uncertain about when certain actions are available”
After user configures at least one 'Event Metric,' the 'Custom Indicator' button becomes active.
01. On the list page — Display real-time connection status for each source channel
Pain Point 2: “Uncertain if the action is correc”
Provide status feedback along with error reasons and action recommendations.
01. On the list page — Display real-time connection status for each source channel
03. Prompted Assistance — Provide conflict reasons to guide users toward the solution
Differentiate between connection statuses and provide users with displays and feedback
Pain Point: “Unsure what to do after making an error”
KR 5. Reduce redundant information and lower visual complexity
KR 5. Reduce redundant information and lower visual complexity
In the previous funnel analysis report design, I considered using color contrasts within the same funnel to visually compare customer behavior across different channels more intuitively.
However, user feedback shows that this display method increases visual complexity, making it difficult to quickly identify relevant connections. Overload leads to frustration and inefficiency, and a desire to “escape”. This design fails to meet expectations.
01. On the list page — Display real-time connection status for each source channel
Solution: Redesign the layout to decrease the total amount of displayed information
Display multi-channel funnels individually, with each step in the funnel represented by a distinct color to enhance readability.
💡 How Might We Achieve Design Goal II?
💡 How Might We Achieve Design Goal II?
KR 1. Enhance connection flexibility, allowing users to add third-party data
KR 1. Enhance connection flexibility, allowing users to add third-party data
The current connection feature supports integrating three mainstream channels: Meta, Google, and the company's proprietary Member System. However, the majority of merchants use various third-party marketing systems, including custom CRM solutions. Currently, they are unable to integrate these data sources into SmartIntellect.
The low flexibility of the connection feature, combined with the high costs and risks of migrating third-party data, has significantly undermined merchants' confidence in adopting SmartIntellect.
01. On the list page — Display real-time connection status for each source channel
Solution 01. Add custom source connections
Support users in connecting third-party data sources through custom sources
When users click on a card to enter the details page of the connected channel, the system provides appropriate feedback based on the connection status of the source channel
Implement an intuitive and consistent card-style design to ensure overall page uniformity.
Provide status indicators, pop-ups, and toast notifications with visual cues to inform users of each step in the connection process, guiding them through it. Maintain consistent styles and colors to minimize learning costs.
The source status updates in real time based on user actions and provides feedback to the user.
01. On the list page — Display real-time connection status for each source channel
Solution 02. Customize source data (event data, attribute data)
Support users in connecting third-party data sources through custom sources
When users click on a card to enter the details page of the connected channel, the system provides appropriate feedback based on the connection status of the source channel
KR 2. Enhance the existing page to support additional data displays
KR 2. Enhance the existing page to support additional data displays
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.
Allow users to view more dimensions of information about the customer, forming a more comprehensive user profile.
Prioritize actions based on user expectations and competitive analysis, displaying them from high to low frequency.
KR 3. Enhance the flexibility of existing features to improve user experience
KR 3. Enhance the flexibility of existing features to improve user experience
02. On the details page — Provide real-time feedback based on this source connection status
01. Introduce a new 'Metric Card' chart for chart display
Intuitively display the total value of metrics within the selected time range, enabling users to quickly access key data
When users click on a card to enter the details page of the connected channel, the system provides appropriate feedback based on the connection status of the source channel
02. On the details page — Provide real-time feedback based on this source connection status
When a user performs an action in the configuration area that is incompatible with the "Metric Card" analysis type, clicking "Apply" will gray out the "Metric Card" button, signaling it is unavailable.
02. On the details page — Provide real-time feedback based on this source connection status
If the "Metric Card" display is active and the user applies incompatible settings, the "Metric Card" option will gray out, display the unselectable state, and provide an explanatory message on the analysis chart about why it is not available.
02. On the details page — Provide real-time feedback based on this source connection status
02. Strengthen reporting capabilities to optimize data presentation efficiency
Enhance reporting capabilities in terms of data volume and priority, providing users with greater flexibility and faster access to data
When users click on a card to enter the details page of the connected channel, the system provides appropriate feedback based on the connection status of the source channel
02. On the details page — Provide real-time feedback based on this source connection status
KR 4. Add key features to help users quickly analyze and compare data
KR 4. Add key features to help users quickly analyze and compare data
When users are utilizing reports, they encounter the following three pain points:
01. Dispersed Data, Low Analysis Efficiency
Users lack a unified data display tool, making it difficult to quickly view and analyze key metrics across different themes on a single page, limiting their ability to gain an overarching view. To monitor business performance and make informed decisions, Users must check multiple reports individually, increasing data integration complexity and reducing analysis efficiency.
02. Lack of Real-Time Data Feedback, Slow Decision-Making
The current analytics functionality mainly supports historical data review over specific time periods and does not offer real-time data analysis and monitoring. When faced with market shifts or unexpected business performance, users cannot access timely data feedback to make quick adjustments. This hampers their ability to respond swiftly to market changes.
03. Lack key Features, Reduced Competitiveness
Competitors have introduced dashboards supporting custom analytics and data display, while our product lacks this feature. Users are unable to conduct multi-dimensional data analysis and management on a single page, which could result in potential customer loss and decreased market competitiveness. Existing clients have expressed disappointment regarding the absence of it.
Based on this situation, we conducted a competitive analysis to explore how other products address these issues.
Summary:
Klaviyo focuses on event marketing data display with robust event filtering capabilities.
Shence Data's dashboard functionality mainly relies on preset templates, offering limited customization.
Linkflow emphasizes flexible dashboard directory management, allowing users to customize dashboards according to their needs.
Volcengine combines flexible dashboard management with a powerful visual display experience, particularly excelling in data color and graphic design.
Design Inspiration:
Flexible dashboard creation and management
Custom addition of multiple report components
Visual optimization of data presentation
02. On the details page — Provide real-time feedback based on this source connection status
01. Add Dashboard Feature
When users click on a card to enter the details page of the connected channel, the system provides appropriate feedback based on the connection status of the source channel
02. On the details page — Provide real-time feedback based on this source connection status
02. On the details page — Provide real-time feedback based on this source connection status
02. On the details page — Provide real-time feedback based on this source connection status
02. Add or remove different cards to the dashboard
When users click on a card to enter the details page of the connected channel, the system provides appropriate feedback based on the connection status of the source channel
Design Thinking: Place all required inputs in a drawer-style sidebar to reduce user steps
Why choose this design method?
02. On the details page — Provide real-time feedback based on this source connection status
💡 How Might We Achieve Design Goal III?
💡 How Might We Achieve Design Goal III?
KR 1. Identify user characteristics, establish the design concept
KR 1. Identify user characteristics, establish the design concept
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.
Product characteristics: Large data volume; Numerous configuration pages; High information density.
Product vision: Connectivity; Insights; Personalization.
KR 2. Standardize design language, establish the design style
KR 2. Standardize design language, establish the design style
The primary colors are dark blue (#07012F) and purple (#664EFD).
Dark Blue (#07012F) is the main UI color for components. It’s used for titles, default button color, and selected input fields.
Purple (#664EFD) is the brand color. Its usage is limited to elements like navigation, top bars, illustrations, and key elements on certain pages (e.g., large numbers on reporting pages) to avoid a visually overwhelming look, maintaining the calm tone suited to B2B products.
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.
To align with design trends and improve display on low-resolution screens, the new components and page elements feature larger rounded corners.
For single-line components like buttons, input fields, labels, and toasts, both ends use fully rounded corners.
For other elements, rounded corners follow a 4px increment, such as:
16px corners are widely used for page card elements
12px corners are used for elements nested within cards, like messages
Most spacing follows multiples of 8px, while the spacing between titles and descriptions is set to 4px.
KR 3. Define design guidelines, create the component library
KR 3. Define design guidelines, create the component library
