Apps pour mobiles
Sdesigner met à votre disposition des compétences de design transversales pour vous accompagner dans la conception, le prototypage, et l’intégration de vos applications conçues pour fonctionner sur tous types d’appareils mobiles.
VISIOPHONE SOMFY VCONNECT
Domaine : DOMOTIQUE
APP VISIOPHONE VCONNECT
APP VISIOPHONE VCONNECT
Type : APPLICATION MOBILE NATIVE
Mission : DESIGN GLOBAL UX & UI
Domaine : DOMOTIQUE
Client : SOMFY
Date : 2020
Résumé du projet
Design de l’application mobile SOMFY VCONNECT, dédiée au pilotage de la nouvelle platine visiophone connectée de Somfy . Ce portier vidéo fonctionne sans moniteur, le pilotage s’effectue depuis tous les types de smartphones. L’application intégre également toute la partie installation du logiciel et de l’appareil (platine de rue) de façon simple et intuitive.
Mission et livrables
› CRÉATION DE NOUVEAUX SERVICES
› DESIGN DES ÉCRANS ET PRINCIPE DE NAVIGATION
› DA / GRAPHISME ET ICONOGRAPHIE
› ARBORESCENCE FONCTIONNELLE / FLOW MAP
› WORDING : CRÉATION DES TEXTES MULTILINGUE
› SPÉCIFICATIONS TECHNIQUES D’INTÉGRATION
› CRÉATION DES ANIMATIONS DE TRANSITION
› PROTOTYPE DE L’APPLICATION
DESIGN PROCESS
Contexte, Enjeux, et Objectifs
WIREFRAMING
User-tests et finitions du design
Export des éléments UI
Organisation + tableau récapitulatif
Kit de design pour l’intégration
ANALYSE
Contexte du projet
Suite au succès du VISIOPHONE SOMFY V500, Somfy m’a de nouveau sollicité pour concevoir l’interface utilisateur de leur nouveau visiophone VCONNECT. Contrairement au V500, qui se pilote depuis un écran tactile installé dans la maison en utilisant la technologie radio RTS, le VCONNECT fonctionne entièrement depuis une application mobile dédiée. Compte-tenu des nouvelles possibilités techniques apportées par l’utilisation des mobiles comme support de l’interface, mon rôle fût tout d’abord d’identifier et de proposer de nouvelles possibilités de services offertes par ce changement de technologie tout en faisant un nouvel état des lieux de la concurrence afin de se positionner comme précurseur dans le secteur des portiers vidéo connectés.
Positionnement de Somfy
L’une des valeurs phare de Somfy « Do it yourself » est de permettre à tous d’installer facilement ses appareils domotique sans faire appel à un professionnel. Pour cela, l’application propose un tutoriel interactif qui guide les utilisateurs pas à pas lors de l’installation du visiophone. Les illustrations détaillées simplifient la compréhension et accélèrent le processus. Ce tutoriel est utilisé une seule fois lors de l’installation initiale, après quoi l’utilisateur peut accéder à l’application principale avec toutes les fonctions du visiophone. Le design et l’iconographie de l’application, ainsi que les illustrations et les textes du tutoriel ont été réalisés par Sdesigner.
Personnalisation de l’interface
Une fois le matériel installé, la configuration de l’application est rapide et permet aux utilisateurs de personnaliser l’interface en fonction du contexte d’installation de chaque VISIOPHONE.
« Do it yourself «
CONCEPTION DE L’INTERFACE
CAHIER DES CHARGES DE SOMFY
CHARTE GRAPHIQUE PRÉEXISTANTE
L’une des demandes provenant du cahier des charges de Somfy était d’utiliser leur charte graphique préexistante : palette de couleurs, forme des boutons, et typographie.
PALETTE DE COULEURS ET BOUTONS EXISTANTS DE SOMFY
Pour moderniser l’interface sans bouleverser les codes habituels de la marque, l’ensemble du tutoriel d’installation du visiophone s’inscrit dans la charte graphique pré-existante, tandis que dans un second temps l’utilisateur à la possibilité de personnaliser l’interface de pilotage générale comme il le souhaite. La personnalisation graphique de l’interface ne faisait pas partie du cahier des charges initial, il s’agit d’une proposition supplémentaire de design qui a été illustrée et soumise à la direction du design chez Somfy qui a validé le principe et l’a inclut au projet.
ADAPTABILITÉ / RESPONSIVE DESIGN
RÉALISATION DE SCHÉMAS POUR ANTICIPER ET ORGANISER LA PHASE D’INTÉGRATION AVEC LES DÉVELOPPEURS ET DÉFINIR ENSEMBLE LA BASELINE (FORMAT) POUR LA CRÉATION DES ÉCRANS
WIREFRAMING / MAQUETTE DES ÉCRANS
CONCEPTION DES ÉCRANS SOUS FORME DE MAQUETTE SIMPLIFIÉE ET CRÉATION DE L’ARBORESCENCE FONCTIONNELLE POUR DONNER RAPIDEMENT UNE VUE D’ENSEMBLE DE TOUS LES ÉCRANS DE L’APPLICATION ET DÉFINIR LE ZONING DES FONCTIONS POUR CHAQUE ÉCRAN
ROADMAP PRODUIT / PLANNING PRÉVISIONNEL
SUITE À LA VALIDATION DE LA MAQUETTE (WIREFRAME) QUI PERMET DE PRÉCISER LE NOMBRE D’ÉCRANS NÉCESSAIRES POUR L’APPLICATION ET D’IDENTIFIER LE NIVEAU DE COMPLEXITÉ DE CHACUN, RÉALISATION D’UN PLANNING PRÉVISONNEL PAR PHASES QUI COMPREND À LA FOIS LE DESIGN ET L’INTÉGRATION EN CONCERTATION AVEC L’ÉQUIPE CHARGÉE DE L’INTÉGRATION
PLANNING PRÉVISIONNEL / ROADMAP PRODUIT
Le planning prévisionnel s’appuie sur la maquette de l’arborescence globale de l’application pour quantifier le nombre d’écrans et estimer le temps de design et de développement.
Il est ensuite affiné en fonctions des demandes et des contraintes des clients et des développeurs.
MAQUETTE GLOBALE / WIREFRAME FLOW MAP
PROPOSITIONS DE PRINCIPE DE NAVIGATION
CRÉATION DE MAQUETTES DE PRINCIPE POUR LA NAVIGATION
SUR LA BASE DES PROPOSITIONS DE WIREFRAME VALIDÉES À L’ÉTAPE PRÉCEDENTE, RÉALISATION DE PREMIERS TESTS SOUS FORME DE SCHÉMAS ET DE MAQUETTES ANIMÉES POUR CHOISIR LE PRINCIPE DE NAVIGATION. CI-DESSOUS, UN EXEMPLE DE MAQUETTE POUR AFF INER LE PRINCIPE DE NAVIGATION PRENANT EN COMPTE LA DEMANDE DE SOMFY DE CONCEVOIR UNE FONCTION « Push to talk » LORS D’UN APPEL PROVENANT DU VISIOPHONE
» Push to talk «
Intégration de la fonction « Push to talk » sur l’écran de pilotage « LIVE VISIO » pour décrocher lors d’un appel provenant du visiophone.
PROPOSITION 1
PROPOSITION 2
DESIGN DE L’INTERFACE
TUNNEL D’INSTALLATION
RÉALISATION DES ILLUSTRATIONS DU TUTORIEL D’INSTALLATION
CRÉATION DES SCHÉMAS ÉTAPE PAR ÉTAPE
INSTALLATION COMPLÈTE RAPIDE AVEC BRANCHEMENT ET CONNEXION DU MATÉRIEL
VUES DES ÉCRANS D’INSTALLATION
INSTALLATION DE LA PLATINE DE RUE
PROTOTYPE FONCTIONNEL
TUTORIEL INSTALLATION
Pour ouvrir le protoype FIGMA merci de consulter le site web depuis un ordinateur.
PILOTAGE DU VISIOPHONE
VUES DU MENU PRINCIPAL
PERSONNALISATION DE l’INTERFACE
SKIN CHARTE SOMFY
SKIN PERSONNALISÉE 1
SKIN PERSONNALISÉE 2
SPÉCIFICATIONS POUR L’INTÉGRATION
DESIGN UI KIT
ÉCRAN DE PILOTAGE GÉNÉRAL : SKIN SOMFY
DEMANDE SPÉCIFIQUE POUR LES SPÉCIFICATIONS D’INTÉGRATION
LES SPÉCIFICATIONS DE DESIGN POUR L’INTÉGRATION DEVAIENT ÊTRE FOURNIES POUR DEUX ÉQUIPES DE DÉVELOPPEURS DISTINCTES. L’UNE DES ÉQUIPES ÉTAIT CHARGÉE DE DÉVELOPPER L’APPLICATION VERSION IOS ET L’AUTRE ÉTAIT CHARGÉE DE LA VERSION ANDROID.
SPÉCIFICATIONS TECHNIQUES VERSION IOS
SPÉCIFICATIONS TECHNIQUES VERSION ANDROID
SPÉCIFICATIONS GÉNÉRALES DES BOUTONS
DESIGN UX USER FLOW
ARBORESCENCE FONCTIONNELLE DE L’ENSEMBLE DES ÉCRANS DE L’APPLICATION
Tout au long de la mission, l’arborescence fonctionnelle sert de support aux échanges, ajustements et validation des écrans avec toutes les équipes qui participent au projet
