Chic et style

Actions réalisées

  • Gestion de projet
  • Réalisation des wireframes
  • Réalisation des maquettes
  • Création du logo
  • Création de la charte graphique
  • Intégration du site

Résultat

Le site est terminé. La cliente prévois de le lancer en septembre 2021 à l’occasion de sa nouvelle collection

Gestion de projet

Nous avons divisé le projet par pôles de compétences, la partie communication a été attribuée à Lucas De Oliveira et Aurore Rafaitin tandis que la partie du site internet a été attribuée à Clément Baron et Damien Rousset.

 

Nous avons travaillé en commun sur seulement trois phases du projet :

  • L’empathie
  • La définition
  • L’idéation

 

Pour l’empathie il était important que toute l’équipe se mette à la place de ceux qui vont utiliser l’outil que nous devions développer. De plus la cible était vraiment éloignée que ce soit culturellement ou géographiquement.

 

Pour le reste à la suite de la définition d’un rétroplanning et d’un partage nous avons pu nous dispatcher et collaborer de manière efficace.

Pour cette gestion de projet nous avons utilisé l’outil Asana. Nous avons donc pu affecter des taches à chaque collaborateur du projet. Avec une date limite fixée soit par le corps enseignant soit par nous-même.

Cet outil nous a permis à chaque fois de respecter nos délais.

La Charte Graphique

Pour la création de cette charte nous avions pour contrainte couleur le rose et qui était une des volontés de la cliente.

En effet c’est une couleur appréciée sur l’ile de Mayotte.

Les polices

Concernant la police d’écriture nous avons choisis les polices, Montserrat et Poppins.

  • Pour le titrage Montserrat
  • Pour le texte Poppins

Ces polices sont compatibles selon le guide Material Design créé par la société Alphabet.

Il était important pour l’équipe de se fier a des conventions pour permettre au contenu d’être vu et compris le plus simplement possible par notre public cible.

Les couleurs

Pour les couleurs nous avons choisis deux couleurs principales :

Le rose : #f2c1c7, CMJN : 3-32-14-0 RGB : 242-193-189

Le noir : #000000, CMJN : 91-79-14-0 RGB : 0-0-0

Trois couleurs secondaires :

Vert : #63A672, CMJN : 40-0-31-35 RGB : 99-166-114

Vert : #C2F2CC, CMJN : 20-0-16-5 RGB : 99-166-114

Bleu : #AADBF2, CMJN : 30-10-0-5 RGB : 170-219-242

Le logo

Pour le logo nous cherchions quelque chose d’assez épuré. Pour justement faire correspondre le mot « chic ».

La cliente souhaitait aussi mettre en avant l’élégance. La robe signifie l’élégance.

Nous avons choisi une police d’écriture avec du sérif pour justement accentuer cet effet de d’élégance et surtout de qualité.

L'architecture

Le site a une profondeur de site assez faible, en effet il n’y a besoin que de 3 clics pour se rendre à la page la plus profonde du site.

Nous avons décidé de mettre en avant catégories de vêtement les plus importe de l’entreprise sur la page d’accueil.

  • Hauts
  • Bas
  • Robes
  • Nos enssembles
  • Accessoires
  • Nouveautés
  • Dernière Chance

Toutes les catégories devaient être accessible sur le header.

L’accès au favori et au panier devait être aussi accessible sur tous les pages.

La page contact et du service client devait aussi être accessible sur tous les pages.

architecture CS

Wireframe

Notre cible étant principalement sur téléphone portable il était évident de concevoir le site pour les téléphones en premier.

De plus en termes de référencement c’est maintenant une obligation.

wire mobile

Le menu

Nous avons imaginé le header du site en deux niveaux. Le premier étage est dédié a la navigation principale, avec les catégories de vêtements et à la fonction de recherche. Le second étage est dédié au logo, au panier, au bouton des favoris, a la gestion du profil. Et aussi au service client.

La page produit

Nous avons décidé de mettre en avant les photos du produit. Suivit de la description et du prix de ce dernier.

Viendra la possibilité de mettre dans le produit dans le panier ou les favoris.

Pour encourager à l’achat nous avons décidés de mettre des produits similaires en pied de page.

La page favoris

Cette page permet à l’utilisateur de mettre de coter les vêtements qui l’intéresse et de les retrouver plus tard.

Elle permet donc de visionner les produits et de les mettre dans le panier si besoin.

Il est possible aussi de supprimer le produit.

favoris wireframe

La page paiement

Cette page permet de finaliser l’achat du produit. Si vous n’êtes pas connecté, un formulaire d’inscription sera proposé pour indiquer les cordonnées de facturation et de livraison.

Si un code de promotion est disponible il est aussi possible dans cette page de l’indiquer.

Un module par carte de paiement est aussi proposé.

Maquettes

Similaire au wireframe, nous avons appliqué la charte graphique, les boutons sont en rose, tout comme le header.

Maquette CS

Tests Utilisateurs

Les tests ont été réalisés en Visio-conférence à la suite des contrainte liées au covid-19. Nous avons défini des taches à réaliser et laissé l’utilisateur faire les actions nécessaires et sans aide.

Nous avons fait appel à des personnes qui correspondaient à la cible que nous visions.

Le résultat est plutôt positif même si nous avons du bien sûr effectuer des ajustements.

Par exemple nous avons du imbriquer une nouvelle catégorie et permettre justement de mettre des codes de réduction.