GB

Prototype · App mobile · Product design

Revive. Une app écoresponsable, designée en 1 semaine.

Carte de proximité pour acheter des smartphones reconditionnés localement. Sprint solo de A à Z : recherche, design, prototypage, illustrations IA.

Rôle
Product · Brand · Motion · DA
Contexte
Refonte de l’expérience d’achat
Livrables
Logo, illustrations IA, prototype Light/Dark, design system
Durée
7 jours, en solo
L’app Revive sur un smartphone : écran de confirmation de commande

01 · Défi

Le paradoxe du reconditionné.

Acheter un iPhone reconditionné pour « sauver la planète », puis le faire livrer depuis l’autre bout de la France, c’est contradictoire. La logistique longue distance annule une partie de l’impact positif.

Le vrai problème n’est pas le recyclage : c’est la logistique.

02 · Recherche

Ce que disent les utilisateurs.

5 entretiens utilisateurs, 8 acteurs analysés (Back Market, Recommerce, Refurbed…). Trois verbatims qui reviennent et structurent toute la stratégie produit.

  • Logistique contradictoire
    « J’ai commandé un Pixel reconditionné. Il a fait 600 km en livraison. Ça m’a un peu cassé le truc écolo. »
    Marie34 ans · Lyon
  • Besoin de proximité
    « Si je peux aller le récupérer chez quelqu’un à côté, je préfère mille fois. C’est plus humain, plus rassurant. »
    Karim28 ans · Marseille
  • Confiance par le contact
    « Voir l’atelier en vrai avant d’acheter, ça change tout. La photo sur Back Market, c’est jamais ça. »
    Léa41 ans · Bordeaux

03 · Stratégie

Confiance par la preuve.

Trois décisions structurantes, une par friction identifiée en recherche. La logique : ne pas adoucir le réel, l’utiliser comme preuve.

  1. 01Standardiser le langage.

    Le marché

    « Reconditionné Grade B »

    Terme opaque. L’utilisateur ne sait pas ce que ça veut dire concrètement.

    Revive

    « Grade B · 92 % batterie · micro-rayures »

    Chaque grade est documenté en clair, à côté du prix. Comparaison instantanée.

  2. 02Montrer les défauts.

    Le marché

    Photos retouchées

    Défauts mentionnés en bas de page, en gris clair, en petit.

    Revive

    Macros des micro-rayures

    Affichées dès la fiche produit. La transparence devient un argument de vente.

  3. 03Précis ET humain.

    Le marché

    CPU A15 · 64 Go · iOS 17

    Specs anonymes. Aucune chaleur, aucune trace humaine.

    Revive

    Specs + atelier + technicien

    Photo du local, prénom du technicien qui a remis l’appareil à neuf. Preuve humaine.

04 · Architecture

Une fiche produit. Trois portes d’entrée.

Cinq onglets dans la tab bar, un seul chemin de confiance. Chaque décision du sitemap traduit une friction identifiée en recherche : proximité, transparence, parcours fluide.

Sitemap de Revive : cinq onglets et trois chemins qui mènent à la fiche produit
Sitemap Revive · 5 onglets · 3 chemins convergents vers la fiche produit

Lecture du flow

  1. 01

    Localisation avant tout produit.

    La géolocalisation n’est pas un filtre optionnel, c’est une étape obligatoire vers la fiche produit. On ne montre jamais le catalogue mondial, uniquement les ateliers proches.

  2. 02

    Trois chemins, une fiche.

    Discover, Find et Favorite convergent vers le même écran Products. Aucune duplication selon le contexte : la confiance se gagne au même endroit, avec les mêmes preuves.

  3. 03

    Personnalisation isolée du checkout.

    Configurer ses options et payer ne se fait pas sur le même écran. On laisse à l’utilisateur l’espace mental pour personnaliser, sans pression d’achat immédiate.

05 · Interface

Forest Green pour ancrer. Mint pour respirer.

Une palette pensée comme un récit : le vert profond pour la durabilité, le mint pour l’apaisement, le noir pour la rigueur tech. Une seule famille typographique, trois niveaux qui suffisent.

Palette

  • Black#0A0F0DTexte · ancre du système
  • Mint Cream#E8F3EESurfaces · pause visuelle
  • Forest Green#255F45Marque · CTA · ancrage durable
  • Aquamarine#7FDCB1Accents · highlights
  • Emerald#20B16DÉtats actifs · vitalité

Typographie

  • Titre · Inter 32/40 · Bold

    Reconditionner sans compromis.

  • Sous-titre · Inter 20/28 · Medium

    Une fiche produit, trois portes d’entrée.

  • Body · Inter 16/24 · Regular

    Inter pour son rendu technique sur écran et sa lisibilité aux petites tailles. Une seule famille : une discipline qui garantit cohérence et rapidité d’intégration.

Composants

UI kit de Revive : boutons, champs, cartes, badges et leurs états
UI kit Revive · atomic design · boutons, inputs, cards, badges, états

06 · Workflow IA

L’IA pour explorer. Le vecteur pour livrer.

