Les Randos de Pierrot

Phase n°1 : Design UX

• Exploration et recherche

  La phase d’Exploration et recherche démarre avec un questionnaire client exhaustif en face à face avec Pierrot.
  Cette étape me permet de bien comprendre le contexte de l’entreprise et les attentes et les objectifs du client dans le cadre de la création du site.
  C’est le point de départ pour établir le cahier des charges et définir les personas utilisateurs.
  
  En concertation avec Pierrot, au sein du cahier des charges nous fixons les limites du projet :
  

  • Spécificités graphiques: code couleur, univers, …
  • Spécificités fonctionnelles: pages du site, section indispensables, fonctionnalités attendues
  • Informations relatives au contenu: utilisation des photos, intégration de vidéo, ton éditorial,…
  • Spécificités techniques: hébergement, interfaçage avec un module de réservation, utilisation d’un CMS pour pouvoir administrer de manière autonome, responsive,…
  
  
  
  Suite à cela, je concentre mon attention sur les personas pour enrichir la réflexion initiale. Mes discussions avec Pierrot et mes recherches me permettent d’identifier 3 profils utilisateurs types :
  
  • Les jeunes actifs dynamiques
  • Le père de famille GreenPeace
  • Le chef attentionné
  
  Pour chaque persona, je créé une fiche d’identité type et une expérience map. En les confrontant avec le cahier des charges, je peux alors le mettre à jour en conséquence.
  Définissons vos personas

• Idéation et prototypage

  Fort des éléments définis dans la phase précédente, je peux maintenant passer à la création de l’arborescence détaillée du site. Les éléments clés du futur site sont définis à ce moment : menu de navigation, chaque page et son niveau, flux entre les pages, emplacement des CTA, emplacement des fonctionnalités (slider d’avis, formulaire, module de réservation, …), sections par page, …
  Une fois l’arborescence validée par Pierrot, je passe au prototypage sur Figma en créant les maquettes basse définition pour mobile et desktop pour l’ensemble des pages.
  Fondant la conception sur l’Atomic Design, je produis les composants de mon site et les intègre ensuite sur la maquette avec le contenu textuel, les boutons et CTA, ainsi que les espaces pour les images matérialisés.

• Maquettage interactif et test utilisateur

  Une fois que Pierrot a approuvé les maquettes basse définition et que j’ai intégré les flux entre les pages (prototypage interactif), je les soumets à un échantillon d’utilisateurs types. Ces utilisateurs sont sélectionnés par le client et représentent les personas définis en amont.
  Après analyse des retours utilisateurs, j’en tire des enseignements qui permettent de mettre à jour le prototype et d’aborder sereinement la phase suivante : le design UI.

Phase n°2 : Design UI

• Création de l'identité visuelle

  La création du site « Les Randos de Pierrot » passe par une refonte complète de l’identité visuelle de l’entreprise. Avant toute chose, je crée un moodboard pour avoir des premières pistes de réflexion. Sur la base de ce moodboard partagé avec le client, je peux commencer à travailler sur le nouveau logo en conservant le bleu céleste et le vert prairie présents sur le logo initial. À cela, j’ajoute deux couleurs principales : le vert empire et le beige clair. Le vert rappelle le caractère naturel et environnemental de l’activité, tandis que le beige est associé à la terre et donc au côté tout-terrain/sensations des randonnées proposées par Pierrot. Ces deux couleurs reflètent parfaitement la promesse « Outdoor » de l’activité.
  
  La forme du logo est inspirée des patchs « Outdoor Vintage » fièrement arborés par leurs propriétaires sur un t-shirt, une casquette ou un sac à dos, reflétant ainsi leur goût pour la nature et l’aventure. Pour accentuer l’aspect « Outdoor » et naturel, le choix a été fait de partir sur la typographie « Pine Forest ». Les deux icônes du logo rappellent l’activité proposée par « Les Randos de Pierrot » : la trottinette aux couleurs des trottinettes de Pierrot, et l’éclair pour rappeler le caractère électrique de l’engin.
  
  Le logo a été le point de départ pour ensuite travailler sur la bibliothèque d’icônes vectorielles et les illustrations du futur site. Adobe Illustrator a été la pierre angulaire pour toutes les étapes précédentes.

  Imaginons votre identité visuelle

• Guide de Styles et Kit UI

  Une fois l’identité visuelle définie, je m’assure qu’elle est respectée tout au long du processus de conception du site internet et pour les futures mises à jour en créant deux bases de référence distinctes : le Guide de Styles et le Kit UI.
  

  • Dans le Guide de Styles, j’indique les règles relatives à la typographie, aux couleurs, aux icônes et illustrations, aux espacements, aux systèmes de grilles utilisés pour le mobile et le Desktop, ainsi qu’aux boutons et formulaires.
  • Dans le Kit UI, j’applique l’identité visuelle aux composants déjà produits lors du maquettage basse définition pour avoir une bibliothèque de composants prête à l’emploi.
  
  La production de ces deux documents représente un gain de productivité et d’efficacité indéniable pour la suite du processus : Maquette Haute Définition et Intégration.

• Maquette HD et prototypes interactifs

  Grâce à tous les livrables en amont, je peux maintenant créer les maquettes haute définition pour mobile et desktop sur Figma. Ces maquettes représentent le reflet le plus fidèle de ce que sera le site une fois qu’il sera mis en ligne. Le Kit UI, le Guide de Styles, l’identité visuelle, les maquettes basse définition, les photos transmises par le client, sont autant d’éléments à intégrer dans le rendu final.
  
  Pour aller encore plus loin dans la projection et obtenir un rendu au plus proche de la réalité, je crée des flux interactifs qui offrent une vision concrète de l’expérience utilisateur.