Freight management platform

Freight Management Platform - Dashboard displaying shipment status - To illustrate the interface where users can monitor the status of their cargo in real-time
Project overview

Delivery Chain is a SaaS web app that simplifies freight logistics with the power of IoT technologies. It removes the guesswork and the stress of not knowing that your cargo is safe at every step of the way.

By staying with your cargo — not with your driver — IoT trackers can provide unrivaled pallet-level intelligence TM at every step of the shipment’s journey.

Tasks
  • Conduct research of existing fleet management services. Define user needs and pain points.
  • Visualize IoT freight management platform in high-fidelity wireframes based on the research and product owner's requirements.
  • Create UI based on the wireframes for features like Devices Tracking, Fleet Automation, Alerts, Dashboard, Documents, and many more.
  • Document every part of the platform with clear design & dev guidelines.
  • Keep the design up to date, adjust the design based on users' and developers' feedback.
  • Create design for Marketing website considering the platform branding.
Tools
Figma
Figma
Adobe Illustrator
Adobe Illustrator
Solutions
Outcome

As the result of several months of work, we’ve designed a SaaS web app that elevates freight management to another level with features like Device Management, TAGs, Alerts Systems, Live Dashboards, and Reporting. It helps to keep cargo safe and keep the fleet management efficient.

Solutions

Wireframes

To visualize the main app features and define the app layout, we started with designing wireframes and building the user flow. We have created a dozen of screens that helped to develop the core architecture and the UI.

Wireframes - Team creating wireframe designs - To illustrate the design process of the app's core architecture and UI.
Wireframes - Team creating wireframe designs - To illustrate the design process of the app's core architecture and UI.

Wireframes

To visualize the main app features and define the app layout, we started with designing wireframes and building the user flow. We have created a dozen of screens that helped to develop the core architecture and the UI.

Wireframes

To visualize the main app features and define the app layout, we started with designing wireframes and building the user flow. We have created a dozen of screens that helped to develop the core architecture and the UI.

Wireframes - Team creating wireframe designs - To illustrate the design process of the app's core architecture and UI.

Wireframes

To visualize the main app features and define the app layout, we started with designing wireframes and building the user flow. We have created a dozen of screens that helped to develop the core architecture and the UI.

Wireframes - Team creating wireframe designs - To illustrate the design process of the app's core architecture and UI.

Wireframes

To visualize the main app features and define the app layout, we started with designing wireframes and building the user flow. We have created a dozen of screens that helped to develop the core architecture and the UI.

Wireframes - Team creating wireframe designs - To illustrate the design process of the app's core architecture and UI.

Foundation Elements

To build such a scalable platform as Delivery Chain, we started from a design system using the atomic approach with a color system, typography, and basic components. The design system was growing up during the design process.

Foundation Elements - Typography styles and fonts - To illustrate the typography choices that are part of the design system
Foundation Elements - Typography styles and fonts - To illustrate the typography choices that are part of the design system

Foundation Elements

To build such a scalable platform as Delivery Chain, we started from a design system using the atomic approach with a color system, typography, and basic components. The design system was growing up during the design process.

Foundation Elements

To build such a scalable platform as Delivery Chain, we started from a design system using the atomic approach with a color system, typography, and basic components. The design system was growing up during the design process.

Foundation Elements - Typography styles and fonts - To illustrate the typography choices that are part of the design system

Foundation Elements

To build such a scalable platform as Delivery Chain, we started from a design system using the atomic approach with a color system, typography, and basic components. The design system was growing up during the design process.

Foundation Elements - Typography styles and fonts - To illustrate the typography choices that are part of the design system

Foundation Elements

To build such a scalable platform as Delivery Chain, we started from a design system using the atomic approach with a color system, typography, and basic components. The design system was growing up during the design process.

Foundation Elements - Typography styles and fonts - To illustrate the typography choices that are part of the design system

Devices Tracking

Users can control and track the fleet from one place. They can get precise location and other various metrics from the device in one click. And if needed there is an ability to see the details, history, manage automation, and more.

Devices Tracking - Map with precise location markers - To show the feature of obtaining precise location data of the devices
Devices Tracking - Map with precise location markers - To show the feature of obtaining precise location data of the devices

Devices Tracking

Users can control and track the fleet from one place. They can get precise location and other various metrics from the device in one click. And if needed there is an ability to see the details, history, manage automation, and more.

Devices Tracking

Users can control and track the fleet from one place. They can get precise location and other various metrics from the device in one click. And if needed there is an ability to see the details, history, manage automation, and more.

Devices Tracking - Map with precise location markers - To show the feature of obtaining precise location data of the devices
Devices Tracking - Detailed metrics and device information screen - To depict the various metrics available in one click

Devices Tracking

Users can control and track the fleet from one place. They can get precise location and other various metrics from the device in one click. And if needed there is an ability to see the details, history, manage automation, and more.

