E-Shop Gifting Services Project
CITYSUPER LIMITED
LOG-ON is a gadget and lifestyle store under the city’super brand, focusing on providing the best and most comprehensive after-sales service to its customers. While store gift wrapping services have always been available, the eShop did not offer this feature. As the web and UI designer for their eShop, my role in this project was to enhance the existing website interface by adding a gift wrapping service on top.
First, I needed to understand the process of the store gift wrapping service and consider how to digitize it and bring it to the online platform. The basic process involves:
1
Customers selecting their items
2
Choosing a gift box and/or a greeting card
3
Proceeding with payment
I listed out the potential issues that could arise during this process and created a user flow to address them.
After multiple process confirmations with colleagues from marketing, logistics, and the clerical team, I began creating mockups and conducting several rounds of user testing to ensure the functionality would operate smoothly.
Once the layout was finalized, I began developing the responsive layout. And below are the finalized layout:
1 At the check out page, user click the “GIFT WRAPPING SETTING” to start the Gift Hub service.
2 The Gift Hub pop up page will show up.
At the upper part, it includes the service information and instruction in the tab.
And user can start to choose the products for wrapping at the bottom part.
3 After selecting the product, the “NEXT” button shows up and it will go to the next step. If user want to cancel the service or go back to the check out page, he can simply can click the “CANCEL” button.
4 User may choose the desired gift box or card.
5 The detail of gift card and box will show accordingly.
Once user finished the setting, can move on the next step by clicking the “NEXT” button.
If user want to reset the gift setting, he may click the “CLEAR GIFT BOX” button to return the Step 1.
Or user may click “CANCEL” button to return to the check out page.
Once user finished the setting, can move on the next step by clicking the “NEXT” button.
If user want to reset the gift setting, he may click the “CLEAR GIFT BOX” button to return the Step 1.
Or user may click “CANCEL” button to return to the check out page.
6 After finishing the gift wrapping setting, user may fill in the waybill details to proceed the check out.
If there is another product in the cart which user also want to wrap it as a gift, he may click the “ADD YOUR NEXT GIFT BOX” button to repeat the gift wrapping process.
If there is another product in the cart which user also want to wrap it as a gift, he may click the “ADD YOUR NEXT GIFT BOX” button to repeat the gift wrapping process.
7 Once the gift wrapping service is finished, the selected box and card will show on the cart page accordingly.
At the same time, I also designed exclusive gift boxes and greeting cards specifically for the eShop.
