Loubsol is a French manufacturer of quality sun shades and ski masks. They had an ageing website they wanted to redesign with a new digital strategy. They wanted the new site to reflect the brand image of quality craftmanship.
We decided to put together a top class full ajax interface where their products would take the center stage. A website marrying rich content, responsive design, and subtle css transitions. © NOE interactive
The client wanted to first present its collections, and explain the technology that's behind their making, and then prepare the in store experience for the user as this is not an online store.
We wanted to make this project one key realisation for this year, making a particular effort on the interface to propose a particularly enjoyable experience to the visitors.
We decided to accompagny the client in his desire to define his brand position, and making sure the website was one of its key aspect. We wanted to put as much quality and technology in our website as they do in their masks.
Focusing on the product
Accompagnying the user in its product choice, help him select a few products, and prepare the in store visit.
Loubsol really has a lot of products available, around 50 masks and nearly the triple for shades. We built a personalized assistant that would ask you a series of questions, and narrow down the number of products that may be suitable for you along the way. The item count gets automatically updated using ajax upon each answer you give. At any time you can click the 'Voir' button (=see), to reveal the list of those products in the catalog.
The catalog is the place where we present a list of product to the user. Masks or shades appear sequentially with CSS transitions. You can filter and reduces this list even more with the search engine that would smoothly update the listing when you select different criterias. When hovering a product, we create a slider of the different product versions so you can see its different colour combinations. Next pages are loaded via infinite scroll. When you've seen a product that interest you, you click on it to reveal its detail page.
As mentionned in the challenges, we wanted the products to take center stage, that's why we emphasized it a lot on the detail page with a big hero image, that you can magnify even more. Around the image, every piece of information is dynamic and administrable and pulled from the database via an ajax call. Navigation between the different detail pages is animated with transitions. You can share the product on the social networks. Overall it's a clean and neat product page.
Once you have found the perfect pair of sun glasses or mask, you can locate a store that sells it around you. We have built a store locator the geolocalises you and puts on the map the stores ordered by distance from you. When selecting the store, the map is centered on its position, and you have all the shop details at hand.
Developing a high quality interface
The Brand Image
Apart from the product areas, there's another section on the website that is more about communication, and present the client and its technology. These sections are more about editorial content so we applied a rich content strategy to present the client's content in the cleanest and most organized way as possible.
The technical guide is the place where all the masqs and sunglasses technical details are explained in a very visual way. It allows the user to better understand the technical terms he could sometimes see around the site. Custom full screen gradient backgrounds work very well in this case.
We are very pleased with the result, which was posted on many web design sites for its aesthetics. The optimisations we brought in also help the site feel snappier, which is a good thing, it adds fluidity. We wanted this realisation to stand out from the crowd, it certainly did.