Re-designing the product filter for an e-commerce website of a jeans brand:
UX Case Study
This case study is centered on one of the requirements for re-vamping the MUD Jeans website - product filter. The requirement was to implement a product filter which would simplify the filtration process and is less confusing.
Issues identified:
Desktop version: Takes up the whole page and drives the viewers sight away from the products. Apart from that, the product filter is not intuitive and visually appealing. And lastly, the way it's currently could confuse the users (or customers).
Mobile version: The design is not mobile-friendly and does not display all the necessary information at a glance.
The solution:
In order to cater to the next billion users, mobile-first adaption is necessary. I feel that the mobile version should be efficient for the user to choose the desired filters quickly at a glance. So with that requirement, I focussed on re-thinking the mobile version of the product filter first.
As per the brand data, the best way to filter the jeans is with the parameters of Fit, Colour, Waist and Length. I arranged these parameters in the order which makes it easiest for a user to gradually find the exact jeans they want.
After creating the initial wireframe concept for the mobile version I translated that to the desktop version.
While keeping accessibility in mind, I planned to include names of colours along with the visual representation of colours in circles next to the names.
The result:
After finalising the wireframes concept, I created the final mockup. I believe this solution will help consumers in finding the jeans of their choice much faster and is also visually appealing at same.
The next steps:
The next steps would be to develop a prototype and test with users to identify any issues they face. An additional thing I would like to test is the comparison between the solution and the current version - in terms of the time it takes users to find the jeans of the choice with this new filter.
