Little Big Choices: Customization in Online User Experience

Abstract

Customization can be a decisive factor in improving online user experience. It is a procedure that allows users to get involved with an interactive system to obtain results that better match their needs. These results are achieved through a co-design process. To establish the importance of customization in this context, we developed a design project for online customization of lacrosse equipment for Ativo brand. It was intended for users to create their own lacrosse equipment, with the possibility of adapting them to their tastes and requirements. For the tool to become viable it was necessary to consider several interaction tasks. Screens were designed, first trough 11 wireframes and later through 194 visual layouts. The project was evaluated with usability tests, using a support questionnaire to verify tasks were effectively fulfilled. The result is a tool which allows wide customization of various options related to these products, their implementation on the brand website and improvement of its user experience.

1 Introduction

Customization is the attempt to transform large scale production into individually tailored objects. This purpose is something difficult to achieve, since what makes an object adjusted to every individual cannot be previously thought in an exhaustive way. Or not at least, if the object is intended for a significant number of people. So, customization came to be understood as a process that increases alternatives, by making available a set of options. In Web environment, product customization has become a major factor in improving user experience.

To better understand this importance and the specific character it has, we must establish differences between customization and personalization. Therefore, customization is considered as the permission given to users, to control interaction with a system or artefact, to achieve results that better match their needs. On the other hand, personalization for Web environment, prepares a system to identify users, to provide them content, experience and functionalities, assumed for their profile.

In this context, factors associated with online customization create an interesting approach with potential commercial application. These factors were considered for Ativo brand, which operates in the field of design and manufacture of lacrosse sports equipment. The main reason was a problem identified by brand managers, in which their customers were not obtaining products the way they needed for their activity. Whether it was by difficulty in expressing their needs to designers, or difficulty in designers understanding what customers wanted, given that this is a very specific market niche.

For this matter a website design project was developed, with a tool for customizing lacrosse equipment for this brand. This tool aims to enable website users to co-create their own lacrosse equipment, adapting products to their needs, from customization options. Users would in this way, perform little choices that would result in big achievements for the brand.

To make the tool usable and feasible, it was necessary to consider interaction design and user experience principles, and to understand the role of usability in the design process. Use of this online customization tool is based on elements that can only be edited, within a limited number of options (colour, texture, patterns, models, among others). We present the process of designing such a tool, including screen wireframes, visual layout and interaction possibilities.

The tool, as well as interaction tasks, were submitted to a small group of potential users to be tested. Such usability tests, were made to check correct understanding, functioning and interaction of the website and allow improvements and corrections.

The overall purpose is to demonstrate the value of customization as a tool for differentiation and distinction, when convincing a customer to choose products. Including for this, permission to participate in the process of choosing options to be included in final products. This distinction of products by placing options for customization and giving permission to each user to become co-creator of the final product being acquired, can be a brand strategy in digital interactive media. Customization, associated with personalization or co-creation, will create a link between consumers, their needs, and products they think are more appropriate to meet such needs.

The approach is based on a transition from the notion of “one size fits most” to “one-to-one”, where specific needs of everyone are assumed and will be more likely realized through their participation in final stages of the process. Customization addresses this perspective, moving part of the final responsibility for users, who will decide what they consider to be best for them.

The developed project evidences the concept of customization, in the context of interaction design for Web environment, as essential for development of a tool that matches products to user’s requirements.

2 Personalization and Customization

Personalization is a concept that can be defined in several ways, depending on the context in which it is applied [1]. It has, however, been associated with a company’s ability to communicate with consumers to provide them with an individualized shopping experience [2]. Particularly when used in e-commerce, where the possibility of personalization is taken as a marketing tool. The Internet came to intensify personalization opportunities, identifying users, collecting information through search history and recommending products [3].

While in this sense personalization is a tool that induces consumers to purchase a mass-produced product or service, but presumably best suits their needs, it can also be understood as modifying products through individual user preferences. For Mugge et al. [4], many users may not be satisfied with standard products because of their individual preferences. One strategy that can give a company competitive advantage is precisely to allow consumers to customize their products.

