WHERE I WORK
CAT: 3D Cloth Authoring Tool for FXMirror
A computer program for creating 3D clothes for the virtual fitting solution, CAT needed a design system with a style guide.
Cloth Authoring Tool (CAT) is a computer program for creating 3D clothes based on just front and back photos of an item within five to ten minutes. It delivers photo-realistic results capturing the correct look and feel of the original garments.
The 3D clothes produced by CAT are used for the integrated 3D virtual fitting service with FIT’N SHOP, a mobile application for users to put clothes virtually on a 3D avatar and purchase, and FXMirror, the 3D virtual fitting kiosk. When I joined the design team, the application did not have a design system, which had made it ineffective to work with other departments in the company. In addition, as new features were being added constantly, the design team needed to have a strong and consistent style guide so that new functions and screens could be added with a consistent graphic style.
WHAT I DID
I set up the design system for the app and created a huge library of icons and custom cursors for the app’s unique functions.
I proposed to establish a design system with strong design concepts and crafted 60% of the screens of the entire product, ensuring consistent designs. I also created custom icons and cursors unique to this product in adjusting and authoring 3D clothes. I have compiled the design system with icons and cursors as reference documents for developers so they can refer correct design elements from the beginning of future development.
I chose a dark theme to allow more focus on the authoring work, with simple and clean design and a toned-down accent color.
I focused on creating a simple and efficient workplace for those who will use this program to create the 3D version of their brand’s clothing. Darker colored theme with a simple design will serve as the palette. In addition, as the authoring work follows a set of procedures, I re-arranged the overall interface more streamlined for the sequential process. I added a slightly toned-down turquoise color for accent. It is prominent yet not eye-soring so that users can easily identify key buttons.
A gallery of icons for adjusting all the details of different clothes
It was necessary for the program to provide adjustment for all the small details of clothes to author the 3D clothes perfectly render as the real clothes. I created 54 icons for the clothing categories -- from t-shirts to down jacket with hoodie-- and 2,500 icons for adjusting different details of 3D clothes.
Choose Product to Author
The first step of CAT is to select a product to author. CAT connects to a server and shows a list of products ready for 3D clothing conversion.
Select Input Images
Browse the photo library and find photos of the product you chose. Load the pictures of each of the front and backside accordingly.
Choose Clothing Category
Select an appropriate category for the selected item.
Edit Feature Points
Move and adjust feature points at the main screen, referring to the graphic guidance on the left side of the window. The graphic guidance is automatically loaded according to the selected category for front and back.
Check the Result & Fine-tune
In the final step, preview the result of 3D conversion and check the final look with 360-degree rotation. At this stage, you can fine-tune each detail by adjusting slide bar controls on the right.