New User Interface

Switching to the new view

DL Freight™ has a new and improved look, featuring ease of access, an enhanced UI, instant action buttons, optimized views & much more!

Refer the video below to explore the new view:

Switching to the New View

Objectives

The enhancements focus on the platform experience for DL Freight™, a proprietary supply chain management system developed by DLT Labs™ that deals with freight logistics.

The DL Freight™ platform manages retail freight and logistics invoicing, leveraging blockchain technology and smart contracts, to provide a collaborative environment of trust between Walmart Canada and its logistics and supply chain partners in the accurate and efficient invoicing of Loads.

New Views & Enhanced Display

While logging in, view the password using the Eye icon in the "password" data field.

Eye icon for the "password" data field

Click on the Dropdown Arrow on the top right corner and use the Toggle button to switch to the New View.

New View Toggle button

Similarly, use the Toggle button to switch back to the Classic View.

Switch to the Dark Mode

Use the Dark Mode feature that enables energy-efficient usage and provides enhanced viewing ergonomics by reducing eye strain.
To use the platform in the dark mode, click on the Dropdown Arrow in the top right corner.
An option called Dark Mode is seen in the dropdown menu. Select this option to view all platform elements in a darker theme.

Switch to the Default Mode

Select the Default Mode option from the Dropdown Listto switch back to the default view.

The platform has slight font changes to make every section easily noticeable & actionable. Specific segments automatically adjust as per the screen size. The font is also auto-adjustable.

The platform now has an overall new color scheme to direct the user's attention to certain action buttons.

Profile Menu Changes

After this, a refined profile page with an easy option to change the account password is visible.

Click on the Change Password button in the top right section of the profile page.

Change Password button

A Change Password pop-up appears where the user has to enter the Old Password, New Password, and Confirm New Password in the respective data fields and click on the Confirm button. Click on the Cancel button to exit.

Change Password data fields

On-screen Help

On the Business Workflows page, view the i symbol at the right bottom corner.
After clicking on that symbol, the platform will display the on-screen tips to provide information. These tips explain each button's operation or function if the cursor hovers over any platform section.

On-screen tips

Quicker Functionalities

Pop-up windows now appear as Immersive Sidebars to improve visibility & ease of access.

Immersive Sidebars

The business workflows now have a step-by-step approach to adding input data. There is a proper structure for all information for agile management.

The Business Workflows page has an arrow that opens an interactive navigation panel on the left-hand side. It has an infinite scroll that helps manage large volumes of data.

Arrow for infinite scroll

Use the Search bar in the navigation panel for a specific Load_id.

Interactive navigation panel "Search" bar

Load details have a Breadcrumb view that enables users to navigate different loads quickly.

Breadcrumbs view

Click on the Create Another checkbox to create multiple instances.
This selection will automatically save the existing one, and the user can add details for a new instance.

Create Another and Retain Data checkbox

The ** Retain Data ** checkbox is active only after selecting the Create Another checkbox. Upon selecting this option, the data fields for the new instance are populated with the same information.
Create multiple instances with ease using these features.

View the fixed columns for easy access to action buttons upon opening a load.

Fixed columns

Click on the Select All checkbox for bulk operations.

Select All checkbox

A user can instantly customize the display columns on the Business Workflows page.
After selecting a specific business workflow instance or a set of loads, click on the Columns button at the top right corner.
A Manage Columns Sidebar will appear from the right side of the screen. Select the required columns to display in the instance and further click on the Save button.

Manage Columns Sidebar

There are pre-built filters in the business workflow to segregate the loads.

View the Pending for Acceptance and Review Accessorial filters at the top of the instance listing page.

Pre-built filters

Action buttons are at the top and always highlighted to speed up the work.

Action buttons

The load details page is more organized for ease of access.

View details page

On the load details page, click on the Copy button to copy the entire data table or copy individual elements.

Copy button

Click on the Read More button to view data fields with multiple rows, such as address fields.

Read more button

Detailed Information View

Click on the Expand and Contract icon to achieve an emphasized view. The expand button maximizes the viewing area of the section. The contract button brings the section back to the previous size.

Expand and Contract icon

The Chain icon denotes a dynamic attribute. A dynamic attribute is a data value generated via smart calculations based on business logic. Dynamic attributes are linked to expressions. Like textboxes accommodate text, dynamic attributes accommodate expressions. Since the participant cannot view an expression, dynamic attributes map expressions and other attributes that contain calculations. Participants can view and use such attributes.

Chain icon

Upon selecting a load, various action buttons are seen at the top.
To make an accessorial claim or manually change an accessorial charge, click on the Update action button at the top.

Update button

A Sidebar will appear on the right.
Make the necessary changes to the data fields and click on the Save button.

Update Sidebar

Improved Timeline

In the action buttons at the top, view the timeline of a particular load by selecting the Show Timeline button.

Show Timeline

The timeline is enhanced to display multiple decision points without any interference. The design is also revised for better viewing.

New Timeline Design (Downloaded Image)

Three options are seen under the timeline
Download timeline: Choose this option to download the timeline in .PNG format
Expand timeline: Click on this option to see the timeline in an expanded mode in full view.
Minimize Timeline: To see the path followed with limited visibility, choose this option to see the timeline in a single line.

Download, Expand and Minimize Timeline

This will instantly display the status of that load.

Moreover, a participant can compare two or more load parameters from the timeline by selecting the required boxes and clicking on the Compare button at the top to see a detailed comparison.

Compare button

Activities & Comments

The Data Tables, Comments, and Details tab are segregated for ease.

Data Tables, Comments, and Details tab

The Activities & Comments tab provides a timeline of changes in the business workflow, including changes in the invoices listed under the Activities tab.

Activities and Comments tab

The interactive window also helps to filter the activities & comments of a particular load.
A user can filter the activities and comments of a particular load in the interactive window.

Download and review the invoice using the Download button on the view details page or the Business Workflows page.

Download button

Click on the eye icon beside the file name to view any files uploaded on an instance.

View uploaded files

Upon clicking the eye icon, a separate file tab appears beside the Activities & Comments tab. The file tab reads the uploaded file type, e.g., pdf or doc. This helps to preview the file's contents.

File tab and preview

Click on the Pop-out icon to see an expanded view of the file in a new browser tab.

A user can utilize the navigation tools to view documents with multiple pages as well as use the zoom-in and zoom-out features.
Additionally, click on the Download button on the top right corner to save the file on the local device.