Valentin Guitton
UX/UI Designer & Intégrateur Le Mans, France UX/UI Designer & Intégrateur Le Mans, France
Chargement en cours ... 0%
UX/UI Designer & Intégrateur Le Mans, France UX/UI Designer & Intégrateur Le Mans, France
Chargement en cours ... 0%
Le Mans, France
Hopply est un logiciel ERP destiné aux petits et moyens commerçants, imaginé et développé par l’entreprise Squilik, basée à La Rochelle. Durant une année complète, j’ai eu l’opportunité d’accompagner l’équipe sur l’ensemble de la création du projet, depuis les premières réflexions stratégiques jusqu’à l’intégration web et les premiers supports de communication.
Avant de concevoir les interfaces, une phase de réflexion UX a été menée afin de comprendre les usages et les problématiques des futurs utilisateurs.
Nous avons réalisé :
L’objectif était d’identifier :
L’objectif était de créer une identité forte et différenciante dans un univers SaaS très codifié.
Le logo associe le “h” et le “y” de Hopply afin de former visuellement un “s”, en référence à Squilik, l’entreprise porteuse du projet. L’ensemble est intégré dans une forme rappelant les icônes d’applications et de logiciels.
La direction artistique a été pensée pour sortir des codes habituels de la tech, où le bleu est omniprésent. Une teinte rouge adoucie a été choisie afin de renforcer la mémorisation de la marque tout en conservant une interface agréable à utiliser au quotidien.
Le travail d’identité visuelle a été pensé en cohérence avec les futures interfaces du logiciel afin de créer une expérience homogène entre marque, produit et communication.
Dans l’interface du logiciel, cette couleur était utilisée avec plus de retenue afin de limiter la fatigue visuelle et d’améliorer le confort d’utilisation quotidien.
Pour structurer la réflexion produit, nous avons commencé par établir plusieurs personas représentant différents profils de commerçants.
Ces personas nous ont permis de rédiger les premières user stories et de définir les fonctionnalités prioritaires.
Exemples de besoins identifiés :
Cette phase a servi de base à toute la conception du logiciel.
La conception du logiciel a débuté autour du module principal : la caisse enregistreuse.
J’ai participé à la conception des parcours liés aux ventes, paiements, commandes, fiches clients et à l’historique des opérations.
Les interfaces ont été conçues sur Figma avec une attention particulière portée à la lisibilité, la rapidité d’exécution et la hiérarchie visuelle.
La conception UX s’appuie également sur des principes fondamentaux comme la loi de Miller, afin de limiter la surcharge cognitive en regroupant l’information de manière pertinente et en évitant de surcharger les interfaces. L’objectif était de faciliter la prise de décision rapide dans un contexte d’usage métier intense.
Une phase de wireframing a permis de structurer les écrans en amont du design final, en définissant les zones clés, les parcours utilisateurs et la hiérarchie des informations avant l’intégration de l’identité visuelle.
Une attention particulière a également été portée à l’usage tactile, principal mode d’interaction du logiciel. Les éléments interactifs ont donc été dimensionnés pour garantir un clic aisé et éviter toute erreur de manipulation, en respectant les recommandations d’accessibilité et d’ergonomie mobile.
Cette approche vise à garantir un confort d’utilisation quotidien et une fluidité maximale dans des contextes d’utilisation rapides et répétitifs.
Un design system complet a été conçu afin d’assurer la cohérence du produit.
Il regroupe les composants UI, les styles typographiques, la palette de couleurs, les espacements en s'appuyant sur les multiples de 8 de la convention de Google, les règles responsive et les états d’interaction.
Cette approche a permis de fluidifier la collaboration entre design et développement.
En parallèle du logiciel, j’ai travaillé sur le site vitrine de Hopply en passant par des étapes similaires de wireframing et de design system.
Le site a été intégré sous WordPress à partir d’un thème développé entièrement sur mesure, conçu de zéro afin de garantir une liberté totale sur la structure, le design et les comportements front-end.
Ce thème repose sur une architecture WordPress classique mais entièrement personnalisée, avec des fichiers clés comme functions.php, permettant de gérer l’appel des différentes ressources (CSS et JavaScript), ainsi que l’optimisation globale du thème.
La structure inclut également des fichiers fondamentaux comme header.php et footer.php, permettant de découper le site en blocs réutilisables et de travailler chaque page de manière modulaire.
Cette approche offre une utilisation de WordPress centrée sur les balises HTML sémantiques, tout en conservant une personnalisation quasi illimitée de l’interface et des comportements.
Elle permet ainsi de combiner la flexibilité d’un CMS avec la précision d’un développement front-end sur mesure, sans les contraintes des thèmes préconstruits ou des constructeurs de pages.
Le site vitrine de Hopply a été développé avec une architecture front-end sur mesure, basée sur Sass et JavaScript, afin de garantir une structure propre, maintenable et évolutive dans le cadre d’un thème WordPress personnalisé.
La structure Sass était organisée de manière modulaire, par composants et layouts (base, variables, mixins, utilities, buttons, cards, header, footer…), permettant de découper l’interface en blocs indépendants et réutilisables. Une méthodologie BEM (Block Element Modifier) a également été utilisée pour assurer une nomenclature claire et cohérente des classes CSS.
Chaque fichier représentait une brique fonctionnelle du site, facilitant la lisibilité du code, la collaboration et la maintenance. L’ensemble était ensuite compilé en un unique fichier CSS pour la production.
En parallèle, des scripts JavaScript ont été développés pour enrichir les interactions du site vitrine, notamment la gestion dynamique des champs de formulaire avec un focus animé.
J’ai également mis en place des comportements d’interface comme la propagation de zones cliquables sur des cartes, afin de rendre les composants entièrement interactifs et améliorer la fluidité de navigation.
J’ai également participé aux premiers supports de communication : cartes de visite, contenus réseaux sociaux et visuels promotionnels afin d’assurer une cohérence entre le logiciel, le site vitrine et l’identité de marque.
