Refonte de la Home Superfocus en Responsive Design

14 février 2013 15:03 dans digital-factory

Superfocus est une société américaine qui conçoit des lunettes destinées aux adultes atteints de presbithie. Ces lunettes disposent d'une molette de réglage permettant une mise au point afin de s'adapter à n'importe quelle distance. L'utilisateur peut ainsi observer un objet avec la précision et la vue digne de celle d'un ...

Slider Image

Superfocus est une société américaine qui conçoit des lunettes destinées aux adultes atteints de presbithie. Ces lunettes disposent d'une molette de réglage permettant une mise au point afin de s'adapter à n'importe quelle distance. L'utilisateur peut ainsi observer un objet avec la précision et la vue digne de celle d'un enfant. D'abord destinées aux particuliers, les lunettes Superfocus sont désormais fournies aux astronautes de la NASA.

Superfocus a confié a Emencia la refonte de sa Home et son intégration en Responsive Design, avec pour contrainte de garder un style graphique et des couleurs s'accordant avec le reste du site. 

 Ancienne Home page Nouvelle Home page

    

Emencia a choisi de créer une page longue (comme pour Flower Power et AR.Drone 2), mettant en évidence les parties les plus importantes du site, l'objectif étant d'intéresser l'internaute dès la première page et de minimiser le taux de rebond. 

La nouvelle Home propose donc :

- un slider exposant les différents modèles de lunettes Superfocus et comportant des liens permettant de passer directement à la phase d'achat des produits (voir photo ci-dessus).

- une vidéo ainsi qu'une photo donnant à l'internaute une explication simple du fonctionnement des lunettes (voir photos ci-dessous)

- des témoignages de clients

- des galeries multimédia

- les dernières actualités du site

- un formulaire de souscription à la newsletter Superfocus.

 

 

La technologie Responsive Design permet une adaptation de la page et des images à n'importe quelle taille d'écran, du smartphone à l'ordinateur (voir ci-dessous des captures d'écran de la page sur smartphone).

   
   

Captures d'écran sur ordinateur :

 

Pour le moment, la page est en A/B Testing afin de savoir laquelle de l'ancienne ou de la nouvelle version amène le plus de transformation.

Technologies utilisées :

  • - CSS 3
  • - Html 5
  • - Responsive Design
  • - Foundation 3
  • - Jquery