Après quelques mois de travail à la réalisation du site de l'entreprise Carrosserie Online, notre agence vous propose de découvrir quelques étapes de la conception du site www.piece-carrosserie-discount.com, ainsi que les éléments qui le compose.

Le haut de page est composé d'un logo, d'un moteur de recherche par référence, d'un bouton d'accès vers l'espace professionnel, d'un bouton d'accès aux comptes clients, d'un menu d'accès aux pages explicatives.

Le bas de page est composé d'un plan de site avec des liens vers les pages intérieures, un champ d'inscription à la newsletter, un menu des réseaux sociaux. Immédiatement en dessous, un menu avec les partenaires de l'entreprise, ainsi qu'un menu avec les modes de paiements proposés par le site. Vient ensuite, un espace de satisfaction des clients, puis, plus bas les informations de copyright du site Internet.

La page d'accueil est composée d'un moteur de recherche par marques et modèles. Réalisé en Ajax, il s'actualise instantanément et permet une recherche rapide. En complément nous avons développé un module de recherche par immatriculation également en Ajax. Il s'agit d'un Web Services qui interroge une base de données distante AAAData . Il suffit pour l'utilisateur d'ajouter un numéro de plaque d'immatriculation, pour être instantanément dirigé vers la marque et le modèle de son véhicule.

Immédiatement en dessous du moteur de recherche est affiché un menu avec les avantages proposés par le site e-commerce, puis en dessous des promotions en libre administration côté CMS.

Immédiatement sous les avantages du site et des notations client avec eKomi est affiché les offres. Il s'agit d'une suite de visuel promotionnelle en lien avec des pages intérieurs.

Plus bas est affiché l'ensemble des sections, catégories, et sous-catégories du catalogue. Puis ensuite les principaux constructeurs automobiles avec la marque et le modèle. Il s'agit en fait ici d'ajouter des pages complémentaires au catalogue. Ces pages ne sont pas indispensables mais permettent d'améliorer grandement le référencement naturel du site.

Il s'agit d'un ensemble de page qui permettent par étapes successives de trouver l'article que l'on souhaite commander. Le catalogue est ainsi composé d'une page avec les marques automobiles, les modèles, les catégories et sous-catégories d'articles, ainsi qu'une page avec le détail de la pièce automobile.

En haut de toutes les pages de catalogue est présent un espace composé de la marque, du modèle et de la période du véhicule. Cet espace permet de changer rapidement de marque et modèle. Sur la partie gauche des pages est affiché un menu qui offre la possibilité de naviguer sur l'ensemble du catalogue des pièces automobile afin de trouver d'autres pièces rapidement. Un bouton "ajouter au panier" ouvre une fenêtre avec le détail de l'article ajouté où il est possible d'ajuster la quantité.

La page de détail d'articles est composée du résumé de l'article, d'un espace tarif avec un bouton de commande, de photos complémentaires, du descriptif complet de la pièce, des informations d'expédition, d'un espace de témoignages et avis. Situé en haut du descriptif, un bouton permet de partager la page avec un ami et de lui fournir des informations complémentaires. Situé immédiatement sur la gauche un bouton imprimer permet d'ouvrir une fenêtre et de pouvoir "imprimer" le descriptif de l'article ou d'enregistrer en PDF.

Le site commerce est composé de pages dynamiques qui permettent d'ajouter des articles au panier, de choisir un mode de livraison, de choisir un mode de paiement et de confirmer la commande.

La page de récapitulatif de commande est composée :

• D'un menu général avec toutes les étapes de la commande
• Du récapitulatif des articles ajoutés au panier
• D'un module pour la commande expresse par référence article
• D'un module de remise, par code
• D'un espace d'aide à la commande
• D'un espace avantages

La page des modes de livraison est composée :

• De la liste des modes de livraisons disponibles
• De l'adresse de livraison avec changement possible
• Du récapitulatif de commande

La page des modes de paiement est composée :

• De la liste des modes de paiements
• Du récapitulatif de commande
• Des adresses de facturation et de livraison
• Du mode de livraison

Après avoir validé le mode de paiement et payé la commande, l'utilisateur est dirigé vers la page de confirmation de commande. Une fois sur cette page l'utilisateur pourra:

• Relancer une commande si elle n'a pas abouti
• Imprimer un bon de commande pour un paiement par chèque
• Se rendre dans l'espace client pour suivre l'avancement de sa commande

Il s'agit d'un certain nombre de pages qui permettent à un utilisateur :

