Refonte du site web Unisphère

De septembre 2022 à janvier 2025, j’ai conçu une nouvelle version du site Unisphère, un espace en ligne dédié aux étudiants. L’objectif : créer une plateforme intuitive et interactive pour favoriser les échanges, simplifier l’accès aux informations et dynamiser la communauté étudiante.

‍

Objectif du projet

L’objectif est de créer un site web qui facilite les échanges et rende le contenu plus accessible.

‍

Améliorer l’expérience utilisateur

Une navigation simple et intuitive. Un accès rapide aux informations essentielles.

Encourager l’interaction

Un moyen clair et efficace pour contacter l’association.Des fonctionnalités d’inscription et de discussion intégrées.

‍

Phase d’empathie : Comprendre les besoins des utilisateurs

Pour identifier les points de friction des utilisateurs, j’ai mené une analyse approfondie à l’aide de personas, de problem statements et de user journey maps. Cette approche m’a permis de mieux comprendre leurs attentes et leurs frustrations face au site existant.

‍

1 - Recherche inefficace

Les balises sont absentes, ce qui rend le filtrage des programmes imprécis. Les critères de tri tels que la popularité ou la récence ne sont pas indiqués, ce qui rend la navigation peu claire et peu intuitive.

2 - Aucun moyen de contact

Il n’existe aucun formulaire pour contacter l’association ou proposer du contenu. Une seule adresse e-mail est affichée, mais de manière incorrecte et peu visible. Cela limite l’interaction et freine l’engagement des utilisateurs.

3 - Informations d’inscription inexistantes

Le site ne fournit aucune indication sur la façon de devenir membre. Les étudiants ne savent pas comment s’inscrire et ne peuvent donc pas participer pleinement aux activités de l’association.

‍

‍

La conception du design

Après l’analyse des besoins utilisateurs, j’ai entamé la phase de conception en réalisant des wireframes papier et digitaux sur Figma. Cette étape m’a permis d’organiser les éléments clés du site et de structurer l’information de manière intuitive.

‍

‍

Priorisation des sections essentielles

J’ai mis l’accent sur trois sections stratégiques :
Les programmes – Permettre un accès rapide aux émissions et événements.
L’inscription – Clarifier et simplifier l’adhésion à l’association.
La vie universitaire – Valoriser le contenu communautaire et les actualités étudiantes.

L’ordre d’apparition de ces sections sur la page d’accueil a été soigneusement défini afin d’optimiser la navigation et de capter l’attention des utilisateurs dès leur arrivée sur le site.

Navigation intuitive

Deux éléments ont été pensés pour faciliter l’accès aux contenus : Un carrousel en haut de la page d’accueil pour mettre en avant les programmes et événements importants. Une barre de recherche performante, améliorée par l’ajout de balises, pour permettre aux utilisateurs de trouver rapidement le contenu souhaité. Le menu déroulant et le logo cliquable jouant le rôle de raccourci vers la page d’accueil assurent un parcours fluide et intuitif.
‍

Prototypage et test du flux utilisateur

J’ai réalisé un prototype basse fidélité (lo-fi prototype) afin de tester et ajuster le parcours utilisateur. Ce prototype met en avant : Un accès direct aux émissions depuis la page d’accueil, la page « dernières émissions » et la page de recherche. Un formulaire de contact accessible depuis les pages « accueil », « adhésions » et « contact », simplifiant l’échange avec l’association.

‍

Perfectionnement de la conception

Cette phase vise à affiner les designs du site Unisphère en tenant compte des retours utilisateurs et des contraintes du thème WordPress de l’université.

‍

Modifications apportées

Le prototype low fidelity a été adapté aux blocs limités du thème WordPress, notamment pour les témoignages et articles. J’ai fait plusieurs itérations et tests d’utilisabilité.

J’ai créé une page d’adhésion directement reliée à l’accueil pour simplifier l’inscription des étudiants à l’association. Cela permet un accès rapide et clair aux informations essentielles. J’ai également intégré un formulaire de contact dédié. Il est destiné aux partenaires potentiels ainsi qu’aux étudiants souhaitant proposer du contenu ou faire des suggestions.

‍

‍

Considérations d'accessibilité

‍ Le prototype high fidelity intègre l’accessibilité, avec des pages en anglais, des textes alternatifs et des scripts pour inclure tous les étudiants, y compris internationaux.