This notion of customization (word which derives from ‘customers’), to make a product more personal, usually includes: (a) a purpose of customization, (b) what is customized (interface, content, etc.), and (c) the target of customization (user, consumer, etc.) [1]. It is therefore a process that modifies functionality, information access, interface or the distinct personality of a system, to give increased importance to a user or group of users. As such, it is the adaptation of products and services developed by a producer, through collected information of consumer behavior, having technology as main facilitator [5].

With more demanding consumers, companies are forced to find new ways to meet their customers’ needs, while trying to differentiate themselves from competition. According to Venasen [6] personalization allows creation of products and services that better respond to consumers’ needs, especially since the resulting output is achieved by a mutually beneficial bidirectional contact, between supplier and consumer.

For Peppers and Rogers [7] differentiation in this case is achieved because of interaction, which allows a client to feel exclusive, with a will to maintain its relationship and loyalty to a company [8]. By increasing loyalty, the company also increases customer’s life time value, fueled by repeated purchases. Mugge et al. [4] argue that by allowing product customization, producers give consumers “design authority”, as they accept customers to participate in creating a customized product, from a predefined set. This authority causes customers to take the product as unique and a symbol of their identity. A factor that suggests assigning design authority to customers can increase the likelihood of purchase and the probability of its repetition.

Despite these benefits, it should be considered customization of products is an activity that expends a lot of time for potential consumers, with an extra effort when compared to buying a standard product. Thus, the effort of personalizing a product should represent an additional value for consumers, otherwise time spent in customization may have a negative effect on purchase intention [4].

According to Mugge et al. [9], a personalized product is used as a means of individual expression, which has a positive consequence, an increase of connection to what is acquired. Products are purchased for many reasons, some of them end up becoming special and treasured by their owners. This link is defined as “the emotional bond a person experiences with a product” [10]. When this product-owner link is created, the owner tends to add more care to the product. In this way, he tries to give a longer life to it.

When a consumer wants to customize the appearance of a product, he invests time, effort, attention and makes creative choices [9]. And so, the product ends up reflecting symbolically an individual, for himself and for others.

3 Online User Experience

Online media has been used to create such experiences tailored to users interests and needs, although this goal is achieved in several different ways [11]. According to Lee [12], one can understand a personalization made automatically by computerized systems, of companies and organizations. It is a specific and individual collection of information, made through observation of user behaviors and actions, such as clicks, latest searches, purchase history, among others. The system is designed to identify users and provide them with content, experience, and features that meet their expected needs [13]. Lee [12] also states the major purpose of this personalization of user’s online experience is to provide these functions without any effort on the part of the user.

For example, on a travel website, you see certain promotions for places you have been or have searched for. In mobile apps, personalization identifies user’s profile so that users can find what they want more easily and quickly. In no situation does a user need to make changes or set something on the system, since all available information is used to create an identity for each user.

On the other hand, possibility of customization starts at companies, which provide users with options for them to choose from. Users proactively specify what they need and require for a product [3]. Users can customize a product or service through actions such as adjusting layout or organizing content, but also changing color or changing design-related factors [13]. The advantage of customization is to allow users to have a better experience by controlling interaction, and thus achieving exactly the results they wanted.

4 Mass Customization of Clothing

There is nowadays a context of mass production, characterized by a brief product life cycle of clothing products, with excess supply at low prices. This serial reproduction corresponds to creation of scale economies.

Mass customization is an alternative to this context. According to Lee et al. [14], mass customization is a hybrid form, understood as mass production of customized individual products or services. Mass customization focuses on the individual and on arranging custom products, maintaining approximately the same price level, while taking advantage of large scale production means. The logic of mass production and technological advances allows companies to reduce development process and product manufacturing cycle [2].

Mass customization of apparel products always involves co-design. Consumers get a unique product, partially designed by themselves, usually through digital media, with the help of tools or platforms designed for this purpose. These platforms present virtual models, so users can see the result of their customization in options companies allow them to edit, such as styles, fabrics, patterns, colours, etc. [14].

Sports companies appear as leaders in development of mass customization, and while some of them make this activity an additional component, others are dedicated exclusively to mass customization through online media, since the Internet has been identified as the most important tool in the production cycle of mass customized products [15].

5 Co-design

