Abstract: The proliferation of e-tailoring concept has recently provided opportunities for tailors globally to be within reached by customers to make orders from the comfort of their home. However, most existing e-tailoring websites only provide customers a selection of available designs and to some extent allow them to choose their preferred colours and materials. Customers are not given the opportunity to create their own design or style online. In this study, a design framework of a 2-D semantic tool and system architecture for the development of an online design tool to allow user to personalize their garment style is presented. The prototype system which is based on a design of Malay traditional costumes incorporates the semantic concept to ease the design process for all types of users. The creation of such tool on e-tailor websites may increase customers’ satisfaction. Future work may extend the tool functionalities to include costing elements and to expand the design elements sets database.
INTRODUCTION
Finding a well-fitting and an apparel style to match personal preference is not easy for most customers. Ready-made clothes are usually fixed in sizes and most often there is a mismatch of material, colour, style and price for an individual. Different types of material (e.g. cotton, satin, silk) and different designs (e.g. plain, floral, abstract pattern) on the material increase the choice and make it difficult to create a single garment to appease an individual preference and liking. Thus, most choose to visit tailors to have their garment custom-designed. Unfortunately, most well-known or good tailors are often not located within reach. Recently, with the advent of internet business (Robert, 2003) and the emergence of e-tailoring concepts tailors become more easily accessible to remote customers. However, most existing apparel websites offer ready-made clothes; very few offer the online shoppers to custom-designed their apparel. According to Kartsounis et al. (2009), customization refers to a wide range of personalized services, mass customization and made-to-measure. Personalized services includes selection of fabric colour, fabric type and accessories while made to measure is tailor made garment to suit specific customer requirement and preferences (Chen et al., 2008; Zhang et al., 2010).
Most custom design concept for online apparel shops focused on sizing or fitting problem whereby a selection of available company’s designs or style for the customers has already been given. Some online stores provide users choice of fabric or materials or colours. Based on the literature review, none of the online apparel store has offered user to freely design his or her apparel interactively. Not all the designs provided are to the customer’s liking or preference. For example, some consumers would like to create a completely different style; others may just want to have some changes to existing designs such as different collar styles or neckline, accessories. Allowing the user to personalize his garment style online could be one way to increase customers’ satisfaction and to increase customers flow to these online stores.
In this study, an online design tool to help consumers to custom-design traditional Malay costumes is proposed. Considering the wide range of online users, the tool is based on a simple, intuitive interface with semantic concept build in to further ease the user’s design process.
Thus, our research motivations are three-fold:
| • | A personalized garment design framework based on individual style is presented to address the issue of mass customization which lacks personal touch in creativity in the apparel industry |
| • | A semantic garment design framework is proposed to facilitate the ease of design for all users |
| • | The preservation of Malay traditional costumes such as ‘Baju Kebaya/Baju Kurung’ using the e-tailoring website could be sustained |
RELATED WORK
E-tailoring is an emerging concept which takes advantage of the recent development in IT technologies into apparel industries and tailors (Fontana et al., 2005; Xiu-jin et al., 2007). Recent initiatives evolve around the customization and new generation of online apparel shopping with aims towards tackling sizing problem, fitting problem, high cost, data privacy and lack of interfaces (Kartsounis et al., 2009; Lawler et al., 2007; Lawler and Joseph, 2006; Drogan and Hsu, 2003). Customization is necessary as such a service element could create an enhanced experience of the customer; hence, obtaining their loyalty to the products offered (Pullman and Gross, 2004) besides improving the efficiency of mass customization in the apparel industry (Satam et al., 2011). E-TAILOR, a European Union funded project is one such initiative. The e-tailoring concept basically utilizes the IT technologies to perform the tailor manual task of measurement through the use of computerized body scanning and automatic measurement. In addition, customers could visualize how they look with selected design through virtual try-on facilities (Meng et al., 2010). Virtual try-on offers online customers to visualize themselves or a model matching their body measurement wearing simulated garments which is currently a static simulation. Whilst these are interesting and innovative development of e-tailoring concept, however, it entails the design of complex software algorithm and involves costly hardware facilities (e.g., for body scanning). Early efforts at using computers to assist in the design of garments were based on mathematical representations of the patterns to simulate realistic fit and drape (Hinds and McCartney, 1990). Due to the complexity of the mathematical model and algorithm, in this paper a simple online flash-based design tool was proposed.
A review of some of the existing popular apparel websites (Converse, CG Customized Girl, Dogan Custom Clothing, Land’s End, MY Tailorstore.com, The Versaces) reveals, many offer customization in terms of sizing, choices of available designs, colours and materials and even virtual try on. A KnitSketch tool with a sketching interface (Ma et al., 2011) has been deployed to draw outlines of different parts of knitting garment. To some extent, these offer online customers personal design preferences and close to fitting if not perfect fitting garment. None of these, however, provide users a sketchpad with design tool to freely design their preferred style of Malay traditional costumes.
Semantic concept has been successfully applied in designing a series of practical design tool for the users (Holzschlag, 2005). The IST programmed-funded SpacemantiX project entitled “Combining Spatial and Semantic Information in Product Data (Malkewitz, 2005) which motivates current work is one such example. The project delivered a series of pilot tool for use in mechanical and automotive engineering, interior design and architecture and toy manufacturing. This project demonstrates that innovative 3D design using semantic information could be used to overcome many drawbacks of existing computer-aided design tools. The use of semantic concept (Sanatnama and Brahimi, 2010; Bachir et al., 2011) as well as spatial information which automatically defines for the users what components can be placed where, how they will interact and how overall designs should be configured, helps make the design processes easier for all level of users. For example, in the interior design planning pilot project, each furniture object has defined roles. Users just need to drag and drop the objects onto the design and the objects will arrange themselves automatically based on their semantic and spatial properties. With regards to abstract target measures such as consistency, style, safety and use of resources (money, space and environment), all objects arrange themselves automatically in the best possible way. The semantic technique ensures that everything knows where it is supposed to belong in the design thus letting users focus on the design work. (In this way, more designs can be completed in a shorter period of time and this could result in an increase of user’s work efficiency. The results of two tests carried out by the project revealed that designers using this tool completed their design 20 to 25 % faster than using traditional CAD tools.
MATERIALS AND METHODS
The use of spatial and semantic information in the design process (Malkewitz, 2005) motivates the current work; particularly is applicable toward the creation of an online garment design tool for e-tailoring. In our current work, the semantic concept was incorporated into the 2-D design garment tool to create a simple tool to ease the design process to target a wider range of online customers.
| Fig. 1: | Design framework for 2D design tool |
Basically, the semantic concept implemented in current project is also similar to the design concept of numerous children’s online games, particularly those games that allows users to create or decorate their favourite objects or environments by choosing from a selection of related items. A common example among girls is dress up, make up or decorates their favourite character game (girlsgogame, dressupgirl, girlgames4u). Customarily in this game, the user can either drag the item such as hat, shirt, or shoes to effect the change or click on these items and the items will automatically arranged themselves on the character. The current project is based on the later approach to further ease the designing process on user’s part.
There are numerous types and classes of garments available locally and worldwide. Whilst some are common to most cultures and countries, for example shirts and pants, others are country and culture specific such as traditional costumes. As such, creating a generic tool to cater for all garment types may results in a large and complex system, not suitable for online deployment. The framework proposed in this paper is not an attempt to provide a design framework to cater for all garments types; instead the design framework of a basic tool which could be incrementally upgraded based on garment type requirement is presented. Figure 1 illustrates the proposed design framework which could provide the basis for the design of the tool.
Framework components: There are three main components of the design framework: tasks, design stage and databases. Each of these components is described further in the following paragraphs.
Tasks: This component refers to actions that can be executed by the user offered by the tool. Two main activities: create design and save design. Create design is a set of tasks that can be performed by user to yield the required output that is their own personalized designed garment. Task activities includes makes design tasks such as making selection of items from available menu , adding or deleting objects (garments parts) on the sketchpad. Users have the option to view their design at any time. View options available are front view, back view for each garment piece (top or bottom). Basically, user can save and resume with their design at any time through the save design task. Once a design is completed, user may proceed to Body Measurement and Order Design page. Body measurement and order design are not part of the design tool. However, it is included as part of the user tasks as both actions are necessary for user to proceed with the purchase of the garments.
Design stage: This stage provides users with a design space or sketchpad for creating their personalized garments. The semantic concept which automatically tells the user what garment parts can be placed where, was applied during designing process. For example, each garment part has it defined role and position. Users just need to click or drag and drop the objects onto the design space and the objects will arrange themselves automatically based on their semantic and spatial properties.
| Fig. 2: | System architecture |
It is expected that this will ease the design process for all level of users. As mentioned earlier, the semantic technique allows users to users focus on the design work by ensuring that everything knows where it is supposed to belong in the design.
Databases: Provide the data needed by the user to design their garments. This includes storage for user profiles and their designs and the different types of garments offered by the online store. Each type of garment will include different type of garment styles and their respective garment parts. Thus, the size of the database depends on the types and styles offered by each online store.
System architecture: The architecture of this system comprises of a front end PC, a server (could be the same PC as the front end PC) connected by a local host and two main databases (Fig. 2).
The Front End PC and the server can be located in the same workstation connected by a local host. Two types of databases which reside on the server are used to store the data as input and storage for the system application. The first database provides storage for customer’s data which comprises of personal information such as measurement, purchases and billing information. This database is connected to PHP and HTML sites of the system. The second type of database stores different types of garments design parts (in picture format) and acts as a data source for the 2-D design tool application.
RESULTS AND DISCUSSION
Descriptions of prototype tool: A prototype system based on the design of a traditional Malay garment was developed to illustrate the concept of the design tool. The garments, generally known as ‘Baju Kurung’ and ‘Baju Kebaya’ are usually worn by the Malay females not only for special or formal occasion but also as part of their daily costumes. Depending on the localities, there are numerous variations of ‘Baju Kurung’ or ‘Kebaya’ in terms of styles and designs, choices of colours, materials, types of accessories used for garment decorations (e.g. beads, embroidery, laces), whereby a large number of unique garments styles could be created. Despite all these variations, the styles may not match some customers’ personal likings or preferences. This led to many customers paying visits to tailors to have their garment custom-made. Most often professional or well-known tailors are not available to remote customers. Thus, the development of an easy to online design tool to make personalized made to order design could offer an effective way to address this problem especially for distant users. Moreover, online shopping provides users convenient shopping, with just a few mouse clicks from the comfort of their home. Ease of use and low learning curve are the main considerations in designing the tool. A complex and difficult to use system may lead to premature leaving of potential buying customers. As such, several design issues were taken into consideration when designing the tool interface. These include simplicity, visually enriched elements, click and drop and drop down menu. The semantic concept is integrated with the click and drop options to further ease the garment design process especially for novice users. Users does not have to worry about placement of garments parts as these items will automatically and semantically arrange themselves at the designated or correct positions.
The developed 2-D Semantic design tool is hosted in a website accessible via the “create your design” tab located under the navigation menu of the main page.
| Fig. 3: | Design stage for the create menu |
The design tool is a flash movie file created using Macromedia Flash. The completed movie files are uploaded in PHP files to make it accessible to Internet users. However, the screenshots were previewed using Flash player.
The design tool page comprises of a sketchpad called “design stage” and a style menu. Figure 3 illustrates the design stage of the application. On this page, users can choose to either proceed with their design or take body measurement.
The design stage is a drawing board where user’s selections will be automatically and semantically placed, whilst the style menu is a list of choices of design styles. Current implementation does not allow user to add to the list of design style; future work may allow user to upload her personal design style.
Current implementation of the tool is database specific, that is, the design style depends on the database of images provided. For the current pilot case study, a database of parts of Malay traditional costumes was created. There are two components to a female Malay traditional garment, the top part or blouse and the bottom part or the long skirt.
To proceed, user needs to decide on which to design first: the blouse or the skirt. After making a selection the user is ready to create her design. For example, if the user chooses to custom design the front and the back styles of the blouse, the design stage for the blouse is presented (Fig. 3). To ease the design process, both the selected front and back style can be previewed on the design stage. Each design can be created from a different combination of body, neck/collar or sleeve style for the front and back style. Choices will be immediately displayed on the design stage when a user places a mouse over a part style. A double clicked will confirm user’s choice.
| Fig. 4: | Body style menu |
| Fig. 5: | Neck style menu, zoom function is illustrated |
To ease viewing, the menu is graphically represented. Figures 4-6 illustrate the images of the body, sleeve and neck styles respectively. For each style, an icon located at the top right hand corner of the image is provided to allow users a close-up or an enlarge view of the styles (Fig. 5).
| Fig. 6: | Sleeve style menu |
By clicking on a selection, the 2D tool allows the respective part of the garment to semantically arrange itself at the correct position. For example, when a user selected neck style, the respective neck or collar style will immediately be placed at the neck part of the blouse. Similarly, if a sleeve style is selected, both sleeves arrange themselves at the sleeve position. Thus, user does not have to drag and position these images at the designated location which can be very challenging especially for a novice computer user. Aligning objects in most CAD systems would take more clicks compared to the automatic placement concept in semantic based design tools (Malkewitz, 2005; Wang et al., 2009, 2012; Kolli and Boufaida, 2011); thus, can be frustrating to some users. Thus for semantic based design tool, the implication here is less clicks means user could focus more on the design of products and design time can be substantially reduced.
Any changes or undo can be done quickly and easily with this tool. If a user decides upon a different part style, the user just needs to click on the selected style and the required changes would be immediately reflected on the design stage. Thus, no screen refresh is required for any modification to take effect. The overall design flow for the tool is summarized and illustrated in Fig. 7.
After completing a design, users are guided through the next step under the “Measurement” tab (Fig. 8) in order to provide their body measurement, that is, prior to making an order. Here, step by step instructions are given to ensure correct measurements are given for a perfect or close to perfect fitting garment order. A mouse over to the number on the body figure picture will highlight the respective instruction on how to make a specific measurement (Fig. 8b). Upon completion of this page, user could either choose to save the design or proceed to make an order or logout from the system.
| Fig. 7: | Design flow summary |
| Fig. 8(a-b): | Measurement tab page |
For registered users, they could review or make changes to their design on their next visits.
Similar to other existing systems, customers are able to personalize the garment design based on sizes, colors and fabrics by using our tool. In contrast to other tools, our tool allows customers to create their own preferred garment design or style using a sketchpad embedded in the tool. The sketchpad comprises of various garment parts such as sleeve, collars, cuffs and skirts which the customers can select individually and design according to personal preferences. To ease the design process, a database of individual garment parts for each garment style is provided. In addition, customers could choose from a collection of respective types of garment parts (e.g. round neckline type, v-neckline type for neckline part).
Tool design and implementation issues: The heavy use of graphic images could be a problem to customers with slow internet connection. Initially, the decision was to create a 3D design tool; however, considering the bandwidth issue, a 2-D design tool was developed instead. The main challenge is to present realistic images at acceptable transfer rate.
Creating garments parts and integrating with the system to ensure a match and perfect fit poses another challenging task. Preparation of the different pattern designs itself is very time consuming. Sketching the pattern parts requires some skill especially when drawing with a mouse. Creating the animation for automated placement of pattern at correct location is another important design task. Upon a mouse click, these patterns should semantically assemble themselves correctly on the design stage. Positioning problem and matching sizes of each pattern parts require careful coordination between pattern sketching and animation creation which could translate to an arduous task when the database of style size increases.
The current prototype design is database dependence. Based on the database of garment patterns created, the developed design tool is for creating traditional Malay garment. Thus, new databases of other types of clothing could be created based on needs and requirements.
A suitable choice of program and file types to create the tool is necessary to cater for a wide range of users with different type of internet connection. In this project, Macromedia Flash 8 was employed as a development tool for the 2-D design tool application while Adobe Photoshop CS2 and Adobe Illustrator S2 were used to create design interfaces and garments parts. Flash 8 which enables ease of creation of simple to complex interactive, is widely used tool whereby many usability standards and have been developed and adapted. Besides loading much faster, Flash 8 is vector based. This means vector art could be scaled up without losing detail or quality. Development tool for the website and the databases design includes HTML and PHP MySQL.
Conclusion and future work: Ready-made apparel style and design especially for online virtual store often does not match customers’ personal liking and preference. Allowing users to freely design their preferred design style may increase customers’ satisfaction and the website conversion rate. In this work, we propose an easy to use online 2-D design tool to allow user to create freely their preferred style of Malay traditional costumes. The incorporation of the semantic concept in the tool design which provides assisted placement of parts of selected garments helps to ease the design process for all types of users particularly in lowering the learning curve for using it.
At present, the tool only offer user with choices of different parts of the garment created by the designer. For greater flexibility, the tool could be extended to offer user to design each individual part of a garment and upload it to the database. User could be allowed to select fabric and view the complete design on her virtual image. A Malay costume is often decorated with beautifully embroidery designs and colourful beads at the different parts of the garment. The different styles of embroideries and colourful beads design can be offered as choices for user to personalize their garment decoration. To help user make better choice based on their budget requirement, in addition to overall pricing, a costing element for each individual item or design selected could be added. Other interesting features to embed in the tool is to provide more personalized service such as those offered in brick and mortar store through the use of direct interaction with tailors (e.g. chatting) and the use of an intelligent video spoke person, to guide novice users. Future work would include formal usability assessment of the tool to guide further improvement.
ACKNOWLEDGMENTS
The study is partially supported by Fundamental Research Grant Scheme (FRGS). We wish to express sincere thanks and gratitude to the Department of Computer and Information Science of Universiti Teknologi PETRONAS for providing the environment, lab and supporting tools in which this work has been made possible. Without that support we would not have been able to achieve the result presented herein.