Prototyping, User testing, UI design
Product Manager, Product Designer, 1 Front-end & 3 Back-end Developers
Twill aims to help their freight forwarding customers by enabling them to book space for their ocean freight, as well as track and handle shipments, on its web platform. One of the core values is to provide accurate visibility into the whereabouts of users’ shipments. With the cargo industry only just opening up to the possibilities of technology, there was no way to provide GPS-based track & trace yet, as containers weren’t being tracked on an individual level. Customers were not used to having any transparency over the progress of their shipments, and from their feedback this proved to be one of their main pain points.
As a solution, Twill had opted for a ‘milestone’ based approach: several checkpoints throughout the journey would be reflected in the platform, and the status would be automatically updated accordingly. This was the closest way to providing users with a live status of their shipment.
To increase market share, the business’ goal was to expand its services into different types of shipments. Instead of only delivering “port-to-door” (from the loading port to the warehouse), we were now going to offer door-to-port, door-to-door, and port-to-port as well. Additionally, feedback from customer care across the world was that their milestones were different based on many factors in their country. All of this meant the milestone-based approach had to become more dynamic.
As a fast growing startup, features had been prioritized over clarity. When faced with this next challenge, it became increasingly difficult to grow as a platform while keeping it simple to use. As a team, we felt that we should take a holistic approach and think about how we could communicate important shipment information, such as status and pending actions, more clearly.
Getting everyone on board with spending precious time on redesigning the page to become more user friendly was challenging. Highlighting the problems that users were experiencing backed up by research did the trick and gave the team space to rethink the page more broadly.
We set out to achieve the following goals:
1. The design needs to allow for dynamic milestones (amount as well as type).
2. The shipment status must be the first thing users see.
3. A clear call to action whenever a task is required.
While exploring different solutions, we would continuously weigh them against these goals, while at the same time considering the technical effort involved.
While initially we tried to stay close to the previous design in an attempt to keep effort low, we soon realized that with a few tweaks we’d have a much bigger impact. I convinced the team to get rid of the dark tones as well the shipment details “component”, and instead use the full width of the page. This way, the color contrast and clutter would be minimal and directing the attention directly to what mattered: the shipment status and the action pending. We’d also be able to maintain important shipment information visible at the top of the page by making the subheader sticky.
Further details of the shipment (such as contact, cargo and payment information) were extremely hidden in the previous design. We knew this was a problem for users, yet up until that point had never been a priority. As we were tackling the component, we included this as part of the scope and moved the entire section down the page with tasks & documents. A relatively simple change that ended up having a big impact on the users’ experience.
Once the direction in which we were heading started to take shape and become more visual, we decided to talk to several of our users to validate our assumptions. We also distributed a prototype to our customer care team across the world — they were familiar with providing us quick feedback by leaving comments in InVision.
While the feedback was overall positive, there were two important learnings that further helped improve the interface. First, the user testing showed that although it was now more clear when an action was expected from the user, it wasn’t intuitively clear for everyone how to complete this action. After considering multiple ways to solve this problem, we opted for creating more consistency through color, icons and copy between the notification and the task completion form below. The notification was also turned into a button, so that if users would click it would take them down the page. Not the most innovative solution, yet a simple one that we expected to resolve most of the confusion.
Second, we discovered another usability problem that we had overlooked earlier. Each shipments has two unique identifiers: a ‘reference number’ and a ‘Twill ID’. The Twill ID was necessary for communication with our Customer Care team, whereas the reference number was an optional field for customers when they would create a booking to align with their internal systems. In the previous design, the Twill ID could only be found in the hidden details section. Only the reference number (a sometimes empty field) would be visible at the top. Initially, we took over this approach without much thought. Only after feedback from Customer Care, we moved the reference number’s prominent position and replaced it with the Twill ID — keeping both visible at the top of the page.