Problème
Enorme pénurie sur plusieurs composants ainsi que trop de produits, trop de specs : l'utilisateur se perd et hésite a acheter.
Projet portfolio - E-commerce
Site de vente de matériel informatique
Conception d'une boutique en ligne (PC, composants, peripheriques) proposant un sytème inédit de précommande avec une experience d'achat rapide, claire et rassurante.
Contexte & objectif
L'objectif : créer une boutique en ligne fiable et simple a utiliser, adaptée aux utilisateurs qui comparent beaucoup (prix, avis, compatibilité, caractéristiques) et proposer un sytème de précommande fiable et sécurisé afin d'éviter les flux trop important lors des sorties de certains composants soumis aux ruptures de stocks à leur lancement.
Solution
Système de précommande fiable et sécurisé afin d'assurer la disponibilité des composants avant leur sortie, filtres lisibles, fiches produits claires, infos de livraison/retour visibles, panier rapide.
Cible
étudiants, gamers, pros IT : besoin de comparaison et d'achats "sans prise de tête".
Fonctionnalités clés
Ce que l'utilisateur peut faire sur le site.
Recherche & filtres
Filtrer par marque, prix, performance, disponibilité, notes.
Comparateur
Comparer plusieurs produits (GPU/CPU/PC) sur les specs principales.
Fiche produit
Spécifications, compatibilité, avis, questions, produits similaires.
Panier & checkout
Ajout rapide, estimation livraison, paiement en plusieurs fois (concept).
Compte client
Historique, suivi colis, retours simplifiés, wishlist.
Reassurance
Livraison/retour, garantie, SAV, badges securité et avis visibles.
UI - ecrans principaux
Interface PC.
Stack & methode
Pour la réalisation de ce projet, j’ai suivi une démarche de conception complète, de l’idéation à l’intégration.
J’ai d’abord travaillé sur l’identité visuelle en utilisant Adobe Illustrator, afin de concevoir le logo et différents assets graphiques nécessaires à l’univers du site.
Une fois cette base définie, j’ai utilisé Figma pour concevoir l’interface. J’ai commencé par une phase de réflexion UX avec un zoning réalisé à la main sur feuille A4, me permettant de structurer rapidement les pages.
J’ai ensuite réalisé des wireframes pour plusieurs écrans clés, notamment la page d’accueil, afin de valider les parcours utilisateurs et l’organisation des contenus.
La maquette UI a été conçue en exploitant les fonctionnalités avancées de Figma, notamment l’Auto Layout, les composants parent/enfant et les variants pour les différents états interactifs.
Cette méthodologie m’a permis de produire une interface cohérente, évolutive et pensée pour une intégration responsive en HTML et CSS.
Technos
UX
- Arborescence simple
- Reassurance + confiance
- Hierarchie visuelle claire
Ameliorations futures
- Page comparateur fonctionnelle
- Optimisation SEO
- Backend + API produits
Résultats & apprentissages
Ce projet m’a permis de consolider mes compétences en conception UI/UX et en intégration front-end, tout en identifiant des axes d’amélioration.
“Ce projet m’a appris à structurer une page projet complète, à concevoir une interface claire et cohérente, et à intégrer un layout responsive de manière propre et maintenable.”
— Note de projet- Structuration : meilleure organisation des sections, hiérarchie de l’information plus lisible et parcours utilisateur plus fluide.
- UI & cohérence visuelle : travail approfondi sur la réutilisabilité des composants, la constance des styles et l’alignement avec l’identité visuelle.
- Responsive & intégration : amélioration de ma compréhension des layouts responsives en HTML et CSS, avec une attention portée à la lisibilité sur tous les formats d’écran.
Contact
ceccaldi.morgan@gmail.com / LinkedIn / GitHub.