Maquettes du site e-commerce CyberTech

Conception d’un site e-commerce

WordPress · E-commerce

Dans le cadre de ma formation en BUT MMI, j’ai participé à la conception d’un site e-commerce, de la réflexion autour de l’expérience utilisateur jusqu’à sa réalisation sur WordPress.

Le projet consistait à imaginer une boutique en ligne spécialisée dans des produits technologiques et à construire l’ensemble du parcours utilisateur, de la découverte des produits jusqu’à la commande.

  • - Concevoir l’interface d’un site e-commerce.
  • - Réfléchir à l’organisation et à la hiérarchie des contenus.
  • - Construire un parcours utilisateur cohérent de la découverte jusqu’à l’achat.
  • - Réaliser les wireframes et les maquettes du site sur Figma.
  • - Décliner une identité visuelle cohérente sur l’ensemble des pages.
  • - Réaliser le site sous WordPress à partir des maquettes conçues en amont.

Nous avons commencé par une phase de recherche afin de réfléchir à la structure du site, à son organisation et aux besoins spécifiques d’une boutique en ligne.

Nous avons ensuite réalisé les wireframes sur Figma afin de construire le parcours utilisateur et de définir l’emplacement des différents contenus.

À partir de cette première structure, nous avons conçu les maquettes graphiques du site et travaillé son identité visuelle. Nous avons notamment imaginé la page d’accueil, la boutique, les fiches produits, le panier ainsi que les différentes étapes de commande, de paiement et de création de compte.

Une fois les maquettes finalisées, nous sommes passés à la réalisation du site sur WordPress avec Elementor Pro afin de reproduire les interfaces imaginées sur Figma.

  • - Figma
  • - WordPress
  • - Elementor Pro
  • - Wireframing
  • - Maquettage UI
  • - UX/UI Design
  • - Conception d’un parcours e-commerce
  • - Webdesign
  • - Intégration web

Ce projet m’a permis de consolider mes compétences sur WordPress et Elementor Pro, tout en travaillant sur l’ensemble du processus de conception d’un site e-commerce.

J’ai particulièrement apprécié les premières étapes du projet : réfléchir à la structure du site, construire les wireframes puis imaginer l’interface et l’identité visuelle à travers les maquettes sur Figma.

Cette expérience m’a permis de mieux identifier les aspects du web qui m’intéressent le plus. Je prends particulièrement plaisir à réfléchir à l’expérience utilisateur, à l’organisation des contenus et au design d’une interface avant sa réalisation.

Le passage des maquettes à WordPress m’a ensuite permis de mettre ces choix en application et de comprendre comment adapter une conception graphique aux contraintes d’un site e-commerce.

Découvrir le projet

Retrouvez les différentes interfaces du site et le parcours e-commerce à travers les captures du projet final.

Voir le projet complet (PDF)