My role

I worked on this project for about 2 years, from the early stages of discovery and design to the end of the delivery phase. I spent the first months designing the experience using wireframe at the beginning and live prototypes later in order to test the experience with real animations and transitions. The rest of the time I worked on the front-end code re-using part of the live prototype code, creating live style-guides and structuring the responsive experience with CSS, HTML, and javascript.

As the team leader of the project, I worked closely with all the teams involved as well as the stakeholders and Valentino project managers who have been contributing since the early stage of the projects especially testing wireframes and prototypes.

The challenge

The design was different depending on the viewport size and the language, plus for many pages we adopted a full-page image design with large images as a background which scale depending on the viewport size.

This design was particularly appealing and effective especially for a fashion website but it could be problematic because the image scaling functionality could crop some important details of the products. Therefore, we decided to provide a tool to manage which part of the image should always be visible regardless of the changing in design caused by the viewport size. This functionality provided a powerful control over the image subject which allowed all the products to be presented beautifully on the website.

Another reason why we used live prototypes was the website localisation. This website was localised in twelve languages including traditional Chinese and Russian which tend to be extremely problematic for some website design, due to the variation in the length of the text. By testing using the Russian language we found many design issues that we were able to address. I'm now able to create a flexible interface designed for multiple languages.

Using live prototypes combined with live style guides is an ideal method for transitioning from the design stage to the delivery stage. By using this method the final user experience can be tested.