Nos réalisation

Hapchot

Refonte du site web Hapchot pour une expérience utilisateur fun et animée

Hapchot
Date
Janvier 2024
En bref
Site vitrineUX & UI designSmooth ScrollMotion designQuestionnaire de diagnostique
Description

Depuis 2014, l'équipe dévouée qui travaille de la phase de concassage du malt jusqu'à la mise en bouteille insuffle vie aux bières Hapchot avec passion. La brasserie sert également de terrain d'expérimentation où les brasseurs laissent libre cours à leur créativité, élaborant des recettes parmi les plus originales et délicieuses.

Convaincue que les recettes de bières innovantes méritent d’être appréciées par un large public, l'équipe s'engage à faciliter l'accès à la bière artisanale et à faire découvrir cet univers exceptionnel à un auditoire élargi. En effet, les bières Hapchot sont disponibles en grande surface et dans les bars favoris des amateurs de bières.

Le besoin

La marque Hapchot ressentait le besoin de revitaliser son image en optant pour un site au design ludique et décalé. L’objectif principal était d’élargir sa présence au-delà de la région des Landes et du Pays Basque, en ciblant des métropoles stratégiques telles que Bordeaux, Paris, Lyon et Marseille. Dans le cadre de cette stratégie d’expansion, la marque souhaitait également investir dans la publicité sur les lieux de vente (PLV) afin de promouvoir activement un test de sélection de leurs bières en ligne accessible depuis un QR code, offrant ainsi une expérience interactive et engageante aux consommateurs intéressés.

Bien que le besoin soit clairement défini sur le papier, il représente néanmoins un défi significatif. En effet, concevoir un site web au design élaboré, offrant une expérience utilisateur poussée, s’avère souvent contradictoire avec la notion d’accessibilité. Cependant, nous avons relevé avec succès ce défi !

Navigation
UNE NAVIGATION simple

Nous avons soigneusement conçu la navigation pour assurer une fluidité et une intuitivité permettant une visualisation rapide de l’ensemble de la gamme de produits.

En un simple clic, le menu burger se déploie en plein écran (menu full screen), offrant une présentation complète des différentes sections du site d’un côté, et une navigation produit rapide et efficace de l’autre.

Expérience
UI & UX DESIGN

L’ergonomie du site (UX) a été soigneusement élaborée pour offrir une expérience simple et élégante, captivant l’intérêt de l’utilisateur et l’incitant à explorer l’ensemble du site Hapchot. La conception de la charte graphique s’est orientée vers des animations motion design intégrées à l’aide de la librairie Locomotive JS.

En travaillant sur l’aspect visuel, nous avons réussi à obtenir des effets de défilement fluides. Notre objectif était de refléter la qualité des produits à travers le site web, en créant une vitrine attrayante mettant en avant les bières Hapchot. Cette approche est pensée non seulement pour optimiser l’expérience utilisateur, mais également pour répondre aux exigences du référencement naturel (SEO), favorisant ainsi une meilleure visibilité en ligne pour la marque Hapchot.

Questionnaire
Questionnaire de diagnostique

Notre objectif était de concevoir un questionnaire de diagnostic pour guider les utilisateurs vers les bières qui leur conviendraient le mieux.
Ce questionnaire implique de répondre à cinq questions sur leurs préférences gustatives, puis de leur présenter sous forme de podium les trois bières correspondant le mieux à leurs réponses, parmi les six bières disponibles. Nous avons veillé à maintenir un aspect ludique et captivant pour l’utilisateur, notamment pour ceux qui ne sont pas familiers avec les bières de la marque, afin de les aider à faire leur choix en magasin.

Flexibles
Contenus éditoriaux

Chez Newwwave, nous nous spécialisons dans la flexibilité des contenus, de manière simple et pratique. Nous accordons une grande importance à donner à nos clients la capacité de créer et de modifier leurs sites web de manière autonome grâce à notre interface d’administration personnalisée.

Ils peuvent facilement éditer leurs contenus, que ce soit des images, des textes ou des vidéos, tout en respectant la charte graphique établie sur les maquettes préalablement conçues. Aucun coût supplémentaire n’est associé, et ils n’ont pas besoin de nous contacter pour des ajustements tels que l’ajout de pages ou des modifications de contenus. C’est une solution simple et efficace pour une gestion autonome en toute tranquillité.

Responsive design
RESPONSIVE DESIGN

Quelle que soit la dimension de l’écran que vous utiliserez pour visiter le site web d’Hapchot, nous nous sommes assurés que le résultat soit optimal sur tous les supports.

La conception de la navigation sur le site a été optimisée pour s’ajuster facilement à la taille disponible de l’écran, offrant ainsi une expérience privilégiant les dispositifs mobiles. L’accès aux différentes sections et les boutons d’action sont soigneusement conçus pour rester naturellement accessibles, que ce soit sur un ordinateur, une tablette ou même un smartphone. C’est notre manière de garantir une expérience utilisateur fluide, quel que soit le dispositif utilisé pour explorer l’univers Hapchot.