Devices Tracking - Map with precise location markers - To show the feature of obtaining precise location data of the devicesDevices Tracking - Detailed metrics and device information screen - To depict the various metrics available in one click

Devices Tracking

Users can control and track the fleet from one place. They can get precise location and other various metrics from the device in one click. And if needed there is an ability to see the details, history, manage automation, and more.

Devices Tracking - Map with precise location markers - To show the feature of obtaining precise location data of the devicesDevices Tracking - Detailed metrics and device information screen - To depict the various metrics available in one click

Fleet Automation

Trigger Automation Group is one of the core concepts for fleet management. It allows to program routes of the fleet with a set of triggers like temperature, location, battery level, etc. Set it once and use it on any amount of devices. It’s an easy way to track what you need regardless of the device.

Fleet Automation - Automation setup screen with triggers - To illustrate the interface for programming routes using various triggers
Fleet Automation - Automation setup screen with triggers - To illustrate the interface for programming routes using various triggers

Fleet Automation

Trigger Automation Group is one of the core concepts for fleet management. It allows to program routes of the fleet with a set of triggers like temperature, location, battery level, etc. Set it once and use it on any amount of devices. It’s an easy way to track what you need regardless of the device.

Fleet Automation

Trigger Automation Group is one of the core concepts for fleet management. It allows to program routes of the fleet with a set of triggers like temperature, location, battery level, etc. Set it once and use it on any amount of devices. It’s an easy way to track what you need regardless of the device.

Fleet Automation - Automation setup screen with triggers - To illustrate the interface for programming routes using various triggers
Fleet Automation - Route planning interface - To depict the process of setting and programming routes for the fleet

Fleet Automation

Trigger Automation Group is one of the core concepts for fleet management. It allows to program routes of the fleet with a set of triggers like temperature, location, battery level, etc. Set it once and use it on any amount of devices. It’s an easy way to track what you need regardless of the device.

Fleet Automation - Automation setup screen with triggers - To illustrate the interface for programming routes using various triggersFleet Automation - Route planning interface - To depict the process of setting and programming routes for the fleet

Fleet Automation

Trigger Automation Group is one of the core concepts for fleet management. It allows to program routes of the fleet with a set of triggers like temperature, location, battery level, etc. Set it once and use it on any amount of devices. It’s an easy way to track what you need regardless of the device.

Fleet Automation - Automation setup screen with triggers - To illustrate the interface for programming routes using various triggersFleet Automation - Route planning interface - To depict the process of setting and programming routes for the fleet

Ideation & Testing

You will never build a good product without a user in mind, right? That’s why on each major step of our work we’ve been testing ideas and wireframes with stakeholders. That allowed us to spot mistakes early and focus more on what users actually need.

Ideation & Testing - Team analyzing test results and planning next steps - To highlight the continuous improvement cycle focused on user needs
Ideation & Testing - Team analyzing test results and planning next steps - To highlight the continuous improvement cycle focused on user needs

Ideation & Testing

You will never build a good product without a user in mind, right? That’s why on each major step of our work we’ve been testing ideas and wireframes with stakeholders. That allowed us to spot mistakes early and focus more on what users actually need.

Ideation & Testing

You will never build a good product without a user in mind, right? That’s why on each major step of our work we’ve been testing ideas and wireframes with stakeholders. That allowed us to spot mistakes early and focus more on what users actually need.

Ideation & Testing - Team analyzing test results and planning next steps - To highlight the continuous improvement cycle focused on user needs

Ideation & Testing

You will never build a good product without a user in mind, right? That’s why on each major step of our work we’ve been testing ideas and wireframes with stakeholders. That allowed us to spot mistakes early and focus more on what users actually need.

Ideation & Testing - Team analyzing test results and planning next steps - To highlight the continuous improvement cycle focused on user needs

Ideation & Testing

You will never build a good product without a user in mind, right? That’s why on each major step of our work we’ve been testing ideas and wireframes with stakeholders. That allowed us to spot mistakes early and focus more on what users actually need.

Ideation & Testing - Team analyzing test results and planning next steps - To highlight the continuous improvement cycle focused on user needs

Alerts

Be always aware of the state of your freight— that's what will make IoT systems so useful and valuable. To achieve that we designed a whole alerts system with different levels of alarm, sources like temperature, location, acceleration, and abilities to track the status of it in real-time.

Alerts - Real-time alerts dashboard - To illustrate the interface where users can monitor the state of their freight in real-time
Alerts - Real-time alerts dashboard - To illustrate the interface where users can monitor the state of their freight in real-time

Alerts

Be always aware of the state of your freight— that's what will make IoT systems so useful and valuable. To achieve that we designed a whole alerts system with different levels of alarm, sources like temperature, location, acceleration, and abilities to track the status of it in real-time.

