Client: Hutchison Ports ECT
Period: 2018 – 6 months
In the Rotterdam harbour is Hutchison Ports ECT one of the container terminals where the big container vessels will be loaded and unloaded. Every day multiple big container vessels with up to 17.000 containers come and go within 24-72 hours. Until now an “owner” of containers could only get a big time window and had to guess when they could pick up their containers. There was no clear track and trace and the possibility to plan wisely which containers they needed to pick up first.
Team setup for this project:
- 1 Sr UX designer (Product design (UX/UI) and research support) 👨🏼💼 My role
- 2 Sr Engineers (backend and front-end (React) development)
- 1 UX researcher (30% of the time to conduct interviews)
- 1 PO from the client
My contribution:
Within this project, I was the UX designer, supported UX research and was supportive of the jr Product owner of the client to get the backlog prioritized in the right way. My main task was to get the team educated about the industry and set up concepts so we could validate asap with our focus group. In the long term, I was responsible for the design, the design system (in collaboration with jr UX designer) and the stakeholder alignment around the UX and the quality. of the product.
🚨 Constraints during this project:
- We only focussed on the Fresh market a small segment of the industry
- We had a small group of clients (focus group) who inspired us to deliver a meaningful product for this market segment.
- We only had a set amount of time before our first pilot was ready to go to market.
- We only had one API from the ECT team which we needed to build on, we could not directly influence the way the API was built.
💡 Lessons learned during this project:
- The industry is lacking in sharing information, which effects in an inefficient import of containers
- It’s easier to order something yourself from an ECOM store, but the store itself has way more hassle to get it on time in their warehouse due to lack of track & trace on their containers
Understand
When we started we needed to understand the market, the current products and the competitors. We were surprised about the lack of digital maturity in this market from ECT but also from the competitors. To understand the status of your container you needed to fill in an input field with the number of your container and then you wil see a page with a lot of information without a clear information architecture. The most important information is about the arrival and departure of the vessel because within that window your container wil be ready. But when it wil be ready it was always a gamble. There was a lack of IA on this container detail page and it was hard to understand what the status was. Most of the time the user was pressing F5 on this page to see if there was any change.
Understanding the market and way of working
My role was to make clear to our team how the shipping of cargo is working to truly understand the business. And I created a journey of the daily workday of planners (new target audience) so we know how to optimise the platform for them.
Understanding the target audience
To make a good product for our target audience we needed to understand what are the jobs to be done by the users. We went to some
User research to create a focus group
We knew that there is a market for these products, and we knew we needed to improve the current product which ECT was delivering to their clients. But what they needed to know and how they wanted to know that information was not clear to us, so we talked with some logistic transporters. We decided to focus on the fresh goods market because our hypothesis was that these products have a sense of urgency to be transported to their end destination
Usability testing with focus group
During this period of 6 months, we did multiple usability tests with our focus group.
Delivery
Design system “Portus” of MyTerminal for ECT
We’ve created the MVP with a strong foundation based on the brand guidelines and validated certain screens, layouts and components. We came now in a phase where we needed to make our product ready to go to market and prepared to scale up. We defined what we needed to set up to build our design system.
After working on those elements we delivered our first version of the design system with the workname “Portus”. We created this in Sketch with Abstract so we had a Sketch library for the design system in place, close to our working files in the cloud.
Templates
New product based on the design system
After our first release of the design system, we helped another team to build a new product based on the design system. We noticed that we missed a few elements and we could enrich the design system with some new components.
After we optimised our new components we could deliver our first MVP version to the market, and we start building already on new features like notifications.
Results
We delivered a design system which was ready to scale and delivered a validated MVP for their focus group which they could now build up a business case on for all of their users.
During this project quickly realised through research that there is a big inefficiency in the logistic system due to all kinds of blockers in the transportation chain. By making this clear and more predictable we could change the way logistic planners make the plans for their truck drivers. With that insight, some of them could now scale up to importing 4 to 5 containers a day instead of their regular 2 to 3 containers a day.
Improved the NPS score. During our research phase, we also did an NPS measurement (within our focus group n=12) of the current services related to their containers. They scored the current service with an NPS score of 4.75. After the first release of our MVP, we measured it again and they gave us an NPS score of 5.25 score on a scale of 7.
My personal experience of working on this project.