Victoria Saury's profile

Musée Granet - Webapp design



Le Musée Granet - Création d'une webapp interne innovante

Depuis que le musée a obtenu le label «Tourisme et Handicap» celui-ci tend à se digitaliser aux yeux des visiteurs.

Cette digitalisation a pour objectif d’aider les spectateurs à comprendre les oeuvres qui sont exposées au musée grâce au concept Li-Fi. Ce dispositif est composé de lampes à LED et d’un système de géolocalisation.  Grâce à cela, le contenu lié aux oeuvres se déclenche automatiquement une fois que la personne est positionnée sous la lampe.
Ces dernières diffusent un contenu spécifique et complémentaire à la compréhension d’une œuvre d’art. Cela peut être sous forme de texte, d’animation audiovisuelle, de jeu d’interaction, de pistes sonores, etc. Ce contenu permet également de pouvoir être adapté aux personnes en situation de handicap (malvoyant, malentendant)...

L’enjeu de ce dispositif est d’accroître le nombre de visiteurs au musée mais aussi de permettre la modernisation de son image.

Au cours de ce projet, le musée nous a demandé de traiter la problématique uniquement d’un point de vue interne car l’aspect externe à déjà fait l’objet d’une réflexion en amont.




L'étape de Wireframing

A partir de là, nous avons mis en place un processus itératif consistant à faire tester les réactions des utilisateurs sur des versions non abouties des wireframes. Cela avait pour objectif d’observer les points de frustrations et de les corriger pour en arriver à une version plus optimisée. Cette étape s’est répétée pendant quelques séances de présentation jusqu’à ce que les utilisateurs naviguent de manière naturelle dans le prototype. Durant ces séances, des objectifs précis leurs ont été demandés pour observer la manière dont ils parvenaient à l’atteindre. Cela pouvait être d’une manière directe ou encore via des alternatives.



Les maquettes

Une fois les wireframes abouties et validés nous avons créé les maquettes finales en plusieurs formats responsive : Ordinateur, tablette et smartphone.
Toutes les versions ont également été prototypées et ont fait l’objet d’un énième test à destination des collaborateurs du musée. 

Voici donc les différentes vues expliquées :

Connection
Avant d’atterrir sur le tableau de bord principal de la webapp, l’utilisateur doit se connecter. Pour cela, il utilise les mêmes identifiants professionnels d’accès à sa session d’ordinateur, reliés à la webapp. Un bouton de déconnexion est présent en haut à droite de l’écran pour fermer l’application.

Homepage
Pour répondre aux différentes problématiques du musée nous avons pensés à plusieurs solutions complémentaires. Du côté interne, une webapp est constituée pour faciliter la gestion de l’application mobile déjà optée par le musée. 

Avec cette webapp, se montrant en premier lieu sous la forme d’un tableau de bord, les utilisateurs, membres du musée ont un aperçu des œuvres équipées de lampes Li-Fi ou non. Ils peuvent voir les œuvres ajoutées dans la base de donnée et créer des parcours créatifs . 

Sur la droite, ils ont une barre latérale permettant d’afficher les notes importantes et les notifications de toute l’activité des lampes et de l’intranet en cas de problème.
Ils disposent également de boutons de raccourcis notamment pour les emails, les notifications, les importations rapides, ainsi que la messagerie interne.




La rubrique des tableaux

« Ajouter une nouvelle œuvre »

Cette rubrique est la partie édition d’un tableau, elle se présente majoritairement sous la forme de formulaires à remplir avec toutes les informations telles que le tableau en lui-même, l'auteur, la date, l'intitulé, les liens vers les lampes activées, des aspects bluetooth, pour contrôler d’autres types de lampes, les métadonnées pour faciliter les recherches, les profils d’utilisateurs..

L’utilisateur peut aussi choisir de garder son travail en tant que « brouillon » ou alors de le publier. S’il choisi la première option, l’œuvre sera envoyée vers la rubrique « non publiée » et s’il la publie, vers les « œuvres ajoutées »
Enfin, pour entrer un travail complet, l’utilisateur à une vision du pourcentage de remplissage des champs de formulaire



Oeuvres ajoutées :

Cette page présente les tableaux importés et équipés de lampes. Chacun d’eux révèle les informations principales de l’œuvre comme la photo, le titre, l’auteur, la date, ainsi que du contenu relatif aux lampes équipées comme le déclencheur d’une video, d’un texte, d’un son, …

