Au cours de cette mission en tant que travailleur indépendant, Wazoom Studio m’a mandaté pour repenser le site d’un de ses clients, la clinique dentaire Geneviève Lafrance, en mettant l’accent sur le design UI, compte tenu du manque de focalisation UX dans le cadre de ce projet.
Pour commencer, la clinique a dressé une liste de sites qu’elle trouvait inspirants. En collaboration avec Wazoom Studio, nous avons décidé de suivre une approche minimaliste, tout en mettant l’accent sur des interactions et des animations modernes. Ensuite, j’ai créé les maquettes statiques du site pour les versions desktop et mobile, en y ajoutant des annotations pour les animations. Cela s’explique par les défis techniques rencontrés dans Figma à ce moment-là, car la mise en place de ces animations était complexe.
Face à ces défis, Wazoom Studio a fait appel à un motion designer indépendant pour collaborer avec moi. En lui transmettant mes maquettes statiques, nous avons ensuite discuté des animations à intégrer, dans le but de créer une maquette vidéo présentable au client. Cette démarche visait à offrir une représentation plus réaliste du résultat final du site, facilitant ainsi la compréhension tant du client que du développeur.
Globalement, j’ai pu bénéficier d’une liberté créative totale tout au long du projet, avec pour principal impératif de transmettre une image accueillante et apaisante, compte tenu du contexte parfois stressant lié aux visites chez le dentiste.
Ce projet s’est nourri de diverses sources, en particulier pour la conception circulaire, l’utilisation de l’effet de défilement horizontal du texte, l’agencement du texte au-dessus d’une image sur la page d’accueil, et la création d’un demi-cercle sur la page « à propos ». Voici, ci-dessous, quelques exemples qui illustrent ces choix de conception.
Après avoir conçu mes maquettes filaires, je les ai ensuite stylisées avant de les partager au motion designer. Nous avons ensuite collaboré pour discuter des animations que je souhaitais intégrer dans le projet. Le produit final de cette collaboration se matérialise à travers la maquette animée que voici.
Enfin, une dernière déclinaison a été conçue afin de faciliter l’intégration pour le développeur et offrir une meilleure vision du rendu au client sur les appareils mobiles.
