© 2019 Kateryna Leaver 

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. 

Usability Testing

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. 

1. Define pain-points.jpg

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.

2. Lo-Fi mockups.jpg

Lo-fi sketching

3. Hi-Fi mockups.jpg

Hi-fi mockups

6. Return flow.jpg

Return flow

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

  • sort orders

 

Using my interactive Invision prototype, users were able to complete old and new tasks without the pain points.

7. Prototype.jpg

Prototyping

8. User testing.jpg

User testing

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.

9. Development.jpg

Development

4. Before and After Orders.jpg
5. Before and After My account.jpg

Before and After for desktop and mobile web Account page