Alerts

Be always aware of the state of your freight— that's what will make IoT systems so useful and valuable. To achieve that we designed a whole alerts system with different levels of alarm, sources like temperature, location, acceleration, and abilities to track the status of it in real-time.

Alerts - Real-time alerts dashboard - To illustrate the interface where users can monitor the state of their freight in real-time
Alerts - Status tracking interface with alert history - To highlight the ability to track and review the status and history of alerts

Alerts

Be always aware of the state of your freight— that's what will make IoT systems so useful and valuable. To achieve that we designed a whole alerts system with different levels of alarm, sources like temperature, location, acceleration, and abilities to track the status of it in real-time.

Alerts - Real-time alerts dashboard - To illustrate the interface where users can monitor the state of their freight in real-timeAlerts - Status tracking interface with alert history - To highlight the ability to track and review the status and history of alerts

Alerts

Be always aware of the state of your freight— that's what will make IoT systems so useful and valuable. To achieve that we designed a whole alerts system with different levels of alarm, sources like temperature, location, acceleration, and abilities to track the status of it in real-time.

Alerts - Real-time alerts dashboard - To illustrate the interface where users can monitor the state of their freight in real-timeAlerts - Status tracking interface with alert history - To highlight the ability to track and review the status and history of alerts

Dashboard & Reporting

We worked closely with stakeholders to define business needs. After that, with the power of data provided by IoT, we packed it into useful insights that should help to run the business more effectively. As result, we've come with two big features: a customizable Dashboard and Reporting Tool.

Dashboard & Reporting - Customizable dashboard overview - To illustrate the interface where users can personalize their dashboard based on business needs
Dashboard & Reporting - Customizable dashboard overview - To illustrate the interface where users can personalize their dashboard based on business needs

Dashboard & Reporting

We worked closely with stakeholders to define business needs. After that, with the power of data provided by IoT, we packed it into useful insights that should help to run the business more effectively. As result, we've come with two big features: a customizable Dashboard and Reporting Tool.

Dashboard & Reporting

We worked closely with stakeholders to define business needs. After that, with the power of data provided by IoT, we packed it into useful insights that should help to run the business more effectively. As result, we've come with two big features: a customizable Dashboard and Reporting Tool.

Dashboard & Reporting - Customizable dashboard overview - To illustrate the interface where users can personalize their dashboard based on business needs
Dashboard & Reporting - Detailed reporting tool interface - To represent the comprehensive reporting features available to users

Dashboard & Reporting

We worked closely with stakeholders to define business needs. After that, with the power of data provided by IoT, we packed it into useful insights that should help to run the business more effectively. As result, we've come with two big features: a customizable Dashboard and Reporting Tool.

Dashboard & Reporting - Customizable dashboard overview - To illustrate the interface where users can personalize their dashboard based on business needsDashboard & Reporting - Detailed reporting tool interface - To represent the comprehensive reporting features available to usersDashboard & Reporting - Detailed reporting tool interface - To represent the comprehensive reporting features available to users

Dashboard & Reporting

We worked closely with stakeholders to define business needs. After that, with the power of data provided by IoT, we packed it into useful insights that should help to run the business more effectively. As result, we've come with two big features: a customizable Dashboard and Reporting Tool.

Dashboard & Reporting - Customizable dashboard overview - To illustrate the interface where users can personalize their dashboard based on business needsDashboard & Reporting - Detailed reporting tool interface - To represent the comprehensive reporting features available to usersDashboard & Reporting - Detailed reporting tool interface - To represent the comprehensive reporting features available to users

Marketing Website

We designed a new marketing website that was restructured to better represents new features and fits the new platform branding.

Marketing Website - Overview of new website layout - To showcase the redesigned website reflecting the new platform branding.
Marketing Website - Overview of new website layout - To showcase the redesigned website reflecting the new platform branding.

Marketing Website

We designed a new marketing website that was restructured to better represents new features and fits the new platform branding.

Marketing Website

We designed a new marketing website that was restructured to better represents new features and fits the new platform branding.

Marketing Website - Overview of new website layout - To showcase the redesigned website reflecting the new platform branding.

Marketing Website

We designed a new marketing website that was restructured to better represents new features and fits the new platform branding.

Marketing Website - Overview of new website layout - To showcase the redesigned website reflecting the new platform branding.

Marketing Website

We designed a new marketing website that was restructured to better represents new features and fits the new platform branding.

Marketing Website - Overview of new website layout - To showcase the redesigned website reflecting the new platform branding.
No items found.

Outcome

As the result of several months of work, we’ve designed a SaaS web app that elevates freight management to another level with features like Device Management, TAGs, Alerts Systems, Live Dashboards, and Reporting. It helps to keep cargo safe and keep the fleet management efficient.

Linkedin

Linkedin

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline