Mobile Shipment Tracking
Creating a mobile tracking website to serve customers across 17 countries.
My Role Product Designer
Company SmartBee Intelligence
Time June - Sep 2021
Team 2 PMs and 3 Engineers
Client Dimerco
SmartBee Intelligence is a software company that builds cloud-based solutions to digitalize global freight forwarding, an industry that arranges international shipping for business customers. The mobile shipment tracking website helps freight forwarders to serve their customers by providing mobile shipment tracking service.
Background
Traditionally, forwarders’ customers work with forwarders through E-mail or message apps. They can only rely on freight forwarders to manage and track shipments. To help forwarders provide a better service to their customers, we affiliated with a leading freight forwarder, Dimerco, to build a shipment platform for shipping customers. After building the desktop version, we moved forward with a mobile version.
Client Profile
Dimerco Express Group is a global shipping and logistics company whose services form the backbone of global commerce. Its logistics network includes 160+ Dimerco offices in 17 countries across Asia-Pacific, North America, and Europe. It is ranked No. 39 in Top Ocean Freight Forwarders by Transport Topics.
How might we design a mobile experience that fits freight forwarders’ customers’ needs?
In the desktop version, there are various functions: request quotes, book a shipment, and track shipments. But logistics and international shipping contain many complex works. How can we know what exactly users need on mobile devices? What tasks do they prefer to do on desktops?
User Interview
To figure out the user needs on mobile, I initiated an interview with freight forwarders and their customers. There are some interesting insights I found —
Key Insights & Quotes
Avoid complex activities such as filling out a form on mobile
”I will not fill out booking or quote request forms on mobile. There are too many fields!”Documents are cluttered and unsearchable
”I think the most painful thing is looking for a document. The documents are spread all over the email or message thread. And with mobile, it’s even harder to search for a shipping document.”Tracking may be an opportunity
”I do track shipments on mobile occasionally. When my colleagues or partners are asking about shipments and I don’t have a computer on hand, I use my phone and go to the carrier’s website to look for the information. But not every carrier has a mobile site for tracking”
Sample User Persona
Define What to Build
With a better understanding of user needs on mobile, we move forward to decide what features to build. I used an impact and effort scale to assist us in making decisions.
Our Goals
After evaluating our scoring result on impact-effort scale, we set goals to —
Help Dimerco’s customers easily find and browse shipment information on their phones.
Create an intuitive mobile tracking experience for Dimerco’s customers.
Make it effortless for Dimerco’s customers to find documents on mobile (For example, invoices, bills of lading, and packing lists).
Site Map
Home
At first, we weren’t sure about what users expected to see on their home page. We had some internal discussions on what information may be helpful on the home screen, and then I made a wireframe to collect external feedback. After a walkthrough with Dimerco and their customers. I made some iterations.
Shipment Detail
1 - Overview Page
Desktop Version
In the desktop version, shipment information is all over there without prioritization. However, in mobile, our goal was to create a better scanning experience to help users find the information quickly.
Mobile Version
To understand the priority of each piece of information, I host a discussion with internal and external stakeholders (Dimerco and shipping customers). After collecting their feedback, I highlighted the primary information (Dimerco’s notes to customers) at the top section, hiding secondary information such as the shipper’s info in pop-up windows.
2 - Track & Trace Page
Explore Different Layouts
From the competitor study, I found that most of them highlight origin, destination, and departure/arrival date in the top section and put milestones at the bottom section of the page. Some competitors (Cosco and Zim) have a middle section for routes. I assume that this helps users quickly scan and understand where the cargo is. On the other hand, there is still another idea within the team to follow the desktop version’s design (using a progress bar to present shipping status).
To validate the design, we seek feedback from Dimerco and shipping customers. In the walkthrough, the design V2., which is similar to most carrier websites, was preferred because of its great scannability and easiness to grasp information.
Desktop Version
On the desktop version, the milestones are listed chronologically, allowing users to track the shipping progress in a time-based order.
Competitor Study
When designing the mobile version, I was not sure about whether it is a suitable way to present milestones. I looked into carriers’ websites that are widely used by Dimerco and shipping customers.
High-Fidelity Final Design
Style Sheet
Takeaway
The most impressive thing to me is the opportunity to visit Dimerco’s office and talk to them in person. Through engaging with them in focus groups, I gained valuable insights into some scenarios of them working with shipping customers.
If I could improve, I’d like to conduct a card-sorting test to learn about how users may organize information.
In the future, we can -
Incorporate messaging apps or services to notify users about exception events, such as shipment delays, bad weather, lack of documents, etc.
Add sharing feature to enable users to send documents to their partners.