© 2019 Kateryna Leaver 

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.

1. Hotjar recordings .jpg

Hotjar recordings

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

7. Back to top, Tab's names.jpg

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.

2. Lo-fi mockups.jpg

Lo-fi mockups

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.

3. Before, Sales page.jpg

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.

8. Sketch.jpg

Sketch

9. Prototype and Development.jpg

Prototype and development