Product Catalog
Admin Management App
Summary

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.

Achievements

  • Autonomy: Gives multiple users, such as admins, the development team and catalog pricing team the ability to manage products from one source.
  • Transparent: All current and new products are listed in the catalog and editable by admins. This quick process helps promote products that are available for ordering.
  • Dynamic: Admins can rearrange products and categories however they want on the public page and also edit details for each.

The Opportunity

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.

Uncovering User Needs

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.

Design Goals

We summed up the pain points from admin users and developed the following design goals:

  • The new interface should include a wide range of actions, such as add, edit, publish and delete products, manage the public details page, and determine pricing.
  • The process should automate adding new products in the back-end services, so that other teams don't need to manually update information.
  • The product catalog should be fully visible, meaning that every item in the database is viewable on the admin interface.

Initial Exploration

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.

Implementation

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.

Catalog Home

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.

Products List

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.

Product Details

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.

Measuring Success

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.

Admin Announcements

Admin Announcements

Content Management App

Product Catalog

Product Catalog

Admin Management App

Habitat

Habitat

Zero-Waste Living

Dressy Mobile App

Dressy

Formalwear Rental Service

Dr. EMS

DR. EMS

Medical Triage System

Shrine

Shrine

Furniture Design