TREATWELL
21 heures
Mobile
Projet solo
Analyse heuristique
Figma
Redéfinir l'interface de l'application afin d'améliorer sa fonctionnalité et son attrait esthétique, avec une identité visuelle renouvelée.
Résumé
21 heures de durée totale :
6 heures : 1-3 clones de wireframes Midfi utilisant l'autolayout & analyse heuristique de 3 écrans
3 heures : Analyse Concurrentielle Visuelle & branding suggéré
12 heures : 3 wireframes Hifi & prototype interactif
L'objectif de ce défi UI était de repenser l'interface utilisateur d'une application mobile de mon choix, sans l'obligation de réaliser une recherche UX. La seule contrainte était de sélectionner une application qui pourrait véritablement bénéficier d'une refonte de l'interface utilisateur - une application qui améliorerait à la fois sa fonctionnalité et son attrait esthétique, tout en traduisant une identité visuelle rafraîchie. J'ai choisi l'application Treatwell pour ce défi.
En tant qu'utilisatrice occasionnelle de plateformes de réservation de soins de beauté et de bien-être en ligne, j'ai trouvé la page d'accueil de l'application Treatwell particulièrement désorganisée et visuellement encombrée. Les différentes sections manquaient de hiérarchie et de clarté, rendant la navigation peu intuitive et l'expérience globale frustrante. Plus important encore, j'ai remarqué un manque flagrant de cohérence graphique entre l'application mobile et l'identité visuelle présentée sur leur site web. Ce décalage m'a incité à proposer une refonte qui non seulement améliore la convivialité, mais s'aligne également de manière plus cohérente sur une identité de marque moderne et unifiée.
J'ai ensuite sélectionné les 3 écrans que je pouvais améliorer :
La page d'accueil
La page réservations
La page filtres de recherche
Clonage des écrans en moyenne fidélité
J'ai commencé par créer un clone de la page d'accueil, la plus longue, en tant que prototype de fidélité moyenne. Cela m'a permis de comprendre comment le contenu était structuré, l'ordre des différentes sections et d'identifier les différents types de composants UI à améliorer.
Analyse heuristique
J'ai ensuite réalisé une analyse heuristique, ce qui m'a permis d'identifier plusieurs leviers pour optimiser l'interface utilisateur :
Esthétique & design minimaliste
Les cartes de catégories de traitement étaient à la fois surdimensionnées et surcolorées, ce qui était oppressant et nécessitait un scroll vertical inutile
Les contenus textuels étaient trop grands ou trop petits, ce qui réduisait leur visibilité et leur lisibilité (ex : date de rendez-vous contre heure, taux de réduction des offres)
Visibilité de l'état du système
Manque de cohérence entre les couleurs d'accentuation (ex : icône de notifications, onglets sélectionnés pour les catégories de traitement…)
Incohérence entre l'icône et l'étiquette de texte (ex : recherche dans la barre de menu…)
Ensuite, j'ai réalisé une analyse visuelle de l'interface utilisateur de 3 concurrents pour me faire une idée des normes de l'industrie et des lacunes de branding que je pourrais combler avec mon défi de relooking.
J'ai choisi les 3 applications concurrentes suivantes :
planity
fresha
iara
Analyser ces concurrents a été instructif pour approfondir mes choix créatifs et documenter ma proposition pour une nouvelle identité visuelle.
Planity
Fresha
Iara
Nouvelle image de marque
Sur la base de cette analyse concurrentielle, j'ai pu définir les priorités pour cette refonte de l'interface utilisateur et les attributs de marque que je voulais transmettre à travers ma nouvelle identité visuelle :
Sensualité
Confiance en soi
Humanité
Naturalité
Inclusivité
Nouvelle charte de couleurs
Nouvelle planche de styles
Pour le texte, j'ai choisi la police Alata pour sa lisibilité optimale et son design légèrement arrondi, qui lui confère une dimension apaisante en combinaison avec le fond rose poudre.
J'ai utilisé certains codes de l'identité visuelle déployée sur le site de Treatwell, notamment certaines couleurs et formes organiques reflétant la sensualité des corps en mouvement, mais dans un style moins maximaliste pour s'adapter à l'espace réduit sur les téléphones portables.
J'ai choisi de créer un en-tête avec des lignes colorées qui évoquent la forme d'une bouche, dans le but d'affirmer l'identité de Treatwell, tout en créant une navigation plus immersive. J'ai également retravaillé l'illustration en forme de vague, en l'allégeant afin qu'elle puisse être utilisée comme un diviseur de section sans alourdir l'espace.
Afin d'apporter plus de cohérence graphique et de rationaliser l'espace, j'ai retravaillé l'articulation des différents titres sur la page d'accueil, changé la forme de certaines cartes pour apporter plus de rondeur au design, et réduit la taille des cartes de catégorie de traitement pour rationaliser l'espace et réduire le défilement vertical.
J'ai veillé à améliorer les contrastes entre le texte et les arrière-plans, les photographies et les appels à l'action, afin de mettre en valeur les informations les plus importantes et de faciliter la navigation. Par exemple, sur la page d'accueil, j'ai réduit l'opacité des photos de l'institut pour faire ressortir les pourcentages de réduction, et j'ai réorganisé les cartes de rendez-vous afin que le CTA « croix » ne soit plus superposé à l'image de fond.
Dans l'ensemble, j'ai utilisé moins de couleurs, privilégiant des teintes plus nudes pour transmettre la naturalité. Afin de véhiculer une identité humaine, inclusive et désinhibée, et de faciliter l'identification par les utilisateurs, j'ai également choisi d'intégrer des photographies humaines en gros plan à la place des icônes illustrant les catégories de soins.
Nouvelles maquettes haute fidélité
Prototype interactif
Apprentissages et prochaines étapes
Ce challenge UI a été l'opportunité d'approfondir ma pratique et d'explorer comment l'identité de marque peut être traduite en une expérience mobile plus fonctionnelle et esthétiquement cohérente. L'un des enseignements les plus significatifs a été de voir comment une utilisation plus intentionnelle de la mise en page, des couleurs, et de la typographie peut immédiatement améliorer l'utilisabilité, même sans recherche utilisateur. Travailler dans un court laps de temps m'a aidé à affiner ma capacité à prendre rapidement des décisions et à prioriser la cohérence visuelle.
À la fin du challenge, une session de design critique entre pairs m'a permis d'obtenir des suggestions de la part de mes coéquipiers et d'un designer senior :
Augmenter les contrastes entre les couleurs de fond et les éléments d'interface utilisateur (comme la barre de recherche)
Agrandir et ajouter des marges verticales à certains appels à l'action pour améliorer l'accessibilité
Supprimer les marges pour les composants du carrousel pour fluidifier la navigation
Revoir le positionnement des séparateurs de section en page d'accueil
Utiliser des ombres plutôt que des contours pour les composants UI
Incorporer des photographies en gros plan dans les catégories de traitement pour plus de compréhension
Comme j'étais en accord avec ces suggestions, je les ai intégrées à ma manière pour améliorer le résultat final. Au-delà de ces retours, les participants à cette session on trouvé ma proposition visuelle attrayante et en accord avec les attributs de marque de Treatwell.
Avant mise en production, les prochaines étapes seraient :
De tester le prototype repensé auprès des utilisateurs pour valider les hypothèses et intégrer leurs éventuels retours au produit final
D'étendre la refonte à d'autres flux utilisateurs pour une interface plus complète et unifiée
De construire un design system pour maintenir la cohérence visuelle et fonctionnelle à travers le produit
De collaborer avec les développeurs afin d'intégrer cette refonte au niveau programmation
Merci d'avoir lu mon étude de cas
Si vous avez des questions, n'hésitez pas à me contacter !
CV