Co-design is then a key factor in customizing. Within design processes involving participation, there is sometimes confusion with co-creation and sharing of the creative process. These are often synonymous notions. But for Sanders and Stappers [16], co-creation refers to any act of collective creativity, e.g., creativity shared between two or more people. Co-creation is taking more and more attention from brands, and is being used to complete products, especially in more advanced stages. For instance, Nike ID (www.nikeid.com), which allows its customers to customize footwear, choosing colours, materials and several other details. Co-creation emerges as a solution to give new impetus to the offer of products and services. This trend follows increasing investment of brands in user experience. Not being able to distinguish their products by technical qualities or by price, brands are forced to look beyond the product itself [16].

Co-design also points to collective creativity as Sanders and Stappers [16] refer, but applied to the design process. We can understand it as a specific co-creation. It refers to shared creativity between designers and untrained people who work together during the design development process. Users can then be part of the design team as experts in their own experiences and needs [17].

However, for this opportunity to be made available to users, it is necessary to provide them with the right tools to express themselves. It should be recognized that not all individuals have the same propensity for creativity, and as such, designed experiences should allow individual expression in a simple way [18].

6 Design Project

A design project was developed to address a customization tool for lacrosse equipment within Ativo website, a brand which operates in the field of design and manufacture of lacrosse sports equipment. The project came as a solution to solve a perceived difficulty in communicating with Ativo customers, as they were not able to obtain the type of equipment they wanted. This tool would ease the problem, by creating an online aid for customization of lacrosse equipment. The main goal was to enable Ativo clients to communicate in a simple and direct way, through media where they could configure themselves what they wanted.

This online customization tool has limited options (in terms of visual elements such as colour, texture or patterns), as it is based on graphic language standards and layouts pre-designed for the brand.

First steps conceiving the tool were sketches and wireframes to create a structure that would meet all user requirements. We developed 11 model screens, as exemplified in Fig. 1.

Fig. 1.

Initial wireframe screen.

We also identified the need to recreate products in 3D to provide the best possible way, for customers to communicate what they want, obtaining as result a simulation as close as possible to the final product.

6.1 Customization Tool

For the customization tool, visual layouts were developed for 194 options within website browsing and customization tasks. All material was set together in Marvel App to arrange an interactive prototype. We created a structure adapted to users, their expected behaviour and their usage of information levels. In this way, we conceived two lateral columns, one in the left and one in the right, placing an area for visualization of products at the centre. This arrangement would change according to selected options (Fig. 2).

Fig. 2.

Customization tool with initial options.

On the left side column, we can choose a product through model, collar, pockets, fabric and style to customize. The tool was created to allow customization of two product categories: apparel and accessories. This column will adapt to product types according to their category.

For the apparel product type, users have the possibility to add or remove a top and bottom. For example, we can choose a vest to customize, and as consequence, in the left column the ‘Select Top’, ‘Fabric’ and ‘Select Style’ options will appear. In the ‘Select Top’ option we can choose other models from the top. After selecting the option, we can see the resulting change in the product, at the centre, where the vest was.

In ‘Fabric’ it is possible to choose the kind of fabric and at the same time to visualize the consequent product change at the central area of the screen (Fig. 3a and b).

Fig. 3.

(a) and (b) Two screens with different fabric options selected: plain bright on the left and Mesh matte on the right.

In the ‘Select Style’ option, we can choose a style of our preference and edit it (Fig. 4).

Fig. 4.

Screen to choose product style.

Users have the possibility, throughout this path, to add a bottom that allows the same type of options as those described above for the top, such as model, fabric or style. If for instance, a user adds shorts, the system will automatically inform of additional costs.

Within this column, users have always possibility to add products within these types: apparel or accessories. Every change in fabric or style will not imply a loss of previous choices.

Product customization column on the right side is divided into two or three tabs (‘elements’, ‘top’ and/or ‘bottom’) depending on user’s choice. In ‘elements’ tab, users can add multiple elements to a product, whether it is just ‘bottom’ or ‘top’ or both. There are four types of elements users can add: ‘logo’, ‘number’, ‘text’, and ‘initials’. To add an element like a logo, we can enter one or more logos as well as choose their positions, always allowing to delete or add more logos whenever we want. Before adding, information is given explaining only.jpg and.png files are accepted (Fig. 5).

Fig. 5.

