iPrice Product Listing — UI/UX Case Study of list item experience
This is an in-depth UX case study describing the design and thinking process we went through while building a better Product Listing Experience in iPrice.
Along the way, you will be presented with the UX techniques and research methods we applied as a team, our reasoning and thoughts behind the decisions we made, and some upstream and downstream challenges we faced.
We all know, that the real process of solving problems is never straightforward, opposite, it is always somewhat meandering and special, like getting outside of a maze. Everyone challenges things differently to find an escape route, results are based on decisions we made.
It is a time to walk you through our unique story of finding the way out from the maze we’ve been challenged with.
Let me start from a little bit afar…
It is a well-known fact, that nowadays Online shopping became an essential part of everyday life for the majority of people. I would say, it is one of a daily routine habit. 👇
Frankly speaking, I am not that type of user, who buys things online with that high frequency or on everyday basis. Opposite, I more likely fall under those audience who love reading physical books, touching cloth’s fabric when looking for a dress and trying/testing mobile gadgets before making my choice.
Of course, I buy online, don’t take me wrong 😏, I am not that old-fashion thinker. Tough, my style of life doesn’t envisage online shopping as an everyday activity, I am also not a deals/promotions hunger.
But, who knows? Maybe I am too deliberate, maybe I don’t like buying a “pig in a poke”, probably I don’t want a deal that looks great to fall short of what has been advertised, maybe I just don’t have enough patience or real-touch experience is the key for me. There could be some reasons for everyone, right?
Why I am telling this story is because…
2,5 years ago, I would not expect, that by a ploy of a fate, I will get a chance to take the role of being a Product Designer in a backstage life of one of the most ambitious and rapidly-growing Kuala Lumpur-based online shopping startups in SEA region.
This startup is aimed to be developed exactly for the need of e-shopping driven customers.
iPrice is not just e-commerce marketplace, it is online shopping aggregator, which operates in 7 Asian countries: Malaysia, Indonesia, Philippines, Vietnam, Hong Kong, Singapore and Thailand.
The company’s mission is to enable everyone in SEA to shop online, compare prices and enjoy impartial product information through 200-million catalog aggregator platform.
“ In the next few years, online shopping will become part of everyday life for everyone in Southeast Asia.
Since more and more users gravitate towards e-commerce, shoppers will look for an easy and comprehensive solutions to help them find what they want faster. iPrice vision is to be one stop shopping destination having consolidated millions of products and promotions from leading local and international online shops into a single discovery engine, ” said iPrice group CEO David Chmelař.
E-commerce is a huge sector, where UX has its own subtler specific path.
And I can proudly say, I’ve gained a lot of valuable knowledge by crossing over this UX path, daringly facing new challenges, solving users problems and balancing business and users needs.
I accepted the challenge and asked myself: “What should I change in iPrice product experience, so it can become a place where person like me will willing to browse for a product?”
Few words about iPrice…
iPrice is a critical and highly-consumed web application (~10 M monthly users, around 14 M monthly sessions including all 7 countries).
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 a very user-diversified web application.
From one side it looks like an online marketplace, which is designed particularly for Asians mentality, their style of life, preferences and behavioural habits, but from another side, South East Asia Region is a region of a serious nationality contrast. All 7 countries have their certain individual specifics. Obviously, it requires careful behavioural study of each country representatives. And that is a beauty of my work in iPrice.
About the Project
During the process of Illuminating the most crucial aspects of paving Product Listing Pages, I couldn’t avoid speaking and brainstorming about a list items experience.
Since list item experience could be easily translated as a product card experience, let’s use the term “Product Card”.
I started elaborating the topic since joined iPrice. The main focus was on Filtering/Sorting Components at that time. Though, I knew, that there is a very strong interconnection between both, filters & product cards (including the layout structure). My goal was to balance the blanket. ))
The 1st study (related to product card experience) I’ve done, was vastly based on Baymard’s e-commerce usability research. This book helped me to not reinvent a wheel in the beginning. THANKS to one of my favourite & greatest mentors — Heinrich Wendel (iPrice Co-Founder & CTO), who slipped the book copy in my hands and suggested to study it at a 1st place.
Importance of the product card 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.
Project timeline:
Product card took strong company’s focus and priority starting from September 2018 and the process still goes onwards.
Being a lead product designer and initiator of this topic, I realised, as much deeper I was diving in, as much more clear I was getting— the project is more challenging than it actually seemed to be at the beginning. A lot of hidden interconnections reveals during the process and a lot of dependency chains we had to overcome to reach the goals. Biases were inevitable.
But learnings are worth all the efforts!
Roles I assumed during the process:
🙋User Researcher
🙋UX Designer
🙋UI Designer
🙋Midi PM
People involved:
☝️Product Owner
☝️Product Designer
☝️Lead of BI (Business Intelligence)
☝️Categorisation Team
☝️Chief Technology Officer, 3 Lead Developers, 1 UX engineer and 1 Junior Developer
☝️Head of Research & Content Strategy
☝️X~ Active internal volunteers (in total)
☝️Y~ Active external customers (Malaysia, Indonesia)
Upstream Challenges (Strategy/Concept)
Under Upstream I more likely mean the challenges with the WHAT and WHY, defining the direction, prioritising work and delivering value. It is all about to ensure, that the business boat navigates safely, by following the correctly set up (and…being easy adjustable) passage planning based on current period of time with less loss and valuable impacts.
⚠️ Startup was STRONGLY Traffic-&-CTR/CR-oriented in the beginning.
At the time I joined, iPrice seemed to be more like a Transit Zone for the end-user, because the main focus laid down on gaining the organic traffic.
It means, users could easily get in, as well as easy get off without even memorising our product and it’s benefits.
Company have not yet paid much attention and allocate serious efforts to retain the user, UX wasn’t a focal point.
And slowly the customer engagement engine started getting warm ⚡☄🚀️.
It took some time to make company opt to take a user-centred approach and focus on design activities in order to achieve a better user experience (UX) for it’s products.
Therefore, there were no clearly established quantitative metrics to track the success of the product usability and user experience or general engagement level with the web site. The most crucial was to move a little bit away from the only one key, but biased determinant, which was CTR.
⚠️ Value Propositions were not explicitly verbalised, so everyone were interpreting it differently. This fact scattered the prioritisation course at the beginning.
⚠️ AMP limitations on using javascript disallowed us from exploring exciting platforms, like Optimizely (for A/B testing), so that is why at a certain period of time POs were obsessed with the idea to build our own framework for Quantitative experiments. Therefore, quantitative approach took over Qualitative at a certain stage. Of course, it ate significant time, budget and resources.
Such approach slowed everything down and let us mired in scrupulous testing/analyses instead of promptly solving bigger problems through simple qualitative techniques. Users’ feedback is usually enough to highlight the most important issues that need fixing first. It is just a matter of recurring validation of design iterations with them.
This simple phrase explains all what happened at this specific stage:
“ The chances of getting ‘real lift’ is as good as flipping a coin and expecting ‘head’. The worse part is, it takes one month to flip the coin.”
⚠️ Strong ambitions with less time investment from the management side.
“Doing Agile” is not equal to “Being Agile”.
Since I am not allowed to share much information pertaining to the organisation model, I will try to give you a short, but meaningful overview of this certain challenge from my own perspective.
VP PO was passionate to work effectively by implementing Agile across the company and making the transformation in a teams mindset. That was the point where we introduced “Streams”, something similar to “Squads” in Spotify. My Stream was called “Engagement Value Stream”. By the way, it is worth to mention, that this change was a good impulse to leverage the Agile philosophy in general.
But….., scaling Agile is a very unique process for every organisation and it needs to be done carefully. We all know, Agile is not a specific methodology or a set of rules. It is an umbrella embracing a certain mindset/way of thinking, values, and principles.
Meanwhile, this transformation is also appeared as some sort of a rub for the Product Development cycle.
The management pushed too much for the ability for a team to self-organize around the goals it has been given. Team wasn’t ready and expectations were quite high.
I do believe, if the development team is Agile, but the management isn’t ready to invest time and effort in daily communication and regular feedback, then this approach is useless. In fact, those in the organization responsible for initiating a Scrum project should expend a lot of effort in selecting the individuals who will comprise the team, shuffle them smartly.
In its turn, POs must invest time to influence team composition at the beginning to be able to see every single team player strengths and let them shine. In the end of the day, it helps to avoid a vicious cycle of misunderstanding and won’t let it to be ended up on blaming team members as underperformers.
Design Challenges & Limitations — Downstream
The appropriate layout is the core of a good product list design.
Getting the product list view correct is therefore a key part of crafting a good list layout experience. In it’s turn, the experience should provide an effortless understanding and easy evaluation of user’s current product scope.
It should enable users to seamlessly navigate and compare between the products. Layout is the groundwork 👉 Challenge 1.
The product card itself is a balancing act. On the one hand, there should be sufficient information available about the product to help the user evaluate whether it is of relevance to them or not. On the other hand, there shouldn’t be so much information that the user is unable to get an overview of the products available to them, or finds it difficult to compare the items they’ve deemed relevant. Content and IA 👉 Challenge 2.
Design Challenge 1 — The Layout:
As I’ve already mentioned above, the backbone of a great product browsing and scanning experience is a well-designed list layout. It groups and showcases decision-making elements. A Layout choice depends on some of the factors like: the purpose of the page, category specifics, type and amount of necessary content to display, device size and so on…..
The 1st challenge was about to research and find out the right layout approach we have to apply for Desktop as well as for Mobile viewports.
There were a lot of ☝️circumstances and some sort of ⚠️ critical limitations we had to face and consider before building a layout ground.
Here are they:
☝️Due to Desktop Filters transpose (aiming for their higher visibility, they were moved from left side navigation to top), the layout on Desktop devices got the opportunity to be refined. Take a glimpse to the image below 👇.
With the new layout we were able to free up the screen real estate and let users see more products per row by filling in filter space with an extra product card.
The research has been conducted to explore the best layout options for the Desktop Viewports:
⚠️ Limitation: At the same period of time company aimed for AMP compatibility, which highlighted some amount of serious constrains (CSS, Java Script, HTML) within which we suppose to play with the UI/UX.
Ex.: Even being responsive meant we had to ensure all page components are easily transformable within viewports and share one code base, not really having much difference in blocks/elements arrangement, placement, style, structure, behaviour. All to avoid overriding or adding additional code.
It is not an easy constrain, because it is a fact, users stick to “slightly” different browsing experience depending on the device and it’s screen real estate;
The real challenge came when we took “mobile-first” experience as a priority and when desktop and mobile layouts started to have completely different look and feel. It is not an easy job to maintain both within the confines of AMP framework.
👇 Here is an example of Desktop/Mobile product card design and it’s layout.
On the left side is Mobile Product Card with 1 product per row/list layout and on the right side is Desktop Product Card with scaling from 3 to 5 cards per row grid layout.
Our engineering magicians did their great job to keep adapting the code for both (Desktop & Mobile) along the way without serious affection of html and css size (again AMP requirements), but it wasn’t an easy job ⚓️⚓️⚓️.
Frankly speaking, this approach affected the efficiency and speed of our product iterative design and development process.
Why? Because, always when mobile version was about to change, designers and developers used to have quite long debates about how we could make those mobile related refinements happen without serious desktop product card re-touch.
The problem was that the company didn’t have a willingness to unify the product card across all devices based on mobile concept at the beginning (it wasn’t a priority, because the value is not instant, it is indirect, and more performance related) 👉 however, I bet, it could be much easier to modify and manage desktop and mobile uniqueness looking forward, if desktop would be based on mobile pre-templated component from the beginning, inheriting the same code. Such approach would lead to lower discrepancy. Hopefully you understand my point. ))
In the end of the day, PO has set a priority to find an optimal solution for mobile viewport first (since our traffic is mostly mobile-generated) and only after switch and re-alter the desktop design.
☝️We were considering applying various layouts on mobile depending on category (Fashion, Electronics) and it’s purposes. After user studies we found different user’s expectations for both business units.
This brought a lot of complexity and some sort of inconsistency in the beginning too.
Downstream Execution: 1st Round of collaborative Product Card Research
Define users problems and key pain points
UX department has organised a collaborative Field Research Activity (team went to the Mall) to explore bottlenecks which are commonly experienced by external volunteers (potential customers).
To keep whole team thinking user-centred, we managed to involve various experts in this explorative research (PMs, Developers, POs, Marketers, BI), because we do believe diversity of perspectives are incredibly important.
Research Focus
We aimed to observe user expectations (where they encounter experience confusion) from our current Product Card (Mobile First | Fashion + Electronics categories). This research was about to establish the most critical user problems the next product card face should solve to meet the need of its users. Purpose was to highlight the experience gaps to understand where to direct our next design effort.
Research Methodology
🤓 Methods: User interviews and guided usability test
🤓 City: Kuala Lumpur
🤓 Venue: Mid Valley Mall
🤓 Volunteers: 16 people in total
🤓 Age: 18–35
🤓 Gender: 7 Men & 9 Women
🤓 Race: 8 Malaysian Chinese, 6 Malays, 2 Singaporean Chinese
Subsequent Action Plan & Priority List
UX team organised the session where we involved everyone who participated in the research activity in order to synthesize the collected data, given during the interviews to find commonalities, create themes/patterns, make assumptions and develop clear insights.
Based on findings from the field research activity, we were able to make recommendations to our Product Owner.
Clear user’s insights always help PO to have a justified priority.
Together we jotted down the strategy of how we would want to approach an existing experience gray areas/gaps (UI, user journey, content and IA).
The great thing is that we all understood, that this is a topic that is going to affect Traffic, Engagement, and Monetization.
We’ve got a head-start on grooming redesigning Product Cards for both Electronics and Fashion. 🚀🚀🚀
Examples of Some Key Findings:
We’ve gained much more valuable insights, but I am not going to share all here, otherwise this case study will become more academical 🤓🤓🤓.
You can take a glimpse on some key findings below:
💣 “Users are not aware of the merchant, who actually sells a displayed recommended deal until card is clicked and users are redirected to the merchant website. At this stage, this feedback is critical and mostly related to non-comparable product cards (such cards don’t have their own product detailed page). Relevant to Electronics as well as Fashion.”
Let me walk you though the flow, so you could comprehend this user problem in detail:
Step 1 — Google Search: For instance, if user is searching for “Best gaming consoles prices in Malaysia”, most probably he/she will land on our page, since we are obtaining a high-ranking placement in the search results page of a search engine. Look at that beautiful AMP lightning indicator from the right side 💪💪💪 .
Step 2 — iPrice Product Listing Page: Once landed, user starts scanning all the products. User selects the product and clicks on it.
Step 3 — Redirection Page: 😇😇😇 😳😳😳 😠😠😠
Step 4 — Merchant Website:
In this examples, users has been redirected to Lazada Store for gaming consoles and Shopee Store for boots.
Conclusion: In terms of experience, redirection is unexpected sudden action.
It is unintended. Users are not aware what is behind the click, they are not informed upfront. It doesn’t cultivate users’ trust. However, we all know, that trust facilitates co-operation. Users also like to have feeling of control and existing experience doesn’t make our visitors feel safe. Instead of forcing them to do things they’re not ready for, we have to let them know how awesome and comfortable their life would be if they become a regular. In our case, by showcasing the diversity of merchants will only facilitate us in delivering a clear benefit to the user — “we provide deals from various stores, save your time and find what you are looking for”;
💣 “When users click on our product, it triggers a new tab with merchant website/app. Since most of the time it is unintended action, they used to click back without closing just recently opened tab.
There could be so many tabs to be opened on their mobile browser, which easily make our users feel overwhelmed, indecisive and confused.”
💣 “There is no clear CTAs for the non-comparable items. Doesn’t let us to stick to user’s expectations. We are not just e-commerce, we are price comparison, we used to address users to merchant’s web platforms, but it is not explicit for the user in the beginning of the journey.”
💣 “Discounted items are not eye catching, especially for the Fashion products.
There is no clear differentiation between discounted and non-discounted ones. Only label and cross price are giving a hint.”
For these 2 above insights, take a glimpse to the screenshot below 🌅👇.
💣 “Some users commented, that it requires so much efforts (back and forth actions, redundant clicks) to investigate an essential information about the cheapest/recommended deal we promote for comparable product cards and it’s relevant details (such as seller name and rating, reviews, specifications, merchant info). It is not explicit at a first glance (relevant to Electronics) and doesn’t facilitate to fast decision-making process. They have to go to product detailed page and return back if characteristics/specs are not meeting their criteria of satisfaction.”
💣 “Some users mentioned, product card doesn’t have visual frame/back plate, which doesn’t support their speedy browsing experience. It is lowering scanability.”
💣 “With certain electronics items users experience some sort of visual inconvenience, since CTA partly overlays the image.“
Take a glimpse to the screenshot below 🌅👇.
💣 “When users are speed scanning/scrolling through listings pages on iPrice as a first time visitor and just looking at the colour of the buttons, they likely read it like this (where a red X is “out of stock” or “unavailable”).”
💣 “Users are confused with the variety of product cards (mostly related to electronics categories on mobile viewport).
For instance, product card with 1 offer left doesn’t have any clear CTA and users are not able to predict what is behind the click (by clicking on the card, users experience redirection to the Merchant web site without expecting it at all), on the other hand, comparable product card has “compare prices” CTA (by clicking on it, users are redirected to the product detailed page). It brings inconsistency in look and feel + we are not addressing user’s expectations in their expected manner.”
Take a glimpse to the screenshot below 🌅👇.
💣 “Some users prefer nice and bigger image because they judge the products only by looking at the image (Fashion).”
💣 “Users mention, that there should be a microcopy to emphasise original products, official store, free shipping, etc. Such information seemed important to users, especially for Fashion related items.”
💣 To be continued…
The mission statement after Research Round 1 was to:
👉User-centric perspective
💡Bring the mobile non-comparable & comparable cards to a consistent design;
💡 Experiment to showcase merchant logos on listing pages to better stick to user’s expectations (Fashion & Electronics);
💡Showcase information that helps the user better evaluate and compare the product cards (Treat Fashion & Electronics individually);
💡Make “Compare Prices” as a secondary CTA for comparable products;
💡Carefully provide user with the option to choose favourable journey: “Go to PDP” (Secondary CTA) or “Go to the Merchant website” (Primary CTA). Relevant for comparable items only;
💡Utilise internal A/B framework to full-fill the most urgent experience gaps and for validation;
👉Business perspective
💡Increase CTR (CTR as our key metric);
💡Establish a link between every new feature and experiments to conversion (impact of key product releases on CTR/CR);
💡Decrease BR;
Downstream Execution Roadblocks
I will provide only one critical roadblock as an example here:
🛎 To bring non-comparable and comparable cards to some level of consistency, we had to play around with CTAs and linking structure.
We realised, that Desktop Hover Effect Removal needed to be accomplished first before applying serious mobile product card refinements.
Desktop hover effect (displaying top merchants) was not supporting the customer experience the way we expected. Users were not really clicking on those top merchants (GA data proven). In it’s turn, mobile product card linking couldn’t be modified until desktop hover effect is removed (due to AMP limitations and shared code base).
On the other hand, we couldn’t make the final call to remove it until being sure it doesn’t affect the ranking factor (SEO) as well as CTR. Now you understand what I meant, when I was telling you about the “dependency chains” and “hidden pitfalls” in the beginning of the article;
What we managed to achieve after the 1st Research Round
Team has done tones of experiments as well as straightforward explicit design refinements to solve above mentioned user problems:
Here are some of the changes we did:
👉 Introduced clear “Go to shop” CTA for 1 offer/non-comparable cards for the user experience transparency.
👉 In order to get rid of ambiguity, the “Go to Shop” CTA has been renamed to “Go to Store”. All to set the right expectations.
👉 Desktop hover effect removal has been purposefully tested on Electronics Audio Hi-Fi and Computing categories. We managed to verify, that there were no any serious deviations in ranking as well as in CTR. During the experiment CTR on desktop looked to be in line with it’s trend and the mobile CTR.
So, hover effect has been removed.
👉 After hover effect removal, product card got new look and feel.
Such revamp facilitated us with new card linking structure (Primary and Secondary CTAs). We made an introduction of primary CTA to merchant (“Go to Store”) and minor secondary CTA to the PDP (“Compare Prices in X Stores”), added a wrapper around the product card.
The main change is that by clicking on the product card itself (for comparable/non-comparable), the user is forwarded to the cheapest offer directly. At the same time, we provide a user with an option to go to the product detailed page.
👉 All Electronics Product Card Types got certain level of consistency.
👉 We’ve conducted the experiment of adding Merchant indication (for the cheapest offer) on the bottom of Mobile Product Cards to increase user’s awareness and facilitate user in decision making process. It helps to set the right expectation of what is behind the click.
We’ve run multiple design variations across all countries, carefully selecting urls with high traffic;
After this experiment, we decided to implement the variant with merchant logo and “Go to Store” CTA across all fashion related product landing pages, since the results showed quite reasonable leap in unique as well as gross CTRs, positive increment has been detected almost in all countries.
As for electronics, experiment didn’t help to detect any winner at that time.
We decided to postpone the implementation and continued deeper analysis regarding merchant logo indication on electronics product card. We were looking for other factors, such as a correlation between merchant diversity and CTR.
👉 Made discounted deals to stand out through the minor cosmetics changes, such as price style difference (discounted vs non-discounted items) for Fashion product cards;
👉 List vs grid layout. We’ve conducted “one product per row” experiment on electronics and made a decision to revamp the product card layout.
With it’s implementation we expected least amount of risk in terms of negative metrics deviation and assumed, that new layout could open up new perspectives to experiment further to put more beneficial content for the user.
List layout could also fit more deals ATF and product image size is not that essential compare to Fashion items;
Example of the 1st iteration with the new layout👇
👉 We’ve tested and found, that discount percentage should be placed next to a crossed price. We observed, that it helps the user to assimilate information with less eyes effort. One point of eyes fixation.
Product Card Iterations + Experiments & a lot a lot more:
Challenge 2 — Product Card IA:
Well-known, good content is the key.
The 2d challenge deals with what information/content to include and how it can be structured the best in a certain type of the product card (Electronics and Fashion) to strike that balance between providing sufficient information about each product without inundating the user with information overload.
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.
To learn about what information influences users to make better decisions we conducted a lot of internal/external user interviews, A/B experiments and organised various field research activities.
The main challenge was to positively target all 7 markets with the main focus on non-english speaking countries, such as ID (Indonesia), VN (Vietnam), TH (Thailand) and ensure the strategy we are going to come up with is going to work out as for fashion as well as for electronics categories.
Downstream Execution: 2d Round of collaborative Product Card Research
Explore further potential improvements for the Product Card
UX team took initiative to conduct another explorative usability testing in the Mall. The whole team was divided into groups, each group had it’s dedicated UX designer as their guide and main facilitator.
The intention: We wanted to check user’s impressions after passing through so many design quantitative experiments and iterations.
Our PO realised, that split tests brought us to the circular endless run. These tests were not able to answer our questions and help to move ahead with faster and accurate decisions. 👉 All is because we were not testing user behaviour frequently, but more testing own assumptions about what work or does not work on the website. Quantitative over qualitative.
Research Focus
This time, focus was only on Mobile Electronics Product Card and it’s progress.
There were three topics that we aimed to explore in this usability testing:
🔦 Do people understand about iPrice value proposition?
🔦 What are users expectation when they click on the main/primary CTA?
🔦 What are users expectation when they click on secondary CTA, and is it visually comprehensive and appealing enough?
Research Methodology
🤓 Methods: User interviews and guided usability test
🤓 City: Kuala Lumpur
🤓 Venue: Mid Valley Mall
🤓 Volunteers: 12 people in total
🤓 Age: 18–25
🤓 Gender: 5 Men & 7 Women
🤓 Race: 9 Malaysian Chinese, 3 Malays
Debrief from Findings of the User Study
The Team concluded, that two major problems must be solved next:
1. Users don’t understand that iPrice is price aggregator/price comparison;
2. Users get frustrated with the user journey, because they don’t differentiate our 2 call to actions 👉 primary and secondary CTAs.
We jotted down following action plan/to do’s:
☝️Conduct competitive analysis to see how other price aggregators work with their product card on PLPs;
☝️Analyse if the journey from PLP to PDP can become a primary option;
☝️Ensure our CTAs (primary and secondary) are verbally clear for the user = Microcopy workout;
☝️Ensure our CTAs are enough visible = Accessibility workout (readability/legibility/colour/placement);
☝️Ensure we show the right amount & kind of Information (explore and validate through user interviews) = Content workout (merchant, number of deals, seller name, seller rating, characteristics, …);
☝️Clearly think-through all touch targets areas, make them explicit and clear to the user, avoid ambiguity and suddenness.
The mission statement after Research Round 2:
👉User-centric perspective
💡Showcase information that helps the user better evaluate and compare the product cards (Treat Fashion & Electronics individually);
💡Let users perceive iPrice as a price comparison website (deliver the value proposition by showing the right amount & kind of Information);
💡Validate, that our established iPrice’s user value proposition is clear and strong to the user;
💡Carefully provide user with the option to choose favourable journey: “Go to PDP”(Secondary CTA) or “Go to the Merchant website” (Primary CTA);
💡Visualise and verbalise distinction of 2 main actions (primary & secondary CTAs);
👉Business perspective
💡Introduce a new “Engagement Time” Metric;
💡Increase the engagement time (time interacting with the web site);
💡Decrease BR;
💡Focus on retention and direct traffic.
What we managed to achieve after the 2d Research Round
Since our product development approach has been readjusted towards frequent qualitative research activities (internal & external), our iterative design/development and the most important LEARNING cycle became deft.
Continuous user’s feedback helped us to re-iterate and validate the solutions really rapidly and learn what implementations work and which one’s don’t. We aimed to release MVPs frequently by adding small, but meaningful and valuable increments to each product peace.
The Skeleton (the optimisation of element’s placement and arrangement for maximum effect and efficiency) and Surface (visual design and accessibility) seriously evolved during this time.
We passed through a lot of iterations and refinements, let me mention just some of them:
👉 Replaced signifier with the clear primary CTA;
👉 Changed the colour of primary CTA;
👉 Displayed the merchant name for promoted/recommended deal 👉 One of the main factors users were not treating iPrice as price comparison platform. Currently users are able to observe the diversity of merchants right on the product listing. We decided to not overanalyze it, since it is obvious benefit for the user and we were going in the right direction here by making our value proposition (compare prices from different merchants) clear to the user;
👉 Combined primary and secondary CTAs in one block;
👉 Showcased key product specifications right below the product title;
👉 Introduced dropdown menu (mini PDP) with alternative deals and their merchants.
Take a glimpse of how product card has evolved:
Visit iprice.my if you are interested in the progress of our product listing experience…
Demystifying My Design Process
The Outcome
Bringing the team along for the ride: Culture of including whole teams in user research
🚀 Evangelized a strong user-centered design culture at iPrice.
More divisions and different professions are welcome to be involved when designing solutions to solve user needs.
Even iPrice top managers were excited to participate in the Guerilla testing in Jakarta and Saigon;
🚀Established collaborative attitude to design and research at iPrice;
- Synthesise isights as a team;
- Set learning goals as a team;
- A regular cadence of research;
The user experience is better when everyone in the team thinks about users.
Our Custom A/B Framework
Taking in account AMP restrictions, established our own A/B testing environment, retaining our tracking capabilities.
Value Proposition
Finally clearly defined and verbalised iPrice’s value proposition. In order to better engage with our user base in 2019 and onwards, we initiated a plan of how to expand and strengthen it.
User Segmentation
Initiated a huge topic of segmenting our visitor base by looking into GA capabilities (tech), observing behaviour from field research(UX), cumulating common observed data trends in the past (BI).
Started deep diving into brainstorming of how we can define and group our “users”.
Customer segmentation involves dividing customers into groups based on similar traits.
Set up KPIs to translate user experience to business goals success
Based on our collective understanding, determined and agreed on the 1st level of “user centeredness” KPIs. We had to ensure UX design decisions are made and evaluated using fair evidence rather than opinions.
Finally, we moved slightly away from only one key determinant, which was CTR to other indicators, such as: Session Duration, Engagement time, percentage of returning visitors (“RV”) over total users, etc.
However, the final UX and Business mission still remain the same — to understand user intent that drives CTR and subsequently conversion. We had to puzzle out the real cadence of CTR/CR, it’s impulse to be able to move the needle.
Systemize Design Operations
Created structured templates and guidelines for various UX research activities to minimise team’s time investment.
User Study Participant Recruitment
Kick started to form:
- the database of customers who willing to participate in user studies;
- the end to end process of participant recruitment to handpick the exact people we need for face to face research, online tasks, surveys and more.
All above to establish a continuous flow of user feedback.
Electronics Product Card
After a switch of the layout structure (from grid to list/one product per row view), product card went through many iterative loops.
With the layout upgrade the product card started its new generation and the evolution process goes onwards.
Summary
Key Takeaways
💡When designing, don’t lose sight of system thinking and the bigger picture.
Easy zoom into the pixel-perfect view and zoom out to the holistic user experience.
Example: When our categorisation team was about to cherry pick the key product specifications to be displayed right on the PLP product card, their team was familiar with only one method of research — the survey.
As a Product Designer I helped them to discover other methods of research to get more accurate results. It is important to find the best method to fit the research question at hand.
Selecting the right research technique allows you to dive deep beneath the surface of what you think your users want, to what they actually need.
Suggestions: Designers, don’t dwell just in your own world, help others to learn how to discover users problems and distill insights.
Try to look at the product from different business angles.
Organise days in your calendar to hang around other teams/departments and investigate where you could elevate your value as a designer and maximise the impact for holistic user experience of your organisation.
💡Users have expectations while interacting with the product. We must listen to them carefully.
💡iPrice organism consists of tones of pieces, each one has it’s level of minutiae. It has it’s own uniqueness and individual characteristics. That is why, every department sees business from different perspective, with certain level of detail and specifics.
As a designer, my takeaway from the studies at iPrice is to enable all teammates understand the user as much as possible. In order to achieve that always involve PMs, Engineers , fellow designers in the design process and organise collaborative research activities. This is tiring but rewarding. It helps to build relationships and stand for one mission to solve existing user problems with less output, but maximum outcome.
💡Don’t be objective measures addicted or business sided, because subjective measures matters a lot too (such as recommendations, usability satisfaction, task success rate factors). If you feel, that product roadmap lost the right focus or it is quantitatively biased, just step out of your office, find people who are at least similar to your target audience, and begin testing! The most important usability problems are easy to spot for people who are new to your product. Take your passionate teammates with you for help and assistance.
When people don’t listen when you advocate for UX, stop advocating for UX. Find the thing that UX does that matters and advocate for that. Assume how the change could affect market fit, or conversion, or word of mouth, or cost, time, etc.
What I would’ve improved (Let’s step back)
💎 Remember: If business desires big and quick gains, always focus on testing users’ behaviour. Only for fine tuning, focus on testing users’ preferences.
Comment:
I would’ve questioned PO obsession to throw product into that endless A/B testing cycle at that period of time.
From my point of view, iPrice has just started out it’s path of optimising the website for real UX based conversions, engagement time, usability, trustworthy user flow, retention.
In the beginning of such path, business will benefit the most from testing users’ behaviour (simple qualitative research methods), it is too early to invest into testing user’s preferences.
Once business has reached the point of diminishing returns from the usability testing efforts and wants to squeeze every last drop of conversion out of landing pages, then it would be a time to go for A/B testing (quantitative research);
💎 Remember: Collaboratively plan for sprint realistic achievements. Don’t go too ambitious, sprint goal should be clear and feasible to be delivered as “done” increment by the end of a Sprint. Team needs to “fish out” the value or learnings from it.
Comment:
I would’ve warmed up rough design ideas earlier with developers to brainstorm about the potential sprint goals in advance.
I would’ve bounced off early ideas on paper with the engineers to successfully narrow down explore-worthy approaches to 1 or 2 good ones and save my time and energy.
The concept of perfection is misleading, as anything can always be improved. It is better to have a product on the market that can be improved, instead of a project that will never be released and finished. Therefore, designers and engineers should work rapidly and iteratively together to test and release any new functionalities as soon as possible.
💎 Remember: I would’ve challenged business more in terms of the explicit value propositions. Since it was a new stage for iPrice to drive the product roadmap by taking the customer-centric approach, it was a time to reveal clear benefits, which could motivate a customer to use it.
Comment:
Value propositions should be defined on earlier stage to really ensure we are “designing the right thing”. It helps to shelf problems that are expensive or too ambitious, and select problems that can create a large impact at a current moment in time (audit the constraints of our business and our developers and timeline). Being conscious of what and why.
What is next?
The Product Card is going to evolve further. The next stage is to add an indication of a seller name and it’s rating score on the card. We are also planning to bring our focus back to fashion product card soon.
Feel free to get in touch: LinkedIn.
