Bewakoof.com
Product Screens
1. Navigation and Side Menu The major change on the website was the whole way of navigation. Earlier the different categories and pages were listed on the top and had a drop down to watch option. This time I decided to shift it to the left along with each subcategory opening to its right with basically 3 sublayers.
2. My Account Page
2. Catergory Page
Instead of most E- commerce websites, we decided to keep the filter on the top as that is probably (for normal users) a one time action and is not so necessary to keep it constant on the left or right.
4. Product Page
Since the design was a full-width responsive website, there was an ample amount of space to show information. Thus our main motive was to implement click optimization. We wanted to give the users a hassle free experience with the least possible purchase time as well as the laziest possible way.Thus, unlike other fashion brand or e-commerce websites, we decided to show all the info regarding the product without hiding them and including an extra click to reveal them.
5. My Cart The Cart page was kept simple and the summary was shown on the right hand side in order to keep things clear and the user could get an overview with an option to moderate his cart contents.
The Checkout process
So this basically explains the experience after you’ve made your cart ready. In other words, the section where you:
Everybody is used to the common UX that is being followed in the market. But we had to improve that as there were better alternatives to it. And that was the greatest challenge. — “To re-invent the wheel.” The problem was, how to make the experience faster than this and to implement what is called — click optimization. The Second issue was about showing all the information throughout the process.
Click optimization is a process to reduce the number of clicks, steps through hover, auto-fill etc. in order to achieve a certain goal in a swifter way. We segregated the solution according to the category of users that were involved. Namely:First-time users By first time users, I mean the case in which there is no prior information stored in the website’s database. As stated earlier, it is very important that we show all the information related to the order as we proceed. As far as the previous website was concerned, there was a small chunk of people whom we could not retain after had their cart ready and they did not complete the whole checkout process. Our goal was to reduce this number. Iterations: Before we finally landed to the final result, we had tried and made a number of iterations and had got it tested by our crew so that we could get an idea of how a new user interacted with the interface and how much time it took to complete a checkout.
Problem with the above product was that, although your cart is partially visible, the main active window where the main process was supposed to take place was getting buried within a lot of cards, and that was not the first thing that would be noticeable to a user as soon as he interacts with it for the first time. In short, we would get lost at the first time, and gradually find his way through the options and then carry on to the next step.
Login Details The first step involved the verification of the id from which the transaction is to be completed so that we can maintain further invoicing and requests through this e-mail.
A major tool that we applied to speed up the process was auto-fill, and that is one of the awesome features that people like a lot. After the person had invested enough time going through his cart, we gave him all the information regarding his purchases, but we skipped the pictures in the left section. We could take this risk, as the products at Bewakoof were unique regarding the uniqueness and could be identified using just their names. But in the final order summary section, we did have the pictures present.
Returning customers
For people who had already done some previous purchases or had their details pre-filled and are logged in via the correct e-mail id, for them, the process becomes really very swift.
We directly skip to the payment section. He is already logged in and the default address associated with the account and the order summary is always visible on the left, all that the person has to do is to select the payment method — fill in the details — and then press 'continue'. So only 3 clicks and… Boom! He is done with the merchant site temporarily and is redirected to the payment gateway.
Address filling
Payment Methods 
The main objective was to keep the focus of the user to the current section so that it does become confusing to him. So every step that the user goes through, that particular section is highlighted through the card shadow and the unfinished sections are kept translucent.
Final Product So here was the final solution that we devised. So instead of a top-down approach we made 4 cards/windows — each dedicated to a specific process.Each completed step was shifted to the left. And there was the main section for all the edits and information feed. The following gif would help you understand the exact procedure.
The design basically is not so important rather than the UX. How swift you can make it and how much audience you can retain through your work. There could be multiple ways to do this, but after slight competitive market product survey and a bit of brain-storming through hand-drawn sketches, you can produce great results.
That's all folks!