UX research
UX Design
CLOmetry
Streamlining Pattern-Making in CLO 3D with AI-Powered Tool Guidance and Error Reduction
What is clo 3D
Streamlining Pattern-Making in CLO 3D with AI-Powered Tool Guidance and Error Reduction
This project explores the impact of CLO 3D software on the efficiency and accuracy of beginners during the pattern-making process. Through qualitative surveys, the study investigates how users interact with CLO 3D tools, particularly in creating essential pattern details. The research aims to assess whether CLO 3D can streamline the learning curve and enhance proficiency compared to traditional methods.
Project Brief
Who Uses CLO 3D
Traditional vs Digital PatternMaking
Understanding Users Through Scenarios and Empathy Mapping
Key Findings
USER TESTS AND PROTOTYPE
INTRODUCTION
RESEARCH
Pattern Makers
Fashion Designers
Brands and Manufactures
Student and Educators
They are many Key Differences
Traditional pattern-making ensures basics like seam allowances and notches are rarely missed, as the process is manual and thorough. In digital pattern-making, however, users often rely on software, leading to errors such as forgetting seam allowances (30%) or notches (25%)
DOES
SAYS
FEELS
THINKS
Users feel unsupported and frustrated when stuck.
Learning CLO 3D is hard, leading to frequent errors and low confidence.
So many icons for undo and redo 90% of the users don't know function of it
The software has numerous tools, making it difficult to find what you need. Most tools are located on the right and provide a manual, but clicking on it redirects you to an external webpage.
Prototype Flow 1- To find the chatbot
Prototype Flow 2
Final Prototype
Key insights of the Testing
Only 1 out of 8 users found the feature easy to locate in the chatbox.
The AI chatbot was integrated under the existing Help section in CLO 3D, leveraging the familiarity of the Q&A tab to make it easier for users to locate and access the chatbot
Additional chatbot features include the ability to start a new chat and access conversation history to revisit previous discussions.
Only 1 out of 8 users found the feature easy to locate in the chatbox.
The icon was positioned on the floating toolbar within the pattern-making section.
The chatbox icon was positioned within the tools section of CLO 3D.
Only 6 out of 8 users found the feature easy to locate in the chatbox.
Improved Flow 3 for identifying the chatbot icon
Confusion about Chatbot Functionality
Color Differentiation issues in conversation
New Chat
New Chat
History
CLO AI
Ask CLO AI Chatbot
To add darts in CLO3D, you can follow these steps:
1. Using the Menu:
- Go to the Main Menu, select 2D Pattern, and then choose Create Dart or use the Dart option from the 2D Toolbar.
- Click and drag within the pattern to create a dart, or click once within the pattern to open the Create Dart window.
- Enter the desired values for the dart's width and height.
2. Using Right-Click:
- Right-click on the point where you want to create a dart and select Add Dart.
- The Dart option window will appear where you can set the total width, dart arm width, and length of the dart.
Make sure to adjust the properties as needed before finalizing the dart creation.
How to add darts
New Chat
New Chat
History
CLO AI
Ask CLO AI Chatbot
To add darts in CLO3D, you can follow these steps:
1. Using the Menu:
- Go to the Main Menu, select 2D Pattern, and then choose Create Dart or use the Dart option from the 2D Toolbar.
- Click and drag within the pattern to create a dart, or click once within the pattern to open the Create Dart window.
- Enter the desired values for the dart's width and height.
2. Using Right-Click:
- Right-click on the point where you want to create a dart and select Add Dart.
- The Dart option window will appear where you can set the total width, dart arm width, and length of the dart.
Make sure to adjust the properties as needed before finalizing the dart creation.
How to add darts
Learn the Tool with AI
New Chat
New Chat
History
CLO AI
Ask CLO AI Chatbot
Welcome! Let's get started with your task. 🎉
Follow the instructions carefully, and the tool you will be useing will be highlighted to guide you through the process.
As you complete each step, you'll see a ✔️ tick mark indicating that the step is done. This way, you’ll not only complete your task but also gain a better understanding of how the tool works.
Let’s Start
New Chat
New Chat
History
CLO AI
Ask CLO AI Chatbot
To add darts in CLO3D, you can follow these steps:
Using the Menu:
- Go to the Main Menu, select 2D Pattern, and then choose Create Dart or use the Dart option from the 2D Toolbar.
- Click and drag within the pattern to create a dart, or click once within the pattern to open the Create Dart window.
- Enter the desired values for the dart's width and height.
2. Using Right-Click:
- Right-click on the point where you want to create a dart and select Add Dart.
- The Dart option window will appear where you can set the total width, dart arm width, and length of the dart.
New Chat
New Chat
History
CLO AI
Ask CLO AI Chatbot
To add darts in CLO3D, you can follow these steps:
Using the Menu:
- Go to the Main Menu, select 2D Pattern, and then choose Create Dart or use the Dart option from the 2D Toolbar.
- Click and drag within the pattern to create a dart, or click once within the pattern to open the Create Dart window.
- Enter the desired values for the dart's width and height.
2. Using Right-Click:
- Right-click on the point where you want to create a dart and select Add Dart.
- The Dart option window will appear where you can set the total width, dart arm width, and length of the dart.
Its Done
Research
Prototyping
User Testing
Error Prevention
AI Integration
CLO 3D is a digital tool for creating and visualizing clothing designs. It helps designers make patterns, simulate fabrics, and see how garments fit on 3D models
CLO 3D is powerful, but there's a lot to learn before you can use it effectively.
The 3D simulation is amazing—it lets me see my designs come to life.
It’s confusing to figure out what connects to what when creating patterns.
I wish there was a better way to learn how to use all the tools.
spend a lot of time trying to figure things out or undoing mistakes
Am I doing this right? Did I miss any steps, like adding seam allowances or notches?
There’s got to be a faster way to connect these pattern pieces.
I don’t want to waste time undoing all my work—how can I make fewer mistakes?
What do these colors on the seams mean? Am I sewing them together correctly?
This tool looks interesting, but what exactly does it do?
The user frequently tests new tools through trial and error, using the undo function to correct mistakes.
Regularly looks for tutorials, YouTube videos, or online forums to understand specific tools or techniques within CLO 3D.
Uses the 3D simulation feature regularly to see how the garment fits on the avatar and to catch issues early on.
Sketches out patterns on paper before digitizing them in CLO 3D, to have a visual guide during the creation process.
Spends significant time fixing issues or refining garment details (e.g., resizing, adding seam allowances, or fabric properties).
Frustrated when struggling with complex interfaces or missing steps during pattern creation.
Anxious about making errors that could lead to lost progress or incorrect patterns.
Confident and Excited when visualizing their designs on the 3D avatar, especially when things work out well.
Curious and Determined to learn more and explore new features within the software.
Overwhelmed by the learning curve, particularly at the start, when there are many tools and functions to understand.
Beginners struggle to navigate the software, leading to frequent mistakes like forgetting seam allowances or notches. These gaps disrupt their workflow and hinder learning.
UX CASE STUDY
New Chat
New Chat
History
CLO AI
Ask CLO AI Chatbot
To add darts in CLO3D, you can follow these steps:
1. Using the Menu:
- Go to the Main Menu, select 2D Pattern, and then choose Create Dart or use the Dart option from the 2D Toolbar.
- Click and drag within the pattern to create a dart, or click once within the pattern to open the Create Dart window.
- Enter the desired values for the dart's width and height.
2. Using Right-Click:
- Right-click on the point where you want to create a dart and select Add Dart.
- The Dart option window will appear where you can set the total width, dart arm width, and length of the dart.
Make sure to adjust the properties as needed before finalizing the dart creation.
How to add darts
CLOAI
Users found the updated color scheme engaging and enjoyable
All 8 participants were able to complete their tasks using the chatbot
High Satisfaction with the ✔️ Check Option
Task Completion
Positive Feedback on Colors
Understanding Chatbot Functionality
This thesis aimed to enhance the usability of CLO 3D for beginners by integrating an AI chatbot and implementing error prevention mechanisms. Through iterative prototyping, user testing, and data analysis, the study provided valuable insights into how these features improve the user experience and learning curve.