Categories

Intermediary Category Navigation Experience

Few words about iPrice

iPrice is one of the most ambitious and rapidly-growing Kuala Lumpur-based online shopping startups in the 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 the 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 mentioning, 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 its monthly organic traffic compare to all other price comparison giants in the region.
UX speaking wise, it is a very user-diversified application. From one side it looks like the application is designed for Asian mentality, but from other side, southeast Asia Region is a region of a serious nationalities contrast. Obviously, it requires careful behavioral study of each country representatives. And that is the beauty of my work in iPrice.

About the Project

This Project was focused on the redesign of intermediary category navigation bar 👉 category carousel.
The main challenge was about to free up the ATF (above the fold content area) for narrow (320px – 360px) screens to be able to tease the 1st raw of products for users on arrival. GA (Google Analytics) showed, that traffic from such devices is still quite high.

Problem and hypothesis: Since the release of AMP PLP (AMP compatible product landing pages), we observed a CTR drop of approximate 5-10% as well as increase in BR. With AMP technology we aimed to gain more traffic on our PLPs, since AMP seriously influences Google ranking factor.
The reason wasn’t explicit.
We wanted to test our hypothesis, that the category carousel takes too much space and pushes the products down on small screens, so users are not seeing the product list on arrival.  

The category carousel takes too much space on 320px screen devices. We still believe the CTR can be improved by screen real estate optimisation and category card transformation.

Challenge: The category carousel had to be transformed in a way, that it doesn’t require so much vertical space. 

With the category card revision the requirements were:
– to remain or increase the interaction frequency of the category carousel component;
– to decrease time before 1st interaction (attention, intuitiveness, attraction, high readability & accessibility)

Category Carousel – Old Interface

Required improvements:
– Frame of the card is barely visible. Make the card more prominent;
– Optimise and fulfil the white space;
– Category name should garner user’s focus and avoid ambiguity to lower the risk of misinterpretation;
– Horizontal swiping is not explicit, therefore not intuitive from the 1st look. Make it clear for the user.

New Interface – Category Carousel as 😜 bubble buttons

dsc_1360