Stylight is an aggregator fashion e-commerce/platform. With technology, reach, data and market knowledge, we help 160m yearly shoppers across 16 countries to get inspired, find all the best deals and compare prices of millions of products across 1,500 retailers & brand shops 50k brands.
Timeline:
Jun 2023 – Dec 2023
Involvement:
UI Design, Prototyping, User Research, Moderated User Interviews, Quantitative Data, Qualitative Data, Google Analytics, Hotjar Heatmapping.
Goal:
To optimize and increase conversion rate with low click-out conversion rate. This also means that the users clicking out to the shop are highly qualified and valuable users (eventually making actual purchase).
Achievements:
Conversion rate: Increased from 2,95% to 7,38%
Pages Per Session (visits): Increased from 2,1 to 3,1
Introduction
The e-commerce industry has steadily been increasing the past decade. It has then boomed circa 2010s alongside with smartphone race when the big players optimized everything within that 5inch viewport. That’s when people realize that convenience is all within reach of the flick of their fingers. As digitization progresses, data have been conveniently tracked and the way we shop has shifted as well. Here’s a table I extracted from Google Analytics showing most popular devices/viewport usages (global) in the period of 2 years (1.1.21 – 31.12.23):
Imagine cramming a whole aisle of retail department into the palm of hand. How do you present and showcase products beautifully and efficiently?
At Stylight, we know that the entry point for majority of our users will land on the Search Results Page (Product Listing Page). So, we understand the importance of information provided in this page should be well-optimized, simple, and sufficient for users to scan to make decision. We wanted to turn clickout into a valuable clickout that converts.
Design Process
So how exactly did we achieve low cocr but high conversion rate? 1 year worth of analytics data found the average time spent by a user in as soon as they land JUST on the search page is approximately 30-32seconds. So it’s only down to what and how we show within these mere seconds. From past focus group studies consisting 1,000 data sample; when it comes to Product Details/Information, we know for the fact that users find value in consuming the following information when making decision (ordered by importance):
• Product image
• Product title/name
• Brand
• Price
• Size
New business requirements also add another factor into user’s key decision making:
• Price Comparison
Bear in mind that the common viewport of Stylight users are on 844 height (referencing the GA result at the very top). While taking into consideration the height of respective smartphone’s system UI (status bar and browser’s bar), the website’s navigation and search bar, we are left with very few real estate left above-the-fold to make sure that users are seeing the relevant results related to their search/filtration during the initial engagement.
Here’s how the old basic product card looks like which clicks out directly to the partner’s shop.
Great, now we have already checked all the boxes for all the utmost important product details users would like to know except for Size and Price Comparison. Stylight’s niche position in the fashion e-commerce is having the ability to compare products across hundreds of partner shops. As an aggregator platform, it’s vital to ensure these data are being used religiously to ensure users can compare the best price possible without bias.
A quick (direct & indirect) competitors analyses allows me to understand the structure and UI behaviour and mechanism behind each design. Here are some great examples I find inspiring:
And here is my take on Stylight’s product card design and its tested variants (as there were multiple sessions of multivariate testing across 2 months before we reached significance.)
You can see how some elements were intently made stood out from the rest of other elements. (God knows how much I disgust them) but hey! Customers are the real bosses here. If it makes them clickout, then it just works (:
There were also a lot of exploration behind prioritization of each product information worth displaying such as size availability, product color variations, various tests of iconography. There were also different interactions and behaviours applied to test the possibilities. The drafts below were a few explorations involving pop-up, tap-to-reveal, and intermediary overlay. This is in consideration with Hick’s Law where user’s subconscious decision in actioning upon an element in the page within the time given.
So, after almost 6 months of further testing with varying traffic distribution to compare with control version (original/off version), we are happy with this version:
Post Launch
The final version has satisfying result of COCR, Conversion Rate that has traded off for the loss compared to original version without the Price Comparison function.
The click distribution of the product card (based on Google Analytics data as of 20.01.2024):
With Hotjar heatmapping, we were also able to gather qualitative data findings to deep dive into users behaviour and action towards the search page:
Afterthought
The learning I took from this is the importance of leveraging between cognitive load and content blindness. Imagine walking and browsing down rows of aisle in the retail departments trying to find something that’s only relevant to you at that point in time. Like maybe there’s a father of 2 just trying to find the 30” skinny jeans he wished he can still fit in (not me). It’s dreading. That’s the beauty of digital window shopping, you can throw your kids to someone else and THEN scroll through your phone.
On a serious note; to conclude, users learning curve to consuming information on a product card should be minimal and down to only what matters to them. Strongly consider their entry and exit journey so you can empathise to solving the problem they have down to the granular level.
Jim's Portfolio 
Leave a Reply