For every 1000 users that visited the landing page via different customer acquisition and marketing channels, only 70% landed on the guest checkout, a few started the checkout process. We realized we were losing more than 90% of our traffic.
I started with user-testing to find out the problem. After conducting adhoc user-testing, I found a technical issue that the auto-fill turned off. So, to stop bleeding customers, as a temporary solution, I asked the engineers to turn auto-fill off.
To solve these problems, I wanted to start small. I decided to go with an MVP first and then later keep adding more features. The biggest problem was the time taken by the users to fill the checkout form and the fact that they were not able to track the orders.
We only had a guest checkout form at this point and in order to have users information saved, account creation was necessary. I went ahead with a basic form and added account creation even after some conflicting research insights about account creation.
Later, I added more things like tracking information and a dashboard to view all active and past orders.
I also conducted user testing and then did some iterations which finally improved the results and users loved the final version.
Considering the conflicting research insights, I decided to go for auto account creation with a checkbox on the guest checkout.
Single-sign on to consider privacy concerns and for a faster checkout.
One of the customer complaints was to see clear order tracking and be able to track the items at all stages.
This order tracking screen covers all the stages clothing items go through after an order is placed and also covers the logistics tracking link that will help the users track orders in real-time.
I wanted to make the form smaller to save peoples time as that was the biggest issue and to solve that, I decided to go with the one page checkout form.
All the details are in one place and it will make it faster for the users to place orders.
I also tried the fancy card layout for selecting the payment method that will guide the users more faster into understanding the form expectations.
7 out of 11 users were tapping on the screen more than once to check the form placeholder. Considering this is not a usual form users don't know what to expect and need to see the labels clearly.
8 out of 11 users were not sure about what was expected in the field. To solve this problem, I decided to give example within the placeholder and make it easy for the users.
Most of the users felt that the one page checkout was overwhelming and were confused. All of the users thought that the payment method card was not selected.
The screens on the right are simple and user-friendly. There is only one thing to do at a time which did not seem overwhelming. I added a progress bar as well to guide them into how much more to expect.
The final solution is a seamless checkout flow that shows one thing at a time and is comfortable to look at.
It has a lean progress bar which is not too much but also visible and gives assurance to the users about the % of form filled.
At the end, I wanted to give a way to review the form and make any last-minute changes if necessary.
After payment, there is way to track the order and go back to the dashboard where the users can track all the active and past orders.
What you've seen so far is just a glimpse. I've documented the entire process, from identifying key challenges to implementing innovative solutions. If you're interested in exploring further, feel free to connect with me via email or LinkedIn. I will be happy to set up some time for us to chat. Looking forward to connecting!