L’IA générative a un piège : bitmap non éditable, parfois hors charte, jamais cohérent à l’échelle. La discipline tient en deux temps : Ideogram pour explorer vite, Illustrator pour livrer propre. Six illustrations cohérentes, dark mode compris, sans retouche manuelle après livraison.

Avant / après

01 · Sortie brute d’IdeogramIllustration brute générée par Ideogram, avant vectorisation
Bitmap non éditable · résolution figée · style à recadrer sur la DA
02 · Vectorisée dans IllustratorIllustration « Bring Tech Back » vectorisée : une main tend un smartphone
Vecteur scalable · light + dark · retouchable au pixel près

Workflow en 3 temps

  1. 01

    Prompt structuré

    Brief précis : style, palette Forest Green, composition, ambiance. 3 à 5 itérations rapides par illustration.

  2. 02

    Sélection dans la charte

    Tri sur la cohérence avec la DA Revive : verts naturels, illustrations chaleureuses, lisibles en vignette.

  3. 03

    Vectorisation Illustrator

    Du bitmap au vecteur. Adaptation Light/Dark, export optimisé, retouche au pixel près.

Illustrations livrées

  • Illustration d’onboarding
    Onboarding · une première impression rassurante
  • Illustration « Bring Tech Back »
    Bring Tech Back · redonner vie aux appareils
  • Illustration de la carte de proximité
    Carte de proximité · un atelier local en un clic

07 · Implémentation

Trois moments-clés du parcours.

Chaque moment répond à une friction identifiée en recherche. Voici les décisions de design qui structurent l’expérience livrée : onboarding, recherche, tunnel d’achat.

Réponse à : confiance par le contact7 écrans · onboarding

Poser la valeur en sept écrans.

  • Économie et écologie en titre dès le premier écran, pas en sous-titre. La valeur est posée avant tout argumentaire.
  • Sept écrans plutôt que trois, parce que chaque écran répond à une objection précise sur le reconditionné.
  • Illustrations IA chaleureuses (Forest Green) pour adoucir l’argument tech et installer la confiance dès l’arrivée.
  • Revive, onboarding : écran 1 sur 7
  • Revive, onboarding : écran 2 sur 7
  • Revive, onboarding : écran 3 sur 7
  • Revive, onboarding : écran 4 sur 7
  • Revive, onboarding : écran 5 sur 7
  • Revive, onboarding : écran 6 sur 7
  • Revive, onboarding : écran 7 sur 7

Réponse à : besoin de proximité5 écrans · recherche

La carte avant le catalogue.

  • Carte interactive en première vue, pas une liste. La proximité s’affiche avant le produit lui-même.
  • Fiche atelier accessible avant la fiche produit : on rassure sur qui vend avant ce qui est vendu.
  • Distance et grade affichés à côté du prix sur chaque produit, pour décider vite sans filtrer.
  • Revive : carte des ateliers proches avec les résultats
  • Revive : résultats en liste
  • Revive : page de l’atelier EcoTech Repair
  • Revive : page de l’atelier Refurb Station
  • Revive : configuration de l’appareil

Réponse à : logistique contradictoire4 écrans · achat

La transparence jusqu’au paiement.

  • Impact CO₂ visualisé dans le panier (pas seulement en confirmation), pour que l’argument écologique reste actif jusqu’au bout.
  • Retrait en main propre proposé avant la livraison standard : moins de logistique, moins d’impact.
  • Confirmation avec le récapitulatif de l’atelier et du technicien : la boucle de confiance se ferme sur un visage humain.
  • Revive : panier
  • Revive : récapitulatif de commande
  • Revive : choix du moyen de paiement
  • Revive : confirmation de commande

08 · Bilan

Sept jours. Un sprint solo de A à Z.

Projet personnel, sans utilisateurs réels. Voici ce qui a été livré, ce qui a marché dans la méthode, et ce que je referais autrement.

  • Livré

    14 écrans, 6 illustrations, un design system complet.

    • Logo, charte graphique et direction artistique « Eco-Tech »
    • Prototype Figma cliquable, modes Light et Dark
    • 30+ composants atomiques documentés
    • Workflow IA (Ideogram puis Illustrator) reproductible
  • Ce qui a marché

    La méthode tient en 7 jours.

    • L’IA accélère sans remplacer. Ideogram divise par 3 le temps d’exploration visuelle. La vectorisation dans Illustrator reste indispensable pour la qualité de production.
    • Le scope tient grâce au design system. Penser en composants atomiques dès le jour 3 a permis de monter 14 écrans cohérents sans rien redessiner.
  • Ce que je referais

    Tester avec 2 ou 3 personnes, même informellement.

    • Aucun test utilisateur. Sans confrontation au réel, je projette mes propres hypothèses. Même 30 minutes avec deux amis sur le prototype auraient révélé des frictions invisibles.
    • Fiche produit trop dense. Specs, atelier, grade et macros sur une seule vue. Une hiérarchie en deux temps serait sans doute plus digeste.

Un projet similaire en tête ?

La suite, on l’écrit ensemble

Écrivez-moi quelques lignes : je vous réponds personnellement sous 24 h ouvrées.