Celio — App Mobile

Celio est une marque française de prêt-à-porter fondée en 1985, leader masculin avec plus de 1 100 magasins dans 50+ pays. En décembre 2022, Celio rachète Camaïeu et intègre une ligne Femme, même marque, même app, deux univers distincts. C'est cette tension produit qui rend le projet intéressant : une seule identité Celio, deux gammes, deux cibles, deux tons visuels.

Celio is a French ready-to-wear brand founded in 1985, the men's market leader with more than 1,100 stores in 50+ countries. In December 2022, Celio acquired Camaïeu and integrated a Women's line, same brand, same app, two distinct universes. That product tension is what makes the project interesting: one Celio identity, two ranges, two targets, two visual tones.

Celio es una marca francesa de moda fundada en 1985, líder masculino con más de 1.100 tiendas en más de 50 países. En diciembre de 2022, Celio adquiere Camaïeu e integra una línea Mujer, misma marca, misma app, dos universos distintos. Esa tensión de producto es lo que hace el proyecto interesante: una identidad Celio, dos gamas, dos públicos, dos tonos visuales.

L'objectif de cette étude de cas est double. D'abord, démontrer une approche Product Builder de bout en bout sur un cas retail mobile crédible : recherche utilisateur, vision produit, design system, prototype. Ensuite, montrer comment Claude Design peut orchestrer un projet UX/UI complet en restant rigoureux sur la charte, l'accessibilité et la cohérence de l'ensemble.

This case study has two goals. First, demonstrate an end-to-end Product Builder approach on a credible mobile retail case: user research, product vision, design system, prototype. Second, show how Claude Design can orchestrate a full UX/UI project while staying rigorous on brand, accessibility and overall consistency.

Este caso de estudio tiene un doble objetivo. Primero, demostrar un enfoque Product Builder de principio a fin sobre un caso retail móvil creíble: research, visión de producto, design system, prototipo. Segundo, mostrar cómo Claude Design puede orquestar un proyecto UX/UI completo manteniendo el rigor en la identidad, la accesibilidad y la coherencia del conjunto.

Tous les artefacts présentés ici, personas, brief, charte, wireframes, design system, maquettes, prototype React Native, ont été conçus dans le même fil de travail avec Claude Design, en posant des arbitrages produit explicites à chaque étape.

Every artefact presented here, personas, brief, brand guidelines, wireframes, design system, mockups, React Native prototype, was built in the same Claude Design workflow, making explicit product trade-offs at every step.

Todos los artefactos presentados aquí, personas, brief, identidad gráfica, wireframes, design system, maquetas, prototipo React Native, se crearon en el mismo flujo de trabajo con Claude Design, tomando decisiones de producto explícitas en cada etapa.

Sur ce projet, j'ai endossé l'ensemble du rôle Product Builder, celui d'un profil qui mêle vision produit, UX/UI, recherche utilisateur et capacité à livrer un prototype interactif. Claude Design a servi d'outil de pilotage et d'accélérateur : aucune décision n'a été déléguée à l'IA, chaque arbitrage produit est mien, mais l'exécution a été menée en tandem.

On this project I took on the full Product Builder role, the profile that blends product vision, UX/UI, user research and the ability to ship an interactive prototype. Claude Design served as the orchestration tool and accelerator: no decision was delegated to the AI, every product trade-off is mine, but execution was done in tandem.

En este proyecto asumí todo el rol Product Builder, el perfil que combina visión de producto, UX/UI, investigación de usuarios y capacidad de entregar un prototipo interactivo. Claude Design sirvió como herramienta de orquestación y acelerador: ninguna decisión fue delegada a la IA, cada arbitraje de producto es mío, pero la ejecución se realizó en tándem.

Le projet a été mené dans un fil de travail continu avec Claude Design. Chaque étape s'appuie sur la précédente : pas de retour en arrière, pas de duplication, pas d'oubli, l'outil tient à jour le contexte projet et garantit la cohérence des arbitrages d'une étape à l'autre.

