Recherches et besoins
Macollec-capsule est un projet qui a démarré dans l'optique de proposer une alternative aux classiques « livres » de collection de capsules de champagne. Le site devait permettre aux utilisateurs de gérer plus facilement leur collection et permettre de meilleures interactions avec les autres collectionneurs.
Le collectionneur devait pouvoir :
- Voir tout le catalogue des capsules
- Avoir un aperçu de sa propre collection
- Ajouter des commentaires sur ses capsules et noter leur qualité
- Filtrer facilement le catalogue des capsules
- Afficher des statistiques sur sa collection
- Gérer ses informations son abonnement dans son profil
- Échanger ses capsules avec les autres abonnés
Le logo
La recherche du logo est parti de l'idée de représenter une capsule, le « C » de collection était un choix naturel pour la forme du logo, après plusieurs concepts, le logo choisi garde la forme d'un C avec une profondeur tout en reprenant les détails d'une capsule de champagne.
Les différentes itérations pour arriver au logo final : mélange entre la lettre et une capsule.
Il est décliné en multiples couleurs pour pouvoir par exemple réaliser une animation au survol.
Le logo final de macollec capsule en 10 teintes.
Le choix des polices
Le choix de la police s'est porté sur Aperçu pour le logo et les éléments de UI comme les boutons et les menus, car c'est une police pleine de caractère tout en restant parfaitement lisible sur une interface.
Le contenu du site lui utilise la police Source Sans Pro, célèbre pour sa clarté et sa bonne lisibilité dans les interfaces, elle est présente dans le texte des cartes de l'ensemble du site.
Exemples d'utilisation d'Apercu et de Source Sans Pro.
Le catalogue
L'accent est donné sur les capsules et les détails comme les boutons s'adapte en fonction de la couleur principale de la capsule.
Dans la page catalogue, l'utilisateur voit les différentes caractéristiques des capsules comme le producteur ou la référence ainsi que les couleurs.
Il peut ajouter le nombre d'une certaine capsule qu'il possède et ajouter ou modifier un commentaire. Il peut aussi appliquer des filtres pour trouver plus facilement les capsules.
Le nombre de capsules par page ainsi que le tri peuvent être renseignés et les capsules possédées par l'utilisateur sont affichées grâce à un symbole validé en haut de la carte.
Interface du catalogue quand l'utilisateur n'est pas connecté.
Ajout d'un commentaire sur une capsule.
L'ajout d'un commentaire se fait par une fenêtre modale pour éviter un changement de page inutile. De plus, la fenêtre rappelle quelques détails utiles sur la capsule choisie.
Le catalogue est aussi consultable pour les utilisateurs qui ne sont pas abonnés (ou non identifié) ainsi tout le monde peut évaluer la qualité et quantité des capsules présentes en ligne.
Le profil
L'utilisateur accède directement à ses statistiques.
Sur la page profil, l'accent a été mis sur les statistiques. L'utilisateur peut voir :
- Le nombre de capsules possédés, s'il a des double, triples, etc.
- Ses producteurs favoris par rapport à ses capsules
- Une graphique montrant l'évolution de ses ajouts de capsules
- Le cumul de ses cotes
- Le pourcentage de capsule qu'il possède par rapport à la totalité du catalogue
Le profil offre aussi un aperçu des dernières capsules ajoutées à son catalogue.
Les échanges
Les différents écrans des échanges.
La partie échange du site permet aux collectionneurs de s'échanger des capsules en faisant des demandes à d'autres utilisateurs. Ils sélectionnent l'utilisateur et les capsules qui l'intéressent, et un échange commence entre les deux parties pour trouver le bon compromis de l'échange.
J'ai décidé de reprendre les mêmes codes pour la sélection des capsules que pour naviguer dans le catalogue, l'utilisateur n'est donc pas perdu dans une nouvelle interface pour l'échange.
Le récapitulatif des demandes et échanges en cours permet d'avoir un oeil sur tout ce qui se passe facilement.
Le développement
Le développement est toujours en cours, je ne peux donc pas vous fournir de liens 
. Mais dès que tout sera en place, je n'hésiterai pas à le rajouter ici !