Redesign a delivery booking form
Introduction
After the company’s rebranding, we created a UI style guide, then updated all the products and website with the new brand and guide. We took the chance to improve the UI/UX of some pages too. In this case study, we’ll be focus on the delivery booking form.
The original form
The original form is a single page form with a price table on the top of the page. The user can get a price quote by filling in some fields.
Problems with the current form
- The price chart isn’t very useful since users won’t be able to calculate the distance themselves
- Getting a quote is not obvious
- It’s a long form with a lot of fields
The new delivery booking form
We break the new form into three parts: get a quote, delivery information and payment. This way, the form won’t look long at the first sight. It’s easier for users to notice if they missed any field in a short form. Also the users get a quote before placing the order.
The user can still view the full price chart by clicking “View the full price form”.
After filling in the postal code and the package size, the user will get a quote at the top of the step 2 form (Delivery charges).
Under the quote will be all the necessary info for the delivery: Package detail, sender and recipient’s info.
The user can also click on the drop down of the quote to see the full detail of how we charge.
Last step is reviewing and payment.
Summary
Year of release: 2017
My role in this project: UI/UX designer
Tool: Sketch
