Fond du projet

Expérience professionnelle

Refonte UX/UI du site AvanzData

Conception des wireframes, maquettes, design system et prototype pour moderniser le site et structurer l’expérience utilisateur.

UX
UI
Mockup du projet AvanzData
AVANZDATA
Mon expérience

Comprendre le projet avant de concevoir

AvanzData accompagne les entreprises dans leurs projets informatiques et digitaux. Elle propose des solutions adaptées, avec un suivi technique, pour aider ses clients à mieux structurer leurs outils, leurs données et leurs services numériques.

Rôle

Product Designer

Durée

Alternance 1 ans

Livrables

Wireframes, maquettes, prototype, posts Linkedin, Bannière Linkedin

Mon expérience

Les missions réalisées durant mon alternance

Durant mon alternance chez AvanzData, j’ai participé à plusieurs missions mêlant conception UX/UI, structuration de parcours et création de supports visuels pour accompagner les projets de l’entreprise.

Refonte du site AvanzData

Réalisation de wireframes, maquettes, design system et prototype afin de moderniser le site, structurer les pages et améliorer l’expérience de navigation.

Produit AvanzDeriv

Création d’un user flow pour visualiser le parcours utilisateur et mieux organiser les étapes d’utilisation du produit.

Schéma explicatif

Réalisation d’un schéma dessiné à la main pour expliquer plus simplement le fonctionnement d’AvanzDeriv.

Communication visuelle

Création de posts LinkedIn, d’une bannière et d’un logo pour accompagner la communication de l’entreprise, notamment avec Canva.

Figma Figma
Canva Canva
Structure du site

Arborescence du site AvanzData

J’ai conçu l’arborescence du site AvanzData pour organiser les contenus avant le passage aux wireframes. Cette étape m’a permis de définir les grandes pages du site, de clarifier leur rôle et de poser une base de navigation plus lisible pour la suite du projet.

Objectif

Organiser les pages et les contenus du site avant la conception des wireframes.

Outil

Gloomaps

Résultat

Une structure de navigation claire, utilisée comme base pour la création des wireframes.

Mockup du projet
Mockup du projet
Création graphique

Wireframes et structure des pages

J’ai réalisé les wireframes desktop pour poser la structure du site avant les maquettes. Cette étape m’a permis de clarifier l’organisation des contenus, le parcours de navigation et la logique des pages, sans être influencée par les choix graphiques.

Objectif

Structurer les pages principales avant la création des maquettes visuelles..

Outils

Figma

Résultat

Des wireframes pour guider la conception UX/UI du site.

Conception UI

Maquettes desktop du site AvanzData

Après la création des wireframes, j’ai conçu les maquettes desktop du site AvanzData sur Figma. Cette étape m’a permis de donner une direction visuelle au projet, en travaillant la mise en page, les couleurs, les typographies et l’équilibre entre les contenus.

Objectif

Transformer la structure des wireframes en interfaces visuelles plus abouties.

Outil

Figma

Résultat

Des maquettes desktop prêtes à être présentées, testées et prototypées.

Mockup du projet
Mockup du projet
Conception UX/UI

Design System

Après la conception des maquettes desktop, j’ai travaillé sur le design system du site AvanzData afin de regrouper les éléments graphiques essentiels du projet. Cette étape m’a permis de structurer les couleurs, les typographies, les boutons et les composants pour garder une interface cohérente sur l’ensemble du site.

Objectif

Créer une base visuelle claire pour harmoniser toutes les interfaces.

Outil

Figma

Résultat

Un design system complet pour guider la conception du site.

Produit AvanzDeriv

Rendre un produit data plus compréhensible

AvanzDeriv est un produit développé par AvanzData pour aider les entreprises à gérer, transformer et contrôler leurs données de manière sécurisée et structurée.

Mon travail a consisté à représenter le fonctionnement du produit de façon plus visuelle, à travers un user flow et un schéma explicatif pensé pour être partagé sur LinkedIn.

Objectif

Clarifier le parcours utilisateur et rendre le produit plus facile à comprendre.

Livrables

User flow, schéma explicatif pour LinkedIn.

User flow User flow AvanzDeriv
Schéma explicatif Schéma explicatif AvanzDeriv