Rendre l’achat d’un milligramme d’or aussi sûr que celui d’un lingot de dix grammes — le produit, les campagnes et les slides de la revue hebdomadaire.
Entreprise
Digikala
Rôle
Designer, marketeur, développeur BI
Type
Produit · Croissance · Données
Secteur
Fintech · e-commerce
Équipe
L’unité Non-Inventory de Digikala, avec l’ingénierie, les relations presse et le média de performance, et le juridique
Statut
Lancé
Outils
Figma
Le problème
L’or est la protection par défaut contre l’inflation en Iran, mais l’acheter reste analogique : un négociant, des frais de façon, une pureté qu’il faut croire sur parole et un endroit où le garder.
Le rôle
Designer et marketeur sur un même produit, avec un pied dans le reporting : les écrans de commande et d’avoirs, les campagnes autour et les slides de la revue hebdomadaire derrière les deux.
Le résultat
Un système responsive de 42 écrans, une extension à l’argent sur les mêmes rails, des campagnes grand public et entreprises, et les slides d’une revue hebdomadaire qui a mis produit, marketing et relations presse face aux mêmes chiffres.
Figure 01
Figure 01Trois des 42 écrans : la commande, Mes actifs et l’historique des achats et ventes — l’or et l’argent sur un même jeu d’écrans.
01Contexte
De l’or, vendu au milligramme, au sein de la plus grande place de marché d’Iran.
Digital Gold, c’est l’or et l’argent fondus numériques de Digikala, vendus sur digikala.com/gold et adossés à du métal physique : Digikala conserve l’équivalent de chaque achat, et l’avoir peut être revendu ou retiré en lingots.
Il relève de l’unité Non-Inventory de Digikala — la partie de la place de marché qui vend ce qui n’est pas du stock physique : métaux précieux, cartes cadeaux, services, voyages. Le rôle couvrait le produit, les campagnes autour et les slides de la revue hebdomadaire derrière les deux.
Le problème de design était la garde et la transparence, pas le trading.
02Problème
Trois questions auxquelles chaque écran doit répondre.
En Iran, l’or est la protection par défaut contre l’inflation, mais l’acheter reste analogique : un négociant en lingots, des frais de façon, une pureté qu’il faut croire sur parole et un endroit sûr où le garder.
Le pari du produit : qu’un achat d’un milligramme puisse sembler aussi sûr qu’un lingot de dix grammes. Cela pose trois questions sur chaque écran : mon or est-il réel, qu’est-ce que je paie exactement, et puis-je le récupérer ?
03Contraintes
De la vraie monnaie et du vrai métal, sur le design system d’une autre équipe.
Achat et vente dès un milligramme, entre 5 000 et 200 000 000 tomans par commande.
Versements sur le portefeuille DigiPay, en quatre fenêtres de règlement par jour.
Retrait physique sous forme de lingots de 5 grammes.
En persan, de droite à gauche, avec des chiffres persans partout.
Bureau en 1440 et mobile en 390, livrés comme un seul système responsive.
Construit sur le design system maison de Digikala, qui appartenait à une autre équipe.
04Mon rôle
Trois casquettes : designer, marketeur, reporting.
L’intitulé du poste nomme trois métiers, et les trois fichiers Figma se répartissent exactement ainsi : le produit, les campagnes et la revue hebdomadaire.
Responsable
↳Vision et roadmap produit
↳Les parcours commande, avoirs et profil
↳La couleur et le changement de nom en or numérique
↳Les concepts de campagne
↳Le modèle de segmentation
↳Les slides de la revue hebdomadaire
Coresponsable
↳La présentation des frais et des prix, avec le business
↳L’extension à l’argent
↳L’offre de cartes cadeaux pour les entreprises, avec l’unité Non-Inventory
↳Un tableau de bord de métriques métier, en appui
Collaboration
↳Ingénierie
↳Relations presse et média de performance
Figure 02Un premier film de concept, intitulé Non-Inventory Gold. Le produit s’appelle encore or électronique, avec un style antérieur aux écrans lancés : accents rouges, carte d’avoirs dorée, courbe de prix. Les cartes bancaires enregistrées d’un plan sont floutées.
05Couleur
Dans Digikala, mais pas le Digikala habituel.
L’or numérique se trouve dans Digikala, dans son menu principal et sur sa page d’accueil, mais ce n’est pas un achat comme les autres : personne n’attend de colis, on y place son épargne. Tout ce qui crée la confiance est donc resté celui de Digikala — la connexion, la vérification d’identité, le portefeuille, les mots, les composants — et seule la couleur a changé.
Les mêmes écrans ont été essayés en rouge, bleu, vert, violet et marron, chacun avec une seconde couleur, et jugés sur ce qu’ils font ressentir à quelqu’un sur le point de placer son argent. Le rouge, la couleur de Digikala et celle du film ci-dessus, évoque l’urgence et le risque : bien pour une promotion, pas pour l’épargne. Le bleu évoque la confiance sans la croissance, et c’était déjà la couleur de DigiPay ; le vert évoque la croissance, le calme et l’achat de quelque chose de précieux.
Une prédiction d’attention par IA a ensuite montré où va le regard sur les écrans verts, et cinq palettes ont été posées sur les deux mêmes écrans avec l’équipe de marque du marketing. Le choix final associe un bleu canard profond à un or doux, et la même décision a renommé le produit : l’or électronique est devenu l’or numérique.
La couleur a été choisie pour qui épargne, pas pour qui fait ses achats.
Rouge, celui de Digikala
01Le bouton de vérification d’identité, première étape de l’écran : 2,5 % de l’attention prédite
02Le choix entre achat et vente et le champ du montant : 0 %
03Le point le plus chaud : le solde du portefeuille et les limites d’achat
Figure 04
01Bleu canard profond, #01494B : la couleur principale, pour la carte du solde, le graphique et le filtre choisi
02Or doux, #FFD08F : la seconde couleur, pour l’en-tête et le bouton principal de la page d’atterrissage
03La page d’atterrissage s’affiche sous l’en-tête et la recherche de Digikala
Figure 05La paire finale sur l’écran d’avoirs et la page d’atterrissage. Le même bleu canard et le même or ont ensuite habillé l’argent aussi.
06Approche
Chaque état, dessiné deux fois.
Le canevas Figma est organisé en matrice, pas en vrac d’écrans : chaque parcours s’ouvre sur une carte titre, se divise en états, et chaque état est dessiné une fois pour le bureau et une fois pour le mobile.
Commande, Mes actifs et Profil totalisent 42 écrans — 20, 12 et 10 —, soit 21 états dessinés aux deux largeurs, plus quatre explorations sur la manière d’afficher les avoirs.
L’échec est l’un de ces états. Une commande échouée a son propre texte, son propre code de suivi et sa propre étape suivante, avec la même mise en page que la réussite — pas une page d’erreur.
L’échec a eu son propre texte et sa propre mise en page, pas une page d’erreur.
Parcours → état → breakpoint
01
ParcoursCommande · Mes actifs · Profil
02
ÉtatRéussi · échoué · en attente de validation · en cours · en cours de versement
Figure 06« Final Transaction Gold » : les états de réussite et d’échec d’une commande, sur bureau et sur mobile. La réussite détaille les quatre fenêtres de règlement ; l’échec garde la même mise en page et ajoute un code de suivi.
07Décisions clés
Quatre choix sur les écrans de commande et d’avoirs
Chacun répond à l’une des trois questions avant que l’utilisateur n’ait à la poser.
01
Placer les frais et les limites au-dessus du bouton.
Les frais d’achat, le minimum et le maximum et le solde du portefeuille figurent dans la carte de commande, au-dessus d’« Acheter de l’or » : rien du coût n’apparaît pour la première fois après la validation.
Preuves
L’écran de commande liste le solde, le maximum, le minimum et les frais d’achat avant le bouton.
02
Montrer l’horloge du prix, pas une promesse.
Le prix en direct se met à jour avec un compte à rebours visible de 20 secondes. Un minuteur montre que le prix est vivant et quand il bougera ; une phrase ne pourrait que l’affirmer.
Preuves
Texte du parcours de commande : « 20 secondes avant la mise à jour du prix ».
03
Laisser raisonner en montant ou en milligrammes.
Le montant payé et la quantité d’or se déduisent l’un de l’autre : un primo-acheteur part d’un budget, un épargnant d’un poids.
08Recherche
L’argent, pour quelqu’un qui achète petit et apprend en faisant.
L’argent est arrivé plus tard, comme extension du produit or, et a été conçu autour d’une persona composite plutôt que de l’acheteur d’or d’origine : 27 ans, freelance et décoratrice, peu de connaissances en investissement, une fidélité moyenne à la marque et un plafond qu’elle s’impose de 20 % de son épargne en or.
Ses inquiétudes étaient celles auxquelles le produit répondait déjà pour l’or : peu de connaissances sur le fonctionnement du marché de l’argent, des doutes sur la sécurité d’un investissement sur une plateforme numérique et une sensibilité aux variations de prix. Elle suit les recommandations de ses amis et les publicités en ligne, et commence par un petit achat.
L’argent est donc arrivé sur les mêmes rails : le même parcours de commande et la même carte d’avoirs, derrière un onglet de métal.
La réponse était un onglet, pas un second produit.
« Achetons, on verra bien ce qui se passe ! »
Figure 07La fiche persona, en persan : sa phrase, ses objectifs, ses inquiétudes, ses motivations et ses comportements. Créée pour l’extension à l’argent — une persona composite, pas une vraie cliente.
09Croissance
Quatre portes d’entrée : le produit, une story, une campagne, un service RH.
Une story d’accueil sur digikala.com/gold parcourt les trois questions en quatre diapositives — ce que c’est, l’achat dès un milligramme, la liquidité rapide et l’adossement physique — et se termine sur « Commencer à acheter de l’or ». Un film de lancement a porté les mêmes messages sur les écrans lancés.
Les campagnes grand public passaient par DigiPay : un même visuel vendait le zéro frais et l’achat en plusieurs fois. Une offre d’avantages salariés a porté la gamme Non-Inventory auprès des services RH — crédit sur un panier de marques, prêts aux salariés et coffrets d’occasion, sur une place de marché de 16 partenaires.
Le ciblage reposait sur un modèle de segmentation fondé sur les avoirs, la démographie et le comportement, et des parcours déclenchés par des événements envoyaient le message suivant selon ce que les gens faisaient vraiment. Un crédit adossé à l’or a été proposé en parallèle, comme concept ; il n’a pas été lancé.
Figure 09Le film de lancement : les messages de la story d’accueil — n’importe quelle quantité dès un milligramme, liquidité rapide, adossement physique — sur les écrans lancés, puis digikala.com/gold et un carton de lancement.
01Aux couleurs de DigiPay : la campagne passait par le portefeuille de paiement de Digikala
02« L’or numérique, avec achat en plusieurs fois »
03« Zéro frais jusqu’à la fin du vendredi 3 mordad »
Figure 10Un visuel story, deux offres : zéro frais et paiement en plusieurs fois.
Figure 12Un film de maquette de la carte cadeau d’or numérique, avec « Carte or électronique Digikala » imprimé sur sa face dorée. La carte est restée un concept et n’a pas été lancée.
10Résultats
Ce que montrait la revue hebdomadaire
Voici les résultats du T1 de l’unité Non-Inventory par rapport au plan, tirés d’une slide de la revue hebdomadaire. Seul le taux d’atteinte est publié — les chiffres absolus appartiennent à Digikala — et ils décrivent l’unité, pas l’effet d’un design en particulier. La part de Sina, ce sont les slides, plus un coup de main sur un tableau de bord de métriques ; produire les chiffres n’était pas son travail.
42 écrans de commande, d’avoirs et de profil, en deux largeurs
21 états, chacun sur bureau et sur mobile — échec compris.
Livrable · Figma — fichier Gold & Silver | Main
Marge de contribution par rapport au plan
121–145%
PC1 121 %, PC2 130 %, PC3 145 % — au-dessus du plan aux trois niveaux de marge.
Résultat mesuré · Revue hebdomadaire de Non-Inventory, instantané du T1
NMV par rapport au plan
97%
La valeur nette des marchandises est restée juste sous le plan.
Résultat mesuré · Revue hebdomadaire de Non-Inventory, instantané du T1
PBT par rapport au plan
91%
Le résultat avant impôt est ressorti sous le plan.
Résultat mesuré · Revue hebdomadaire de Non-Inventory, instantané du T1
Ce qui a été livré
↳Commande, avoirs et profil, sur bureau et mobile
01NMV — valeur nette des marchandises vendues
02PC1–PC3 — marge de contribution à trois niveaux
03PBT — résultat avant impôt
04Taux d’atteinte seulement : réel et objectif ne sont pas publiés
Figure 13L’instantané du T1 tel que publié ici : la seule colonne du taux d’atteinte.
11Ce que j’ai appris
Ce que j’ai appris
01
Un compte à rebours visible inspire plus confiance qu’une phrase rassurante.
Le prix aurait pu dire qu’il était juste. Le minuteur a montré qu’il était vivant et quand il changerait — et a laissé à l’utilisateur le moment de valider.
02
Un modèle de segmentation ne vaut que ce qu’en fait le déclencheur en aval.
Les segments par avoirs, démographie et comportement ont compté dès qu’un parcours déclenché par des événements a agi sur eux. Un segment à qui personne n’écrit n’est qu’un rapport.
03
Le vrai produit de la revue hebdomadaire, c’était un seul jeu de chiffres partagé.
Une seule revue hebdomadaire a donné au produit, au marketing et aux relations presse les mêmes NMV, CTR, CPC et taux de conversion pour débattre. Concevoir ses slides a montré que les graphiques étaient le moindre des enjeux.
Le design system et l’ingénierie plateforme de Digikala appartenaient à d’autres équipes — ces écrans reposent sur le système maison et portent l’en-tête et le pied de page de production.
Bleu
Vert royal
Marron
Figure 03Le même écran d’avoirs dans quatre des couleurs essayées. Chaque option associe une couleur principale à une seconde couleur.
Une prédiction d’attention par IA sur l’écran d’achat de la version verte, qui s’appelait encore or électronique : l’écran, ses zones d’intérêt et la carte de chaleur. C’est la prédiction d’un modèle, pas un suivi oculaire.
03
BreakpointBureau 1440 · mobile 390
Preuves
Deux champs liés sur l’écran de commande : montant payé en rials, quantité d’or en milligrammes.
04
Masquer le solde d’un geste.
Les avoirs sont une épargne, et un écran de téléphone est souvent vu par quelqu’un d’autre. L’icône en forme d’œil masque chaque valeur tandis que la carte garde sa forme.
Preuves
La carte des avoirs avec le solde masqué ; les explorations de cette carte ont essayé plusieurs masques.
Figure 08Les quatre diapositives d’accueil : ce que c’est, le peu qu’on peut acheter, la vitesse à laquelle on peut vendre et qui garde le métal.
Figure 11La brochure avantages salariés : la couverture, quatre propositions de valeur, les seize partenaires et les offres.
↳L’extension à l’argent
↳La story d’accueil en quatre diapositives
↳La campagne zéro frais et paiement en plusieurs fois
