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

Visit the website


The Products

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.

An Enjoyable Interface

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.

The Brand Image

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.

Personalized guide

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.

Product detail

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.

Store Locator

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

Full Ajax

Building a full ajax website right is not an easy task. When you don't have a page reload when changing a page, many problems arise that are other wise taken care of, for example updating the page metas and title, updating the page content, changing the main menu classes, and so on. To address those problematics, we developped a full ajax application level for this website.


For this website, we of course adapted the display to look its best on every devices, but we didn't stop there. We remarked that the first version of the catalog was a bit sluggish on tablets and mobiles due to the many sliders present on the page. To correct it, we then loaded sliders on hover only, saving on performances.


When we put the site on pre production, we analyzed it for perfomance at gtmetrix. We got grade D from page speed insights and E from ySlow. We followed the guidelines, and step by step, reached grade A on both services.

The Brand Image

Rich Content Strategy

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.

Technical Guide

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.

Classy Interface

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.

@ambroisemaupate @orange Moi j'ai pris une 503 toute à l'heure. #irony25 Mar / 16:20