E-commerce responsive website
Le projet Bluescreen
Bluescreen est spécialisée dans l’infogérance (services informatiques BtoB), et fait partie du groupe LDLC. La société a pour principale valeur une totale transparence : les prestations informatiques peuvent sembler floues pour certains utilisateurs, avec Bluescreen elles sont clairement identifiées et les prix connus à l’avance.
Le site existant ne reflétait pas cette valeur, nous avons été sollicités pour travailler sur une refonte. Suite aux échanges sur les enjeux de cette refonte, nous nous sommes dits « pourquoi ne pas donner la possibilité aux clients/prospects d’acheter en ligne les prestations dont ils ont besoin ? « , ce qui n’est proposé par aucun concurrent. Cependant, certaines prestations ne peuvent pas être achetables, comme par exemple la calibration spécifique de certains matériels. Cette contrainte a dû être pris en compte dans la conception, tout comme le choix technique de se baser sur le CMS Prestashop pour des raisons de coûts et de temps. En terme d’UX, j’ai travaillé conjointement avec le développeur Prestashop afin d’établir, dans un premier temps, le sitemap ainsi que des wireframes pour les listings et les fiches produits, nous permettant d’explorer les différentes pistes réalisables. Nous avons ainsi avancé étape par étape, en échangeant un maximum avec le directeur de la société.
En terme d’UI, j’ai réalisé des maquettes colorées, avec, par exemple, des couleurs dédiées pour chaque catégorie de produits, afin d’apporter une singularité propre au site.
Les wireframes
Les wireframes nous ont permis de tester, en terme de faisabilité, différentes approches pour la construction des listings et des fiches produits. Nous avons également gagné du temps en évitant de travailler directement sur des maquettes plus poussées et donc plus chronophages.
Le design
La page d’accueil
En plus des valeurs et des témoignages de clients, la page d’accueil met en avant les 4 catégories de services proposés par la société.
Le listing produit
Les « filtres » représentés sur le listing reprennent les « catégories/sous-catégories » de produits, les produits s’affichent sous forme de tuile pour gagner en clarté. Sur mobile, les filtres s’affichent au clic sur le bouton sticky « Affichez les prestations » afin d’éviter de surcharger l’écran.
La fiche produit
La fiche produit n’est accessible que pour les produits directement commandables sur le site. Elle peut comporter une ou des option(s), sélectionnable(s) grâce au(x) bouton(s) radio. Là aussi, sur mobile, le bouton de commande est positionné en permanence en bas de page.
