Portfolio – Florian Baron

Digit-Photo

Projet de fin d’études de Bachelor Chef de Projet Digital,

création d’une nouvelle interface web pour le site internet Digit-Photo.

Informations

Vous souhaitez consulter mes maquettes ? C’est par ici !

Le contexte

Après une quinzaine d’années passées en tant que commercial, Jean-Marc Debes fonde Distriphot en 1997, une entreprise de vente de consommables chez les photographes du Grand Est. 5 années plus tard, 2002 marque le tournant du digital pour l’entreprise : Jean–Marc s’associe avec son fils Jonathan pour créer le site Digit-Photo et ainsi démarrer l’activité de l’entreprise en ligne.

L'objectif

Pionnière de l’univers photographique, l’entreprise fut le sujet d’étude de notre PFE de Bachelor chez Digital Campus, dans le but  de développer son activité en ligne, ainsi que sa visibilité sur ses plateformes de communication, affichant une image affirmée et cohérente avec les tenants et aboutissants de leur activité. A travers la création d’une nouvelle stratégie digitale complète, ceci comprenait également une vaste mise à jour de l’interface de leur site internet, dont l’apparence n’avait pas bougé depuis plus de 15 ans et ne s’était pas adaptée aux contraintes et tendances du web actuel.

Analyse de l’existant

Au delà de son apparence archaïque, qu’il y avait forcément vocation à retravailler, l’un des éléments qui nous sautait le plus rapidement aux yeux était l’existence de trop nombreuses couleurs qui apportent une esthétique peu cohérente, tout en employant souvent les typographies sur des fonds très lumineux, une pratique déconseillée pour les sites cherchant à se conformer au RGAA.

En termes de concision, le site n’est clairement pas à son avantage, proposant beaucoup trop de contenus textuels trop peu séquencés, ce qui a tendance à nous perdre dans une multiplicité d’informations.

Un besoin évident de minimiser la quantité d’informations et de composants visuels pour aérer l’interface et mettre en évidence les données les plus importantes se faisait sentir. Une densité d’informations élevée peut entraîner des distractions et des erreurs, et c’est un ressentit que tous les étudiants possédaient en naviguant sur le site de l’entreprise.

Par ailleurs, le manque de cohérence avec une charte graphique établie donnait un rendu un peu cheap. Un large lissage graphique semblait nécessaire

La cohérence consiste à garantir une stabilité visuelle entre toutes les interfaces UI d’un même produit numérique. Cela inclut l’utilisation du même format pour les éléments visuels (couleur, police de caractère, mise en page) sur toutes les pages d’un site ou d’une application, le maintien des mêmes emplacements pour les menus standards, et l’application d’un style éditorial uniforme (tournures de phrase, ton, ponctuations, etc.) sur toutes les interfaces.

De ce point de vue, l’expérience Digit-Photo ne semble pas adepte de cette pratique. En effet, et ce au sein d’une même typologie de produit (ex: en solde) on discerne de multiples manières de mettre en avant un produit, et ce de manière un hasardeuse. Il s’agira dans cette transformation de simplifier et d’unifier la mise en avant des produits.

Des maquettes web dédiée au site internet de Digit-Photo.

Réalisations

A travers cette nouvelle stratégie digitale, j’ai désiré mettre l’accent sur une nouvelle identité graphique prenant également le pas sur l’apparence du site internet de Digit-Photo. 

Le logo de Digit-Photo créé durant mon PFE. Le logo prend la forme d'un appareil photo.
La typographie Satoshi utilisée dans le cadre de mon PFE.

Celle-ci passe par la création d’un nouveau logo, l’appropriation de nouvelles couleurs identitaires, l’utilisation d’une nouvelle typographie utilisée dans l’entièreté des communications et rédactions de l’entreprise, ainsi que l’emploi de jeux de mots cohérents vis-à-vis de l’univers photographique. Ce tout permet à l’entreprise de se distinguer fortement de ses concurrents observés dans un benchmark, la distançant de ces apparences trop traditionnelles des plateformes de vente en ligne.

 

Homepage de la nouvelle interface du site internet de Digit-Photo.
Listes d'avantages du site internet de Digit-Photo.

 

Parti pris visuel, l’entièreté du site passe en dark mode pour garantir une juste mise en avant des produits, mais aussi pour jouer sur l’importance des visuels photos, un point phare permettant de mettre en avant une expertise de l’entreprise sur le sujet de la photographie.

La quantité d’informations est réduite au maximum afin de mieux garantir une navigation fluide pour l’utilisateur. Ces information se retrouvent majoritairement dans des systèmes de cards et bénéficient d’états de survol au format desktop, donnant à n’importe quel instant une réceptivité de navigation pour l’utilisateur. 

Une page produit de la nouvelle interface du site internet de Digit-Photo.
Les différentes politiques du site internet de Digit-Photo.

L’accentuation sur une option de paiement de plusieurs fois était à mes yeux une nécessité pour l’entreprise, sa clientèle ciblée comprenant majoritairement des professionnels, mais surtout des amateurs et des étudiants qui ne bénéficient pas nécessairement d’un pouvoir d’achat extrêmement large. Pour accompagner également cette clientèle cible de l’entreprise, j’ai choisis de mettre l’accent sur deux fonctionnalités supplémentaires qui n’étaient en l’état pas disponibles :

 

Les informations relatives à la livraison de la nouvelle interface du site internet de Digit-Photo.

1) Une section blog, servant directement à la réassurance de la clientèle sur l’expertise de l’entreprise autour de son sujet de prédilection, par le biais de guides ou d’actualités sur le monde de la photographie, mais appuyant également le SEO du site par l’ajout de contenus textuels. Cette section se dote également d’un long feed de photographies postées par les utilisateurs à l’aide de leur matériel acheté chez Digit-Photo, modérable simplement par les personnes en charge du maintien du site internet, et permet de mettre en avant les équipements qui ont servi à la prise de photos.

Le panier de la nouvelle interface du site internet de Digit-Photo.
Un feed de photographies disponibles sur la nouvelle interface du site internet de Digit-Photo.
Les avantages liés à Digit-Photo.

2) Un configurateur d’achat, permettant aux utilisateurs novices, selon les recommandations du site internet, de se voir recommander un équipement de base permettant de mettre un premier pied dans le monde de la photo. Étape après étape, la fonctionnalité vient décrire une sélection de produits de manière similaire aux pages produits existant déjà sur le site, et permettant à l’utilisateur d’ajouter en un seul clic une sélection de produits directement dans son panier.

Des guides proposés sur la section Blog du nouveau site internet de Digit-Photo.