Station-to-Station Delivery Service: Designing for Simplicity and Scalability
Design of the booking and tracking processes for the largest transportation mobile app with 1m+ users in HK
Design of the booking and tracking processes for the largest transportation mobile app with 1m+ users in HK
The goal of this project was to introduce a new service that allows users to conveniently send and receive packages between MTR stations. As the service was in its experimental phase, the objective was to quickly launch a MVP to test market demand.
Research on customers' behaviour and needs
Designing the end-to-end customer app flow that strike the balance between simplicity and seamless UX
Utilise quick UI testing to make data-informed design decision
The end-to-end customer app flow
Product manager x 2
Product Designer x 1 (Me)
Frontend engineer x 2
Backend engineer x 4
To achieve the business expectations, our product design goals are
At the very beginning, our stakeholders suggested developing a separated new webpage for the new service. The reason behind is the assumption of easy implementation for website.
Our assumption of the high traffic for tracking page is that users want to keep up-to-date with their delivery progress. Implementing a website do serve the basic needs of providing delivery details, payment, but the whole tracking experience will be decoupled from our app for our existing users.
There is a heavy traffic on order tracking page after a delivery order is placed
Developers have to rebuild payment gateway if we go with the website approach
We successfully convinced the team to introduce the new service in the existing customer app as
We conducted fake door test to experiment the conversion of different entry points for a week. The results surprises the team as we assume a larger medal icon will catch more attention to users. We will never know it turned out our users explore and interact more on the app header without the test.
1. Service focus
Cons :
❌ The original map is not providing enough relevant info for the station delivery.
❌ Some users we tested with even interpreted that couriers are using MTR as their transport media to help delivering, they assumed the same delivery behaviour as existing ones, courier will come picking up their packages.
2. Route focus
Our design instinct is to replace the conservative map with the MTR system map to better visualise the service and state the delivery instructions with title like "Sender drop-off". However,
Cons :
❌ Most testers keep tapping the system map instead of the station dropdown component.
❌ It makes users confused and start giving up as showing the entire map gives users expectation on we are supporting the whole MTR network but we actually only have 4 stations are in service for our first scope.
3. Package focus
Hence, we came up with a decision to remove the conservative map and leave us more space to provide more relative and useful informations such as package requirement and service descriptions.
From the past experiences in other services, we learnt that users always ignored the package size requirements. To our new service, there’s a strict package size spec for the limited hub capacity reason, that’s why we utilise the map area and replace it with more relative packing tips to ensure users’ packages won’t get rejected.
After testing the designs with users, we found out that the package spec is hard to understand.
❌ Users are not familiar with the package unit jargon "CBM"
❌ The 3 different units for "Weight / Dimension / CBM" increased users cognitive load.
In our final design, I shared the findings and discussed with ops team and
✅ aligned to use "Sum of Length, Width, Height" and use an illustration with spec-annotated package that help users know what to measure easily.
✅ We also linked the marketing site for more detailed to promote this new service.
During operation flow test, our tester reported us it is hard for them to recognise the exact location of the hub. With that, I figured out with our engineers and discovered there’s the “nearby” details provide in the API and we are able to add the nearby info besides each station option and address to ease users/ couriers to find the hub locations inside a MTR station. After adding the assistive info, testers returned positive feedbacks that it helped a lot for assisting them to find the correct location in MTR station that is not supporting GPS location navigation.
