Redesign mobile app for Pickupp
Pickupp is a Hong Kong-based on-demand tech delivery platform for merchants to outsource delivery orders and allows the public to sign up as the delivery agents (DA), they are providing services such as same-day delivery, 4 hours on-demand delivery…etc
We helped Pickupp redesign their client delivery form and delivery agent mobile app and bulk order feature for admin panel to improve usability and increase the efficiency of their business workflow. The project is divided into three parts:
My roles
Date
User Research (Field trip/ interview / Role play)
Conduct expert review on the existing product
Journey mapping
Wireframe
UI Design
Prototype
2017, 3rd Quarter
Problems to solve
Along with the business growing, Pickupp was eager to improve its mobile application for the delivery agent (DA) to enhance usability in terms of the sign-up process, the workflow of finding and accepting orders, and the delivery flow. The aim is to reduce time and workload on 1:1 support for DA sign up process, prevent DA from taking the wrong order, make sure DA completely follows client's requirement on each delivery request and complete every required task during the process.
Also, Pickupp would like us to design a new feature to assist driver dispatch packages to DA in individual districts. In this scenario, the driver and his van served as a moving distribution warehouse; he will transit a batch of packages to that location, delivery agents who accepted the orders would pick up the package on his van.
Approach
DA registration
To understand what are the barriers for DA to register, search, and accept the right order, I have attended the DA introduction meeting held by Pickupp as an observer.
In this meeting, they explained their business and the delivery process. In the end, Pickupp will help DA to install and register through the mobile app.
Here are some observations that might be causing the account registration failure:
1. During the sign-up process, it requires DA to confirm their identity by uploading a profile picture, which has to be clear enough for them to compare with the ID card picture. It was out of their expectation; therefore, DAs have to pause the sign-up process and look for a bright spot to take a selfie.
2. DA should input the same name as in their bank account, which hasn't mentioned
in the UI, in most of the case, DA will need to re-submit their real name.
3. After filling in all details for sign up form, delivery agents will need to go to a separated setting page to upload id card, residential proof, vehicle info, upload driving license, vehicle id, they didn't know where is the settings page and the aim of doing this, also they haven't prepared these documents on their phone, so the sign-up process was only half completed.
4. When DA quit the app in the middle of the sign-up process, it doesn't allow them to continue with the sign-up process, so that they have to start over or call for support.
Delivery process
To understand the existing workflow of the delivery process, I have discussed with the administrator of Pick-up and delivery agents. I also registered myself as a DA and delivered a few items to understand how the app works during a mission, and the conclusion is we can improve the order list view and order details page based on the findings.
Here are the findings:
-
Deliver time, pick up location, and drop off location are the most critical information; they affect DA decision.
-
Weight and size of the item is the next consideration
-
DA would not only accept one order, and they plan an itinerary in their head
-
DA will fight for orders which match their itinerary; they would accept without careful consideration.
-
DA often miss the special requirement from Client
-
DA often accept to deliver something bigger than their motorcycle storage box before realize that
-
There will be a deduction on the reward if DA is late for delivery.
Bulk order management for driver
To design bulk order management for the driver, I first need to understand what a driver would encounter in his daily routine. Therefore I have gone on a field trip with the driver, serve as his assistant; during the field trip, I have the opportunity to ask all the questions to the driver and DAs, document the flow and pain points, and understand what they would face in the real-life. This exciting experience allows me to tailor-make a product based on real-life situations.
Solutions
DA registration
Once the user flow and wireframe have confirmed by HK Pickupp, I have created the final UI design for DA registration, here are the design highlights:
I have organized all the required tasks in a stepped form; DA will only need to follow the instruction on each screen to complete the sign-up process. The flow includes:
-
Profile IMG and Basic information
-
Phone number validation
-
Vehicle IMG & information
-
Document upload
-
Bank account information
-
Successful message
-
Document preparation
-
Get DA to prepare all document before they start the sign-up process
-
Provide clear guidance for each field (e.g., the name has to be same as the bank acc)
-
Autosave filled info to prevent data lost
-
Add a flow for the user to re-submit the document
Wireframe
Final UI design for Sign up flow
Delivery process
Once the user flow and wireframe have confirmed by HK Pickupp, I have created the final UI design for Order list view, order details page, and the delivery flow, here are the design highlights:
Order list view:
-
I have included only the essential information. When DA is scanning from left to right, they should first see Pick up time at the pick-up location and the drop off time at the drop off location, that is the most important data for them to decide if they want to find out more about this order
-
Include tags to indicate if the package is Big / Heavy / Fragile
-
Add tags to show if they need to prepare change and delivery note
-
Sorting and filter for size and weight, district and delivery window
-
History for DA to save their order preference, it benefits users who only take orders under certain conditions.
Final UI design for order list view & Sort and filter
Order details page:
-
Distinguish pick up and drop off information with red and blue color; DA should be able to see the difference with one glance
-
Show full address with the map feature; DA will be able to see location on a map when they tap on the icon
-
Contact no. of the sender and receiver with "one tap to call" function; DA often call to arrange the deliver
-
Slide button to prevent DA taking order by mistake
-
Size and weight for the item, for DA to estimate if they are capable of delivery
-
Back up solution for DA when they can't get drop off the item or to get client signature.
Order details page
Delivery flow
Bulk order management for driver
Once the user flow and wireframe have confirmed by HK Pickupp, I have created the final UI design for Bulk order management, here are the design highlights:
-
Virtual list for driver to check-in packages from the warehouse.
-
Scan QR-code of the package to validate if it is correct
-
The driver was using pen and paper to mark down all delivery status, to improve this situation I have designed a bulk order dashboard to Visualize the delivery status of each package (Picked from warehouse / Released to DA/ DA arrived to drop off location/ Delivered / Package Missing from the list)
-
Report the current location of the van, so that DA will not need to contact driver one by one on the phone
-
See DA delivery status, so the driver would know if packages are needing to return to the warehouse and have it documented in the app.
-
Delivery agent identity check to make sure driver is releasing package to a real DA
Journey mapping
Final UI design for bulk order management feature
View next case study :