Live parcel tracking
Prototyping parcel tracking concept
with Framer Studio
Summary
Parcel delivery is a rising problem for old cities as demand is growing. There is a new concept to collect all parcels in hubs outside the city and transport from there into the city. During this university project we did research into the problem, came up with a solution, and prototyped apps for the consumer and couriers.
Challenge
Design parcel tracking and delivery eco-system and create a prototype.
Outcome
The end result was a highly interactive prototype build with Framer Studio and the Mapbox API that include multiple flows and seductive design principles.
Year
2018 (2 months)
Role
Product designer
Services
Research
Concept
UI design
UX design
Prototyping
Research
To tackle the growing demand of parcel delivery in Amsterdam there is research ongoing about setting up delivery hubs outside the city to collect all parcels and distribute these parcels from the hub to the customers using using Light Electric Freight Vehicles (LEFV). Right now on a daily basis there are 40,000 parcels delivered and the prediction is that it will grow to 100,000 in the coming 10 years.
This project was mainly focussed on the needs of the customer and how we could improve the experience around parcel delivery. To find out what problems there were we organised a focus group and combined those outcomes with our desk research.
Focus group
This focus group was with 10 persons and beforehand we gave assignments. These assignments helped us to gain information about their order behaviour, overall experience, and if they were willing to change their behaviour.
Outcomes of qualitative research
- Parcel ordering is on average 3-5 times a month
- Often parcels are not delivered at the first attempt which is found irritating
- Often is missing the ability to let the parcels be delivered at a nearby postal office or supermarket
- Test users would be open to spend more for a sustainable delivery to a limited amount of less than 10% or €1
- Misses the option to change the delivery address after the order is underway
- Multiple apps for tracking parcels because of the different couriers creates unwanted problems like remembering different log in names and passwords
- Not easy to share parcels deliveries with relatives / family / roommates
From the insights we collected with the research we created job stories for the courier and the customer to make clear what situation would occur and what the app should fix for the users.
Job stories customer
1
When the courier is underway with my packages I want to be able to change the delivery address so I don’t have to miss my parcels
2
When the courier is underway with my parcels I want to be able to track her more precisely so I know when to be home
3
When I sign up for the app I want to be able to invite other people to join my group so they can also track my parcels
Job stories LEFV driver
1
When I start my day as LEFV Driver I want to be able to decide myself how many hours I want to work so I am more flexible
2
When I start my day as LEFV Driver I want to be able to choose the vehicle I want to drive that day so I have more variety in my work
Ideation & Concept
The concept created for the consumer was an app that is mainly focussed on a map showing the live location of the courier to show the estimated time of arrival, create groups with relatives, and being able to change the delivery address to get a higher percentage of successful first delivery attempts.
Live tracking
The live map shows the where the couriers are that are coming your way. By being able to live track them the customer knows when the courier will ring the doorbell and that is less change that the parcel can’t be delivered.
Change address
The delivery address is most of the times set during the purchase of the product. Giving the possibility to change the delivery address on the day itself increases the chance for a successful delivery. Changing the delivery address has limitations such as time and distance between the original and new address.
Groups
Currently track and trace codes are assigned to one person only and often it is not possible to share this information. By sharing this information you can prevent unsuccessful deliveries because people like relatives, roommates, or friends can track and accept your parcels.
Design
With the defined job stories and thought-out features the design process of the app started. The assignment was to design an eco-system containing at least three devices divided over the consumer and the LEFV driver, my goals were trying to get a higher percentage of first attempt deliveries and make it safer to use screens in traffic for the driver.
Consumer
I started with sketching the home screen and discussing these possibilities with other designers, based on the feedback I decided to go with a clean home page interface with focus on the different parcels that are underway to the customer instead of showing the map. The map is important for tracking the parcel on the delivery day but showing it all the time would not make sense since probably 90% of the time it is empty.
Test users of the first paper prototype had difficulties with understanding where to click on and needed more context so I added a title above the cards. In later user tests and design reviews I found out that the bar in the bottom of the screen was looking like a notification and changed the hierarchy within the cards to provide important information better.
Design decisions
- Make it easier to understand what is clickable
- Changed through the iterations the hierarchy in the cards to better fit the users needs
Sketch
Iteration 1
Iteration 2
Iteration 3
Being able to live track and change the address are important features in helping towards successful first attempt deliveries. In the design reviews and users test it came up that I could design more consistently with the rest of the app, design for better contrast, and that a time frame to change the delivery address was needed to not have users change the address at the last moment.
Design decisions
- Add a timer to change the delivery address
- Use a different map for better contrast
- Color code the parcels to show more visual difference between parcels
Sketch
Iteration 1
Iteration 2
Iteration 3
LEFV driver
My goal was to make driving more safe for the driver so I decided to go with a wearable that could be controlled by voice and give navigation instructions without having to look at the device. The Apple Watch and Google Glass were tested by biking around Amsterdam and trying what way of navigation worked best. The haptic feedback from the Apple Watch did not give enough feedback and I got lost, the Google Glass instead was good. The driver could keep their eyes on the road while seeing the navigation, it was easy to control with voice and didn’t demand to take hands of the steer/wheel when it was not clear where to go.
The design for the driver consisted of 2 flows
- The onboarding flow where they got to select the vehicle they would be using and how many hours they wanted to work
- Starting the route to a customer and scanning the parcel
The onboarding process was made up with two screens, first they would pick vehicle and afterwards fill in how long they wanted to work. These screens had little to no changes from sketch as the interaction was clear but had visual changes to make the state of the element better.
Design decision
- Add clear visual states to the elements for better feedback
Sketch
Iteration 1
Sketch
Iteration 1
On the home screen of the driver is was not clear that the cards were the parcels that needed to be delivered and that if you would click them the route would start so I changed the visual appearance of the card and added call to action to start the route. When a route is started the app will become usable and start the navigation on the Google Glass.
Design decision
- Add ‘start route’ call to action for better incentive
Sketch
Iteration 1
Sketch
Iteration 1
Prototype
As the map was such an important feature of the design I decided to use Framer Studio to get as close as possible to the final solution. For this prototype I used the Mapbox API to add the map and make the driver on the map follow the set route and move towards the consumer on the map.
Framer Studio also made it possible to make a working input field for typing the new address, status bar with real time, and comes out of the box with default iOS gestures and behaviour, this all these features made it possible to come very close to a real product.