• De suivre ses commandes
• De retrouver ses factures
• De modifier son carnet d'adresses
• De modifier ses informations d'accès
• De modifier ses informations des véhicules
• De modifier ses informations professionnelles pour les entreprises
• D'interagir avec le support technique
• De modifier ses avis

Il s'agit de pages explicatives sur : comment retourner un article, les points de retrait, les questions fréquentes, comment commander, les conditions générales de vente…

Avant de travailler un projet complexe comme un site e-commerce, il est obligatoire afin de fixer les attentes de l'entreprise et de garantir la bonne marche du projet de réaliser un briefing de projet. 

Avec notre expertise acquise dans la conception de sites internet de vente de pièces automobiles, notre agence a permis de faire gagner du temps à l'entreprise, cela à toutes les étapes du projet. Après avoir noté les objectifs et les attentes pour la création du site e-commerce avec :

• Les objectifs du projet
• L'analyse de la concurrence
• Les utilisateurs potentiels
• La partie graphique
• Le plan du site…

Nous avons proposé des solutions plus poussées en terme de développement et de fonctionnalités :

• Intégration d'un moteur de recherche par immatriculation
• Intégration des comptes professionnels pour les entreprises
• La possibilité de livrer en Europe et dans le monde
• Le développement dynamique en php7 et Ajax
• L'intégration rapide des articles du catalogue

Il s'agit de quelques-unes des solutions proposées pour ce projet

Avant de lancer un projet de création de site e-commerce comportant beaucoup de modèles de pages, il est impératif de réaliser un plan. Le plan conçu sous la forme d'un organigramme, permet d'avoir une vue d'ensemble du site.

Il offre à notre équipe une référence à chaque étape du projet. Elaboré dans Adobe Photoshop, le plan précise le nombre de modèles de pages à réaliser, les éléments à prévoir à l'intérieur des pages, menus, logos, articles, formulaires... Il facilite la création des futures maquettes.

Avec les contraintes du responsive design, il est préférable de tout prévoir en amont, c'est justement l'objectif des maquettes. Celles-ci permettent de tester différentes approches de mises en page. Cette étape est cruciale pour la suite car une fois tous les éléments mis en place, il est plus simple ensuite de ne se préoccuper que du design.

Pour ce type de site nous avons réalisé plusieurs propositions de maquettes par type de page. Et pour la page d'accueil des déclinaisons pour les versions responsives.

S'agissant d'un site e-commerce, l'apport  graphique est moins important qu'un site de présentation d'activité. Il s'agit principalement de travailler sur le haut et le bas de page du site internet.

Nos graphistes ont proposé un design propre à l'univers automobile, s'inspirant de sites des constructeurs automobile comme Renault pour lequel nous avons déjà réalisé des projets. Mais aussi pour d'autres entreprises dans le même secteur d'activité dont vous pouvez voir nos exemples dans la partie de notre site consacré à nos créations.

Après avoir dessiné toutes les pages modèles dans Photoshop et décliné le graphisme pour mobile et tablette, la création graphique fut approuvée par le client, avec notamment des modifications importantes concernant la page d'accueil, le haut et le bas de page (voir la galerie)

Après avoir terminé toutes les pages modèles du site, nous avons ajouté le codage PHP pour rendre le site dynamique  et faciliter la mise à jour des pages à l'aide du CMS Olloweb.

L'utilisation du HTML5 facilite le développement des pages grâce aux nouvelles balises qui permettent de mieux structurer le code et de gagner en lisibilité. Le CSS3 avec les Média Queries facilite la déclinaison du site en version tablette et smartphone.

Pour faciliter l'intégration des articles, tarifs, catégories, marques, modèles de véhicules, notre solution de gestion de site permet d'importer en masse un ensemble de données déjà travaillées dans un tableur. Ainsi avec quelques heures de formation au CMS Olloweb, le client prend rapidement le contrôle du site pour ajouter les articles du catalogue et traiter les commandes.

Avant de procéder à l'ouverture du site, Olloweb lance une vérification complète du site internet afin de garantir le codage. Le site e-commerce une fois validé est garanti pour une durée de deux ans. Cette garantie couvre ainsi les bugs éventuels et les mises à jours des navigateurs.

Pour obtenir des statistiques de fréquentation du site, nous procédons à l'installation de module Google ou Piwik. Un plan de l'ensemble des pages web du site est rendu disponible en ligne et ajouté dynamiquement pour Google et les autres moteurs de recherche.

La conduite du projet, le prototypage, la conception graphique, la réalisation technique et le CMS ont été réalisés au sein de l’agence Olloweb.