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.
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.
