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:
 

 / 

My roles
Date

Conduct expert review on the existing product

User Research 

Wireframe

UI Design

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.
Approach

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.

  1. Related Fields were not in the same group and not ordered logically
     

  2. Duplicated UI element for a similar purpose which creates confusion 
     

  3. 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?)
     

  4. 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. 
     

  5.  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

Solutions

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:

Wireframe design

Final UI Design

  1. Information that will be displayed on the page
     

  2. Outline of structure and layout of the page
     

  3. 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.

  1. Design form with best practices
     

  2. Top left-aligned label
     

  3. Group related fields together in a section (Pickup / drop off/ item info/ schedule/ note)
     

  4. Design form with single column
     

  5. Inline form-field validation for address
     

  6. Provide additional information according to the user's selection
     

  7. Indicate optional fields
     

  8. Instant response for address input (show pin on map after an address is validated by google map API)

View related case study :

© 2020 Natalie Wong