Présentation de Tom Press

La société Tom Press, créée en 2001, est une entreprise spécialisée dans la vente à distance de produits pour la transformation alimentaire. Son catalogue papier et sa boutique en ligne lui a permit de se positionner pendant plusieurs années en tant que leader européen de matériel pour « transformer et cuisiner maison ».

 

Contexte du projet

La vente de matériel via le site e-commerce représentant aujourd’hui une activité importante pour la société, celle-ci se doit mettre à jour régulièrement le site avec l’évolution des technologies web mais également dans le but d’améliorer constamment l’expérience de navigation pour ses clients et futurs clients.

C’est précisément dans ce contexte que la société Tom Press m’a placé sur ce projet en tant que webdesigner sous contrat d’apprentissage, en collaboration avec son prestataire informatique Octave, afin d’atteindre les objectifs de la refonte du site e-commerce.

Objectifs de la refonte

Sur le plan graphique

  • Conserver la charte graphique de l’ancien site (ci-contre)

  • Donner une identité plus fort à la boutique e-commerce

  • Décliner la nouvelle charte sur tous les supports numériques


Sur le plan ergonomique

  • Concevoir un design responsive jusqu’au format tablette

  • Définir et prototyper la plus part des interactions sur site

  • Optimiser l’ergonomie en maintenant une architecture de page SEO-friendly


Tom Press Ancien site Homepage

Zoning fourni par la prestataire

Nouvelle charte graphique

Couleurs

  • #BC1D1D

  • #91B40A

  • #111111

  • #999999

  • #CCCCCC

  • #F3F3F3


Typographies

Roboto Slab 700

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

Asap 400

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

Asap 700

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0


Maquettage


Homepage

La refonte de www.tompress.com a permis de retravailler en profondeur la page d’accueil du site. Il y a désormais plus de possibilités pour explorer la boutique grâce des mises en avant de produits, catégories ou avis client positionnés de manière stratégique sur la page.

Tom Press - Homepage Full

Menu principal

Tom Press, c’est plus de 4500 références classées dans de nombreuses catégories à hiérarchiser de manière intuitive, dans un menu avec un espace très restreint. La solution de fractionner le menu principal en 3 niveaux a permit de plus facilement structurer celui-ci de manière ordonnée. Les pictogrammes ainsi que les images sont des repères visuels qui permettent aux visiteurs de s’y retrouver dans ce menu très fourni.

/

Liste de produits

La maquette suivante est un modèle de liste de produits. De nombreuses fonctionnalités déjà présentes sur la version précédente ont du être retravaillé pour gagner en efficacité. C’est le cas notamment des filtres de produit (popularité, alphabétique, …), mais également le fil d’Ariane et l’ergonomie du menu.

Tom Press - Liste de produits
Tom Press - Liste de produits hover

Survol des produits

Dans cette nouvelle version du site, les interactions, notamment au survol, sont primordiales. La refonte du site visait une interface très claire et aérée, mais nécessitant l’affichage de nombreuses informations.

Dans les listes de produits, pour mieux séparer visuellement chaque élément de la grille, la solution d’afficher une très fine bordure au survol permet de mieux délimiter chaque produit. Puis le curseur a généralement tendance à suivre le regard de l’utilisateur, cette interaction permet de rendre la navigation plus confortable.



Fiche produit

La page « fiche produit » est un élément incontournable pour un site e-commerce. L’accent a été mis sur le positionnement et la visibilité du bouton « Ajouter au panier » mais aussi sur la taille des photos du produit. Ainsi, le contenu essentiel est mieux mis en valeur, ce qui permet de se rapprocher de l’objectif final :  l’amélioration du taux de conversion.


Interaction d’ajout au panier

Dans cette nouvelle version du site TomPress, les interactions sont bien plus présents afin de rassurer l’utilisateur et de ne pas le frustrer lors de sa navigation. Ainsi, chaque action qu’il réalise retourne une notification (effet au survol, animation après clic) comme quoi le site « comprend sa demande ».


Première interaction (instantané)

La première interaction lors de l’ajout au panier est instantanée : au clic sur le bouton « Ajouter au panier », le texte du bouton qui mentionnait le texte disparait pour laisser place à une pictogramme de validation suivi du mot « Ajouté ». Cette apparition est rapide et donne un effet de profondeur afin de bien interpeler l’utilisateur.


Second interaction

La seconde interaction arrive environ une seconde après l’animation sur le bouton d’ajout au panier. C’est une pop-in qui sert de « call-to-action », soit pour renvoyer directement l’utilisateur au panier, soit pour l’inciter à ajouter d’autres produits en relation avec le dernier ajouté à son panier.


Description détaillée du produit

Quand on descend dans la page, on arrive à la fiche complète du produit, avec de nombreuses fonctionnalités : agrandir la taille du texte, donner un avis, filter les avis, voir les articles similaires ou les accessoires.

De plus, quand le bouton d’ajout au panier n’est plus visible dans l’écran, une nouvelle zone en haut de l’écran vient s’ajouter pour faire ré-apparaitre ce bouton d’ajout au panier, ainsi qu’un rappel du nom du produit, son prix et sa note.


Panier

Pour le nouveau site de Tom Press, la refonte du panier est totale. Comme pour les pages de produit, l’objectif à cet endroit est de donner accès à la page de paiement le plus rapidement possible, notamment en retravaillant la disposition de certains éléments tels les formulaires ou les choix à faire par l’utilisateur (livraison, paiement).


Formulaires

La maquette ci-dessous représente un formulaire à remplir quand on doit renseigner ses coordonnées pour acheter un produit. Le but était de le rendre le plus ergonomique et ludique possible en utilisant des couleurs significatives (le vert de la charte graphique), afin d’aider l’utilisateur à remplir rapidement cette page.

Responsive Design

La boutique en ligne de Tom Press est désormais responsive jusqu’au format tablette (pour les terminaux mobile, le choix a été fait par le prestataire informatique de fournir un site mobile).

Bien que le site ait été pensé en amont pour un usage confortable sur tablettes, quelques fonctionnalités et pages ont dû être repensées sur le plan ergonomique pour un rendu optimal sur le format tablette.

Homepage

Le site au format tablette affiche désormais un header avec des informations dissimulées derrières des pictogrammes et boutons facilement compréhensibles pour l’utilisateur, de sorte à ce qu’il trouve de manière intuitive ce qu’il cherche (menu, panier).


Menu Responsive

Le menu, qui était déjà un obstacle majeur pour la version desktop, a dû être repensé spécialement pour le format tablette, en créant une liste déroulante des catégories. La navigation est donc plus simple sur tablette, puisque les effets de survol exploités sur le format standard, ont du être remplacé par des interactions tactiles.

Le projet en chiffres


14

Pages repensées


25

Fichiers PSD


7

Tests utilisateurs


12

Semaines

A propos

Projet réalisé dans le cadre de ma mission d’alternance chez Tom Press, une société spécialisée dans la vente à distance via son site e-commerce de produits de pour la transformation alimentaire.

Commanditaire : Tom Press
Date : 2014 - 2015
Outils : Adobe Photoshop

Réalisations connexes


Dernières réalisations