01
Contexte et problème
Ateliya est une application de gestion pour les ateliers de couture, avec un paiement par mobile money. Son site sert à donner envie de télécharger l'application et de s'abonner.
L'ancien site fonctionnait, mais son design ne convenait plus à la cliente. Il fallait refaire le design en gardant les mêmes pages, les mêmes parcours et les mêmes API.
02
Mon rôle
J'ai mené la refonte seule, du design à la mise en ligne, en respectant la charte de la cliente : vert, or, ivoire et la police Cormorant Garamond. La cliente validait chaque page avant que je passe à la suivante.
- 01Design à partir de la charte
- 02Intégration en Astro
- 03Formulaires d'inscription
- 04Accessibilité
03
Démarche
Je me suis inspirée de sites d'applications de paiement : sections en couleur pleine, ton dynamique, animations légères.
Un motif de point de couture sépare les sections et rappelle le métier. Une vraie capture de l'application apparaît dans la photo d'accueil, et une maquette montre les clients, les commandes et l'activité.
Capture 1 sur 5
04
Choix techniques
J'ai cherché à garder le site rapide et les formulaires fiables.
- Astro
- React
- Tailwind CSS
- TypeScript
01Rester sur Astro
On m'a d'abord demandé de passer le site sur Next.js. Après trois jours, je suis revenue à Astro : pour un site vitrine, il charge moins de JavaScript, donc les pages s'affichent plus vite.
02React seulement là où il sert
React n'est utilisé que sur la page des tarifs et sur l'inscription, les deux pages avec un formulaire en plusieurs étapes.
03Des formulaires clairs
Vérification de l'email, du téléphone et du mot de passe, récapitulatif avant l'envoi, et messages d'erreur compréhensibles.
04Un texte lisible par tous
Après un contrôle d'accessibilité, j'ai foncé une couleur de texte qui manquait de contraste.
05
Résultats
Le nouveau site est en ligne. Il garde les parcours d'inscription et d'abonnement, avec un design fidèle à la charte de la cliente.
- pages seulement utilisent React
- 2
- moyens de paiement mobile pris en charge
- 4
06
Ce que j'ai appris
Choisir l'outil selon le besoin : revenir à Astro après trois jours sur Next.js était la bonne décision pour ce site.
Les détails prennent du temps : il m'a fallu une dizaine d'essais pour que les maquettes de l'application s'affichent bien sur tous les écrans.