A partir de cet interface, l’utilisateur peut cliquer sur le bouton d’édition, annuler la publication ou encore supprimer le tableau de la base de donnée des lampes. Enfin, nous avons les liens qui permettent aux lampes Li-fi de reconnaitre le contenu à afficher ainsi qu’un ensemble de pictogrammes aux normes handicap pour signifier à l’utilisateur le profil utilisateur inclus à chaque œuvre comme les malentendants, les utilisateurs sans problèmes de handicaps ou encore les personnes malvoyantes.

Une sous navigation est aussi incluse dans cette partie :

- Les œuvres ajoutées
- Ajouter une nouvelle œuvre
- Les liens externes
- Les œuvres non publiées
- Les œuvres supprimées

Les liens externes :

Dans cette rubrique, l’utilisateur contrôle les lampes ainsi que les catégories de contenus qu’elles sont censées déclencher à l’approche du visiteur dans la zone de déclenchement dans le musée. Pour cela, nous retrouvons une image de l’œuvre pour que la recherche soit plus agréable, son titre, son auteur, la catégorie de lampe en fonction des liens qui déclenche du contenu video, son, texte adapté à l’utilisateur, l’adresse url du lien et les points d’actions d’éditions. A noter qu’une lampe diffuse un seul et unique lien ce qui veut dire que pour une œuvre plusieurs lampes peuvent être affiliées avec différents paramètres. L'utilisateur peut également ajouter un nouveau lien en cliquant sur le bouton + et compléter quelques informations à la main en ajoutant une image; le titre de l'oeuvre, son auteur, son profil et le lien URL.



"Non publiées et supprimées"

Ces deux rubriques se présentent de la même manière que celle faisant référence aux « Liens externes » elles permettent une meilleure clarté organisationnelle sur ce qui est publié ou non.


Agenda :

Les collaborateurs du musée nous ont spécifiés le fait que la mairie d’Aix-en-Provence met à leurs dispositions de multiples outils internes. Mais pour rester dans la cohérence d’un outil d’organisation et d’aide à la collaboration, nous y avons inclus un agenda afin que chaque membre utilise le même outil pour une meilleur gestion d’équipe. Cet agenda propose plusieurs vues (Hebdomadaire, mensuelle et annuelle) ainsi qu’une vision sur le nombre d’heures effectuées pour l’aide à la gestion des temps.

Notes :

Dans cette partie, les collaborateurs ont accès à un emplacement de notes qui peuvent choisir d’afficher sous forme de to do list ou sous forme de liste de notes. Chaque note est personnalisable et peut être partagées avec d’autres membres en cas de projets collaboratifs. Bien évidemment, une note importante peut être épinglée pour qu’elle soit mise en avant.



Administrateur :

C’est ici que les collaborateurs peuvent gérer leurs rôles sur la plateforme. Il y a trois niveau de gestion : L’admin qui a accès à toutes les fonctionnalités, le gestionnaire de contenu qui peut gérer tout ou partie des éléments de la webapp et le mode lecteur qui sert de vérification principalement. A chaque niveau nous pouvons ajouter des profils collaborateurs.

Notifications :

En cliquant sur la cloche, l’utilisateur a accès à toutes les notifications de son activité et de celle de ses collaborateurs. Grâce à cela, il peut avoir un aperçu de tout ce qu’il se passe sur la plateforme. Il peut aussi avoir un rapide coup d’œil à droite de son écran, dans la barre latérale.

Paramètres :

Plusieurs éléments sont sujets au paramétrage. Tout d’abord la mise à jour du logiciel, demander l’automatisation des tâches, gérer les erreurs,… Ensuite, l’affichage avec la prise en compte de normes adaptés aux personnes en situations de handicap, une personnalisation de thème avec des couleurs chartés, la modification de la taille de la police d’écriture. Enfin, les paramètres de notification et de messagerie.


Messagerie :

Toujours dans un soucis de cohérence et de collaboration, nous avons choisi d’inclure des outils de communication privée et mail. D’abord le chat qui se présente comme une messagerie privée classique avec les destinataires sur la gauche et la conversation a droite une fois que nous avons cliqué sur le destinataire. Dans la fenêtre de conversation, nous avons la possibilité d’y joindre des fichiers pdf ou médias ainsi que des émojis.

Pour les mails, nous avons également deux fenêtres principales avec l’expéditeur, l’objet du mail, quelques boutons d’action pour répondre au mail, le transférer, l’archiver ou le supprimer et un aperçu du mail. Sur la droite, un menu affichant la navigation classique d’une boite mail (réception, éléments envoyés, brouillon, supprimés, archivés, marqués comme lus et marqués comme non lus) et la conversation mail  détaillée en dessous.


Musée Granet - Webapp design
Published:

Owner

Musée Granet - Webapp design

Published: