Luc Hayman

Refonte du site DIT

L’objectif de cette mission a été d'uniformiser les 12 sites existants de la DIT en un site unique présentant l'ensemble des services offerts par les équipes de la DIT.

Mon rôle était d'être auprès des 12 équipes pour comprendre les besoins des utilisateurs, concevoir des solutions aux problèmes identifiés, maquetter et développer ces solutions sur le CMS imposé Google Sites.

Contexte

La problématique

• Rassembler en un seul lieu la présentation de l’ensemble des offres de services de la DIT, ainsi que les approches RSE et Innovation
• Proposer un site statique qui serait ouvert à l’ensemble des collaborateurs en relation avec la DIT.
• Faire en sorte que d’un point de vue graphique et expérientiel, il y ait une homogénéité entre toutes les présentations

En détail

• Audience visée: l’ensemble des collaborateurs de l’entreprise ayant besoin de faire appel aux services de la DIT
• Regrouper les 12 services sur un même site
• Site prévu en anglais et français, le MVP sera la version anglaise
• Un CMS impose: Google Sites
• Design system existant dont les principes design pour les sites n’ont pas encore été formalises

Recherche

L’approche utilisée

Afin de comprendre en détail les attentes et les solutions demandées, j’ai effectué:

• Une rédaction d’un cahier d’entretien avec une dizaine de questions. J’ai effectué 11 interviews, dont 13 personnes interrogées et 1 annulation
• Un recueil des besoins et attentes des utilisateurs finaux. Ceci était une étude quanti sous la forme d’un sondage envoyée via le client. Nous n’avons que reçu 15 réponses, ce n’est pas assez pour avoir des tendances fermes. Ces retours n’ont pas été considéré pour les décision prises pour la solution finale.
• Une étude des sites existants pour comprendre le contenu à inclure dans la solution, les catégories de templates à créer et pour mieux guider les questions du cahier d’entretient

Traitement des informations obtenues pendant la discovery

Value map / customer profile

Cahier d'entretien

Structure proposée pour le site

Réalisation

L’approche utilisée

Une fois les attentes, les frustrations et les demandes comprises, j’ai conçu sur Figma les templates des pages, que j’ai ensuite réalisé sur le CMS.

L’entreprise a imposé que le site soit conçu sur Google Sites, qui est un CMS très restreint. J’ai beaucoup recherché ce qui était possible sur ce CMS pour pousser les possibilités, mais c’était difficile. Un exemple d’une grosse contrainte était qu’on avait le droit à un maximum de 3 couleurs sur le site entier.

J’ai commencé par un zoning des pages (cf à droite) pour bien définir le contenu de chaque page et valider avec le client cette organisation.

Ensuite j’ai défini avec le responsable de design de l’entreprise l’UI kit à utiliser sur la solution, en utilisant des couleurs et des polices les plus accessibles possible.

Ensuite j’ai réalisé une version monochrome du site sur Figma en créant toutes les sections templates ainsi qu’un guide Do and Don’t pour faciliter la transition du site.

L'UI kit

Sections qu'on recommande a utiliser pour de nouvelles pages dans le CMS

Zoning

Template pour chaque service

Conception des templates dans Figma en monochrome

Bilan

Au final je suis content de ce qu’on a pu proposer en tenant compte de la contrainte du CMS Google Sites. Et même si on a fait de notre mieux pour faire un site accessible, nous n’avons pas pu livrer une solution qui respecte absolument l’accessiblité.

Avec un budget illimité, j’aurai pu concevoir une solution plus accessible, visuellement plus sympathique et concevoir une navigation plus logique.

Sinon, même si les tests utilisateurs ont été très positifs à la fin de la mission, j’aurai préféré avoir plus de réponses au sondage envoyé afin d’éviter de deviner ce qu’attendent les utilisateurs et s’appuyer sur des données quand on présentait une fonctionnalité au stakeholder.