A Systematic Approach to the Development of E-Commerce Sites for Mass Customization Andrea Lombardoni, Moira Norrie, Nadir Weibel, Axel Vogelsang, Mathias Althaus Swiss Federal Institute of Technology Global Information Systems 8092 Z¨urich, Switzerland
[email protected] Abstract E-commerce web sites that sell highly customized products tend to be very complex in terms of the underlying logical model of the customization process. We present a systematic approach to guide the design process of such complex web sites by providing a clear methodology that reduces errors and assists the web architect. We also describe our application that helps web architects go from the definition of the product’s attributes to the generation of the finished web application that sells the product. The approach is presented in terms of a case study involving the development of a web site that sells customizable T-shirts.
1. Introduction Within the business community, the web is seen as an ideal platform for mass customization, which is the production of highly customized products at mass production cost [10]. Through the web, customers can interactively specify their unique requirements and the corresponding product can then be manufactured by automated systems [5]. In the case of Web sites offering mass customization the customer has to navigate sequentially through many different web pages, each of which will define one or more characteristics of the product. The complexity arises from the fact that there are dependencies between the parameters specified at one stage and the choice of parameters at a later stage. The challenge for the information architect is to hide this complexity behind a smooth user experience. Navigating through such a customization process should be a seamless and logic flow without incosistencies or even dead-ends. But how to model such a flow? Traditional tools such as use-case or flow-charts offer a limited support in such an scenario. Our goal is to develop a systematic approach to the design and implementation of web sites that
support mass customization. We started by investigating, as a case study, the process of developing a web site for ordering highly-customized doors. Based on the outcomes of this study, we then developed a general methodology, together with supporting tools, to facilitate the engineering of e-commerce web sites for mass customization. The result of our efforts is a clearly defined process and related tools that extend the toolbox of the information architects and allow them to deal effectively with this particular class of web sites. We start in Section 2 with a discussion of the requirements of e-commerce web sites that support mass customization and an overview of existing solutions to support the development of such sites. Section 3 then presents the formal model that underpins our approach. In Section 4, we provide an overview of our design tool and describe the process of using it to develop a web site. Concluding remarks are given in Section 5.
2. E-Commerce and Mass Customization The best known e-commerce sites sell standard goods with no degree of customization such as CDs, DVDs and books. This kind of e-commerce sites has relatively few types of pages and all these pages are almost fully interconnected, since the user can navigate from one to the other almost freely. The only forced navigations through the system are in the check-out and administration pages. Furthermore, there are almost no dependencies between the pages: What the user selects in one page does not affect the behavior of another page. A representation of the navigation structure of such sites is shown on the left side of Figure 1. In contrast, an e-commerce site that offers mass customization is usually complex in terms of the several types of pages available, the interaction sequence and the dependencies between stages of that sequence. The navigation structure of such a site is shown on the right part of Figure 1. In one case study, two of our students were set the task of designing and implementing an e-commerce web site for a company sell-
ing custom-built doors. This company has a production system that allows every produced door to be fully customized by specifying parameters such as dimensions, materials, locks, edges and peepholes. For every door ordered, up to 150 parameters have to be specified. Further, a user-made choice about one of the parameters can affect the choices available for other parameters. For example wood cannot be selected as a material for a door specified to be fireproof. Building such a complex system without following a well
ally, we wish to have a constraint on the width of the text of the label: it may only be in the range from 5.0 to 20.0 cm. Besides the simple constraints on the attributes (domain and value range), there are also constraints between attributes. We do not allow the color of the label to be the same as the color of the T-shirt. Also, we will assume that our imaginary company does not provide T-shirts of size L and XL for girls.
3. Formal Model Start
Start
End
B r o w s e
End
Checkout
Figure 1. Typical and Complex E-Commerce Navigation Paths.
defined methodology is an error-prone task. Thus we need a methodology that models the interaction of the customer with the system, taking into account the constraints among the attributes of the product. While there have been many systematic approaches proposed for the engineering of web sites in general, relatively little attention has been paid to the specific problem of supporting the development of ecommerce sites for mass customization. One solution proposed by CalicoTech (a company now taken over by PeopleSoft) allowed users to freely select all the parameters for a product in no fixed order and then checked for possible conflicts. Details about CalicoTech’s eSale Suite application are scarce: the company never released any information on the design methodology used. While the case study for a company selling customized doors has been used to establish the requirements for our approach, it is too extensive to be used in the context of this paper. In the remainder of this paper we will therefore use a simpler example to explain both the theoretical model and development process of our approach. We will assume that we want to sell customized T-shirts. Each T-shirt has several attributes: the type (boy or girl), the size (S,M,L,XL), the color (red, green or blue) and an optional label with three attributes (color, width and text). This description already defines some constraints on the domain of the attributes: The type which defines the shape may only be equal to boy or girl. Addition-
In this section, we introduce the formal model on which our approach is based. The model provides a general means of describing complex dynamic web sites, along with user interactions, typical of those required for mass customization. By having a formal and systematic way to represent web pages and the transitions between them, it is possible to make the transition from hand-designed web sites to engineered ones. As with any structured design, this helps to avoid logical errors, that are likely to occur when more than a few pages are to be linked together. While model-based approaches such as WebML [4] are suitable for general web site engineering, we are interested in those for mass customization where the main problem is the modeling of the logical sequence of steps involved in product configuration. Each step involves the specification of one or more parameters and defines a transition between states that represent partial product specifications. We choose to use the algorithmic state machine notation (ASM) to model our system. Its features allow the state machine to be described in a way that is close to the concept of an algorithm. A description of the ASM notation can be found in [7]. Some modifications are needed to use this notation to model a network of web pages. First of all, a system based on our model must support concurrent multiple users. This means that every user must be given a session identifier, and, for every session identifier, we assume the existence of a separate set of registers. A graphical representation of a modified cell can be seen in Figure 2. The Out State generates a form, usually a web page, that asks the user to set an attribute’s value: This is represented by the Print Attributes block. The In State is reached after the user submits the form, and must check for the validity of the user’s input. This is a two step process: In the first step, Domain Check, the domain of the value is checked. The user’s input must respect the definition of the attribute. For example, if an attribute is defined to be an integer number, a string must not be accepted. The second step, Rules Check, is a bit more complex, since it involves checking all the constraints (or rules) that refer to the current attribute. In our T-shirt case, we stated that the XL size is not available for girls. Both of the cells handling the size and the type (gender) of the T-shirt must check that the user input complies with the given limitations. If both checks are
Out State
Last
and their constraints) and produces a complete web site that can guide a customer in the ordering and customization process of the product. An overview of system’s archi-
Print Attributes Submit Product’s Specifications
In State
Domain Check No Errors Rules Check No Errors
Errors
Producer/Seller
Designer Application Information Architect
Print Errors
Finished Application
Errors Invalid State
Next State
Customer
Order’s Parameters
Web Application
Figure 2. Modified ASM Cell.
Figure 3. The System’s Architecture.
successful, the customer may proceed to the next state and go forward with the ordering of his product. If an error of either kind occurs, the system offers two possibilities. In the first, the customer is presented again with the previous state and can try again to enter an attribute’s value that does not generate an error. The second variant allows the customer to go to any state that involves any of the attributes contained in the rule(s) that is no longer respected: This allows the customer to rethink previous decisions and not to be stuck in a particular cell. In our example, this means that if the user selected a T-shirt for girls, and then selects size XL, he will be offered the choice to either select the size again or to go back to the male/female selection. The model outlined above is very similar to the model used in the Strudel [6] and Araneus [8] systems: these models have as base element the notion of page. The difference between them lies in the kind of relation between pages. In our model, they are related by edges representing user’s interaction, while in the others they are connected by simple navigation links. Context awareness was recently added to the web modeling language WebML. WebML is able to adapt and serve content based on the context [11]. The context is built on parameters generated on the client-side, on session parameters on the server-side and on external sensing mechanisms. Such constructs could be used to simulate our approach, but since they represent a much more general concept, a more complex model would arise. Our ASM notation can be seen as a very specialized way of modeling the particular problem of e-commerce and mass customization.
tecture is given in figure 3. The whole application is freely available for download along with extended documentation at http://designer-fw.sourceforge.net. The system uses a special language designed to specify the constraints between the attributes. It then generates an intermediate representation in XML format. By using XSL, this intermediate representation is then transformed into the target platform implementation. As proof of concept, we provide XSL that generates PHP pages. Clearly, it is possible and rather straightforward to write other XSL specifications that will generate a finished application in other languages. Every product is defined by a set of attributes. Each attribute is associated with a domain and this domain may be an integer or real number, a boolean value or an enumeration. The enumeration is useful to restrict the choice of the customer. In our T-shirt example, the color of the T-shirt is limited to the red/green/blue choices. Each numerical domain may also sport an allowed range on a unit, for example, the size of the label on our T-shirts is a real number between 5.0 and 20.0 centimeters. The last part of the product’s definition is the set of rules: Rules enforce conditions between attributes of the product and we decided to design a small and simple language to describe them. Designing a new language to solve a particular problem is a technique known as metalinguistic abstraction [1]. It allows us to think about the problem at hand using an ad hoc language which represents the issue in a user-friendly way. The basic statement is a check returning a boolean value. These checks can be nested. A basic check can be composed by a boolean operator (and/or/xor) between two boolean variables, or by two numerals (reals or integers) interleaved with equality operators (equal, different, greater than, less than, . . . ). Using this language, the constraint that our T-shirts for girls are not available in L or XL sizes becomes:
4. Implementation To test the theoretical concepts explained in the previous sections, we decided to build a complete system that takes as inputs the specifications of a product (its attributes
if ( type = ’’girl’’ ) then
check( not( (size=’’XL’’) or (size=’’L’’)))
the label to be green and he previously defined the T-shirt to be also green. Then the system will display a warning sign on both pages, so that the customer knows that he can correct the problem by going to either page.
5. Conclusions We have shown how a particular subset of e-commerce applications dealing with the sales of highly-customizable products can be modeled using a formal approach. This approach allows an efficient mapping of the process of setting the product’s parameters and handling their interdependencies. Finally, we presented our system that is capable of taking the product’s specifications (attributes and constraints) and generating a finished web site to sell the product. A possible improvement in the system would be to detect automatically constraints that may be contradictory, although our experience shows that such problems tend not to arise in practice, since the description of the product given by the manufacturer obviously does not contain conflicting rules.
References
Figure 4. Example Application.
Figure 4 shows an example of a finished application for our T-shirt example. We can notice that in addition to the attributes color and type, there are two pictures: The system allows the user to link pictures to any enumeration attribute. These are then automatically displayed at the right place in the finished e-commerce interface to give the customer visual feedback on what he is buying. The figure depicts a case of conflict between attributes. On the left of the Size and Type attributes, a warning sign signals that there is a problem with the chosen value. By clicking on the sign, a windows explaining the error will appear. The bottom of the screen is a navigation bar, that allows the customer to freely navigate through all the pages that help to define the product’s attributes. It may be the case that the first property the customer wants to define is the label, so he would click on the label link. The upward-pointing blue arrow signals the current page that the customer is viewing. Two warning signs are also present in the navigation bar and they signal which of the pages contain attributes that are currently violating some constraint. Imagine that the customer chose
[1] H. Abelson, G. J. Sussman, and J. Sussman. Structure and Interpretation of Computer Programs. MIT Press, 1985. [2] P. Atzeni, G. Mecca, and P. Merialdo. To weave the web. In VLDB ’97, pages 206–215, 1997. [3] R. G. G. Cattell, D. K. Barry, M. Berler, J. Eastman, D. Jordan, C. Russell, O. Schadow, T. Stanienda, and F. Velez, editors. The Object Data Standard ODMG 3.0. Morgan Kaufmann, January 2000. [4] S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, and M. Matera. Designing Data-Intensive Web Applications. Morgan Kaufmann, November 2002. [5] A. Cooper. Itinerary to mass customisation. In: The Pool, Spring Edition 2000. [6] M. Fernandez, D. Florescu, J. Kang, A. Levy, and D. Suciu. Catching the boat with strudel: Experiences with a Web-site management system. SIGMOD Record (ACM Special Interest Group on Management of Data), 27(2):414, 1998. [7] R. H.Katz. Contemporary Logic Design. The Benjamin/Cummings Publishing Company, 1994. [8] G. Mecca, P. Atzeni, A. Masci, P. Merialdo, and G. Sindoni. The ARANEUS Web-base management system. SIGMOD Record (ACM Special Interest Group on Management of Data), 27(2):544, 1998. [9] T. Olovsson. A secure network architecture. Technical report, AppGate AB, 2000. [10] J. Pine. Mass Cusomtization - The New Frontier in Business Competition. Harvard Business School Press, 1993. [11] S.Ceri, F.Daniel, and M.Matera. Extending webml for modeling multi-channel context-aware web applications. In Preliminary Proceeding of WISE MMIS03, December 2003.
