Knowing where your cargo is, is the number one concern for people sending items internationally. For our latest project, Premiership Ltd, we built multiple bespoke solutions to make this as seamless as possible.
Premiership Ltd was formed in 1986, and now represents many of the UK RoRo interests of NYK Line. When building their new site we realised they needed a better system for their clients to be able to track their cargo, view schedules & request a quote to transport items.
Using VueJS , VeeValidate and bespoke Craft Modules we created a brand new bespoke solution to improve the UX Journey for them and their customers.
What was the problem?
Premiership Ltd’s customers need to be able to do 3 things with the website:
Tracking
Once a cargo item has been shipped, the customer is able to track where their item is on its journey.
On the old site, users were only able to track by Vessel. This wasn’t very user friendly. It used a 3rd party tracking system which required looking through multiple different voyages and trying to find your booking number within a sea of others. It showed a live map, which was nice, but not very useful for a user.
The tracker also didn’t work 100% of the time, which would be frustrating to users who wanted an update on where their cargo was!
This wasn’t just a hassle for users, as Premiership had to manually update the data every time they were sent the latest information from NYK. This took up unnecessary time for the business.
Shipping Schedules
On the old Premiership Ltd site users were able to download PDF schedule sheets for different routes to work out when (and where from) they could send their cargo. Thiswas also difficult to use. Customers would have to download these PDFs every time they needed to schedule a cargo item. The PDF was also difficult to read and, if you didn’t know the jargon, could be really confusing to try and decipher.
Premiership also had to manually update this with the data sent from NYK, as per the tracking data, creating another overhead for their staff.
Request a rate
There was no real way for users to request an accurate price to ship their cargo. While there was a generic contact page, the form did not provide the functionality users needed, or provide the data Premiership needed to accurately quote for the shipment. This meant Premiership needed to contact customers by phone and email to ask questions and get more information.
When we rebuilt the Premiership site, we saw ways to optimise the site to improve efficiency and user experience for both Premiership and their customers
Automation
The biggest update we wanted to push was automation.
NYK had all the data we needed, so we wanted to cut out the middle-man and make it so that all the data was automatically added to the website. This would both free up Premiership Ltd’s time and keep the tracking and schedule data up to date.
To do this, we created a backend integration with NYK which allowed them to upload the Tracking and Schedule data to the server as frequently as they needed to.
Once this was set up, we used Craft Queue Jobs to process the information and add this to two custom databases in the background, ensuring the site remains fast and responsive, even when processing lots of data.
This automation means Premiership no longer have to manually update the site with the data they receive from NYK.
Now we’d made Premiership’s life easier, we turned our attention to the users.
Transforming their tracking system
We wanted to move away from using vessel’s for the tracking system, and looking at the data we received from NYK we found we could use the Bill of Lading (BOL) number. A unique identifier that users are given once their cargo has been shipped, similar to an order or tracking number.
We created a form in which the user could enter the BOL number and see all the associated tracking data, such as their Booking Number, Departure Port, Transhipment Ports (stops on the journey) and Destination ports. All ports also include the expected or actual arrival date to help the user know exactly where their cargo is.
Updating the schedules
We needed to redesign and build the schedule lookup functionality from the ground up. Using the data NYK is already sending, we built a bespoke solution to display options for the user based on their preferred departure port, arrival port and shipping date.
Shipping Information
During the first step of the process the user can select when/where they want to ship their cargo.
The website instantly retrieves any matching schedules for the dates and location and shows them to the user. We also made sure to include any results within a month of the selected date as this gives the user a range of additional options if their preferred dates are not available.
Results
The results include the departure/arrival dates and the journey duration. The user can then choose which option they’d prefer.
Journey
After selecting their chosen result, the website displays an in-depth list of information for the journey, from voyage number, transshipment ports to duration.
Alongside this, we also added a Call to Action to convert this journey into a rate request. All the information is copied into the Request a rate form automatically, so they can easily get a quote from Premiership based on their chosen journey.
Creating a Request a Rate form
The new request form was created to streamline the process for users and Premiership.
The Form
They can add shipping information, contact information and cargo items. The form was built so the amount of cargo Items are completely flexible, so the number of items they can include has no limit.
We added an upload field to allow users to upload an image, schematic, or diagram of their item to help Premiership understand the scale and shape of the items being transported.
Validating the input and any uploads was a must have. By ensuring that all information is correct and that the file type and size is appropriate it minimises any follow up work for the team at Premiership.
Emails
After a user has submitted their rate, we created a customised email which is sent to Premiership outlining the rate request with the attachments uploaded. Making sure the information is clear, and formatted consistently helps Premiership process the information efficently.
Our final thoughts
We believe the updates to the new site have been instrumental in improving UX for both Premiership and their users.
We’ll be monitoring this over the coming months to ensure it has met with the expectations, providing ongoing support and adjustments to improve the system further.
If you want to transform your business, give us a call.
