Leflair Account 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 in the process of killing sign up the wall and redesigning some flows. The account page was complicated and I saw the customer's struggle when I checked Hotjar video recordings. In addition, it was decided to unload our customer service department by implementing a return feature right into our website and to add email preferences.
First I had to understand why users need the account page, what do they expect from it, where do they struggle and how we can implement new features.
Based on the current design, I developed a few simple tasks, such as:
change shipping address or password
check past orders' details, etc
Users either failed these tasks or it took them a lot of time to complete.
To implement the new return feature I had to talk to customer service and interviewed users, watched dozens of Hotjar records and viewed other e-commerce websites. We did a big work with the customer service department trying to understand how people return, reasons to return, how to organize the pickup process, what problems users and customer service departments have.
Define pain points
Ideate & Create
After research, analysis, and collection of all information and customer feedback, I defined which section we will show on the account page. Redesign of Settings, Addresses and Cards sections was not a difficult task. The biggest challenge was to implement the return feature.
I had to think how to show user when one of the items she bought in multiple order is not eligible to return, how to display this page on mobile and desktop, whether to display return process as one page or separate all steps and it is kind of tricky moment as you want to make return process easy but not super easy.
Also, the challenges were to organize pickup process (stakeholders considered only this option as Vietnamese post service is not reliable as UPS), should we allow users to enter other addresses different from the original shipping address, how to organize our pick up service, how to encourage to refund to Leflair account and not to credit card, etc.
After reviewing the issues surrounding the account page, I created lo-fi mockups to encapsulate the solutions, tested them with users, workers, friends. I received some good insights, discussed some points with stakeholders and incorporated everything into the final design.
Prototype and Validate
To validate my redesigns, I asked 6 users with the same tasks as in the beginning. I also included new tasks regarding new features, such as:
return one item from multiple order
return the whole order and request other pickup address
change email preferences to get newsletters once a week
add and delete new shipping addresses/cards
change primary address
Using my interactive Invision prototype, users were able to complete old and new tasks without the pain points.
Bringing it all into Development
As we moved on to our development phases, the design tasks didn’t end as it was also my responsibility to make sure everything was clear. Specifications, Invision Inspect or Zeplin plus a lot of collaborative discussions with developers help us to be on the same page during the whole development cycle.
Before and After for desktop and mobile web Account page