CONTEXTE
C'est quoi une brève de comptoir ?
C'est une citation authentique, recueillie dans la vie de tous les jours, surtout dans les bars et les bistrots.
L'absurde, la poésie, l'humour, mais aussi l'actualité et parfois la philosophie se côtoient entre bêtises poétiques, tendres horreurs et vérités teintées d'humour noirs.
Exemple de brèves de comptoir
"L'animal domestique, t'en manges pas, eh ben les produits domestiques, t'en bois pas."
"J'ai toujours dit ce que je pensais... Là, pas exemple, je pense à rien, je le dis."
"L'ancêtre de la voiture, c'est la marche à pied."
"La télé c'est tellement con que même les pigeons se posent plus sur les antennes."
"Si le travail c'est la santé, ben donnez le mien à quelqu'un de malade."
"L'alcool aide à dire des conneries. Sinon on se tairait."
"Qui voit le ciel dans l'eau, voit les poissons sur les arbres."
"Quand le téléphone ne sonne pas, ça ne sert à rien de le laisser branché."
Qu'est ce qui a suscité la création de cette app ?
L'arrivée de l'intelligence artificielle a profondément transformé les méthodes de conception et de production numérique.
En tant que Product Designer, j’ai souhaité comprendre de manière concrète comment ces technologies pouvaient enrichir ou au contraire complexifier mon processus de travail, de l’idéation jusqu’au prototypage fonctionnel.
Plutôt que de me lancer dans un projet complex, j’ai volontairement choisi un projet au périmètre restreint. L’objectif était de créer un terrain d’expérimentation contrôlé, me permettant d’évaluer l’apport réel de l’IA dans un contexte produit, sans que la complexité fonctionnelle ne masque les apprentissages.
L’idée du projet est née de manière inattendue, à la suite de la découverte d’une suggestion Youtube autour des brèves de comptoir. Leur format court, spontané et souvent humoristique m’a semblé particulièrement adapté à une expérience mobile simple, rapide et centrée sur le plaisir d’usage.
Le concept s’est alors structuré autour d’une application capable de générer des brèves de comptoir, avec une mise en scène soignée du contenu et une interaction légère mais engageante.
L’ambition était également d’impliquer l’utilisateur dans l’expérience, notamment via la notation des brèves et la possibilité d’en proposer de nouvelles.
Ce projet est ainsi devenu un double terrain d’exploration :
- produit, à travers la conception d’une expérience mobile minimaliste mais expressive
- méthodologique, via l’intégration d’outils d’IA dans les phases de cadrage, de design et de prototypage
Icône de l'application
Le MVP
Pour ce MVP, j’ai volontairement démarré avec un périmètre simple : concevoir une application de divertissement permettant de consulter des brèves de comptoir de manière rapide et légère.
Les fonctionnalités principales étaient les suivantes :
- Un flux génératif : à chaque clic sur le bouton, une brève est affichée aléatoirement parmi une base de 85 contenus, afin de favoriser la surprise et la variété.
- La possibilité pour l’utilisateur de changer la langue de lecture (français ou anglais), pour élargir l’accessibilité du contenu.
- Une dimension visuelle et interactive : à chaque nouvelle brève, l’image associée évolue, avec un personnage passant d’un état neutre à un état d’expression (comme s’il “prononçait” la brève).
Cette micro-interaction vise à rendre l’expérience plus vivante et à créer une forme de lien entre l’utilisateur et l’univers de l’application.
Cette micro-interaction vise à rendre l’expérience plus vivante et à créer une forme de lien entre l’utilisateur et l’univers de l’application.
CONCEPTION
Les outils
- Figma et Figma Makes : pour idéaliser et avoir un premier rendu de ce que je voulais créer
- Illustrator : pour créer les illustrations du personnage.
- ChatGpt : pour générer un PRD afin d'améliorer et faciliter le développement
- Cursor & Antigravity : Environnement de développement
- LLM utilisés : Claude Sonnet, mais aussi Gemini Pro (car dépassement de crédit avec Claude)
- React Native : Librairie pour permettre d'utiliser l'app sur iOS et Android
- Xcode et Expo Go : Visualiser l'app
A quoi ressemble les données
Les données sont enregistrées dans des JSON. Un pour les brèves en français et un autre pour les brèves en anglais. Je ne voyais pas l'utilité d'utiliser Supabase pour stocker des brèves alors qu'un simple JSON était suffisant pour ce MVP.
DESIGN
Voici Bebert
Afin de rester dans une logique de MVP et de simplicité, j’ai fait le choix de m’orienter vers une illustration sobre, dans un style bande dessinée et en noir et blanc. Cette approche permettait de poser un univers visuel identifiable tout en limitant la complexité graphique à ce stade du projet.
Toujours dans une démarche d’exploration autour de l’intelligence artificielle, j’ai testé plusieurs outils de génération visuelle. Toutefois, les rendus obtenus ne correspondaient pas au niveau de cohérence stylistique et d’intention que je recherchais pour l’identité de l’application.
J’ai donc complété cette phase par une recherche iconographique plus traditionnelle (références BD, imagerie de bistrot, culture populaire), ce qui m’a permis de clarifier la direction artistique et d’imaginer une représentation pertinente d’un pilier de bar, en cohérence avec l’univers du produit.
Charte Graphique
L’identité visuelle de l’application repose sur la rencontre de deux univers : la littérature et le bistrot.
Pour évoquer l’univers littéraire, j’ai privilégié une typographie serif, dont les empattements rappellent l’édition traditionnelle et l’imprimé, apportant une dimension plus narrative et culturelle à l’interface.
Enfin la couleur s’inspire quant à elle de l’imaginaire du bistrot. Le rouge s’est imposé naturellement comme couleur principale, à la fois pour son lien avec l’univers des bistrots et pour faire écho à la boisson favorite du personnage, renforçant ainsi la cohérence entre identité visuelle et le storytelling.
