The design points we focused more for the Amazon seller is:
Make the flow as easier as possible
Although it is a B2B system, the Amazon seller may not have professional expertise in the logistics area. To address this, we designed the order flow as 2C user, with a simplified process that reduces administrative overhead. This allows the seller to primarily focus on their core E-commerce tasks, while easily tracking shipments without unnecessary complexities.
Design Deliverables
Create E-commerce online booking page, make the booking process simpler in 3 steps
There are a lot of fields need to type in to book a shipping order, this may lead sellers to prefer privately messaging OP for help instead of booking online themselves.We have organized the fields into three main categories: Basic Information, Delivery & Receipt Information, and File Uploading Section, to simplify the order process.
Besides, we have visually represented these categories as three easy-to-follow steps, ensuring users are aware that the form can be completed in just three simple steps.
By grouping fields and visualized progress bars, the information hierarchy is made clear, resulting in improved efficiency in filling out forms.
Design Decision
Why did we consider a wizard step?
We have chosen to implement a wizard as a solution to simplify the process due to the following reasons:
1. Users want to accomplish a goal that has many steps.
2. The form is long or complicated and it cannot be simplified.
3. Users are lack the necessary domain knowledge.
Using wizard it’s possible to reduce the seeming complexity of a task and provide a sense of progress at the same time. When users are forced to follow the order of tasks, users are less likely to miss important things and will hence make fewer errors.
Design Decision
Estimated quotes card always fixed on right, let users understand the cost they have to pay for shipment
We designed a card with a clear hierarchy and adequate spacing to differentiate content based on priority. There are some design details:
1. The card displays essential information to ensure users understand that they can influence the final price.
2. The information and price on the card will be dynamically updated, allowing for immediate changes to reflect the chosen preferences.
3. The card is always fixed on right, so users don’t have to scroll on top to check the information.
Design Decision
Auto-complete: reduce data entry time by automatically filling repetitive or regular information fields, improving efficiency.
We added a feature that automatically saves previously entered data for fixed information fields such as tax ID, phone number, and address of trade partner (= shipper, consignee, and notify party)
The propose of the feature is to:
1. Reduce repetitive data entry and saving time for users
2. Reduce individuals or organizations have multiple contacts for the same person or entity with slightly different details which may take efforts for OP to maintain the data.
After users submit a booking, they can track the status and view booking information on the EC-Booking list/entry page. Simultaneously, the OP receives the booking order and verifies the booking information. Based on the verification, the OP can approve or reject the booking.
Design Decision
Effective scanning: let users easy to find out the information
On the entry page of EC-Booking, we have prioritized and categorized information into several cards to ensure users can quickly grasp the information. We have followed the visual guidelines below to facilitate effective scanning:
1. Create Subheadings: We have used clear and descriptive subheadings to promote effective scanning. Subheadings help users quickly identify the content they are interested in and can save them time and effort in searching for relevant information.
2. Use Z-Pattern Layout: We have designed the layout of the page in a Z-pattern, which is a common reading pattern that users follow from left to right and top to bottom. This allows users to see the most important information right from the start, and the next most important information second, following the natural flow of reading.
Design Decision
Track the shipment status easily
Design process
The shipment status card allows users to track the current cargo status. While the original design used a timeline layout to emphasize the time sequence, feedback from the team expert highlighted that events may not always occur in a strict chronological order, such as Customs Declaration happening before or after Vessel arrival.
As a result, the final design now uses green and yellow lights to indicate whether an event has occurred or not, without over-emphasizing the chronology.
.jpg)
.jpg)
.jpg)
