UI

Mediaveille
redesign de l'identité visuelle et du site

Le logo Mediaveille a évolué en 2012 et avec lui, une charte graphique a vu le jour en se basant sur un principe graphique en particulier : une association entre les couleurs et les expertises : le gris anthracite est utilisé pour la Stratégie Digitale, le marron pour l’Ergonomie et le Webdesign etc. Suite à ce projet de création d'une identité visuelle réalisé il y a quelques années, j'ai voulu m'essayer à un exercice de redesign du logo, mais aussi de la charte print et web.

spinner

Identité visuelle

Commençons par le logo "Mediaveille" qui renvoie à deux aspects qui caractérisent l’agence : le côté "carré" et sérieux du travail effectué à travers la typo sans serif et haut de casse, mais également le côté humain et "fun" avec les deux points des lettres “i”.

Charte graphique

Pour créer la nouvelle charte, j’ai privilégié l’exploitation d’une seule couleur pour conserver une unité visuelle et éviter une confusion de la part des clients de l’agence entre les différentes expertises.
Un autre avantage, mais nous le verrons un peu plus tard dans la présentation de cette étude de cas, la couleur permettre de lettre en avant les points de conversion sur les nouveaux mockups du site, sans oublier certains éléments présents au sein des pages pour rythmer la lecture en complément de la typographie.

Une nouvelle interface pour le site

Début 2015, le site de l’agence Mediaveille avait évolué pour proposer aux utilisateurs des contenus enrichis, accessibles à travers une arborescence plus complète, une évolution graphique pour faciliter la prise de connaissance ainsi qu’une évolution technique pour permettre un affichage sur l’ensemble des terminaux.

Et si ?! Et si la refonte du site avait été pensée aujourd’hui ? J’ai voulu m’essayer à cet exercice en reprenant une problématique réelle, car un redesign sans but ou uniquement pour le plaisir n’oriente pas vers des choix pertinents.


Une réflexion orientée vers l'utilisateur final

La réflexion s’est basée sur les données Analytics qui ont permis d’établir des habitudes de navigation de la part des utilisateurs, puis d’établir des personas et de les classer par niveau de priorisation.

Les parcours des utilisateurs ont été pensés en prenant en compte les recherches réelles des utilisateurs : ceux qui connaissent la marque et qui arriveront sur le site via la page d’accueil et la majorité des utilisateurs qui entreront sur le site via une page de contenu liée à leur requête.

La conception graphique a été imaginée comme un cadre plus visuel et modulable pour permettre de faire évoluer le contenu en fonction des évolutions des parcours utilisateurs et des objectifs de l’agence. Ce cadre offre la possibilité de mettre à jour le site, des pages liées de contenu froid liées à la marque ou encore de créer des pages d'atterrissage (landing page) personnalisées.

Design thinking

Dans cet exercice de redesign, il était important de suivre des étapes indispensables pour aboutir au résultat final, de la définition de la problématique aux retours d'utilisateurs finaux.


Challenge

Demandes de contact non qualifiées, notamment lorsqu’un utilisateur souhaite prendre contact pour une prestation liée à une expertise accès à certaines catégories difficile, les utilisateurs ont du mal à trouver l’information recherchée.


Réflexion

Comment faire évoluer ces deux points principaux dans le but d'améliorer le parcours utilisateur et de ce fait, leur expérience sur le site de l'agence Mediaveille ?


Interview

Échanges avec des utilisateurs internes à l’agence et externes, utilisateurs qui consultent le site régulièrement et de temps en temps pour rechercher des informations.


Solution

Évolution de la navigation persistante ainsi que de l'arborescence pour simplifier l’accès aux principales catégories et évolution de la structure des pages pour présenter des points de conversion à différents niveaux en fonction du niveau d’engagement des utilisateurs, évolution de la demande de contact.


Scénario

Réflexion et conception de wireframes, puis évaluation grâce à des tests utilisateurs (accès à une page catégorie, puis demande de contact).


UI

Évolution de l'interface utilisateur du site internet avec la réalisation d'éléments graphiques et la conception d'une structure de page pensée pour être modulable.




Page suivante

c/imo