La société Murprotec, numéro 1 en Europe dans le domaine du traitement de l’humidité, nous a contacté afin de réaliser la version mobile de leur site Internet.

Le but de cette version était d’avoir un site clair, simplifié et plus léger que le site desktop, pour aider l’utilisateur à obtenir rapidement l’information recherchée et à contacter Murprotec.

 

Nous avons été en charge du design, en collaboration avec une consultante e-commerce, et du développement de cette version mobile. Un travail différent par rapport à la création d’un site responsive complet. La charte graphique de Murprotec étant déjà établie.

 

Murprotec - développement de site mobile

Design & UX

Dans un premier temps, nous avons travaillé sur le design et l’UX, pour établir des pages simples et orienter rapidement l’utilisateur vers les contenus ou la demande de devis, point principal. Le résultat de la home a donné une page simple avec visuel, phrase d’accroche, liens et coordonnées. Après plusieurs itérations, nous avons sélectionné 3 versions de home, pour effectuer un A/B testing rapide.

Les pages internes de contenus sont facilement et rapidement accessibles, pas de superflu. Les paragraphes sont agencés en accordéon, pour ne pas imposer trop de texte à l’utilisateur.

 

UI Murprotec - création de site mobile 4w.fr

Développement

Contrairement à une intégration normale, pour cette version mobile nous avons opté pour du jQuery Mobile. C’est à dire un Framework optimisé pour le tactile, qui est basé sur le JQuery ainsi que sur le HTML5 et le CSS3.
Il nous permet de donner un petit air d’application mobile à un site internet.

Rien de tel pour une version mobile simplifiée, claire et qui donne les informations nécessaires.
Il y a en plus la possibilité à partir de son smartphone de demander un diagnostic via un formulaire de contact.
Que vouloir de plus?

 

A/B Testing

Lors de la conception graphique, le choix se portait sur différentes versions de home page. Afin de déterminer la version qui donne de meilleurs résultats de conversion, nous avons donc réalisé un A/B Testing sur cette page du site Internet mobile. Voici les 3 versions :

AB Testing Murprotec - agence webdesign 4w.fr

• Version 1 : un bouton bleu « Demandez un diagnostic » seul, détaché des autres liens.
• Version 2 : le lien « Demandez un diagnostic » intégré aux autres liens, en bleu.
• Version 3 : le lien « Demandez un diagnostic » placé en 3ème ligne dans les liens.

Nous sommes en train d’évaluer les retours, l’A/B Testing ayant été lancé il y a une semaine. Et vous quelle version préférez vous ?