E.changes

Web app - User experience - Maquette & prototypage

À propos d’e.changes

E.changes est une Progressive Web App moderne, légère et accessible, qui vise à accompagner les étudiants et étudiantes dans leur sevrage tabagique.

Mon rôle

Mon rôle a principalement consisté à concevoir l'expérience utilisateur (UX) et à définir l'identité visuelle (UI) de l'application, en participant à toutes les étapes clés : de la recherche utilisateur jusqu'à la livraison des maquettes interactives.

Recherche utilisateur & conception des parcours

La première étape du projet a été consacrée à la compréhension des besoins des étudiants de l'Université de Lorraine.
 J'ai participé activement à des ateliers de co-création et de brainstorming, où nous avons défini plusieurs personae représentatifs des différents profils d’utilisateurs. Ensuite, nous avons travaillé sur la cartographie des parcours utilisateurs, dans le but de simplifier les interactions et de rendre l’expérience la plus fluide possible.

Objectif : concevoir une expérience intuitive et adaptée aux usages des étudiants, tout en répondant aux besoins fonctionnels de l’Université.

Brainstorming sur les objectifs des étudiants
Brainstorming sur les objectifs des étudiants sur le logiciel Miro
Extrait des parcours utilisateurs
Extrait des parcours utilisateurs

Direction artistique & identité visuelle

Une fois les parcours et wireframes validés, j’ai mené un travail approfondi sur la direction artistique de la web app.
J’ai d’abord réalisé un moodboard rassemblant les tendances actuelles du web design, en m’inspirant de visuels dynamiques et contemporains pour répondre à un public jeune et connecté. Après validation de l’axe créatif par le pôle Recherche de l’Université de Lorraine, j’ai conçu un UI Kit complet

Objectif : créer une identité forte, moderne et accessible.

Logotypes
Logotypes
Extrait de l’UI KIT sur Figma
Extrait de l’UI KIT sur Figma

Maquettes graphiques & prototypage

Sur la base de l’UI kit validé, j’ai réalisé les maquettes graphiques haute fidélité de l’application sur Figma. Des annotations détaillées ont été ajoutées sur chaque composant pour faciliter le travail de l’équipe de développement web et garantir une intégration fidèle au design.

Objectif : assurer une transition fluide entre design et développement, tout en maintenant la qualité de l’expérience utilisateur.

Onboarding
Extrait de l'onboarding - maquettes sur Figma
Extrait maquettes graphiques
Extrait maquettes graphiques sur Figma
  • wireframes
  • personae
  • web app
  • maquettes graphiques
  • prototypage
  • parcours utlisateurs

Quelques informations utiles à propos du projet

Date de réalisation

2023 - 2024

Technologies

Directus

Logiciels

Figma
Miro

Découvrir d'autres projets