Responsibilities: Product | UX | UI BnK project

The Logistic Platform Project

background

About the platform

The Logistic Platform is a real-time quotation system that supports connecting the store and the delivery vendors. The system connects customers with third-party logistics or delivery companies (such as UberDirect or Lalamove), allowing them to easily create, suggest delivery options, and confirm delivery orders.

From our customers' requirements

Market research

Currently, the customer wants to build a real-time quotation system which supports connecting the store and the delivery vendors. There are some points of the system:

Allow Merchants or Stores input their order by Manual or Automation (via API).

Connect 3rd party of logistic or delivery companies, able to support to connect with Freelancer in future phases.

Suggest delivery of order options for Merchants or Stores

Confirm the delivery order to the delivery company.

Has the dashboard for the sales/operation team to manage the platform.

the value

So what should I give them?

A sense of security, control and a modern design.

architecture

Before I went on to UI design for
the screens, I created the web flow based on the business requirements.

Desktop design

A real-time quotation system which supports connecting the store and the delivery vendors

Logging in

The web's primary color, pacific blue, is blended with various blue tones to give it a modern, attractive visual appearance.

Store Management

After the user successfully login to the system, the default home screen will be Store Management.

Real-time Dashboard

Merchants can view every applicable statistic presented by default in real time on the dashboard panel. Additionally, they can browse the time period they desire by using the filter as well.

Order Tracking

Stores and drivers can effortlessly track the progress of orders on this screen during periods of high demand. Orders are arranged in reverse chronological order, and the status of each order is clearly apparent by using multiple colors.

Mobile design

The mobile-friendly website adjusts to give users a better viewing experience