I'm a
Designer
.png){kind=small}
Project
ONE
This is a landed projects when I was a UI/UX designer intern at Farfetch.
POP-UP store: SHUSHU/TONG X Charles & Keith collaboration
.png){kind=small}
This is an online pop-up mini-program developed on WeChat where users can purchase products. Upon completing purchase, they will receive a QR code. Users can then choose any offline store for item pickup by presenting the QR code to store staff.
Background
Goals
The project aimed to merge the unique aesthetics of SHUSHU/TONG with the brand identity of Charles & Keith, creating an innovative and smooth buying experience online. We sought to offer customers a fresh perspective on fashion, combining elements of high-end design with accessibility. As part of the design process, my role was to ensure that the flow is make sense with no logical mistake and the UIs effectively implemented and reflected the essence of both brands while providing a seamless online shopping journey to the POP-UP store.
-
Understanding online buying experience: user preferences & behaviours, informing design decisions to create a tailored user experience.
-
Design user-centred interfaces that prioritise ease of use and intuitive navigation.
-
Creation of QR code pages to facilitate seamless access to additional info of the brand.
-
Product image retouching to ensure high-quality visuals that accurately represent the product.
-
Build design system to facilitate rapid iteration and constantly refine design crafts in a loop.
-
Actively participating in in-house testing to identify and resolve usability issues.
Project Needs
My roles
UI Designer (Intern)
Design tools
XD, Figma
Duration
December 2021
1. Purchase
Order
I was assigned to design the process of items purchasing with the alignment of the established design system. This includes creating interfaces for order confirmation, successful payment, viewing orders, generating pickup QR codes, as well as those purchase failures or timeouts page.
Payment Succesful
If
1.1 Confirm payment
It showcases order details and pickup store location. Two options "Pay" & "Cancel" are located at the bottom of the page.
1.2 Payment successful
By selecting 'pay' button, user will be navigated to this page where the order is now confirmed; They can 'view the order' (right) or 'return to homepage' (left)
1.3 Oder details
By selecting 'view the order' , user will be navigated to this order confirmation page. They can open the QR code by selecting the 'View pickup code' located at the bottom of the page.
1.4 QR code page
A code will be shown. Customer then can present the code to staff for item pick-up.
Problems Occurs
If
1. Order timeouts
This order is canceled due to user timeout without payment.
2. Purchase Failure
This order is cancelled because of insufficient stock or failure to payment.
Scan to Follow Brand Official Account
whether the order is successful or not, the program will politely ask users to scan the QR code to follow their official account.
2. Product
page
This is the preview mode of the product as we aims for users to pre-access product information in advance through the program, while the option to purchase will be updated on the official release day.
2.1 Product details
This is the product page of the shoe Mary Jane. Users can swipe right to view more details of the shoes. They can also scroll down to check information about material uses and styling suggestions. Additionally, the program provides size recommendations to help users solve sizing issues.
Reflection
Area that I wish I can do better when I look back to the designs
The icons appearing on the payment interface should ideally be used for the navigation bar or homepage. They are not appropriately placed in the interface from a UX/UI design guideline.
1. Icon uses
Replace the icons with more appropriate visual indicators; For example, incorporating green tick for successful payment and red crosses for unsuccessful one, providing clear and universally understood feedback to users. This ensures consistency in UI elements and enhances user experience by aligning visual cues with user expectations