The project was carried out in a continuous workflow with Claude Design. Each stage builds on the previous: no rewinds, no duplication, no loose ends, the tool keeps the project context up to date and ensures arbitration consistency across stages.

El proyecto se llevó a cabo en un flujo de trabajo continuo con Claude Design. Cada etapa se apoya en la anterior: sin retrocesos, sin duplicación, sin olvidos, la herramienta mantiene actualizado el contexto del proyecto y garantiza la coherencia de los arbitrajes entre etapas.

Le rôle de l'humain reste central : poser la vision, formuler des prompts produit précis, critiquer les sorties, valider ou rejeter, demander des itérations. Claude Design accélère l'exécution mais ne décide rien.

The human role stays central: setting the vision, writing precise product prompts, critiquing outputs, validating or rejecting, asking for iterations. Claude Design accelerates execution but decides nothing.

El papel humano sigue siendo central: fijar la visión, formular prompts de producto precisos, criticar las salidas, validar o rechazar, pedir iteraciones. Claude Design acelera la ejecución pero no decide nada.

Quatre personas, pas six ou huit. Un binôme par univers couvre les deux générations clés : l'urbain pressé et le fidèle historique côté Homme, la cible Camaïeu en transition et la cible mode-éditoriale côté Femme. Chacun a été conçu avec Claude Design à partir d'observations terrain crédibles, de citations et d'un profil comportemental opinioné, pas une fiche RH.

Four personas, not six or eight. A pair per universe covers the two key generations: the busy urban guy and the long-term loyal customer on the Men side, the Camaïeu shopper in transition and the editorial-fashion target on the Women side. Each was built with Claude Design from credible field observations, quotes and an opinionated behavioural profile, not an HR datasheet.

Cuatro personas, no seis ni ocho. Una pareja por universo cubre las dos generaciones clave: el urbano apresurado y el cliente fiel histórico del lado Hombre, la clienta Camaïeu en transición y el target moda-editorial del lado Mujer. Cada uno se construyó con Claude Design a partir de observaciones de campo creíbles, citas y un perfil de comportamiento opinado, no una ficha de RR.HH.

Léa est désignée persona prioritaire. Elle utilise toutes les fonctionnalités structurantes (switcher H/F, Style AI, panier mixte H+F, be+, Click & Collect), elle représente la nouvelle cible Femme à rassurer dans la transition Camaïeu → Celio, et son comportement multi-tâche stresse les flows et révèle vite les frictions. Si Léa réussit, les autres réussissent.

Léa is designated the priority persona. She uses every structuring feature (M/W switcher, Style AI, M+W mixed cart, be+, Click & Collect), embodies the new Women target to reassure in the Camaïeu → Celio transition, and her multi-task behaviour stresses flows and surfaces frictions fast. If Léa succeeds, the others succeed.

Léa se designa persona prioritaria. Utiliza todas las funcionalidades estructurantes (conmutador H/M, Style AI, cesta mixta H+M, be+, Click & Collect), encarna el nuevo público Mujer al que tranquilizar en la transición Camaïeu → Celio, y su comportamiento multitarea estresa los flujos y revela rápidamente las fricciones. Si Léa lo logra, los demás también.

Avant de poser le moindre pixel, j'ai écrit la philosophie design en 8 principes. Ils servent à arbitrer chaque décision, du choix d'un radius à la rédaction d'un microcopy. Ce sont eux qui font qu'une app fashion ne ressemble pas à un template Shopify.

Before placing a single pixel, I wrote the design philosophy as 8 principles. They arbitrate every decision, from picking a radius to writing a piece of microcopy. They're what makes a fashion app not look like a Shopify template.

Antes de colocar un solo pixel, escribí la filosofía de diseño en 8 principios. Sirven para arbitrar cada decisión, desde elegir un radius hasta redactar un microcopy. Son los que hacen que una app de moda no parezca una plantilla Shopify.

