Redesign client delivery form 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 two parts:
Conduct expert review on the existing product
2017, 3rd Quarter
Problems to solve
Pickupp's users are delighted with the service, however often there is all kind of issues blocking them to complete the order form, the easiest way for them to solve the problem instantly is to call to the support center, which increases the cost of customer service, Pickupp would like to optimize the order form thus to reduce unnecessary cost and workload.
I discussed with the Pickupp team to understand their operation process, stakeholders, process flow of order delivery, and requirements for the new design. then, I have conducted an expert review on the delivery order form to identify usability problems.
During the Expert review, I have found several usability problems that may affect the order process.
Related Fields were not in the same group and not ordered logically
Duplicated UI element for a similar purpose which creates confusion
Lack of hints for critical options (e.g., ASAP - when will be the delivery agent arrive to pick up the package? 10 minutes? 30 minutes? How long do I need to wait?)
Lack of solution or follow-up actions in the user flow. After I have filled the form, a popup appeared saying, "You don't have enough money to proceed." so I have to open a new page to add money to my Wallet.
There are more minors issues such as text field label aligning, lack of visibility of system status, required text field marked as an optional field
After I have discovered the above issues, my priority was to review the importance of each data
so that I can sort information to the right group, remove unnecessary information to increase efficiency, and improve UI elements based on specific use cases.
I have created some wireframe for the next design review meeting, and the purpose is to confirm and get feedback for:
Final UI Design
Information that will be displayed on the page
Outline of structure and layout of the page
Overall direction and description of the user interface
After we have gone through a few iterations, I have created the final design based on HK Pickupp branding guideline.
Design form with best practices
Top left-aligned label
Group related fields together in a section (Pickup / drop off/ item info/ schedule/ note)
Design form with single column
Inline form-field validation for address
Provide additional information according to the user's selection
Indicate optional fields
Instant response for address input (show pin on map after an address is validated by google map API)
View related case study :