- Client
iPrice Group Sdn Bhd
- Services
Made MASSIVE improvements to the Filters/Sorting UI/UX
- Launch project
Read the Case Study 👉 Хабр
Few words about iPrice
iPrice is one of the most ambitious and rapidly-growing Kuala Lumpur-based online shopping startups in SEA region.
This online marketplace/shopping aggregator operates in 7 Asian countries: Malaysia, Indonesia, Philippines, Vietnam, Hong Kong, Singapore and Thailand.
The mission is to enable everyone in SEA to shop online, compare prices and enjoy impartial product information through 200-million catalog aggregator platform.
Speaking my language, iPrice is a critical and highly-consumed web application (~10 mln monthly users, around 40 mln monthly sessions).
Worth to mention, it is dramatically SEO driven, hence it is AMP compatible (ranking factor in Google’s mobile first index). iPrice is currently taking a leadership position in it’s monthly organic traffic compare to all other price comparison giants in the region.
UX speaking wise, it is very user-diversified application. From one side it looks like application is designed for Asians mentality, but from another side South East Asia Region is a region of a serious nationalities contrast. Obviously, it requires careful behavioural study of each country representatives. And that is a beauty of my work in iPrice.
About the Project
This Project was devoted to a few the most important components of iPrice Product Listing Pages (PLPs) – Filtering and Sorting.
Focus was on Interface revamp to increase both the discovery and the utilisation of these 2 components, avoiding misinterpretations of the sorting tool (by juxtaposing filters and the sorting tool to one another, prompting the user to make a distinction between the two).
Challenge
Filters are a great tool to narrow down high volumes of content and to structure the most relevant results.
But, how do we make sure they are helpful rather than confusing?
The mission statement was to:
👉User-centric perspective
💡increase the usage/engagement of filter/sort options;
💡open-up the benefit for users to apply filters in combination with sorting;
💡allow users to focus on narrowing down the list of products (choose from a selection of products that is uniquely tailored to their needs and interests) instead of wasting time browsing an overly broad scope.
👉Business perspective
💡 reduce BR;
💡 increase Desktop/Mobile CTR;
💡 time spent on PLPs
Key metrics: filters/sorting usage (no of events/session), CTR, time per session/engagement time.
This can be achieved by focusing on:
👉 Interface Wise
🚀 Increasing visibility of desktop filters by removing the traditional sidebar to top as horizontal filtering design (through transpose of the faceted navigation). therefore, more products per page/scroll are visible. Reduced BR since users are able to see more options ATF;
🚀 Making A LOT of UI improvements to desktop & mobile filters.
Increasing interface intuitiveness (stick to user’s expectations), diminish user effort by reducing amount of clicks to complete the desirable action (time to make a decision/time to complete the goal);
🚀 Freeing up horizontal screen real estate, so it can be used for displaying either an additional product per row or larger product thumbnails;
👉Experience Wise
🚀 Choose an appropriate design pattern for showing filtering options ()
🚀 Provide an explicit distinction between filter options slider and category menu slider
🚀 Maximise the smooth (not iterating) experience taking into account limitations of AMP (e.g.: page reload with every single filter application)
👉Constraints & Limitations
😎 Responsive Design = Desktop/Mobile filter UI should have unified code base;
😎 AMP compatibility limitations
Achieved Result – Metrics Wise
🎉 BR has been reduced, since users are able to view more navigation options (category carousel) and extra list items per raw ATF
🎉 Impressive uptake on sorting usage! The impact of design changes.
Learnings
What would we have done differently?
Speaking Agile language, fast improvement, progress and development are supported in an environment, where teams are easy adaptable and able to frame work as a learning problem (not an execution one), by acknowledging own fallibility and model curiosity. That is why, it is important to look back and analyse what could be done differently.
I joined iPrice by embracing filtering/sorting experience as a 1st challenge.
Being an essential part (Lead UX/UI Designer of filters Revamp) of the Product Team in iPrice, I realised, that the Company is just facing a new era of ‘User-Driven Corporation’ (UCD). The willingness to transit to this user-centric thinking happened exactly during this project and I was right in the epicentre of the process. ))
Product Owners had a tones of expectations from this Filtering/Sorting Revamp project without weighting the real risks and giving a time/budget room for proper UX review (to analyse a product or service).
But, as an expert, I understand, that such a gap can’t be full-filled in a quick time. Product team should experience current flow and reveal what is lacking in the whole picture to be able to support business objectives and solve the right problems.
Right after the Release, Product Team organised a session, where learnings were outlined and gaps were highlighted.
Here are where we could do better:
☝️ Validate problems with simpler tests (MVPs, user testing, A/B test);
☝️ Simplify iterations. Avoid one big extensive release. It’s high-risk. Especially if the impact is not expected to be equally extensive;
☝️ Try to understand the effort of a feature upfront;
☝️ Ugly isn’t always bad. Unusable is bad.
OLD FILTER/SORTING INTERFACE
Week Points of Old UI
Few examples
UX wise:
🔥 Fullscreen Onscreen Filtering Pattern with Sub-Navigation Experience
[inefficiency | redundant clicks & time | low filter accessibility & flexibility | out of context from the refined search results]
🔥 Filter Bard gets collapsed after every single filter application.
Difficulty in applying multiple filters
[Page reload (after each filter is applied) limits multiple filter application.
Even if the customer applied one filter, they are not likely to repeat the process.]
🔥 There is no filter division (common|category-specific)
🔥 Filter Bar is not fixed on top
[Bring down the accessibility, not easy to change during product scrolling]
🔥 Filter Panel is not fixed after each page reload
[Hinder UX by distracting the user’s focus and broking the eye fixation during interaction.
Following a good practices, after each page reload the filter bar screen should be fixed on that point where user was interacting just seconds ago]
The List continues…..
UI wise:
🔥 No indication of the number of selected filters in a bubble
[User’s awareness and track of filter application process = trust through control + stick to users’s expectations]
🔥 Absence of the total number of items in the currently displayed product list – both above and below the list
[Especially in the case of large product lists, it can be helpful for users to be made aware of its size, as it will allow them to focus on narrowing down the list instead of wasting time browsing an overly broad scope]
The List continues…..
NEW FILTER/SORTING EXPERIENCE
Mobile Viewport
Desktop Viewport
Read the Case Study 
Хабр
