Form and Quote: A sample of friendly form with guides

The author of this article is LEO.

When it comes to user experience, HTML form is one of the most discussed elements on the plate. Usually a form required experience designers and product managers to understand how the business work and what are the users’ expectations and how do they behave or interact with the form.

Recently we revamped our China-to-US ocean freight service, one of the key elements to the service is the logistic solution search and quotation tool. Here is how it look like before we do the update:

Data shows that most of our users on this China-to-US ocean freight service are new to international sea freight. They are experiencing different kinds of difficulties, for example, they are not experienced in sea freight and do not understand all professional logistic terms. And thus, the form above become obstacle to them. That is why we are trying to improve the form and make it more user friendly.

We do not rush to revamp the tool, but try to throw out questions and see if there is any fundamental way to overcome hurdles to users. One of the directions is while users are so unfamiliar with international logistic, will it better to offer a human-to-human help service instead of a self-help service?

So, we come up with the above prototype with a manual quote function: User leave us their contact information and our representative will contact them directly if users are not confidence enough to fill out all info. It turns out users welcome this old service style - despite slower responsible time and more back and forth communications. However, the cost of this service model will be too high and it is obvious that scaling and maintaining service standard will be a huge problem in the future: Self-service is not avoidable in the era of internet.

To in heritage the idea of a human touch service, in the next prototype we added an option with ‘I am not sure’ option. Whenever users are not sure how to fill in the form, we allow them to contact us. Once they checked the I’m not sure option, a set of contact box will be appeared. And our staff will able to follow the case.

Apart from I’m not sure option, we also looked into the fills. It turn out some users understand what is gross volume but not able to process the calculation. Thus we offered a little calculator for them. To improve user experience, even the little calculator tool takes a few versions to polish.

After exercising visualization of the calculator, we learnt users want more direct and simple form of communication. Thus, we tried to visualize the shipping route through service mode:

But it turns out visualizing service mode will increase the digest cost to user. Even it gives a complete process path but it also confused user on which is the right path for them. In this case a simple text label is more understandable.

To further assist users to quickly adapt to our solution search tool, we added call to action copies to the fill label which encouraging users to input needed information. We also added guided-text in fill place holder, that give a better idea on what is expected to be filled in. And of course explanations next to fill label is extremely important to our not-so-experienced users.

All of the above bring lots of positive feedback from different users. To wrap it up, a successful html form should contain clear guideline, simple text label, mini-tool would be a plus when needed.

After launch of the new version, our study shows that users sometimes do not realized the measurement unit is actually a dropdown. Especially in western world there are different metrics system, users will be confused when the tool only showing one measuring system. That why on the next update when adding new service to our ocean freight service, we expose all option with a switch element. This is much clearer to users and reduced a lot of confusion.

On the next step, we will talk about the quotation display part of this ocean freight logistic service.

what happen after user filled in the form and how do we update the search result - quotation. This is what happen after user input necessary information and click the search button on the ocean freight solution search and quotation tool. Our system will match the enquiry and solutions service provider offered, making a quotation for that specific order.

Here is how it look like together with the search tool before we do the update:

Quotation is simplified into 7 sections.

Users will able to expand the quotation with detailed breakdowns with charges.

Because of the business complexity natural, quotation of sea freight logistic can be complicated to average users. Even worst is in previous version, service charge breakdown is not detailed enough, some of the calculation is not completely shown even in the detail breakdown. This will certainly affect user’s trust on the service.

Apart from unclear breakdowns, studies also found users are not able to understand what charge terms are, like Original Charges, Freight Charge and Destination Charge. That is why we introduced a visualized trade terms and steps into the service charge break down. This reduces the digest cost of users.

With the diagram, user will able to understand the logistic terms and step easily. And this also helped to set user expectation on what is going to happen next. We used two colors to separate which part of the logistic flow is paid and liable on which party. By this buyer and seller will easily understand where the service charges goes to.

On the price detail breakdown, we took out supplier cost on buyer’s quotation. And vice versa buyer’s cost will not show on supplier’s quotation. It is because our study found both parties do not care about how much the other side have to. They are more concern on how much they are paying for the service.

To better illustrate the different in different trade term and liability condition, here are collection of different trade terms

Here is how the page look like together with new search tool and quotation layout:

In summary, this revamped sea freight solution search and quotation project had bring a easier-to-use form to users with simplified form, call to action contents, widget tool, process visualization and a reader friendly cost breakdown. Data shows there is increase in success order rate and we got different positive feedback from users. Hope this sharing will bring you some inspirations.