Case study: UX & UI redesign of the Checkout page for an e-commerce site
OVERVIEW
For my first UI/UX interview ever, I was given a take-home assignment. This was done to gauge my skills and give them an idea of how I approached UI/UX.
For the take-home assignment, I had to re-design the web checkout page/s for the e-commerce site that they were working on at that time. The checkout page was previously designed by their in-house designer but the client wasn’t very sure about it.
Thus, to start with the project, firstly I asked for the original design made by their designer. I studied it thoroughly and then asked the designer about what were the things that the client wasn’t happy with regarding the design that he had made.
Thus, from the information shared by the in-house designer about the client’s response to his design, I got to figure out the pain points and the priorities of the client.
Client’s Pain Points:
- The cart looked really crowded with a lot of information spread out within a small space.
- The payment methods weren’t displayed properly.
- The design looked monotonous with only texts and buttons. It had no spark.
- There was no navigation to navigate the path. It didn’t give out where the user was in the check-out process.
- Selecting the address and contact number was confusing.
- The design wasn’t eye-catchy.
Client’s Priorities:
- To have a functional yet visually pleasing design for the checkout.
- Have illustrations or imagery to make the process of checkout less monotonous.
THE OLD DESIGN OF THE CHECKOUT PAGE
So after reading the design thoroughly and getting to the client’s pain points and priorities, I realized that having a design with little illustrations would do the magic for the client as his biggest concerns were mainly related to the design and design alone.
INFORMATION ARCHITECTURE
I had few ideas about what changes I wanted to bring to the existing designs. So I roughly jotted them down on my dairy and then made a user flow map to get me started with the design process.
Making the user flow chart helped me get a wider knowledge of the checkout process of the site.
WIREFRAMES
After I had gained a clearer idea about the user flow process, I started making rough sketches in my dairy for various pages and then hopped onto XD to convert my lo-fi wireframe sketching into hi-fi digital wireframes to get a clear view of the design.
FINAL DESIGN
The cart
I added the select product in the list which would help the user to select only the items that he/she wanted to buy at the moment and leave the rest for some other time.
I placed the remove link under the product name to make more room for other details of the products.
I also added the 'Add more items' link and placed it under the list as in the old design it had a 'Continue' button which was confusing for the user to whether continue shopping or continue with the checkout process.
Other changes were made to the side bill card. I removed the 'Add voucher’ text box and button and added a link instead to make the design look cleaner. I also put a checkout button underneath the bill card which was clear enough for the user to know that the button would direct them to the next checkout page.
Select Shipping, Billing, And Contact Page:
On this page, I did a lot of design changes. I made a navigation map at the top of the page which showed at what step of the checkout process the user was in and how many more were remaining.
I also made sure to add the selected list of items on the left side with the edit option available. It would help the user go and add or remove the number of selected items from the cart.
Next and the most important thing that I did was adding the illustrations to eradicate the monotony of the old design and making it more eye-catchy.
‘Add another address/contact’ and ‘show more address/contact’ features were added to the design to make it easier for the user.
Preferred Date/Time Selection Page:
I found this page to be something new which other e-commerce sites available in Nepal don’t usually have. The users of this site can select their preferred date and time of delivery along with their instructions for the delivery process. This checkout step is an optional one so the user can either make the selections and hit ‘Proceed’ to continue further or simply skip the step.
Select Payment Method Page:
On this page, I kept everything similar to the ‘select address/contact page and added a card illustration, various payment methods at the top, and card details from beside the illustration. This page would be the default page for the payment method step and the users can either type in their card details and proceed to payment or simply choose from the other available payment methods which would direct them to their respective pages to help you make payment and in case of COD, it would confirm the order successfully automatically.
Payment Successful/Failed Page:
The next pages I designed were the payment successful page and the payment failed page. I made their design similar with few differences such as for payment success, all the checkout steps at the top would have the greenish color with a Check illustration at the middle of the page with payment successful message and a button to continue shopping which would direct you to the homepage of the site and for the payment failed page (in case of failed card payment), I made the checkout steps at the top disabled and put a broken card illustration at the middle of the page with a failed payment message and a button to redirect the user to the payment method selection page.
Take Away:
I learned a lot of things from this assignment. They were:
- Sometimes having all the required features only is not enough. Having some fun elements, illustrations, imageries, etc could give life to the design.
- Keeping the design clean and simple can help enhance the design a lot.
Note: After I handed over the design to the company for review, they shared them with the client and he loved it so much that he asked the company to use the new design for the further development and also asked to make changes to other pages of the site as per this new design made by me.
Thus, I was hired as an intern by the company. My internship period lasted for about 3 months during which I got the opportunity of designing the whole e-commerce mobile app including the delivery app from scratch. I will be sharing the mobile app designs and their case study once we are done launching the app.
I won’t be able to share it publicly anytime soon as it is still in the development/testing phase.
My social links:
