“It is so cumbersome to find the product in the store page. Especially when I already know the product I need”
Users were inconvenienced by the fact that the search option was not there in-store screen. Nested structure of categories and subcategories was one of the main usability problems. Navigation back and forth was extremely disorienting for many. This led to high abandonment rates after reaching store screens.
Custom solution for helping users to search and find within the store screens as well as introduce UI swimlanes for easy categorization.
As in any e-commerce platform, one of the critical and crucial areas is the search experience. While brainstorming and discussing with the analytics team, we found that the filter experience was not great either. The filter option was inconsistent with the overall design language.
It was extremely important for us to optimize and better the user experience for the search and filter options. This project had a high impact on the user experience and conversions as measured by decrease in abandonment rates.
Furthermore, the then-existing Carriage application was designed with only Food vertical in mind. While changing the important features such as Search and Filter, we had to keep the user’s mental model in mind and not introduce drastic changes. Phase-wise approach was needed.
The main idea was to bring visual differentiation of swimlanes with usage of icons as opposed to image-only approach, thus leading to better user navigation.
We brainstormed the UX approach for new search and filter mechanisms. One of the most important decisions was about the placement of the search box to make it prominent.
In addition, the following were also considered:
• Hint texts based on the store
• Displaying number of matching results
Paper wireframes were created and later refined to create mock ups by considering the interaction, content and usability principles.
The 2nd concept was finalized based on usability testing.