Refonte d'une application de sécurité connectée.
Somfy Protect
Le Contexte
Somfy Protect est une application de sécurité connectée intégrant des caméras, détecteurs de fumée et systèmes d'alarme. Dans le cadre d'une roadmap stratégique à horizon 2030, l'un des enjeux principaux était d'optimiser et d'assurer la cohérence visuelle de l'ensemble des produits.
J'ai intégré l'équipe de design pour contribuer à l'application d'une nouvelle identité visuelle sur différents produits.
Processus & Rôle
Entreprise
Somfy Group
Entitié Somfy Protect
Equipe
8 designers
Collaboration avec les développeurs
Mon rôle
UI Designer
Processus & Produits
Design system
Widget Android
Dashboard Link Advanced
Tunnels d'installation
Collaboration
Design system
En fonction des écrans à concevoir, dès mon arrivée, j'ai contribué à l'évolution du design system, en redesignant des icônes, en créant de nouveaux composants, templates et des animations Lottie.
Tout au long du processus, j'ai porté une attention particulière à l'accessibilité, notamment sur les contrastes pour garantir une lisibilité sur tous les écrans.
Grâce aux composants et aux templates mis en place dans le design system, j'ai pu mener la refonte de trois interfaces : le widget Android, le dashboard du Link Advanced, ainsi que les tunnels d'installation de la caméra intérieure et du détecteur de fumée.
Widget Android
Le widget Android permettait de contrôler les produits de sécurité directement depuis l'écran d'accueil du téléphone, sans ouvrir l'application. Sa refonte a été motivée par les retours utilisateurs signalant des difficultés d'interaction avec la version existante.
Ancienne version du widget
Avec l'équipe de développement, nous avons analysé les retours utilisateurs pour identifier les points de friction de l'ancien widget.
| Elément | Problème | Amélioration |
|---|---|---|
| Format horizontal | Manipulation difficile (zones cliquables mal délimitées). | Repenser l'ergonomie et les zones cliquables. |
| Textes & icônes | Lien "site" non compris. Icônes peu lisibles. | Revoir l'accessibilité et la lisibilité. |
| Fonctionnalités | Certaines fonctionnalités ne fonctionnent plus (ex: rafraîchissement). | Reprendre uniquement les fonctionnalités qui fonctionnent. |
Sketches & Inspirations
En m'inspirant de recherches sur Dribbble, j'ai exploré deux directions : un format horizontal fidèle à l'ancien widget, et un format vertical plus moderne.
Quelques propositions
Le format horizontal restait fidèle à l'ancien widget offrant l'avantage d'un agencement d'éléments espacés sur la longueur.
Le format vertical apportait plus de modernité avec des icônes plus lisibles, des zones cliquables plus délimitées et une hiérarchie visuelle améliorée. Ce dernier a été retenu par l'équipe design.
Maquettes finales
A la suite de quelques propositions, j'ai conçu les maquettes haute fidélité en itérant avec les équipes de design et de développement.
La version finale est épurée, avec des icônes bleues pour les états actifs et grises pour les inactifs.
Pour résoudre le problème du lien "site" incompréhensible, j'ai ajouté une icône de fenêtre au dessus du nom de la pièce, indiquant un lien externe cliquable.
Link Advanced
Le Link Advanced est un hub qui connecte les produits Somfy à Internet et au Bluetooth. La refonte du dashboard (en mode hors-ligne) avait pour objectif de :
- rendre l'état de déconnexion du produit compréhensible,
- simplifier le contenu affiché,
- guider l'utilisateur vers une solution via un lien "En savoir plus".
Ancienne version du dashboard
Avec ma collègue designer, nous avons identifié les problèmes de compréhension liés à l'état actuel du dashboard.
| Elément | Problème | Amélioration |
|---|---|---|
| Etat du produit | Déconnexion non comprise par l'utilisateur (accès au dernier état connu souhaité). | Ajouter des indicateurs visuels, un lien "En savoir plus" et reformuler le texte. |
| Liste des utilisateurs | Non accessible en mode hors-ligne. | Suppression de la section. |
Quelques propositions
J'ai développé plusieurs propositions que j'ai soumises au vote à l'ensemble de l'équipe Somfy Protect via Teams.
Maquettes finales
La maquette retenue par l'équipe offre une meilleure lisibilité de l'état hors-ligne :
- photo du produit pour une identification rapide,
- indicateurs visuels d'alerte,
- texte simplifié,
- suppression de la liste des utilisateurs non pertinente en mode déconnecté.
Tunnels d'installations
J'ai redesigné deux tunnels d'installation : la caméra intérieure et le détecteur de fumée. Cela permettait de guider l'utilisateur pas à pas dans l'installation de son produit. Bien que les deux produits répondent à des usages différents, l'utilisation d'un template commun leur offre une expérience cohérente et unifiée.
Caméra intérieure
D'autres maquettes du tunnel d'intallation de la caméra intérieure.
Détecteur de fumée
D'autres maquettes du tunnel d'intallation du détecteur de fumée.
Collaboration
J'ai travaillé simultanément au sein de deux équipes : Design et Développement, en participant aux daily meetings.
- Abstract et Zeplin donnaient aux développeurs un accès direct aux icônes, composants et templates avec toutes les specs nécessaires,
- Overflow permettait de visualiser les flows complets,
- Miro était utilisé pour les workshops et le partage des parcours utilisateurs,
- Jira assurait le suivi des tâches.
Conclusion
Bilan
Cette expérience m'a permis de renforcer ma démarche en refonte UI : depuis l'analyse des problématiques jusqu'à la réalisation des maquettes finales, tout en évoluant dans un environnement professionnel aux côtés des équipes design et développement.
La collaboration quotidienne avec les développeurs a également enrichi ma pratique : j'ai appris à structurer davantage mes fichiers, à nommer mes calques avec rigueur, à exploiter efficacement un design system et à produire des livrables directement intégrables via Abstract.
Rétrospective
Bien que mon rôle ait été principalement orienté UI, cette expérience m'a convaincu qu'une approche UX solide est indispensable pour concevoir des interfaces vraiment efficaces.
Ressources
Découvrir les autres projets
- EmoDaily : Un espace pour exprimer ses émotions.
- 50 ans dans le vent : Un nouveau regard.
Prendre contact
Rejoignez-moi sur les réseaux sociaux pour voir plus de contenu.