Leflair Sales Page Redesign
Leflair is the first website in Vietnam to provide its access to the world’s best brands, at a fraction of the retail price. Every morning, and for a very limited time, it opens new boutiques filled with selection in women’s & men’s fashion, beauty, home, kids and much more, all guaranteed genuine.
We were on that business stage when the amount of selling items was increasing day after day and it was time to think about our sales page capacity and upgrading our poor filter engine.
Research and User Testing
According to our heatmap, only around 30% of mobile site users scrolled to the end when we had average 60-70 items on sale. On the desktop it was a little bit better, around 50-60% scrolled to the end with the same amount of items per page.
I care about our users, so I put myself in their shoes to understand what they need and what they actually do when using our product.
After-sales page user testing and Hotjar video recordings research, I got several good insights:
filters are confusing
some users open product on the same page and when they come back to the sales page, the navigation and filters were broken and the user had to filter again and scroll to the place they left that page
most of the users prefer to open each product in the new tab and these tabs were not named, so users didn't know what exactly each tab was
it was frustrating (especially on mobile site) to scroll up the bunch of items when they reached the end of the sales page.
And we still had the business task to collect users' emails, so we can communicate with them.
Ideate & Create
After research, analysis, and collection of all information and user's feedback, I defined main pain points and the way how we can solve them:
make 4 columns view in desktop and 2 columns view in mobile versions
redesign filters considering the brand, size, color, gender, category, etc
keep filters and return users to the same spot of the screen if either they reload the page or just visited the product page in the same tab and used the back button
name browser tabs
add "Back to the top" button after a certain amount of scrollings
offer to subscribe not to miss sales when there are sold out items on the sales page
Back to top button
Lo-fi and Hi-fi mockups
After reviewing the issues surrounding the sales page, I created lo-fi mockups to encapsulate the solutions, tested them with users, workers, friends, and family. I received additional insights, discussed some points with stakeholders and developers, and incorporated everything into the final design.
Prototype and Validate
To validate my redesigns, I tested 8 users with the same tasks as in the beginning.
Using my interactive Invision prototype both mobile and desktop versions, users were able to complete all tasks without the pain points.
Sales page before and after redesign
Bringing it all into Development
I shared the room with developers, so during the whole process, I could collaborate with developers, ask them questions. This project was full of questions regarding the filter engine.
Also, we usually invite developers for meetings with stakeholders, so it is easy in the end to bring everything into development in the end.
But as we all know - it is never the end.
Prototype and development