Advanced Shipping Notice (Supplier)

Create Flow



ASN list page

SCC Team Project






Tool Used

Figma

Period

09/04/2024 - 05/31/2025

Target Audience

ASN Supplier

Participation

Lead: Kate Yu
Members: 5 UXD & 1 UXR & 1 UXC

Process



icon research

Study

Define Product
Study Current UI & UX

icon analysis

Analysis

User Feedback
Persona

icon analysis

Pre-Design

Goal
Strategy
TimeLine

icon analysis

Output

Design Iterations
User Testing
Documentation

Study

Define Product

What is the ASN?

A supplier typically sends an Advance Shipping Notice (ASN) to a buyer to inform them that a shipment is on its way:

Current UI

Supplier

Analysis

User Feedback

2022 - 2024

  • Over-information: Excessive input fields, including unnecessary ones, clutter the main creation page.

  • Lack of clear structure: All inputs, including key required ones, are crowded on the main page without clear organization.

  • Performance issues: Performance and loading delays negatively impact the user experience.

  • Lack of error handling: Error messages are handled inefficiently or without a pointing. Lack of the error locates and clarifies the method for solving the error.

  • Upload file problems: Inconsistent formatting and document types cause issues during file uploads.

  • Not user-friendly: Excessive back-and-forth navigation makes the process cumbersome.

Persona


I need a faster way to create ASNs. The current process has too many inputs, which wastes time. And I want to be able to edit ASN details easily if something changes.

Daily Tasks:

  • Tracks stock levels to prepare for upcoming shipments and manage inventory effectively.

  • Prepares and submits ASNs for every outbound shipment.

  • Handles delays, damaged goods, or other shipment-related issues that could impact delivery.

  • Ensures all shipping documents are complete and comply with regulations.

Pre - Design

Goal

To Create a flow to ensure it’s user friendly, structured clearly, simplifies steps, and avoids confusion.

Strategy

  • Simplify inputs based on buyer business rules, making others optional. ✅

  • Group inputs into collapsible sections with progressive disclosure. ✅

  • Improve speed with lazy loading, background processing, and in-place dialogs to reduce page jumps. ✅

  • Use inline validation with clear messages and guide users by predefined system rules. ✅

  • No changes, as another team is working on a cross-team solution. ❌

  • Enhance navigation with step-by-step guidance and carefully incorporate user feedback for a user-centered design. ✅

Timeline

Project Kick-off
08/07/2024
Case Studies for 8 Features
08/12/2024
Concept - 1st Draft Delievery
09/20/2024
Concept - Iteration 2nd Draft
10/04/2024
Control Point UX Team
10/09/2024
Control Point PM & UX
10/21/2024
Mockup - 1st Hi-fi Delivery
11/13/2024
Mockup - 2nd Hi-fi Delivery
11/30/2025
Dev team Evaluation
11/30/2024
Build Prototype
12/02/2024
UX Testing
12/07/2024 - 02/05/2025
Document Testing Result
02/19/2025
Grooming with Dev
02/25/2025
Supporting Dev Regularly
2/26/2025
Launch
5/31/2025

Simplify inputs

Following the buyer business rules

Add Order Line

Separate common filter and advanced filter for a user-friendly concept.

Draft Vs Saved Veresion

Ensure teamwork-friendly collaboration and prevent multiple people from working on the same file simultaneously.

Output

Design Iternation (Change Log)

User Testing

Documentation

Presentation to UX Lead Team about the project

ASN Wiki

Summary

As a senior designer leading the team, I led the development of the ASN supplier flow from 0 to 1 over seven months, ensuring an efficient, user-centered experience. By collaborating closely with cross-functional teams, we optimized performance, addressed user feedback, and designed scalable workflows. We focused on simplifying processes, improving error handling, and enhancing efficiency. Moving forward, incorporating AI-driven features like personalized recommendations and automation will elevate the experience and further streamline supplier interactions.

Key Learnings and Future Improvements

  • Cross-functional collaboration and a user-centered approach are essential for building scalable, effective solutions.

  • Continuous iteration and user feedback help refine designs, improving usability and performance.

  • Prioritizing error handling and providing clear guidance enhances the user experience.

  • Real-time collaboration tools foster teamwork and reduce friction in design workflows.