Product Design
Sep 2021 - Dec 2021
Managing product pricing in e-commerce is labor-intensive due to the extensive data and variables such as time periods, discount rates, and customer segments. To help back-office users with sales data management, I worked with two junior designers, a solution expert, and a software engineer by identifying key challenges in the current system and crafting a new user experience to tackle these issues. I led the design process from user research to the final design delivery.
Role
Design Lead, User Research, Prototype, UI Design
Team
Solution Expert, 2 UX designers, Software Engineer
Tools
Figma
Problems
Prior to initiating the project, our team lacked insight into the workings of the e-commerce sector. However, through in-depth interviews with a process advocate and a representative of the end users from the customer side, we gained a comprehensive understanding of the back office data management process, along with its primary challenges and opportunities.
Current workflow and pain points in the as-is system
Not reflect business process
The presence of three different entry points for editing data led to confusion among users regarding where to locate the correct information
Lack of functions needed
Manipulating a single data entry was so time-consuming that users often resorted to workarounds using Excel
Less confidence for scaling
As the business expands and the number of prices increases, the UI of the current system lacks the necessary scalability
Design Statement
How might we streamline data management tasks, ensuring both speed and accuracy, without requiring users to learn a new system?
After identifying the key problems, I set three design objectives for a new user experience and system. Our approach went beyond just designing UI screens; we also restructured the systems for integration, considering that end users previously had multiple entry points to access the system.
One single entry point
Provide a single entry point for data access ensures a consistent user experience
Quick search
Minimize the time spent searching for items and reduce the reliance on Excel for data management
Quick search
Create a design that supports continuous use without requiring a system overhaul, even as data volumes expand in the coming years
Ideation and Design Iterations
We went through several iterations of ideation and prototyping to achieve three main improvements: simplifying item searches, enabling quick editing of item properties, and ensuring scalability. Due to the complex nature of the data structure, I organized regular Q&A and feedback sessions with the end-users and the solution expert.
Screenshot of rapid prototyping in inVision Freehand
“Easy to find products”
To streamline the process of locating items for editing, we conceptualized two designs for the filter area: expanded and collapsed. The complexity of the previous system deterred users from utilizing its filter feature to find items. Instead, they resorted to memorizing or noting down item ID numbers, and then locating items by typing in a few characters. In response, I redesigned the filters to facilitate more efficient item searches, thereby eliminating the need for excessive scrolling.
Idea one. Expanded filters which are easy to access in a way.
Idea two. Set of filters in one line and maintain the set of the combination of filtering.
“Edit item properties quickly”
Given that each product's price includes multiple special and discount prices based on the season and customers, users struggled to find and edit a particular price property. This often resulted in missing or inaccurately editing data. Initially, during the design stage, we crafted a list that included both special and discount prices. However, as we delved deeper and discovered that the configuration of the price policy was more complex than expected, we adapted our design to finally putting both separately into sections.
Idea one. Data on a column
Idea two. Data on a row
Idea three. Data in a section, which was selected for the solution
“Make it scalable”
Considering the vast catalog of over a million products, each with potentially hundreds to thousands of different price types, our goal was to enable users to concentrate solely on the items they are managing. The ultimate solution was to implement a functionality that allows collapsing or expanding a lengthy list of a single product. This feature prevents the users from having to endlessly scroll through the page to locate another product for editing.
The Final Design
Easier way to search
Up to 2X faster to search items than before with fewer clicks. This initial step is crucial for determining work efficiency, especially since users usually handle a large number of products, e.g., over several hundred thousand products. Therefore, all different types of filters were categorized and arranged through many iterations.
Multi-selection at once
In the previous version, users couldn't select multiple items at once, leading to repetitive selection and adjustment actions. Now, users can choose and update several items at once with fewer clicks.
Create, edit, and update at once
The popular buttons and checkboxes that users use frequently were placed close to editable fields to minimize the time spent on mouse exploration.
A long scrollable screen for a linear flow
Users' task of updating product information requires a wide screen estate. The UI is designed as a long-scrolling screen instead of several screens, providing more information at once and saving time by minimizing the need to click to jump to different pages. Additionally, other items can be collapsed while users concentrate on editing one item.