Redesign UI et design system pour une app B2C iOS/Android
Contexte
PennyPet est une application B2C à destination des pet parents.
Elle propose un compte bancaire avec cashback avantageux chez des partenaires, ainsi qu’une assurance animale à tarifs fixes.
Après plusieurs tentatives non concluantes de redesign confiées à des prestataires externes, une seule piste graphique avait retenu l’attention : l’usage d’un dégradé rose-violet pour mettre en avant certains textes.
Ce style prometteur restait toutefois sous-exploité.
J’ai proposé d’aller plus loin : créer un nouvel univers visuel complet, moderniser l’image de la marque et repenser les parcours. Le lancement d’une fonctionnalité de gamification offrait une opportunité idéale pour introduire cette refonte.
Typographie
La police initiale, Work Sans, apportait peu de caractère.
Je l’ai remplacée par Outfit, plus contemporaine et distinctive, renforçant la perception professionnelle de l’application.
Un travail spécifique a été mené sur la hiérarchie typographique (tailles, poids, espacement) afin d’améliorer la lisibilité et l’équilibre visuel des écrans.
Couleurs
L’élément central du nouvel univers est le dégradé rose-violet, utilisé pour rythmer l’interface et mettre en valeur les actions clés et la gamification.
L’ensemble des teintes secondaires a été rationalisé pour créer une palette cohérente, accessible et facilement déclinable. Elles ont servi d'appuie pour la présentation des 3 offres.
Une attention particulière a été portée à l’accessibilité, en respectant au minimum les standards WCAG AA pour assurer une bonne lisibilité des textes et éléments interactifs.
Design System
Un design system complet a été construit dans Figma, en exploitant les tokens Tailwind grâce à un fichier communautaire.
Cette approche garantissait une correspondance directe entre le design et le code, limitant les écarts et accélérant le développement.
Nous avons identifié 6 gabarits principaux d’écrans.
Cette méthodologie a permis de couvrir près de 190 écrans en rationalisant la conception et en maximisant la réutilisabilité.
Développement
La refonte UI s’est accompagnée d’un refactor technique complet en React Native.
• Migration de NativeWind v3 → v4
• Refonte de ~190 écrans basés sur les nouveaux gabarits
• Mise en place d’une librairie de composants unifiée
La production d’écrans est devenue nettement plus rapide et fiable.
Un chantier d’environ 5 semaines a suffi pour migrer l’ensemble de l’app.
Résultat
La nouvelle identité visuelle a été très bien accueillie par les utilisateurs et les investisseurs, renforçant la crédibilité de PennyPet.
Côté interne, la mise en place du design system et des gabarits a apporté un gain de productivité significatif, tout en clarifiant la stack technique.
5 Semaines
Durée de la migration et refactor complet
190 Écrans
Refactorisées
200% De gains de productivité
En design et dev
6 Gabarits
Réutilisables identifiés