Un iPhone posé sur deux papiers, rouge et bleu nuit, affiche l’essai de rouge à lèvres de Colorfit : un visage en gros plan et le nuancier des rouges au-dessus du déclencheur

Étude de cas · Application mobile · 2019

Colorfit

Trouver sa teinte dans le nuancier Pantone, la retrouver en mode, en beauté et en déco, puis l’essayer sur soi ou chez soi.

Cadre
Projet de diplôme, en binôme avec Jacques Mey
Année
2019
Rôle
Direction artistique, design d’interface
Livrables
Application iOS, parcours d’accueil prototypé
01 · Le sujet

Faire entrer Pantonedans le quotidien.

Le sujet du diplôme plaçait chaque binôme dans la peau d’une agence digitale. Pour ses 150 ans, Pantone voulait une expérience digitale qui l’ouvre au grand public.

Quatre semaines, du 11 mars à la semaine du 8 avril 2019, pour un concept, une direction artistique et un prototype, présentés devant un jury de cinq directeurs artistiques et directeurs de création.

Les idées reçues à combattre, selon le sujet

  1. 01Une marque connue, mais incomprise du grand public.
  2. 02Le nuancier, un objet de spécialistes, d’un autre temps.
  3. 03Une marque vouée à être dépassée par son époque.

Notre réponse

Une application où l’on cherche une couleur avant un produit.

Parcours principal

  1. Choisir un univers
  2. Choisir ses couleurs
  3. Trouver ses produits

Parcours secondaire

  1. Choisir un univers
  2. Choisir sa couleur
  3. L’essayer en réalité augmentée

La cible

Le grand public adulte et connecté, à partir de 18 ans. Deux personas guidaient les choix.

Persona · Mode

Benjamin, 25 ans

Community manager à Paris, passionné de mode, toujours sur son téléphone. Sa crainte : un look dépareillé. Sa frustration : ne pas pouvoir essayer avant d’acheter.

« Il ne suffit pas de porter de la couleur, il faut la sublimer. »

Persona · Déco

Maria, 38 ans

Avocate à Nice, elle aménage la maison qu’elle vient d’acheter : chaleureuse, mais sophistiquée. Pressée, elle achète à distance et ne veut plus perdre de temps en magasin.

« I prefer living in color. » David Hockney, sa citation
Page du dossier de 2019 : le nom Colorfit et la signature « Trouvez la couleur qui vous convient ! » sur fond turquoise, avec des objets colorés
Page du dossier de 2019 : la mécanique principale en trois écrans, choisir un univers, choisir ses couleurs, trouver ses produits
Page du dossier de 2019 : la cible, 18 ans et plus, public connecté

Extraits du dossier de présentation remis au jury, 2019.

02 · L’idée

Partir de la couleur,pas du produit.

Le nuancier Pantone sert de référence aux professionnels de la couleur. Colorfit le met dans la poche de chacun : on choisit une teinte, l’application la retrouve dans des vêtements, du maquillage et des objets, et on l’essaie en réalité augmentée.

L’application se présente en trois écrans, à la fin du parcours d’accueil. Leurs textes sont ceux de 2019.

  1. Écran du tutoriel : un nuancier de pastilles colorées, titre « Trouvez la couleur qui vous convient », texte « Profitez du nuancier Pantone riche de plus de 5000 teintes ! »
    Trouver la couleur
  2. Écran du tutoriel : trois photos de mode, beauté et intérieur, titre « Dans 3 univers différents »
    Dans trois univers
  3. Écran du tutoriel : un salon aux murs orange et jaune, titre « Et testez ces couleurs en direct », texte sur la réalité augmentée
    L’essayer en direct
03 · L’accueil

Faire connaissanceen huit écrans.

Avant d’ouvrir le nuancier, l’application demande ce qu’on cherche : les produits préférés, l’univers à voir en priorité. Le fil d’actualité est ensuite trié selon ces réponses.

Parcours prototypé dans Figma en 2019, rejoué ici avec les écrans d’origine.

Écran d’ouverture : logo Colorfit, carrés de couleurBienvenue sur Colorfit : connexion par email, Facebook ou GoogleInscrivez-vous : nom d’utilisateur, email, mot de passeFaisons connaissance : l’application annonce quelques questionsQuels produits préférez-vous ? Cosmétique, vêtements, chaussures, peinture, literie…Dans l’univers Mode, que préférez-vous voir en priorité ? Mode femme, mode homme, les deuxNous avons personnalisé votre expérience : rendez-vous dans le filFil d’accueil : couleur du jour, nouveautés, rubrique #Colorfitted
1 / 8
04 · Trois univers

Une couleur,trois univers.

Dans le nuancier, les teintes se rangent par familles. Une fois la couleur choisie, Colorfit la cherche dans les trois univers : la mode, la beauté, la déco.

  1. Nuancier de Colorfit : bandeau bleu nuit, carte Pantone Rouge, grille de rouges, du clair au foncé
    Le nuancier
  2. Univers Mode : une robe rouge décolletée, un pull rouge, une veste de survêtement rouge
    Mode
  3. Univers Beauté : vernis rouge, rouge à lèvres, poudre rosée, palette de fards
    Beauté
  4. Univers Déco : fauteuil rouge, théière rouge, objets et mobilier laqués rouges
    Déco
