SCROLL
SCROLL
SCROLL
Cairn, d’une aventure sur le GR34 à un produit pensé pour le terrain
D’une aventure sur le GR34 à un produit pensé pour le terrain.
Cairn est né d’un besoin très simple : préparer et vivre une aventure de plusieurs jours sur le GR34, entre randonnée et course à pied. Un parcours d’environ 140 km, du Mont-Saint-Michel à Saint-Cast-le-Guildo, avec plusieurs étapes, des déplacements, du matériel et de nombreuses informations à centraliser.
Ce qui devait simplement être un outil personnel pour mes vacances est progressivement devenu un véritable side project de Product Design. J’ai imaginé un nom, créé une identité visuelle, conçu l’expérience dans Figma puis poussé le projet jusqu’à une Progressive Web App fonctionnelle, utilisable directement depuis mon téléphone.
Réalisations
NAMING
BRANDING
PRODUCT DESIGN
UI/UX DESIGN
AI DEV
Stacks
À l’origine, un besoin personnel
Tout est parti de la préparation de mon itinéraire sur le GR34. Entre les distances, les étapes, les transports, les hébergements, le matériel, les horaires et les informations utiles à retrouver pendant le parcours, les données étaient rapidement dispersées entre plusieurs applications, notes et captures d’écran.
J’ai donc imaginé l’outil que j’aurais aimé avoir avec moi : une application simple, mobile et pensée autour du séjour, permettant de centraliser mon aventure et d’accéder rapidement aux informations importantes avant et pendant chaque journée.
Naming
Un cairn est un empilement de pierres que l’on retrouve le long des sentiers pour marquer un passage, indiquer une direction ou signaler un point remarquable dans le paysage.
Le nom fait directement référence à la randonnée, à l’exploration, au relief, à l’altitude et aux grands espaces. Il traduit surtout l’idée centrale du projet : avancer d’étape en étape tout en gardant un point de repère sur son chemin.
Un symbole de progression
Sur un sentier, le cairn matérialise une direction et confirme que l’on est sur le bon chemin. Il devient un repère discret dans le paysage et accompagne naturellement la progression.
Cette symbolique fait écho à l’expérience imaginée pour l’application : suivre son parcours, retrouver ses différentes étapes et conserver une trace de son aventure.
Entre nature et découverte
Pierre, relief, sentiers, altitude et grands espaces composent naturellement l’imaginaire de Cairn.
Le projet associe ainsi deux univers : l’expérience physique de l’aventure en pleine nature et l’expérience numérique qui vient l’accompagner sans jamais prendre le dessus.
Direction artistique & identité visuelle
L’univers visuel de Cairn s’appuie sur une palette inspirée de la nature, du relief et des grands espaces, associée à un système typographique contemporain et fonctionnel.
Chaque choix graphique a été pensé pour créer une identité outdoor reconnaissable tout en conservant la simplicité et la lisibilité nécessaires à une expérience produit mobile.
Une palette issue de ma brand
Le bleu utilisé dans Cairn ne cherche pas, dans cette première version, à reproduire directement les codes de la randonnée ou de la nature.
Il s’agit d’un choix volontaire : réutiliser les couleurs de mon identité Jordan Boutin Product Designer pour créer une filiation visuelle entre le projet et mon travail, tout en donnant à cette V1 une identité cohérente et immédiatement reconnaissable.
Une typographie cohérente avec mon univers
Le système typographique suit la même logique. Il reprend les codes graphiques de mon identité personnelle afin de créer une continuité entre Cairn, mon portfolio et ma pratique du Product Design.
La hiérarchie typographique reste néanmoins pensée pour un usage produit, avec une attention particulière portée à la lisibilité, à la clarté de l’information et à l’utilisation sur mobile.
Une identité amenée à évoluer
Dans une V2, l’objectif sera d’approfondir la recherche colorimétrique et l’univers visuel afin de construire une identité davantage liée aux notions de randonnée, de nature, d’altitude et d’exploration, tout en conservant la simplicité et la lisibilité nécessaires au produit.
Cairn pourra ainsi progressivement gagner en autonomie en tant que marque, sans perdre la logique fonctionnelle définie dans cette première version.
Cairn, d’une aventure sur le GR34 à un produit pensé pour le terrain
D’une aventure sur le GR34 à un produit pensé pour le terrain.
Cairn est né d’un besoin très simple : préparer et vivre une aventure de plusieurs jours sur le GR34, entre randonnée et course à pied. Un parcours d’environ 140 km, du Mont-Saint-Michel à Saint-Cast-le-Guildo, avec plusieurs étapes, des déplacements, du matériel et de nombreuses informations à centraliser.
Ce qui devait simplement être un outil personnel pour mes vacances est progressivement devenu un véritable side project de Product Design. J’ai imaginé un nom, créé une identité visuelle, conçu l’expérience dans Figma puis poussé le projet jusqu’à une Progressive Web App fonctionnelle, utilisable directement depuis mon téléphone.
Réalisations
NAMING
BRANDING
PRODUCT DESIGN
UI/UX DESIGN
AI DEV
Stacks
À l’origine, un besoin personnel
Tout est parti de la préparation de mon itinéraire sur le GR34. Entre les distances, les étapes, les transports, les hébergements, le matériel, les horaires et les informations utiles à retrouver pendant le parcours, les données étaient rapidement dispersées entre plusieurs applications, notes et captures d’écran.
J’ai donc imaginé l’outil que j’aurais aimé avoir avec moi : une application simple, mobile et pensée autour du séjour, permettant de centraliser mon aventure et d’accéder rapidement aux informations importantes avant et pendant chaque journée.
Naming
Un cairn est un empilement de pierres que l’on retrouve le long des sentiers pour marquer un passage, indiquer une direction ou signaler un point remarquable dans le paysage.
Le nom fait directement référence à la randonnée, à l’exploration, au relief, à l’altitude et aux grands espaces. Il traduit surtout l’idée centrale du projet : avancer d’étape en étape tout en gardant un point de repère sur son chemin.
Un symbole de progression
Sur un sentier, le cairn matérialise une direction et confirme que l’on est sur le bon chemin. Il devient un repère discret dans le paysage et accompagne naturellement la progression.
Cette symbolique fait écho à l’expérience imaginée pour l’application : suivre son parcours, retrouver ses différentes étapes et conserver une trace de son aventure.
Entre nature et découverte
Pierre, relief, sentiers, altitude et grands espaces composent naturellement l’imaginaire de Cairn.
Le projet associe ainsi deux univers : l’expérience physique de l’aventure en pleine nature et l’expérience numérique qui vient l’accompagner sans jamais prendre le dessus.
Direction artistique & identité visuelle
L’univers visuel de Cairn s’appuie sur une palette inspirée de la nature, du relief et des grands espaces, associée à un système typographique contemporain et fonctionnel.
Chaque choix graphique a été pensé pour créer une identité outdoor reconnaissable tout en conservant la simplicité et la lisibilité nécessaires à une expérience produit mobile.
Une palette issue de ma brand
Le bleu utilisé dans Cairn ne cherche pas, dans cette première version, à reproduire directement les codes de la randonnée ou de la nature.
Il s’agit d’un choix volontaire : réutiliser les couleurs de mon identité Jordan Boutin Product Designer pour créer une filiation visuelle entre le projet et mon travail, tout en donnant à cette V1 une identité cohérente et immédiatement reconnaissable.
Une typographie cohérente avec mon univers
Le système typographique suit la même logique. Il reprend les codes graphiques de mon identité personnelle afin de créer une continuité entre Cairn, mon portfolio et ma pratique du Product Design.
La hiérarchie typographique reste néanmoins pensée pour un usage produit, avec une attention particulière portée à la lisibilité, à la clarté de l’information et à l’utilisation sur mobile.
Une identité amenée à évoluer
Dans une V2, l’objectif sera d’approfondir la recherche colorimétrique et l’univers visuel afin de construire une identité davantage liée aux notions de randonnée, de nature, d’altitude et d’exploration, tout en conservant la simplicité et la lisibilité nécessaires au produit.
Cairn pourra ainsi progressivement gagner en autonomie en tant que marque, sans perdre la logique fonctionnelle définie dans cette première version.
Product Design
Une fois le besoin défini, j’ai structuré Cairn comme un véritable produit. J’ai identifié les informations dont j’aurais réellement besoin pendant mon GR34 puis organisé l’expérience autour des différents moments du voyage : préparation, consultation d’une journée, progression et souvenirs.
Cette approche m’a permis de passer d’une simple idée à une architecture produit complète avant même de travailler le détail graphique des écrans.
Une expérience centrée sur le séjour
Plutôt qu’une application de randonnée généraliste, Cairn est pensé autour d’une aventure précise.
Chaque séjour regroupe ses étapes, ses informations pratiques et sa progression afin de créer une forme de carnet de bord numérique directement liée au voyage.
L’essentiel accessible rapidement
Sur le terrain, la priorité n’est pas d’explorer une interface complexe. Les informations importantes doivent pouvoir être comprises et retrouvées en quelques secondes.
La hiérarchie, les composants et la navigation ont donc été pensés pour une consultation rapide sur mobile, notamment pendant une journée de marche ou de course.
Un produit volontairement simple
L’un des enjeux principaux a été de ne pas transformer Cairn en une application outdoor surchargée.
Chaque fonctionnalité devait répondre à un usage réel identifié pendant la préparation du voyage. Cette contrainte m’a permis de travailler la priorisation produit et de privilégier une expérience claire plutôt qu’une accumulation de fonctionnalités.
Une approche mobile-first
Cairn est avant tout destiné à être utilisé depuis un smartphone. L’interface a donc été conçue mobile-first, avec des zones d’interaction accessibles, une hiérarchie lisible et des contenus faciles à consulter rapidement.
Le design cherche à limiter la charge cognitive tout en laissant une place importante à l’émotion et au récit de l’aventure.
Design system & composants
J’ai construit une bibliothèque de composants dans Figma afin de structurer les éléments récurrents de l’application : navigation, boutons, cards, états, informations d’étape et éléments de progression.
Cette approche permet de conserver une cohérence visuelle sur l’ensemble du produit et de faciliter les itérations au fur et à mesure de son évolution.
Prototyper avant de développer
Le prototype Figma m’a permis de valider les principaux parcours et d’identifier rapidement les écrans réellement nécessaires.
Cette étape a également servi de base à la suite du projet : transformer progressivement le prototype en application réellement utilisable.
Product Design
Une fois le besoin défini, j’ai structuré Cairn comme un véritable produit. J’ai identifié les informations dont j’aurais réellement besoin pendant mon GR34 puis organisé l’expérience autour des différents moments du voyage : préparation, consultation d’une journée, progression et souvenirs.
Cette approche m’a permis de passer d’une simple idée à une architecture produit complète avant même de travailler le détail graphique des écrans.
Une expérience centrée sur le séjour
Plutôt qu’une application de randonnée généraliste, Cairn est pensé autour d’une aventure précise.
Chaque séjour regroupe ses étapes, ses informations pratiques et sa progression afin de créer une forme de carnet de bord numérique directement liée au voyage.
L’essentiel accessible rapidement
Sur le terrain, la priorité n’est pas d’explorer une interface complexe. Les informations importantes doivent pouvoir être comprises et retrouvées en quelques secondes.
La hiérarchie, les composants et la navigation ont donc été pensés pour une consultation rapide sur mobile, notamment pendant une journée de marche ou de course.
Un produit volontairement simple
L’un des enjeux principaux a été de ne pas transformer Cairn en une application outdoor surchargée.
Chaque fonctionnalité devait répondre à un usage réel identifié pendant la préparation du voyage. Cette contrainte m’a permis de travailler la priorisation produit et de privilégier une expérience claire plutôt qu’une accumulation de fonctionnalités.
Une approche mobile-first
Cairn est avant tout destiné à être utilisé depuis un smartphone. L’interface a donc été conçue mobile-first, avec des zones d’interaction accessibles, une hiérarchie lisible et des contenus faciles à consulter rapidement.
Le design cherche à limiter la charge cognitive tout en laissant une place importante à l’émotion et au récit de l’aventure.
Design system & composants
J’ai construit une bibliothèque de composants dans Figma afin de structurer les éléments récurrents de l’application : navigation, boutons, cards, états, informations d’étape et éléments de progression.
Cette approche permet de conserver une cohérence visuelle sur l’ensemble du produit et de faciliter les itérations au fur et à mesure de son évolution.
Prototyper avant de développer
Le prototype Figma m’a permis de valider les principaux parcours et d’identifier rapidement les écrans réellement nécessaires.
Cette étape a également servi de base à la suite du projet : transformer progressivement le prototype en application réellement utilisable.
Du design au produit fonctionnel
Je voulais profiter de Cairn pour aller au-delà du prototype Figma et mieux comprendre ce qui se passe après le handoff entre design et développement.
J’ai donc utilisé Claude comme partenaire de développement pour transformer progressivement mes maquettes en une Progressive Web App, versionner le projet sur GitHub puis le déployer sur Vercel.
Développement assisté par IA
L’objectif n’était pas simplement de demander à une IA de générer une application. J’ai travaillé par itérations : décrire une fonctionnalité, observer son implémentation, tester le résultat, identifier les écarts avec mes maquettes puis ajuster le design ou l’intégration.
Cette manière de travailler m’a permis de mieux comprendre les contraintes techniques derrière mes choix de design et de rapprocher davantage réflexion produit et faisabilité.
Figma, Claude, GitHub & Vercel
Figma reste la source principale pour la conception de l’expérience et de l’interface. Claude m’accompagne ensuite dans l’implémentation, GitHub permet de versionner le projet et Vercel de déployer rapidement chaque nouvelle version.
Ce workflow crée une boucle très courte entre design, développement et test : une modification peut être imaginée, intégrée puis testée directement sur mon téléphone.
Une Progressive Web App
Cairn a progressivement dépassé le stade du prototype pour devenir une Progressive Web App réellement utilisable.
L’application peut être ouverte depuis une URL, ajoutée à l’écran d’accueil d’un smartphone et utilisée comme une application mobile sans avoir besoin de passer par un App Store.
Designer, tester, itérer
Cairn est aussi une manière d’explorer une nouvelle façon de travailler comme Product Designer.
Les outils d’IA permettent aujourd’hui de réduire considérablement la distance entre une idée, une maquette et une première version fonctionnelle. Plutôt que de terminer le projet avec un prototype Figma, je peux désormais confronter mes décisions à un produit réel et itérer directement dessus.
Un laboratoire personnel
Cairn reste avant tout un projet plaisir. Cette liberté me permet d’expérimenter de nouvelles interactions, de nouvelles méthodes de travail et une collaboration beaucoup plus directe entre design et développement.
Le projet devient ainsi un laboratoire personnel pour approfondir ma pratique du Product Design et mieux comprendre l’ensemble du cycle de création d’un produit numérique.
Du concept au terrain
La prochaine étape est aussi la raison pour laquelle Cairn existe : l’utiliser réellement pendant mon parcours sur le GR34.
Le produit pourra ainsi être confronté à son contexte d’usage initial pendant plusieurs jours de randonnée et de course à pied. Cette utilisation réelle permettra d’identifier les points de friction, les besoins manquants et les fonctionnalités réellement utiles une fois sur le terrain.
Du design au produit fonctionnel
Je voulais profiter de Cairn pour aller au-delà du prototype Figma et mieux comprendre ce qui se passe après le handoff entre design et développement.
J’ai donc utilisé Claude comme partenaire de développement pour transformer progressivement mes maquettes en une Progressive Web App, versionner le projet sur GitHub puis le déployer sur Vercel.
Développement assisté par IA
L’objectif n’était pas simplement de demander à une IA de générer une application. J’ai travaillé par itérations : décrire une fonctionnalité, observer son implémentation, tester le résultat, identifier les écarts avec mes maquettes puis ajuster le design ou l’intégration.
Cette manière de travailler m’a permis de mieux comprendre les contraintes techniques derrière mes choix de design et de rapprocher davantage réflexion produit et faisabilité.
Figma, Claude, GitHub & Vercel
Figma reste la source principale pour la conception de l’expérience et de l’interface. Claude m’accompagne ensuite dans l’implémentation, GitHub permet de versionner le projet et Vercel de déployer rapidement chaque nouvelle version.
Ce workflow crée une boucle très courte entre design, développement et test : une modification peut être imaginée, intégrée puis testée directement sur mon téléphone.
Une Progressive Web App
Cairn a progressivement dépassé le stade du prototype pour devenir une Progressive Web App réellement utilisable.
L’application peut être ouverte depuis une URL, ajoutée à l’écran d’accueil d’un smartphone et utilisée comme une application mobile sans avoir besoin de passer par un App Store.
Designer, tester, itérer
Cairn est aussi une manière d’explorer une nouvelle façon de travailler comme Product Designer.
Les outils d’IA permettent aujourd’hui de réduire considérablement la distance entre une idée, une maquette et une première version fonctionnelle. Plutôt que de terminer le projet avec un prototype Figma, je peux désormais confronter mes décisions à un produit réel et itérer directement dessus.
Un laboratoire personnel
Cairn reste avant tout un projet plaisir. Cette liberté me permet d’expérimenter de nouvelles interactions, de nouvelles méthodes de travail et une collaboration beaucoup plus directe entre design et développement.
Le projet devient ainsi un laboratoire personnel pour approfondir ma pratique du Product Design et mieux comprendre l’ensemble du cycle de création d’un produit numérique.
Du concept au terrain
La prochaine étape est aussi la raison pour laquelle Cairn existe : l’utiliser réellement pendant mon parcours sur le GR34.
Le produit pourra ainsi être confronté à son contexte d’usage initial pendant plusieurs jours de randonnée et de course à pied. Cette utilisation réelle permettra d’identifier les points de friction, les besoins manquants et les fonctionnalités réellement utiles une fois sur le terrain.
À vos marques, prêts à démarrer ?
Plus de 30 entreprises m’ont déjà fait confiance
À vos marques, prêts à démarrer ?
Plus de 30 entreprises m’ont déjà fait confiance
À vos marques, prêts à démarrer ?
Plus de 30 entreprises m’ont déjà fait confiance
À vos marques, prêts à démarrer ?
Plus de 30 entreprises m’ont déjà fait confiance
MENU
MENU
MENU
MENU
MENU
MENU
MENU
MENU