In addition to ecommerce, Traceable Products has important services like TraceableLive, Calibration Services, and VFC. These were not being properly highlighted in the original home page design. The page was also not responsive or mobile friendly.
With the new iteration, I decided to feature the different services in a grid style, with the main product feature on the top. The main challenge in adding these components was keeping the page short and concise, particularly on mobile, so that users have access to all the information they need immediately.
One of the requirements was to maintain a fixed nav bar. The original design took up too much space with three rows of information. To shorten the height of the nav bar, I eliminated the row of product links and condensed it under the general 'Products' link.
On mobile, I decided to redirect the product categories to a new page to create a smooth transition and flow of information from desktop to mobile.
The last major component of the nav bar was to redesign the search. With limited space to work with, I displayed the search icon with a primary background to draw attention to it. The input drops down when the icon is clicked or tapped, and it is fillable upon typing.
During testing, a big success in this flow with customer service representatives was the ability to type their search fields without having to click on the input field. It eliminated one step in the search flow and helped them reach their desired results faster.