L'architecture d'information a été dessinée avant les écrans : 5 onglets en tab bar (Accueil · Catalogue · Style · Compte · Panier), et le switcher Homme/Femme placé dans le header comme commutateur de contexte persistant, jamais comme un onglet. Profondeur de navigation maximum : 3 niveaux avant la fiche produit ou l'action transactionnelle.

The information architecture was drawn before the screens: 5 tab-bar tabs (Home · Catalogue · Style · Account · Cart), and the Men/Women switcher placed in the header as a persistent context switcher, never as a tab. Max navigation depth: 3 levels before product page or transactional action.

La arquitectura de información se dibujó antes que las pantallas: 5 pestañas en tab bar (Inicio · Catálogo · Style · Cuenta · Cesta), y el conmutador Hombre/Mujer en el header como switch de contexto persistente, nunca como pestaña. Profundidad máxima: 3 niveles antes de la ficha de producto o acción transaccional.

Les wireframes basse définition ont servi à valider les flows critiques avant de passer aux maquettes : recherche & filtrage du catalogue, panier mixte H+F, tunnel checkout 3 étapes, retrait Click & Collect, hub Style AI. Pas de polish à ce stade, uniquement la structure et les interactions.

Low-fidelity wireframes validated critical flows before moving to high-fi mockups: catalogue search & filtering, mixed M+W cart, 3-step checkout funnel, Click & Collect pickup, Style AI hub. No polish at this stage, only structure and interactions.

Los wireframes de baja fidelidad sirvieron para validar los flujos críticos antes de pasar a las maquetas: búsqueda y filtrado del catálogo, cesta mixta H+M, túnel checkout de 3 pasos, recogida Click & Collect, hub Style AI. Sin pulido en esta etapa, solo estructura e interacciones.

Le switcher H/F est indolore, mémorisé entre sessions, et préserve les filtres compatibles au changement d'univers. Un toast informatif explique ce qui change. C'est ce comportement qui transforme une « app double genre » en une vraie expérience unifiée.

The M/W switcher is painless, session-persistent, and preserves compatible filters on universe change. An informative toast explains what changes. This behaviour is what turns a "dual-gender app" into a truly unified experience.

El conmutador H/M es indoloro, persistente entre sesiones, y preserva los filtros compatibles al cambiar de universo. Un toast informativo explica qué cambia. Ese comportamiento es lo que convierte una "app doble género" en una experiencia realmente unificada.

Le design system est documenté dans un mini-site interactif consultable en parallèle des maquettes. Pas un PDF figé, pas une page Notion qu'on oublie de mettre à jour : un site React qui vit avec le code de l'application.

The design system is documented in an interactive mini-site browsable alongside the mockups. Not a frozen PDF, not a Notion page that no one updates: a React site that lives with the application code.

El design system está documentado en un mini-sitio interactivo consultable junto a las maquetas. No es un PDF congelado, no es una página de Notion que nadie actualiza: un sitio React que vive con el código de la aplicación.

Il couvre les fondations (couleurs, typographie, iconographie, espacements, motion) et les composants (boutons, inputs, formulaires, cards, navigation, bottom sheets, badges, chips, toasts). Chaque composant a ses variantes, ses tokens, son comportement aux états, et ses notes d'accessibilité.

It covers foundations (colours, typography, iconography, spacing, motion) and components (buttons, inputs, forms, cards, navigation, bottom sheets, badges, chips, toasts). Each component has its variants, tokens, state behaviours and accessibility notes.

Cubre los fundamentos (colores, tipografía, iconografía, espaciados, motion) y los componentes (botones, inputs, formularios, cards, navegación, bottom sheets, badges, chips, toasts). Cada componente tiene sus variantes, tokens, comportamientos de estado y notas de accesibilidad.

