IPAG

Le site vitrine de l’IPAG fait peau neuve 

Brief client

Après une refonte qui ne les satisfaisait pas pleinement, l'IPAG ambitionne de retravailler son site vitrine dans une démarche centrée utilisateur, en prenant en compte l'ensemble de ses parties prenantes : ils souhaitent une démarche de co-conception pour impliquer d'une part les équipes communication et marketing ainsi que leurs enjeux, et d'autre part, les utilisateurs (étudiants et entreprises) avec leurs besoins spécifiques.

Année

2019

Expertise
  • Design
Disciplines
  • Ergonomie
  • UI design
  • UX design
  • UX research
Outils
  • Ateliers collaboratifs
  • Checklist critères ergonomiques
  • Protocole de tests utilisateurs
  • Sketch
  • Sprint graphique

01

Audit expert et tests utilisateurs

Première étape de la refonte, capitaliser sur l’existant : identifier ce qui fonctionne et ce qui doit progresser.

Pour débuter, et en partenariat avec nos amis de Pigwii, nous réalisons un audit ergonomique ainsi que des tests utilisateurs du site web sur la base de scénarios d’usage. Les problématiques d’utilisabilité relevées sont priorisées et accompagnées de recommandations illustrées sur la base d’un benchmark.

Extrait de l'audit expert
Extrait de l’audit expert
Utilisateurs cibles en situation de test
Utilisateurs cibles en situation de test
Extrait de l’audit expert
Utilisateurs cibles en situation de test
02

Une refonte en co-conception

L’audit ergonomique et les tests utilisateurs constituent le point de départ des axes d’améliorations.

Sur la base de ces éléments nous organisons un atelier avec toutes les parties prenantes du projet pour redéfinir l’arborescence du site. Le benchmark et la méthode du tri de cartes alimentent cette étape de co-construction.

Ipag - atelier tri de cartes
Atelier tri de cartes
Co-construction d'une arborescence
Co-construction d’une arborescence
Atelier tri de cartes
Co-construction d’une arborescence
Livrable de l'arborescence du site
Livrable de l’arborescence du site

Une fois l’arborescence consolidée, nos designers s’attaquent à la refonte de chaque page, tant dans sa structure que dans la hiérarchisation de l’information : c’est le temps de l’architecture de l’information.

Présentation des wireframes du site web IPAG
Présentation des wireframes du site web IPAG

33
wireframes conçus en version mobile et desktop

03

Une charte graphique modernisée

On prend l’existant et on l’améliore !

L’objectif n’est pas de refondre en profondeur l’identité de l’école de commerce mais plutôt de la faire évoluer pour qu’elle réponde mieux aux attentes des étudiants et des entreprises.
Un moodboard est produit pour identifier les tendances à emprunter. Une direction artistique est définie et les déclinaisons graphiques sont produites en responsive sur desktop et mobile.

Design UI de la page d'accueil en version desktop
Déclinaison graphique de la page d’accueil en version desktop
Design UI de la page d'accueil en version mobile
Déclinaison graphique de la page d’accueil en version mobile
Voir un autre projet