Accueil des univers : trois bandeaux photo titrés Mode, Beauté et Déco
L’entrée des trois univers

L’accueil sépare les trois univers en grands bandeaux photo. Dans chaque liste, un filtre affine par genre, catégorie, marque, taille et prix ; la teinte reste celle du nuancier.

05 · L’essai

Sur soi,ou chez soi.

La caméra s’ouvre, le nuancier se pose sous l’image. Sur un visage, la teinte va aux lèvres ; dans une pièce, elle va au mur.

Essai de maquillage : un visage en gros plan, la caméra ouverte, le déclencheur en basBarre d’outils sous le visage : pinceaux, yeux, lèvresChoix de la zone à maquiller : lèvres, paupières, cilsNuancier des rouges posé sous le visage, la teinte choisie à gauche

Toucher l’écran pour passer à l’étape suivante

Essai déco : un canapé gris devant un mur blanc
Le même salon, le mur passé au rouge

Glisser pour repeindre le mur

Écrans de 2019 : la réalité augmentée est maquettée, pas développée. Photos de démonstration.

06 · La fiche

Chaque teintea sa fiche.

Un iPhone posé sur un papier rose et un papier orangé affiche la fiche Pantone 3595 C : grand aplat rose, valeurs sRVB et HEX, couleurs en harmonie
Un iPhone posé sur un papier turquoise et un papier beige affiche la fiche Pantone 13-4720 TCX : grand aplat turquoise, valeurs et couleurs en harmonie

La référence Pantone en grand, les valeurs pour l’écran, trois couleurs en harmonie. Sous la fiche, les produits de la même teinte ; sur l’accueil, une couleur du jour.

Fiche d’un produit : veste de survêtement rouge, prix, et en dessous « Ces produits ont la même teinte »
La même teinte, d’autres produits
Fil d’accueil : couleur du jour Purple Rain, nouveautés, collection Pantone x Bershka, rubrique #Colorfitted
Couleur du jour
07 · La démarche

123 écrans,dont 54 d’essais.

Le fichier Figma garde toute la recherche : des wireframes gris, une première version habillée de corail, puis la version finale en bleu nuit, plus discrète, qui laisse la place aux teintes.

Accueil des univers
Wireframe de l’accueil des univers : trois bandeaux rouge brique titrés Mode, Beauté, Déco
Version corail : bandeaux pastel Mode, Beauté, Déco
Version finale : bandeaux photo Mode, Beauté, Déco
Liste de produits
Wireframe de la liste : grille de rectangles gris et filtre
Version corail de la liste Mode : bandeau corail, photos de vêtements rouges
Version finale de la liste Mode : bandeau bleu nuit, mêmes photos
Fiche couleur
Wireframe de la fiche : aplat rose pâle, référence Pantone 3456 OU en texte provisoire
Version intermédiaire de la fiche : aplat, valeurs et couleurs en harmonie
Version finale de la fiche Pantone 3595 C
08 · Relecture

Sept ans plus tard,la même idée, redessinée.

Avec le recul, le prototype de 2019 a des défauts d’interface : des choix d’accueil peu lisibles, des valeurs de couleur mal étiquetées, une teinte qui disparaît dès qu’on quitte le nuancier. J’ai repris cinq écrans en gardant le concept et le bleu nuit de la marque.

Le dossier de 2019 prévoyait déjà que l’habillage de l’application change chaque jour avec la couleur du jour. La relecture va au bout de cette idée : la teinte choisie devient la couleur de l’interface, du nuancier aux produits, jusqu’à l’essai.

Un téléphone actuel, sans marque, en légère rotation sur fond sombre, affiche la nouvelle fiche couleur Rouge vif
04 / 05 · Fiche couleur

Comparer avec 2019

2019 : écran Accueil2019 : écran Nuancier2019 : écran Liste2019 : écran Fiche couleur2019 : écran Essai
2019
Relecture 2026 : écran AccueilRelecture 2026 : écran NuancierRelecture 2026 : écran ListeRelecture 2026 : écran Fiche couleurRelecture 2026 : écran Essai
Relecture 2026

01 · Accueil

Relecture 2026 : concept redessiné, non développé. Photos de démonstration ; la teinte essayée sur les lèvres est une simulation.

Colorfit, 2019.

Conception et design
Franck Fibleuil et Jacques Mey, projet de diplôme
Prototype
Figma, parcours d’accueil
Images dans les écrans
Photos de démonstration, banques d’images et sites marchands
Pantone
Marque de Pantone LLC. Projet d’école, sans lien avec la marque
Relecture
2026, cinq écrans redessinés ; téléphone modélisé et rendu dans Blender
Mises en situation
Maquette iPhone 8, mockups-design.com