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é se démarque de ses concurrents en adoptant une totale transparence : les prestations sont clairement identifiées et les prix connus à l’avance.

Le site existant ne reflétait pas réellement les valeurs de la société, nous avons été sollicités pour travailler sur une refonte. Le gros plus de cette refonte : donner la possibilité de passer commande pour certaines prestations directement sur le site, ce qui n’est proposé par aucun concurrent. Pour des raisons de coûts et de temps, nous nous sommes basés sur le CMS Prestashop. Les contraintes liées à Prestashop ainsi que la volonté d’avoir certaines prestations directement commandables sur le site et d’autres non, ont été les principales difficultés de ce projet. 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 différentes pistes. 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 ».

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.