September 1, 2014 at 15:26How we did Luxury. Creation of Versace e-commerce website in pictures
In the spring of 2012, Versace fashion house approached us with a very unusual task - to create an online store, but ... not for sales. The new e-commerce site was supposed to be primarily a communication channel with a global audience and a platform to expand the influence of the online brand. Versace sought to broadcast a fashionable message not only to its customers, but also to those who did not dare to go to a real store with a Versace sign. Another goal of the client was to create a portrait of the target audience on the Internet. Thus, not entirely typical tasks were entrusted to the design of the new store, and, thanks to them, it turned out to be the most important and most interesting part of the project.
Donatella Versace is not only the creative director of Versace, but, without exaggeration, the soul and heart of the brand. Turning to the heritage of the House, feeling it subtly, she constantly modernizes and updates the brand. In her eyes, Versace is a selfless love of glamor, sensuality, powerful energy, uncompromisingness, always a fresh interpretation of luxury. All these qualities should be given to the new online store, not forgetting about the completely material features and style of offline boutiques.
Here are the first three design options that we proposed to the customer:
After several iterations of the above options, we received client comments in the form of a concept from the Italian creative agency with which Versace collaborates. The essence of the concept:dark background, Gothic style, circles as a supporting element, different color themes for sections . We proposed a new version:
In the design for a famous brand, it is very important to maintain uniformity, so initially one person worked on the design of the online store. When the main elements were drawn and agreed with the customer, we made Style Sheet - a list of the main color and graphic components, hovers, slots, icons and other elements . Only after that an additional design resource was attracted. Key things (colors, fonts) we took from the Versace brand book. But there was also a feedback - the achievements of our designers supplemented the brand book of the brand.
But this design option was not final. Donatella wanted the Cosmatesco mosaic pattern to be used as the background. As you can see in the picture above, we used something similar, but the picture was far from ideal. It turned out that for the desired effect, a special mosaic is also required - from the 9th century basilica of Santa Prassede in Rome. The floor drawing of this church is used in the design of Versace offline stores; it was also to be “laid out” in a virtual boutique. Thus, the client decided to transfer the spirit of the brand from the real world to online, to give the user the feeling that he is literally located in Versace . For a long time, they could not provide us with high-quality photographs of this mosaic - reconstruction was carried out in the basilica. Finally, we got them:
Redrawn and planted:
The initial weight of the background mosaic, redrawn by the designer, amounted to a disastrous 26 Mb. Normally, for a good page load, the background image should weigh about 200 Kb. We performed several tricky manipulations with resolution and file types, saving several times in different formats, achieving the desired background quality with a small file size.
Experimented with filters :
Initially, in accordance with the advice of Italians, it was decided to apply different color themes for each section of the site. One example is Donatella Versace’s author section Donatella's Hot Picks, her personal “Favorites” on the site. This section was removed over time, as were color themes - now the background is the same on all pages. Color coding of sections is implemented in footer, icons, dice, while in general the black and white gamma prevails in the design of the site.
The Donatella's Hot Picks section has disappeared, but the SALE section has appeared. As a rule, luxury brands do not make sales in their offline stores. And many brands like Chanel, Dior and Celine basically do not sell clothes online. Firstly, they are afraid of the outflow of customers from offline stores. Sales on the Internet, in their opinion, destroy the aura of exclusivity and deprive the buyer of the pleasure of physical contact with things, kill the premium shopping ceremony. Secondly, they give a snobbish argument that “sales are not the main thing for us” and conservatively strive to preserve the brand identity by playing “hard to get”.
Based on such considerations, the SALE section was not originally planned on the site. But the American division of the company insisted on discounts, and as a result, this section was developed specifically for the store in the United States. Now it is connected on all local versions. The Demandware e-commerce platform on which Versace sites are created allows the administrator to easily remove or add standard sections to the site, so SALE can appear and disappear in different local versions of the Versace store without our participation. One can only guess why, against the background of other luxury players, our client still decided to delight his online shoppers from time to time.
An interesting story has also come out with localization. There were no special problems with the development of payment / shipping options, but there were some nuances with the texts. When translating, it turned out that the words do not fit into standard round slots.We balanced the size and layout of the text to maintain visual uniformity:
Versace did not set itself particularly ambitious sales goalsm. It was no secret to anyone that both haute couture and pret-a-porter are sold mostly offline. But regional analytics for December 2012 (immediately after the launch of the project) showed that there is still reason for optimism, and not one. In Germany (versace.de) the average check was 439 euros, the average length of stay on the site was 5.25 minutes. On the website of the French store (versace.fr), customers on average left 546 euros, the top queries were seasonal jackets and hats. Oddly enough, Italians (versace.it) turned out to be the most economical - an average of 265 euros, the leaders in sales - Eros toilet water and sunglasses. The British turned out to be avid for glamorous accessories - the average check amount was 391 pounds, the decision to purchase on average was made in 3.59 minutes, and they looked for watches and glasses on the site for the most part. The Americans turned out to be the most loyal and generous - the highest attendance among all Versace sites, the average check is $ 739, and this is just 3.04 minutes on average, in preferences - top glasses and belts. It is curious that the most active buyers of the American online store Versace were users of Russian origin.
A few words about the development.
The site is implemented on the Demandware platform and is a standard e-commerce solution with deep visual customization. From the point of view of the customer, the online store on Demandware is quite convenient for content and administration. This is a cloud system, the customer does not need to pay for the server, maintain additional staff. The platform takes care of all the technical aspects, charging a monthly fee, which is calculated as a percentage of the turnover.
But there is another side to the coin. The complexity of developing sites on Demandware is that its “out of the box” solution is not the best for starting work on a project like Versace. SiteGenesis - the main application of the Demandware platform - was oversaturated with html markup and css styles, superfluous for our luxury client. For Versace, we created a reference application - it was based on SiteGenesis, but included everything that the customer needed (and did not include what he did not need). Based on this reference, we have created all the local sites of the brand.
After the launch of the main store, the customer returned with a new order - “store in store” for the sub brand Versace, Versus youth line. Here we were given complete freedom of action, but about this project - in the next post ....
Donatella Versace is not only the creative director of Versace, but, without exaggeration, the soul and heart of the brand. Turning to the heritage of the House, feeling it subtly, she constantly modernizes and updates the brand. In her eyes, Versace is a selfless love of glamor, sensuality, powerful energy, uncompromisingness, always a fresh interpretation of luxury. All these qualities should be given to the new online store, not forgetting about the completely material features and style of offline boutiques.
Here are the first three design options that we proposed to the customer:
After several iterations of the above options, we received client comments in the form of a concept from the Italian creative agency with which Versace collaborates. The essence of the concept:dark background, Gothic style, circles as a supporting element, different color themes for sections . We proposed a new version:
In the design for a famous brand, it is very important to maintain uniformity, so initially one person worked on the design of the online store. When the main elements were drawn and agreed with the customer, we made Style Sheet - a list of the main color and graphic components, hovers, slots, icons and other elements . Only after that an additional design resource was attracted. Key things (colors, fonts) we took from the Versace brand book. But there was also a feedback - the achievements of our designers supplemented the brand book of the brand.
But this design option was not final. Donatella wanted the Cosmatesco mosaic pattern to be used as the background. As you can see in the picture above, we used something similar, but the picture was far from ideal. It turned out that for the desired effect, a special mosaic is also required - from the 9th century basilica of Santa Prassede in Rome. The floor drawing of this church is used in the design of Versace offline stores; it was also to be “laid out” in a virtual boutique. Thus, the client decided to transfer the spirit of the brand from the real world to online, to give the user the feeling that he is literally located in Versace . For a long time, they could not provide us with high-quality photographs of this mosaic - reconstruction was carried out in the basilica. Finally, we got them:
Redrawn and planted:
The initial weight of the background mosaic, redrawn by the designer, amounted to a disastrous 26 Mb. Normally, for a good page load, the background image should weigh about 200 Kb. We performed several tricky manipulations with resolution and file types, saving several times in different formats, achieving the desired background quality with a small file size.
Experimented with filters :
Initially, in accordance with the advice of Italians, it was decided to apply different color themes for each section of the site. One example is Donatella Versace’s author section Donatella's Hot Picks, her personal “Favorites” on the site. This section was removed over time, as were color themes - now the background is the same on all pages. Color coding of sections is implemented in footer, icons, dice, while in general the black and white gamma prevails in the design of the site.
The Donatella's Hot Picks section has disappeared, but the SALE section has appeared. As a rule, luxury brands do not make sales in their offline stores. And many brands like Chanel, Dior and Celine basically do not sell clothes online. Firstly, they are afraid of the outflow of customers from offline stores. Sales on the Internet, in their opinion, destroy the aura of exclusivity and deprive the buyer of the pleasure of physical contact with things, kill the premium shopping ceremony. Secondly, they give a snobbish argument that “sales are not the main thing for us” and conservatively strive to preserve the brand identity by playing “hard to get”.
Based on such considerations, the SALE section was not originally planned on the site. But the American division of the company insisted on discounts, and as a result, this section was developed specifically for the store in the United States. Now it is connected on all local versions. The Demandware e-commerce platform on which Versace sites are created allows the administrator to easily remove or add standard sections to the site, so SALE can appear and disappear in different local versions of the Versace store without our participation. One can only guess why, against the background of other luxury players, our client still decided to delight his online shoppers from time to time.
An interesting story has also come out with localization. There were no special problems with the development of payment / shipping options, but there were some nuances with the texts. When translating, it turned out that the words do not fit into standard round slots.We balanced the size and layout of the text to maintain visual uniformity:
Versace did not set itself particularly ambitious sales goalsm. It was no secret to anyone that both haute couture and pret-a-porter are sold mostly offline. But regional analytics for December 2012 (immediately after the launch of the project) showed that there is still reason for optimism, and not one. In Germany (versace.de) the average check was 439 euros, the average length of stay on the site was 5.25 minutes. On the website of the French store (versace.fr), customers on average left 546 euros, the top queries were seasonal jackets and hats. Oddly enough, Italians (versace.it) turned out to be the most economical - an average of 265 euros, the leaders in sales - Eros toilet water and sunglasses. The British turned out to be avid for glamorous accessories - the average check amount was 391 pounds, the decision to purchase on average was made in 3.59 minutes, and they looked for watches and glasses on the site for the most part. The Americans turned out to be the most loyal and generous - the highest attendance among all Versace sites, the average check is $ 739, and this is just 3.04 minutes on average, in preferences - top glasses and belts. It is curious that the most active buyers of the American online store Versace were users of Russian origin.
A few words about the development.
The site is implemented on the Demandware platform and is a standard e-commerce solution with deep visual customization. From the point of view of the customer, the online store on Demandware is quite convenient for content and administration. This is a cloud system, the customer does not need to pay for the server, maintain additional staff. The platform takes care of all the technical aspects, charging a monthly fee, which is calculated as a percentage of the turnover.
But there is another side to the coin. The complexity of developing sites on Demandware is that its “out of the box” solution is not the best for starting work on a project like Versace. SiteGenesis - the main application of the Demandware platform - was oversaturated with html markup and css styles, superfluous for our luxury client. For Versace, we created a reference application - it was based on SiteGenesis, but included everything that the customer needed (and did not include what he did not need). Based on this reference, we have created all the local sites of the brand.
After the launch of the main store, the customer returned with a new order - “store in store” for the sub brand Versace, Versus youth line. Here we were given complete freedom of action, but about this project - in the next post ....