Adaptation d'un site Flash en Mobile et Tablette

La maison de champagne Taittinger a réalisé un site en flash il y a quelques années, avec une atmosphère globale originale, mais incompatible avec les mobiles et tablettes. Face à cette contrainte, la maison a mandaté la société Mevia pour développer un site mobile spécifique. Audacy s’est vue confiée la conduite de l’architecture d’information et du design des supports tactiles.

Afin de concevoir la stratégie de contenus mobile et tablette, nous avons redéfini l’architecture d’information en adaptant le storytelling existant pour une optimisation sur les supports mobiles. Dans ce sens, nous avons réparti les contenus dans une structure de six sections à multiples niveaux de lectures. Pour chaque support, nous avons révisé la profondeur de lecture afin de ne pas surcharger les sections, tout en gardant l’essence du message initialement présent sur le site flash.

Une fois cette nouvelle organisation de contenus structurée, nous avons sélectionné un ensemble de composants de navigation pour les devices tactile et les écrans mobiles :

  • menu de navigation cachĂ©,
  • navigation profonde via des accordĂ©ons,
  • fil d’ariane permettant Ă  l’utilisateur de suivre son parcours dans le site,
  • rĂ©partition du contenu dans les pages au travers de panels et de tabulations avec effet tactile,
  • mise en forme de sliders pour la sĂ©lection des champagnes, des laurĂ©ats, ou des collections.

Nous avons ensuite défini leur habillage, en cohérence avec la charte graphique initiale du site flash et des guidelines de marque.

Enfin, nous avons adapté les contenus visuels du site pour les versions mobile et tablette en optimisant le niveau de détail, le cadrage, la taille et le poids des éléments pour chacune des versions.

Afin de fluidifier la lecture des contenus et de se rapprocher au plus près de l'expérience des applications, nous avons recommandé un développement du site en AJAX afin de permettre un chargement progressif des contenus sans rechargement de page.

context

Taittinger created a flash website a few years ago, blocking their mobile and tablet access. Subsequently, Taittinger asked Mevia to develop a specific mobile website. Audacy digital agency worked specifically on the UI-UX design for this mission.

Solution

We created for this project a very functional and tactil experience, and used objects like swipe, carrousels, slides, and "accordeons". We also included a lot of Ajax animation.

Mobile website Nous consulter Retour