Etracin
Overview
Etracin is a SaaS product designed to help merchants manage their e-commerce business with greater efficiency and clarity. It is especially designed for multi-platform e-commerce merchants, enabling them to manage and operate multiple stores within one unified system, while providing data-driven insights to support better business decisions.
Business Impact
Since launch, Etracin has supported over 500 e-commerce stores across major platforms (e.g., Shopify, Woocommerce, Shopline、、、), helping merchants reduce daily operational time by 30% and increasing multi-store order efficiency by 40%.
User satisfaction in usability surveys reached 92% positive rating within the first 3 months.
Role
Leader UI/UX designer&Branding
Time
Apr 2021-Jan 2023
Location
shen Zhen
Filter redesign experience
Description
Filtering is a crucial feature in the Etracin product that enables merchants to locate and manage information quickly. However, when designing the v1.0 filtering function, the primary focus was on consistency, and the diverse requirements of users in various usage scenarios were not entirely considered. For instance, users of different function points have different priorities and needs.
We have received feedback from multiple users, highlighting the need for an optimized filtering function. This requirement has been given high priority, and our design team is working on a plan to improve the filtering function as soon as possible.
Role
Leader UI/UX designer&Branding
Time
Apr 2021-Jan 2023
Location
shen Zhen
1.0 Problem statement
Based on information provided by the customer service department, it appears that merchants' feedback has been largely focused on issues related to the filtering function, including inflexibility and a lack of comprehensiveness, slow page loading speeds, incorrect filter results, and complex filtering operations.
2.0 Research
2.1 Survey
Based on feedback from the customer service department, we designed a questionnaire that targets four essential aspects: page loading speed, data accuracy, comprehensiveness, and ease of use.
It's evident that the operator is content with the ease of use, comprehensiveness, and data accuracy of the system but dissatisfied with the page loading speed. Conversely, the buyer is pleased with the page loading speed and comprehensiveness, but not with the data accuracy. Similarly, the boss is satisfied with the page loading speed but not with the data accuracy.
Furthermore, the user feedback aligns closely with the questionnaire results, indicating a consistent user experience across different user roles. However, the page loading speed of Etracin requires further improvement in terms of speed, accuracy, comprehensiveness, and ease of use.
2.2 Personas
It can also be clearly seen from personas that each role has a unique focus, and in different scenarios, the actual needs and habits of users are different. For example, operators usually use the order management module, buyers basically only use the procurement management function(inventory), and administrators focus on data analysis such as the profit module (analysis);
Therefore, to improve our system, we are taking two approaches: overall optimization and modular optimization.
The study showed that users in different roles have varying requirements for the filtering function. Sales prioritize accuracy, comprehensiveness, and ease of use, while buyers value speed and comprehensiveness but find accuracy and ease of use lacking. The boss values speed but is not satisfied with accuracy, comprehensiveness, and ease of use. User feedback confirms these findings. The filtering function of Etracin needs improvement in terms of speed, accuracy, comprehensiveness, and ease of use.
2.3 Information Architecture
Improve information architecture of filter function by organizing and classifying filter conditions and determining their relationship and hierarchy. Design an intuitive interface and unify the interaction methods for filter components (e.g., store name, product category, team, batch search, and filter).
3.0 Crazy 8s & Insight
We need to consider user permissions, log details, and field permission templates to optimize the filter function. Here's how we plan to optimize the interface and interaction design: Improve the filtering function with smarter search capabilities; Supporting keyboard shortcuts for filtering function operations; Optimize page loading speed to improve filtering efficiency; Display filter conditions in groups to make it easier for users to understand and select; Ensure consistent interaction;Display commonly used filter conditions as a shortcut entry on top of the filter panel for quick selection and viewing
Create a special design for the module that the merchant prioritizes the most.
Analysis:
Redesigning the time filter is necessary since time has a significant impact on profit and cost analysis.
Order Management:
Optimizing the page sliding interaction will make the filter group easier for users to use.
Inventory:
Providing filter history and save functions will allow users to reuse filter conditions and improve their work efficiency..
4.0 UX Design
Analytics
Redesigning the time filter is necessary since time has a significant impact on profit and cost analysis.
Orders
Optimizing the page sliding interaction will make the filter group easier for users to use.
The complexity of products and services often requires customized filter components that can cause confusion for users during data entry. The inconsistent layout of filter items can also affect the user experience and speed of information retrieval.
Inventory
Providing filter history and save functions will allow users to reuse filter conditions and improve their work efficiency.
5.0 Data Optimization
Improve database calculation method. (Back-end team is responsible for the details.)
5.1 Page Load Speed
To improve the user experience, we plan to implement the following optimizations: Create a time range prompt for different module time filters. For example, "Profit Module." Optimize page loading speed to improve user experience. Through research, we found that the loading speed is slow due to huge data loading. To address this, we'll partition loading to control filtered content within 150ms under normal network conditions. Front-end will handle the details of this optimization.Display notifications in the lower right corner if the user has been away from the page for more than 4 hours.
optimizing the database calculation method is the responsibility of the back-end team and will not be discussed in detail here.
6.0 Visual Design
Typography: Use consistent fonts across different systems, browsers, and devices. Optimize the font-family code in style.css based on the user equipment, mainly Windows.
Space: Consistent spacing creates visual balance and improves the UI experience. Use consistent spacing in increments of 4 pixels to improve the visual rhythm of the system.
Mirror all data points: Change the filter to a flex layout for optimal display on different screens.
Detailed rules for visual optimization: etracin design system plus
Conclusion
To conclude, our design team has identified several areas for improvement in the user interface of our system. We have recommended changes to the time filter, order management, inventory, and database calculation methods to improve the overall user experience.
Additionally, we have implemented changes to the front-end layout, typography, and spacing to maintain consistency and improve visual balance. We have also adjusted the filter layout to be more flexible and optimized for different screens.
Given the scope of the project, we recommend a phased approach to implementation, starting with modules that require the most urgent attention. We will continue to monitor and optimize the system's accessibility, using data from GA to track progress.
Overall, our goal is to improve the usability and efficiency of the system for our users, and we believe these design changes will help us achieve that goal.