Customization tool right side column.

Once a .jpg or .png file is chosen and a position is picked, users can see an image preview on the product. This position can be changed whenever we want.

The next element possible to add is a number, which will allow to change font and its position. However, size will automatically be set, considering regulatory restrictions. For instance, in women’s equipment, a number cannot be less than 15 cm (5.9”) in front and 20 cm (7.8”) at the rear.

In ‘text’ element, users can add a player or team name, or just one word with the possibility to choose from an available positions list. The last element, ‘initials’, allows users to add a maximum of two initials, and choose their position according to available places for this element. There are placement limitations for various elements, considering positions advisable or mandatory for each of them.

In ‘top’ and ‘bottom’ tabs users can edit colours and patterns of the product, depending on the selection made. They can also do this for elements such as numbers and initials and any chosen style, by selecting areas to change. For users to choose an area to edit, it is necessary to select the desired area directly by clicking on the product. This zone is then highlighted (Fig. 6).

Fig. 6.

Highlight of selected area.

Alternatively, we can also select an editing area by browsing among various available areas. This is possible by clicking arrows that allow to scroll through the different areas. After choosing an area to change, there are three options – ‘base colour’, ‘pattern’ and ‘outline’ – that do not always appear, since not all areas allow all three options. For instance, collars cannot have an outline in production and thus, when users select collar to edit, this option is not presented.

In ‘base colour’ option, users have a colour palette so they can change base colour of a chosen area. In ‘pattern’ option users can choose a pattern they want in the selected area. After choosing the pattern, users can choose scale and colour for it (Fig. 7). Finally, in ‘outline’ a colour palette is also presented in the same way.

Fig. 7.

‘Bottom’ tab with ‘Pattern’ option selected.

In the central area where products are presented, there are three other options: ‘fabric samples’, ‘buy’ and ‘share’. In ‘fabric samples’ option, users can request samples, with a message showing cost of sending samples and whether to add that order to the shopping cart. In ‘buy’ option, users add products to the cart and receive a notification that products have been added to the shopping cart. Finally, in ‘share’ option, users can share an image of customized product, to show their team or friends.

6.2 Tests and Improvements

Usability tests (n = 12) were performed with the developed prototype. Such tests consisted in providing the interactive prototype of the tool to fulfil a set of 14 tasks. In the scope of these tests a questionnaire was elaborated to confirm or not, usability of created tool, within website context. For all tasks, it was asked what difficulties each user encountered while performing them.

After analysing the results, we concluded it was necessary to give greater visual contrast to ‘add bottom’, “top” and “elements” tabs because they are functionalities represented in a very subtle way and gone unnoticed. To correct this, an “add bottom” button with a coloured outline was created, to give more prominence to functionality, and to assure it would not be confused with product setting buttons, such as “select style” or “select top”. As for “elements” and “top” tabs, which are located on the right side of the tool, an outline was also added around the functions as well as a black background to make selection visible. Both changes are displayed in Fig. 8.

Fig. 8.

Customization tool after usability tests.

7 Conclusion

Development of an online customization tool for lacrosse equipment and its evaluation allowed us to understand that combining interaction possibilities with customization, opens a new window on the relationship between a brand and users of their products.

Experience of using Ativo brand website has become more extensive and complete, as the website and the tool incorporated in it, influence interaction final output, as well as final product constitution. We have established a feedback and feedforward relationship, essential for a good interactive experience.

The approach to customization, personalization and co-design allowed us to understand the purpose of each concept and their importance in designing the tool. It was also possible to understand that preparing pre-designed equipment models will speed up creative process of users, and productive process of the brand. The tool eliminates undesirable excessive waste of time in constant modification of proposals, as it passes part of the task to users, which will more easily be able to express their needs.

Introducing customization in sportswear is still a subject with much to explore. However, customization attributes an emotional value to products, leading to an increase of their life time, through higher esteem consumer ends up giving it, due to emotional load.

And so, this project allows Ativo to have an innovative tool in the market in which it operates, gaining a competitive advantage factor to its competitors. At the same time, it creates an emotional connection with its users, so that they themselves perceive they are interacting with “someone”. This connection and consequent improvement in user experience is expected to lead to greater satisfaction with products and a desired brand loyalty.