Improving search box : a UX Study Case


Piniship helps companies that carry out export-import activities in Indonesia for now. Piniship exceeds all limits by providing ease in ordering, shipping, and even payment systems. Piniship has cooperated with more than 8 of the largest shipping companies in the world, with more than 200 routes international ports, and more than 30 countries in 2018.

In 2019 Piniship was collaborating with the government for handling Tol Laut (Sea Toll) Program. Sea Toll is a marine logistics transportation concept that was initiated by President Joko Widodo. This program aims to unite the main ports in the archipelago. With the connection between these seaports, it can create a smooth distribution of goods to remote areas.

Therefore, we must update the old User Interface, especially search box element.


Timeline: 7 days

Role: User Interface/ User Experience Designer

I have joined this company in its early stages to co-direct the visual Design and create a fresh layout. Head the Design between June 2019 -June 2020, and I was also partnering with one full-stack engineer and one product manager.

The Goal

Redesign the search box for attaching the sea toll searches feature, and we hope trough enhancing the search box can be boost revenue and conversions. In one instance, Footsmart is an online retailer that was able to increase its conversion rate for website visitors by 82% by using search queries to optimize its search functionality.

Design Process

We are using the Design Thinking methodology to help develop this experience. Empathize/Define/Ideate/Prototype/Test/Implement


Understand The Users

The company’s target market is who wants to handle ocean freight himself, no longer using Freight Forwarder services. From booking a container until the container arrives at the destination.

In the interview, I tried to understand the User for the main motivations and pain points. A user told me about his idea, which I summarized into points below:

  • The User wants to activate or deactivate the sea toll search quickly.
  • The User wants to see the shipping line schedule next week and disregarding the exact date.
  • The User wants to able to adjust the week without leaving the page.

Problem Statements:

  • How might we help the User for the search of the Sea Toll schedule?
  • How could we insert the new component without confusing the users? Because the search box has some input field component.
  • The User thinks about current Design is not efficient, and the search box not compact for the sight.

User Journey

It is time to start thinking about how the feature can fit into their product. I looked at these info-graphics below :

for a booking a shipping container, the shipping provider always asks the following questions:

  • Where is the origin port?
  • Where is the destination port?
  • When will the container be delivered?
  • How many containers do you need?
  • What type of container do you need?
  • What your type shipment?
  • If domestic delivery, whether you accept sea toll?

Hence, I must arrange the search field by following those questions.


Adding New Element:

  • Adding Single Checkbox as a UI element is the best way to activate the search sea toll schedule. This element assists users in choosing between two independent options and always has a default value — single Checkbox giving users the freedom to control their preferences needed.
  • Adding week parameters in the left panel (result page). When the user did not find the schedule, the user can quickly change the week by sliding the parameter.

Design Improvements:

I think the icon is not necessary and too broad. The input stepper “quantity container” field should be move in the search box for effectiveness, and the plus segment needs to grayed-out when the value had reached its limits (max five containers in one booking).


I started designing from low and high-fidelity prototypes and I use the 12 grid system for creating this website.


Progressing, I will do a usability test to improve this feature.


This redesign case study proposes to develop product usability by improving the search box to minimize friction and making a seamless discovering experience. By this project, I studied the importance of organizing layout design carefully to optimize the user experience.

Thank you for reading. Let’s connect and give me a high five 👋

UI Designer, Visual Designer. Striving to design with purpose.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store