- Client
iPrice Group Sdn Bhd
- Services
Design Concept, UX, UI, Research
- Launch project
Read the Case Study 👉 on Medium
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
The focal point of the Project was the product card (list item) experience.
Firstly, we started by thoroughly studying Baymard’s e-commerce usability research and it’s deep benchmarking.
Importance of the component from the UCD approach:
It is well-known, that the purpose of product cards is to allow the user to easily and accurately determine which products to investigate further. Essentially whether a list item’s detailed product page is worth opening or if it should be skipped.
The topic itself may seem like a fairly basic objective, but it is by no means easy to achieve – Baymard’s testing revealed that it requires careful implementation of a wide array of details to get the product card right. This includes both the content available in each list item and how that information is presented along with a number of considerations for its interactive features.
The current state of list items is in fact so poor that even the most basic aspects, such as list item information and design, are in dire straits with significant room for improvement. That is why the consideration of minor aspects here seriously might affect engagement and conversion metrics.
Challenges
👉Challenge 1: Research and find out the right layout approach we have to apply for Desktop as well as for Mobile viewports;
👉Challenge 2: Show the right amount and kind of information. This involves identifying the most vital attributes for each product vertical, making prices clear and comparable, and consistently showcasing information that helps the user better evaluate and compare the product cards;
👉Challenge 3: Arrange hover and hit areas. When multiple distinct hit areas leading to different outcomes, it is important to find a way to clearly visualize and verbalize differentiation of the actions (for instance, when we have primary & secondary CTAs). All is to match user’s expectations.
Specifically for the Desktop viewport, it is also important to reveal additional information on hover, such information should heat up the user’s interest towards the product. When hover areas are implemented inconsistently or against user expectations, users have difficulties predicting the consequence of clicking the various list item elements and may misinterpret their actions.
The mission statement was to (👉 From the user-centric perspective):
💡Showcase information that helps the user better evaluate and compare the product cards;
💡Let users perceive iPrice as a price comparison web platform (deliver the value proposition by showing the right amount & kind of Information);
💡Carefully provide a user with the option to choose a favorable journey: “Go to PDP”(Secondary CTA) or “Go to the Merchant website” (Primary CTA);
💡Find a way to explicitly visualize and verbalize differentiation of 2 main actions (primary & secondary CTAs)
The mission statement was to (👉From the Business perspective):
💡 Increase the engagement time (time interacting with the website)
💡 Decrease BR
💡 Direct Traffic Formation
💡 Higher Retention
TOWARDS THE LIST LAYOUT (Mobile)
Example of the 1st iteration with the new layout👇
We’ve conducted a “one product per row” experiment on electronics and made a decision to revamp the product card layout.
Iterative loops & IA
With the list layout, we’ve gained a promising playground for testing IA of the card, all to communicate the right amount and kind of information. Content should be organized in a way to make it easier for the users to take in and consume.
Iterations (mobile viewport)
The up-to-date result
TESTING AND ARRANGING HOVER AND HIT AREAS
From our observations of how users navigate product listing pages, we found that it’s surprisingly often unclear to the test subjects exactly which elements in a list item can be clicked and what action may result from doing so.
We conducted a series of experiments and organized collaborative researches offsite, user interviews in the Mall. Including whole teams in user research can be an incredible tool to keep whole teams thinking user-centered. And the diversity of perspectives available from developers, PMs and is an incredibly important asset for designers to harness.
We did a lot of enhancements iteratively.
Below you could observe the chain of transformations with the Mobile and Desktop electronics product card 👇
Since drawing up weekly detailed reports, our business intelligence analysts used to work closely with the product team. This collaboration, synchronization is important to accumulate the whole set of changes we apply on each iteration together with the problems we are willing to solve and challenges, roadblocks we are encountering on the way.
To provide you with an example, I’ve zoomed in (from the picture above) and highlighted a certain set of alterations we did with the product card moving forward from the 4th to 5th iteration. Let me briefly demonstrate the impact of the enhancement and its reflection on business drivers, KPIs.
From the above illustration, the electronics comparable card interface was updated and divided into few “solo” sections, one of them is for product details (with product specifications as separate entities) and another one is for the price and CTA. All is to make it easier to consume the information and meet users’ expectations.
This enhancement was advised by:
☝️The fact (from the user study) that users get confused and think that the specs look like buttons. Moreover, they expect a clickable product image would give an opportunity to explore the product look, like zoom in an image, or switch between various thumbnails (visual anchors that users rely on as they scan product lists). Only tapping on “product details”/”more deals” gives a detailed overview of a product, all the rest space on the card (single touch target) triggers the redirection to the merchant (purchase step). The experience of exploring the list item isn’t seamless for the user, the number of unexpected clicks is increasing;
☝️Users are not aware of the ‘specs summary’ tab inside the dropdown (mini-PDP);
☝️PDP link (link to product detailed page) is floating on its own, quite close to the primary CTA.
From the user perspective, the information is allocated quite chaotically across the card, the focus is scattered, touch targets are implicit, and make users rethink or tap on the element which they weren’t intending to tap on.
Let’s observe the impact of the PC on Gross CTR, Conversion Rate, and Engagement Time.
However, the purchase is happening on the merchant side, we are still able to check the Conversion Rate (CR), it is a complementary metric by the way. Hypothetically, with the new enhancement, the quality of clicks to the merchant has been improved with better information consumption, users suppose to buy more, and an increase in CR is expected.
With this enhancement, we observe:
☝️A drop in CTR (to-merchant) and an increase in click per session from PLP to PDP since now users have a bigger click area to go to PDP compare to before where we only had a single link for people to click and go to PDP. But, unfortunately, PDP doesn’t generate high clicks to merchants, therefore it is currently resulting in a decrease in CTR.
So far, overall CTR down 17% (from 42% to 35%), click per session from PLP to PDP up 100% (from 10% to 20%).
We plan to introduce more touch targets, which will trigger the dropdown right on PLP, so the area leading to PDP could decrease. Potentially it could normalize CTR.
Users Clicks
➡️product details section clicks (per session): up 100% (10% to 20%)
➡️price and “Go to Store” or “View Deal” CTA: down 25% (40% to 30%)
➡️more deals dropdown: stable at 0.1%
➡️full specs: down 30% (0.06% to 0.04%)
CR for country X (⚠️not allowed information to share) is 27% up (1.1% to 1.4%) after PC enhancement.
Slight increase in ET(engagement time): +3% (41s to 43s).
👉Decrease in CTR
The product Card’s interface has a direct impact on users’ click behavior. In January, we first introduced the clickable product card allowing users to go to the merchant by clicking anywhere on the card, CTR increased +50%; in June we tried a non-clickable card where only the primary CTA can redirect users to the merchant, CTR decreased -55%.
For this latest enhancement, only half of the card would redirect to the merchant which followed by a -17% CTR drop.
👉Better informativeness and readability, improvement in Engagement Time
Merchant’s logo and information about key specs on the product card, from an end-user perspective, are necessary. By separating those product details from the price and CTA button, our value proposition becomes clearer, users have better information consumption.
We observed an improvement in Engagement Time +3% (people spend more time reading useful information).
👉Improvement in quality of click to merchant and CR
With better information consumption, the quality of clicks to the merchant can be improved, users may not click more than before but when they do click, there is a higher possibility they will end up with a purchase. Hence an increase in CR is observed, +30%.
I am not allowed to share more information pertaining to the product strategy, its road map, and further correlation with the success tracking measures.
It is worth to mention, that by all means all product transformations should resonate with customers and at the same time respond to our business objectives.
RESEARCH METHODS
- Key findings from Field Studies/Field research activities
(Our team used to have offsite user testing, accompanying users when doing tasks. It helped us to dig deeper into a certain research theme, set aside assumptions, bring valuable insights, key findings to the organization, as well as clarity to the reason “why” there is a gap in today’s experience. We learned where they get stuck, why they have problems, how they find workarounds, which things they love, what they ignore, and more) - Competitive analyses
(It helps us to make sure we don’t overlook some good and existing strategies) - Baymard Institute research findings and suggestions
(Collection of Benchmarks specific to your business. Uncovers what designs cause usability issues, how to create “State of the Art” e-commerce experiences, and how your UX performance stacks up against leading e-commerce sites) - Usability testing
(Help you design more focused studies) - Analytics and Impact of each iteration
(Gives quantitative evidence to establish a user problem or improvement rate) - A/B testing
(Usually, after tackling real challenges and making bold moves, we shuffle to it by doing micro-optimizations)
Achieved Result
