Refonte du site web Penge
Outils
Contexte et objectifs
Le site de Penge a été développé avec l’outil Webflow. Cependant, il était difficilement modifiable par l’équipe de Penge et avait différent problèmes techniques. Il nécessitait une mise à jour technique et une amélioration de l’expérience utilisateur.
Pour répondre aux problématiques de l’équipe de Penge, nous avons défini les objectifs suivants :
- Transformer le site vitrine en un site one page qui détaille la proposition de valeur et les services proposés par Penge,
- Optimiser et mettre à jour la page “Ressources”,
- Optimiser et mettre à jour les pages de type “Article”.
L’accompagnement étape par étape de la maquette au copywriting en passant par l’intégration permet de voir le projet avancer très rapidement et de corriger au bon moment si besoin. Je recommande Toutan à toutes les TPE et indépendants qui souhaitent un site à la fois optimisé pour le marketing et à jour techniquement."
Pier-Thibaud Guerrier
Co-fondateur de Penge
Solution
Optimisation du design system
Au début du projet, l’équipe de Penge nous a partagé les différents éléments de son design system (logo, couleurs, typographies, icones, composants) sur Figma. Nous avons retravaillé les couleurs, les typos, les composants et les icones utilisés pour que le nouveau site vitrine reflète les ambitions et les valeurs de Penge.
Maquettage
Nous avons travaillé sur un wireframe du nouveau site one page sur Figma. A cette étape, l’idée a été de poser les premiers composants et de cartographier les parcours utilisateurs.
Une fois que les wireframes ont été validés, nous avons ajouter toute la couche graphique aux wireframes en réutilisant les éléments du design system définis plus tôt.
Développement du site dans Webflow
Comme chaque projet, nous intégrons un style guide pour structurer le site.
Il regroupe l'ensemble des composants qui vont être réutilisés sur les différentes sections. (typographies, couleurs, espacements..) et permet de maintenir une cohérence globale. Cela va aussi faciliter la mise à jour du site pour l’équipe de Penge.
Une fois avoir finalisé la phase de maquettage, nous avons développé le site one page dans Webflow pour qu’il colle aux maquettes UI précédentes.
L’idée est d’avoir un site sympa visuellement mais aussi optimisé techniquement. Nous avons ajouté des animations pour rendre l’expérience utilisateur agréable mais aussi optimisé les images et les contenus. Il a aussi fallu rendre le site responsive.
Nous avons aussi tenu à structurer notre développement grâce à la technologie Client First pour garantir une mise à jour facile du site à l’équipe de Penge.