Les maquettes ont été produites au pixel près, en respectant strictement la charte. Photo lifestyle plein cadre partout où c'est possible, micro-interactions définies, états vides traités avec personnalité, états d'erreur stylés. Les écrans s'inscrivent dans la lignée éditoriale des apps Zara, Uniqlo et Sézane, sans les copier.

Mockups were produced pixel-perfect, strictly following the brand. Full-frame lifestyle photography wherever possible, defined micro-interactions, empty states handled with personality, styled error states. The screens sit in the editorial lineage of Zara, Uniqlo and Sézane apps, without copying them.

Las maquetas se produjeron al pixel, respetando estrictamente la identidad. Fotografía lifestyle a sangre completa donde es posible, micro-interacciones definidas, estados vacíos tratados con personalidad, estados de error estilizados. Las pantallas se inscriben en la línea editorial de las apps Zara, Uniqlo y Sézane, sin copiarlas.

Soyons clairs sur ce que c'est et ce que ce n'est pas. Le prototype n'est pas une vraie application e-commerce de production, on n'y achète aucun produit, le paiement n'est pas branché, le stock magasin n'est pas en temps réel, le compte client est fictif. C'est en revanche bien plus qu'un prototype Figma cliquable : tous les écrans sont codés en React Native, la navigation entre les 5 onglets est fluide, le switcher Homme et Femme bascule réellement le contenu, le panier accepte des articles, le checkout déroule ses 3 étapes, le hub Style AI joue son animation de génération, la carte des magasins s'ouvre.

Let's be clear about what this is and isn't. The prototype is not a production e-commerce app, you can't actually buy anything, payment isn't wired, store stock isn't real-time, the account is fictional. What it is, however, is much more than a clickable Figma prototype: every screen is coded in React Native, navigation between the 5 tabs is fluid, the Men and Women switcher really swaps content, the cart accepts items, the checkout runs through its 3 steps, the Style AI hub plays its generation animation, the store map opens.

Seamos claros sobre lo que es y lo que no. El prototipo no es una app de e-commerce de producción, no se puede comprar nada, el pago no está conectado, el stock de tienda no es en tiempo real, la cuenta es ficticia. Sí es, sin embargo, mucho más que un prototipo Figma clicable : todas las pantallas están codificadas en React Native, la navegación entre las 5 pestañas es fluida, el conmutador Hombre y Mujer cambia realmente el contenido, la cesta acepta artículos, el checkout recorre sus 3 etapas, el hub Style AI reproduce su animación de generación, el mapa de tiendas se abre.

L'intention est de fermer le trou entre une maquette statique et une vraie app : suffisamment fonctionnel pour être manipulé par un utilisateur en condition réelle de test, suffisamment honnête pour ne pas prétendre être un produit fini. C'est un support d'évaluation et de démo, pas un MVP commercialisable.

The intent is to close the gap between a static mockup and a real app: functional enough to be manipulated by a user in real test conditions, honest enough not to pretend it's a finished product. It's an evaluation and demo support, not a shippable MVP.

La intención es cerrar el hueco entre una maqueta estática y una app real : lo suficientemente funcional para ser manipulado por un usuario en condiciones reales de prueba, lo suficientemente honesto para no pretender ser un producto terminado. Es un soporte de evaluación y demo, no un MVP comercializable.

De la recherche utilisateur au prototype interactif, chaque écran répond à une décision produit assumée : unifier deux univers, fluidifier le parcours d'achat, et donner à la marque une voix cohérente sur mobile. La meilleure façon de juger le résultat, c'est de le manipuler.

From user research to the interactive prototype, every screen answers a deliberate product decision: unify two universes, smooth the buying journey, and give the brand a coherent voice on mobile. The best way to judge the result is to play with it.

Del research al prototipo interactivo, cada pantalla responde a una decisión de producto asumida: unificar dos universos, fluidificar el recorrido de compra y dar a la marca una voz coherente en móvil. La mejor forma de juzgar el resultado es manipularlo.