Implemented a one stop shop for admins to manage my client's product catalog, where they can add new products, edit existing product info, and publish products on the app for available ordering.
As the sole UX designer, my role was to lead the experience and visual implementation of this new platform.
The client's current collaboration services platform allows its employees to order devices for their workplace environment. However, the admins that were in charge of managing product details did not actually have access to edit that information. This posed a huge problem, because it required asking multiple service teams to manually change product information.
Our team took this opportunity to develop a new interface for admins to manage all types of product details, which made it easy to edit without requesting the help from the other services.
I interviewed admins, the logistics team, shipping team, and pricing team to determine the current process for adding a new product to the catalog. What I discovered was that the admins had to reach out to each team separately to add product details, which wasted a significant amount of time.
We summed up the pain points from admin users and developed the following design goals:
On the current product catalog page, the devices are grouped under categories. I wanted to replicate this same type of view so it would be easy for admins to manage. The first challenge was to figure out how to display both devices and its categories with all its available actions. I explored options such as categories as accordions and a WYSIWYG editor similar to what admins are already using, while still ensuring simplicity and clarity for the busy admin.
However, When I tested this prototype with the engineers and users, I learned that these designs would not be scalable. The product catalog houses hundreds of items, all of which would be pulled into this app. The designs were not suitable for this reason, so I went back to the drawing board.
I decided that, in order to simplify the user actions, I had to break up the categories view and the products view. This one-way flow would be quick and easy to navigate. The workflow below shows how a user would get from the homepage to editing products page.
By breaking out the taxonomy into several pages, it became easier to handle specific actions. On this page, the admin can create a new category, edit, publish, or rearrange the display order on the end-user products page.
Selecting a category will take the user to its own page, listing all the product cards. This design allows for scalability, as there could be hundreds of products already in the database.
Users can publish a product from here, so it would be available for employees to order.
The admin can change product information, description, pricing, and any support costs billed to the department.
One of the biggest challenges was figuring out how to display different prices by location. The first iterations were based off of discounted percentages of the base price, but this became too complicated to calculate. The solution instead was to set a default price and then set country exceptions.
This complex system of handling the product catalog is still not perfect. However, the team was able to pull data from the logistics and pricing services into a user-friendly interface for admins to quickly manage products. In the future, the team is planning to merge the data and optimize this process.