Problem:
Like many retail companies, the Kroger product database system was divided among several programs, each working separately from the others. Our team was tasked with designing a system that would integrate all of these programs into a single system. My portion of that job was to create the Product Detail Pages for the system, where all of the individual product details could be viewed and eventually edited.
Discovery:
It was determined that the products would be sorted by category, making the main users the Category Managers, since they manage all of the items within certain categories. I would then interview the Category Managers to determine:
- What was their workflow
- Where did the data come from
- What data should be included on the main product detail page
- Should that data be read-only or editable
Decision:
A data flow chart and a user journey chart were created to map out what I had discovered. From the interviews, I had determined the best way to organize the information on screen was to separate everything by consumer vs case GTIN (how it was sold vs how it was shipped from the manufacturer) and by which of our warehouses the cases were held in.
Design:
First, I created a wireframe of the page. I included a navigation in the left rail with different categories of data for the items (product info, shipping info, warehouse info, etc) I then created a “main” category that held the most relevant information (product weight, product images, etc.) I also added accordion sections to hold basic information about the different warehouses and cases for the product. This gave a “master” page with the most relevant data available at-a-glance for the Category Managers, thus reducing the need to move around the page to different sections for the most important and widely used information.
Delivery:
The wireframe was reviewed with the Category Managers to great reception. According to their feedback, I had successfully created a page that would reduce the amount of time they spent on an item and make their job easier.
The wireframes were then delivered to the main project team for production.
