SKU List - Lauren Lin

Problem

Why do importers need to track a single inventory supply chain status?

To find out the reason they require a new feature, we conducted user interviews to deep dive the need for new visibility page and pain points of current pages.

A need of inventory management

Major international brand companies often have a need to track the shipping status of their inventory from the time an order is placed at the factory to the final retailing destination.

Tracking the supply chain allows companies to have real-time visibility into the inventory levels, locations, and movements of their products, and ensure that the right amount of inventory is available at the right time and place, avoiding stockouts or excess inventory, and minimizing holding costs.

Pain points

HB/L Based List is hard to track a specific inventory status at once

The current list view is based on the HB/L (= like an order) , meaning that it contains multiple inventory (SKU) within each HB/L.

If importers wish to obtain a comprehensive status update on a particular inventory, they must navigate to the corresponding HB/L to access the necessary information.

Original list page is based on each HB/L (=each order)

Design Goal

A feature (MVP) that allows users to track an inventory shipping status with minimal clicks and without the need to navigate through multiple pages.

Three questions to achieve this goal:

Which kind of inventory information should be displayed in each listing?
What kind of shipment status do importers want to track?
What do importers want to do next after checking the status of an inventory?

Business Goal

Grow more forwarder users

The target audience for this feature is one of the customers of the forwarders, namely importers. Therefore, if the forwarders believe that the feature can entice more importers to use their shipping services, they are more likely to subscribe to our product.

Although the feature was originally designed for our VIP customers, we intend to utilize it as a selling point to attract more forwarder users to our products after its launch.

Design Deliverables

Build new SKU based list view, so users can switch view by their preferences

🚀 Goal

A feature that allows users to track an inventory shipping status with minimal clicks and without the need to navigate through multiple pages.

We created a new list page that allow user to switch it by their needs.This newly designed SKU-based list is built based on inventory (products), which enables users to track the shipping status of each product in its entirety.

UI Desicion

Introducing SKU cards: Comprehensive inventory information displayed in a single card

🧠 Questions

Which kind of product information should be displayed in each listing?
What kind of shipment status do importers want to track?

By incorporating all relevant information into a compact design, we aimed to make it easier for users to browse different inventory(SKU).

We focused on ensuring that the SKU card was visually appealing and easy to navigate, using subheadings and shipping stage icons to guide users through the information displayed.

After conducting user interviews with forwarders, our team has identified the most critical information that importers need to check when tracking the shipping status of their inventory. These key pieces of information include:

Product information

This includes details about the inventory being shipped, such as the product name, SKU, and description. Having this information readily available allows importers to quickly confirm that the correct products are being shipped.

Product quantity

Knowing the quantity of products being shipped is essential for importers to plan and prepare for the arrival of their inventory. It also helps them to identify any discrepancies or issues that may arise during the shipping process.

Active shipping stage

To provide importers with a clearer understanding of the current status of their shipments, we have highlighted the active shipping stages where the inventory is currently located. These active shipping stages are those where the shipment is being processed. By focusing on the active shipping stages, we provide importers with a more accurate icon with text of the status of their shipments.

Shipping quantity in each active stage

Importers need to know the quantity of products that are currently in each shipping stage.

Location of shipping stages

Importers need to know the location of their inventory at each shipping stage. This helps them to track their inventory and ensures that they are aware of any potential issues or delays that may occur.

Design Desicion

Accordion design for viewing HB/L details page without leaving the list page

🧠 Questions

What do importers want to do next after checking the status of an inventory?

After importers check the status of their inventory, it is possible that they may want to access more detailed information about the shipment in a specific stage. For example, they may want to review the HB/L for a particular stage in the shipping process. This could provide them with more detailed information about the contents of the shipment, the carrier, and the expected delivery date.

To facilitate easy access to this information, we provided the HB/L list accordion design that allows them to quickly and easily navigate to the relevant information for each stage of the shipping process without switching back to the HB/L list page.

Importers can easily check the HB/L which contains the inventory with just clicking "Show all shipments" buttons. The section displayed the detail information of each HB/L, including real-time ETD, ETA information.

Check specific stage related HB/L detail

Importers can also click on the stage icon to view the HB/L list directly under the relevant stage. This provides importers with an even more streamlined way to access the information they need, allowing them to quickly review the HB/L for each stage of the shipping process without having to navigate to a separate page.

UI Desicion

Popover: Show inventory detail by hovering on the image

I placed a popover that displays inventory details like UPC/EAN, measurement, and height. I also made this information available in the list view for users to access without having to navigate to a separate detail page.

I have decided to use a popover to display the detailed inventory information because it is not the primary information that users are looking for when tracking the shipping status. Placing this information in a popover allows users to access it easily when they need it, without cluttering the main page with unnecessary details.

Easy to dismiss: Users would be able to close the popover easily without accidentally clicking on another element on the page.
The context: To let user scan and comprehend the content easily, I have utilized subheadings that provide contextual information, ensuring a consistent logical flow of information for an improved reading experience.

Project Outcome

We successfully launched 1 month later!

Although the deadline was really tight, we had to deliver the feature within a month and the complete design with spec needed to finish in 5 days, we still successfully launched the feature.

As a result, this new list view design was very positive, there are many positive potential business from sales feedback

The VIP forwarder is promoting this feature to attract more enterprise-level customers to use their shipping services. Some potential customers are interested in this feature, as they believe it could help them gain more enterprise-level importer customers.

Next Step

Measuring Success: Increase in user engagement

In order to gauge the importers' adoption of the new list design, we plan to track their weekly/monthly activity on the updated list page, which will help us determine whether or not the new design is effectively engaging our users.

Future improvement: More and more user interviews

As we have initially launched this feature in its minimum viable form, we will continue conducting user interviews with potential customers to gather their feedback and requirements. This information will be valuable in enhancing the feature in the future.

Customer tracking portal - SKU List

A major importer wanted to track each inventory's supply chain status in customer tracking portal

What is customer tracking portal ?

Why do importers need to track a single inventory supply chain status?

A need of inventory management

HB/L Based List is hard to track a specific inventory status at once

A feature (MVP) that allows users to track an inventory shipping status with minimal clicks and without the need to navigate through multiple pages.

Grow more forwarder users

Build new SKU based list view, so users can switch view by their preferences

🚀 Goal

Introducing SKU cards: Comprehensive inventory information displayed in a single card

🧠 Questions

Accordion design for viewing HB/L details page without leaving the list page

🧠 Questions

Check specific stage related HB/L detail

Popover: Show inventory detail by hovering on the image

We successfully launched 1 month later!

As a result, this new list view design was very positive, there are many positive potential business from sales feedback

Measuring Success: Increase in user engagement

Future improvement: More and more user interviews

Want to work together? Let’s collaborate!