Étude de cas · 11 septembre 2026
AzzaProd
De l’audit UX au déploiement sur OVH : la refonte bilingue d’un portfolio de studio pour mettre ses réalisations en valeur et faciliter le contact.
- Format
- Refonte de site vitrine
- Rôle
- Audit UX · Conception · Full-stack
- Statut
- Déployé et maintenu
Technologies
- Next.js
- React
- TypeScript
- i18n
- OVH
- SMTP
Ma contribution
Ce que j’ai mis en place.
- 01
Les films et les images du studio occupent le premier plan dès l’accueil
- 02
L’équipe peut ajouter de nouveaux projets en français et en anglais sans reconstruire chaque page
- 03
Le formulaire conserve la saisie si l’envoi échoue et propose une adresse e-mail directe
- 04
Le site est déployé sur OVH, relié au domaine du studio et à son service d’e-mail
- 01Mettre les réalisations au premier plan
Revoir la hiérarchie des contenus et alléger l’interface pour donner leur place aux films, aux images et à l’équipe
- 02Structurer un portfolio bilingue
Séparer les contenus de leur présentation pour accueillir de nouveaux projets en français et en anglais
- 03Accompagner les erreurs du formulaire
Valider les informations, conserver la saisie si l’envoi échoue et proposer un contact direct par e-mail
- 04Assurer la mise en production
Configurer le serveur OVH, le domaine et le service d’e-mail pour livrer un site accessible et maintenu
Transformer un constat en direction de projet
Le fondateur d’AzzaProd disposait d’un site construit à partir d’un template. Les réalisations du studio y passaient au second plan : la navigation, les textes et l’habillage occupaient l’attention avant les films et les images.
Nous avons passé une heure à parcourir le site ensemble. J’ai identifié les éléments qui dispersaient le regard et les informations difficiles à trouver. Cet audit a donné une direction concrète à son constat — « le site ne nous ressemble pas » — et il m’a confié la refonte complète, de la conception à la mise en ligne.
Faire des réalisations le point d’entrée
J’ai revu la hiérarchie des contenus et allégé l’interface pour donner la priorité au travail du studio. Les réalisations, la présentation du studio et l’équipe disposent de repères distincts, avec un parcours adapté du téléphone au grand écran.
La vidéo d’accueil installe l’univers visuel d’AzzaProd. Un contrôle de lecture permet de la mettre en pause : le visiteur garde la main sur le mouvement pendant qu’il explore le site. Ce choix associe la direction visuelle au confort d’utilisation.
Préparer les prochaines publications
Le studio doit pouvoir présenter de nouveaux films, profils et projets dans deux langues. J’ai séparé les contenus de leur présentation : une même structure accueille le français et l’anglais, avec des textes propres à chaque version et des projets composés d’images ou de vidéos.
Cette organisation permet d’enrichir le portfolio en réutilisant les mises en page existantes. Elle facilite l’ajout de contenus tout en conservant une présentation cohérente entre les projets et les langues.
Soigner la prise de contact, y compris en cas d’erreur
J’ai mis en place une validation des informations dans le navigateur puis sur le serveur. Si l’envoi du formulaire échoue, la saisie reste affichée et une adresse e-mail directe offre une autre façon de joindre le studio. Le visiteur peut reprendre sa demande sans devoir réécrire son message.
Livrer et maintenir le site en production
J’ai installé l’application sur le serveur OVH du studio, préparé son fonctionnement en production et relié le formulaire au service d’e-mail. J’ai également configuré le domaine pour faire fonctionner ensemble le site et la messagerie.
azzaprod.com est aujourd’hui en ligne et maintenu. Ce projet réunit les responsabilités que je souhaite apporter à une équipe full-stack : clarifier un besoin avec le client, traduire les choix UX dans le code et prendre en charge leur mise en production.