Ifocop

Site vitrine

2021

Formations
Refonte UX-UI
Refonte UX-UI

Refonte du site web de présentation des formations

Le groupe Ifocop est un institut proposant des formations certifiantes en présentiel et à distance, spécialisées pour les personnes en reconversion professionnelle. Une refonte du site web a été mise en place suite au lancement de formations à distance. Un audit UX, une recherche utilisateur, de la conception de maquettes ainsi que des ateliers UX ont été réalisés afin de répondre à ces besoins.

Contexte  🎯

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Intervention sur la plateforme existante  🚧

chiffre un dans cercle bleu clair
This is some text inside of a div block.
chiffre deux dans cercle bleu clair
This is some text inside of a div block.
chiffre trois dans cercle bleu clair
This is some text inside of a div block.
chiffre quatre dans cercle bleu clair
This is some text inside of a div block.
chiffre cinq dans cercle bleu clair
This is some text inside of a div block.
chiffre six dans dans bulle bleu clair
This is some text inside of a div block.

Problématiques

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Problématiques

Besoin d'un audit UX & UI d'une plateforme avec plusieurs types de cible/parcours visé/site web
Besoin de découvrir de nouvelles fonctionnalités et leviers d’optimisation
Besoin d'un mise en place de multiples discours pour les apprenants, entreprises et partenaires

Contexte

Suite à la pandémie du COVID-19, l’équipe souhaitait refondre leur site vitrine afin de l’adapter aux nouvelles offres proposées, notamment le lancement des formations à distance. Nous avons donc réalisé un audit UX, des tests utilisateurs, et des ateliers afin de bien comprendre les besoins en terme d’UX avant de concevoir des maquettes finales.

Audit UX

Dans un premier temps, nous avons réalisé un audit de la plateforme existante afin de mieux appréhender ses fonctionnalités et ses parcours, en vue d'identifier les possibilités d'amélioration.

Nous avons ainsi étudié:
L’architecture et la navigation
La gestion de l’information
Le Task Flow
L’appropriation de la plateforme
L’accessibilité et l’inclusivité
Les parcours

Grâce à cette étude, nous avons pu réaliser une évaluation globale et formuler une série de suggestions en vue d'améliorer l'expérience utilisateur sur la plateforme.

user experience honeycomb

Tests utilisateurs

Afin de comprendre les besoins et frustrations des utilisateurs en termes d’information et de navigation, nous avons conduit une batterie de tests utilisateurs qui ont été assignés à des missions spécifiques sur la plateforme en cours d'utilisation. Ces missions variées nous ont permis de mieux appréhender les difficultés auxquelles les utilisateurs peuvent être confrontés dans les différents parcours.

Création parcours utilisateurs et nouvelles fonctionnalités

Nous avons entamé la  création des parcours utilisateur et l’élaboration de la navigation (Card-sorting, sitemap, wireframes), ainsi que le maquettage des pages UX. Une conception grâce aux informations recueillies de fonctionnalités nécessaires basées sur des solutions interactives a été mise en oeuvre.

Flow parcours utilisateurs

Présentation des recommandations et itérations

Après la phase de conception initiale, les maquettes ont été soumises à des tests utilisateurs pour recueillir des retours. Ces retours on été analysés pour identifier des points à améliorer et des modifications ont été apportées afin d’aboutir à un design plus solide.

maquettes low-fidelity

Organisation d’ateliers UX

Divers ateliers UX et design ont été organisés avec l’équipe, ceux-ci portant sur l’architecture du site en prenant en compte les données SEO. Ces échanges d’idées et de perspectives ont favorisé la génération d’idées, ont renforcé l’alignement de l’équipe sur les objectifs UX et ont conduit à la conception de fonctionnalités plus pertinentes.

Création des maquettes finales

Ensuite, nous nous sommes lancés dans la  création des maquettes UI finales du site, accompagnées de tests et de corrections, puis nous avons réalisé d'un prototype cliquable et animé pour un aperçu optimal du résultat final. Enfin, un accompagnement au développement avec l’équipe a été réalisé.

page internet Ifoop

Nos dernières réalisations

Découvrez notre approche en pratique !
Découvrez nos réalisations

Contactez-nous

Une question ? N’hésitez pas à nous écrire !

🥳

Votre message a bien été envoyé !
La meute s'en occupe le plus vite possible
Il semble qu'il y ait une erreur, veuillez réessayer...