Accueil

Projets

Parcours

Accueil

Projets

Parcours

Accueil

Projets

Parcours

Accueil

Projets

Parcours

Design System Gaïa

Design System Gaïa

Design System Gaïa

Design System Gaïa

En 2020, Winamax a conçu ses premiers UI Kits dans Figma.

Cette étape a marqué le début d’une réflexion plus globale : il était temps pour la marque et ses utilisateurs de bénéficier d’un design system complet, structuré et évolutif.

En 2020, Winamax a conçu ses premiers UI Kits dans Figma.

Cette étape a marqué le début d’une réflexion plus globale : il était temps pour la marque et ses utilisateurs de bénéficier d’un design system complet, structuré et évolutif.

En 2020, Winamax a conçu ses premiers UI Kits dans Figma.

Cette étape a marqué le début d’une réflexion plus globale : il était temps pour la marque et ses utilisateurs de bénéficier d’un design system complet, structuré et évolutif.

En 2020, Winamax a conçu ses premiers UI Kits dans Figma.

Cette étape a marqué le début d’une réflexion plus globale : il était temps pour la marque et ses utilisateurs de bénéficier d’un design system complet, structuré et évolutif.

Mots clés

Mots clés

Mots clés

Mots clés

Ux design

Ux design

Ux design

Ui design

Ui design

Ui design

Design System

Design System

Design System

Atomic design

Atomic design

Atomic design

Design tokens

Design tokens

Design tokens

Master components

Master components

Master components

Ambience design

Ambience design

Ambience design

Guerilla testing

Guerilla testing

Guerilla testing

Prototype

Prototype

Prototype

Convention CTI

Convention CTI

Convention CTI

Client

Client

Client

Client

Logiciels

Logiciels

Logiciels

Logiciels

Gaïa en quelques chiffres

Gaïa
en quelques chiffres

Gaïa en quelques chiffres

Gaïa
en quelques chiffres

G

G

G

G

G

A

A

A

A

A

Ï

Ï

Ï

Ï

Ï

A

A

A

A

A

95%

95%

95%

95%

de joueurs mobile

de joueurs mobile

de joueurs mobile

de joueurs mobile

+30

+30

+30

+30

sports

sports

sports

sports

+190

+190

+190

+190

pays

pays

pays

pays

+4

+4

+4

+4

langues

langues

langues

langues

+30

+30

+30

+30

collaborateurs

collaborateurs

collaborateurs

collaborateurs

+400

+400

+400

+400

atomes

atomes

atomes

atomes

+200

+200

+200

+200

molécules

molécules

molécules

molécules

+60

+60

+60

+60

master componenents

master componenents

master componenents

master componenents

Mon rôle

Mon rôle

Mon rôle

Mon rôle

J’ai piloté l’évolution du design system tout en faisant le pont entre design, produit, tech, afin de renforcer la cohérence, l’efficacité et l’adoption à l’échelle de l’organisation.





Nous avons mené un travail de synthèse et de rationalisation des composants, visant à réduire leur nombre et à simplifier leur utilisation. La mise en place de variables nous a permis de repenser notre approche, d’améliorer nos méthodologies de conception et de fluidifier la collaboration entre équipes.

J’ai piloté l’évolution du design system tout en faisant le pont entre design, produit, tech, afin de renforcer la cohérence, l’efficacité et l’adoption à l’échelle de l’organisation.





Nous avons mené un travail de synthèse et de rationalisation des composants, visant à réduire leur nombre et à simplifier leur utilisation. La mise en place de variables nous a permis de repenser notre approche, d’améliorer nos méthodologies de conception et de fluidifier la collaboration entre équipes.

J’ai piloté l’évolution du design system tout en faisant le pont entre design, produit, tech, afin de renforcer la cohérence, l’efficacité et l’adoption à l’échelle de l’organisation.





Nous avons mené un travail de synthèse et de rationalisation des composants, visant à réduire leur nombre et à simplifier leur utilisation. La mise en place de variables nous a permis de repenser notre approche, d’améliorer nos méthodologies de conception et de fluidifier la collaboration entre équipes.

J’ai piloté l’évolution du design system tout en faisant le pont entre design, produit, tech, afin de renforcer la cohérence, l’efficacité et l’adoption à l’échelle de l’organisation.





Nous avons mené un travail de synthèse et de rationalisation des composants, visant à réduire leur nombre et à simplifier leur utilisation. La mise en place de variables nous a permis de repenser notre approche, d’améliorer nos méthodologies de conception et de fluidifier la collaboration entre équipes.

Cette évolution s’inscrivait également dans une démarche d’amélioration continue du produit et répondait aux retours utilisateurs, aux besoins de communication et à l’évolution de l’application Winamax vers une super app.

Cette évolution s’inscrivait également dans une démarche d’amélioration continue du produit et répondait aux retours utilisateurs, aux besoins de communication et à l’évolution de l’application Winamax vers une super app.

Cette évolution s’inscrivait également dans une démarche d’amélioration continue du produit et répondait aux retours utilisateurs, aux besoins de communication et à l’évolution de l’application Winamax vers une super app.

Cette évolution s’inscrivait également dans une démarche d’amélioration continue du produit et répondait aux retours utilisateurs, aux besoins de communication et à l’évolution de l’application Winamax vers une super app.

Contexte

Contexte

Contexte

Contexte

Le design de l'application présentait des incohérences structurelles : composants dupliqués, logiques de variation hétérogènes, comportements non documentés. Sans cadre clair, la cohérence globale se dégradait progressivement.

Le design de l'application présentait des incohérences structurelles : composants dupliqués, logiques de variation hétérogènes, comportements non documentés. Sans cadre clair, la cohérence globale se dégradait progressivement.

Le design de l'application présentait des incohérences structurelles : composants dupliqués, logiques de variation hétérogènes, comportements non documentés. Sans cadre clair, la cohérence globale se dégradait progressivement.

Côté produit, le design de 2020 atteignait un plafond : difficile à étendre, peu adapté aux nouvelles features (lineups par exemple) et incapable d’absorber la croissance fonctionnelle de l’app.

Côté produit, le design de 2020 atteignait un plafond : difficile à étendre, peu adapté aux nouvelles features (lineups par exemple) et incapable d’absorber la croissance fonctionnelle de l’app.

Côté produit, le design de 2020 atteignait un plafond : difficile à étendre, peu adapté aux nouvelles features (lineups par exemple) et incapable d’absorber la croissance fonctionnelle de l’app.

Précédent design

Précédent design

Précédent design

Précédent design

Retours utilisateurs sur le précédent design

Retours utilisateurs
sur le précédent design

Retours utilisateurs sur le précédent design

Retours utilisateurs
sur le précédent design

Jérôme

"Je regarde l’heure ou le score en premier, après l’équipe/joueur, après la compétition."

Nabil

"Avoir les chaînes est top, ça m’évite de chercher ailleurs"

Clément

"Il m’est arrivé de parier sur des compétitions par erreur, comme tous les bets se ressemblent, je n’avais pas fait gaf. Je m’en suis aperçu dans l’histo."

Mehdi

"pas toujours évidant de voir les compétitions."

Jérôme

"Je regarde l’heure ou le score en premier, après l’équipe/joueur, après la compétition."

Nabil

"Avoir les chaînes est top, ça m’évite de chercher ailleurs"

Clément

"Il m’est arrivé de parier sur des compétitions par erreur, comme tous les bets se ressemblent, je n’avais pas fait gaf. Je m’en suis aperçu dans l’histo."

Mehdi

"pas toujours évidant de voir les compétitions."

Jérôme

"Je regarde l’heure ou le score en premier, après l’équipe/joueur, après la compétition."

Nabil

"Avoir les chaînes est top, ça m’évite de chercher ailleurs"

Clément

"Il m’est arrivé de parier sur des compétitions par erreur, comme tous les bets se ressemblent, je n’avais pas fait gaf. Je m’en suis aperçu dans l’histo."

Mehdi

"pas toujours évidant de voir les compétitions."

Atomic design

Atomic design

Atomic design

Atomic design

La nouvelle
carte match

La nouvelle
carte match

La nouvelle
carte match

La nouvelle
carte match

Nous avons conçu deux versions de la carte match et réalisé des tests guérilla afin d’évaluer leur niveau d’acceptabilité auprès des utilisateurs. Ces tests rapides ont permis de valider nos hypothèses sur la perception visuelle et la hiérarchie de l’information, tout en renforçant l’adhésion des équipes internes.

Nous avons conçu deux versions de la carte match et réalisé des tests guérilla afin d’évaluer leur niveau d’acceptabilité auprès des utilisateurs. Ces tests rapides ont permis de valider nos hypothèses sur la perception visuelle et la hiérarchie de l’information, tout en renforçant l’adhésion des équipes internes.

Nous avons conçu deux versions de la carte match et réalisé des tests guérilla afin d’évaluer leur niveau d’acceptabilité auprès des utilisateurs. Ces tests rapides ont permis de valider nos hypothèses sur la perception visuelle et la hiérarchie de l’information, tout en renforçant l’adhésion des équipes internes.

Nous avons conçu deux versions de la carte match et réalisé des tests guérilla afin d’évaluer leur niveau d’acceptabilité auprès des utilisateurs. Ces tests rapides ont permis de valider nos hypothèses sur la perception visuelle et la hiérarchie de l’information, tout en renforçant l’adhésion des équipes internes.

Ces éléments contribuent également à définir le design global de l'application, en posant les bases d’une identité visuelle cohérente et évolutive.

Ces éléments contribuent également à définir le design global de l'application, en posant les bases d’une identité visuelle cohérente et évolutive.

Ces éléments contribuent également à définir le design global de l'application, en posant les bases d’une identité visuelle cohérente et évolutive.

Ces éléments contribuent également à définir le design global de l'application, en posant les bases d’une identité visuelle cohérente et évolutive.

Version A

Winamax est la seule plateforme à disposer de ses propres maillots d’équipes.

Nous avons donc conçu une nouvelle carte permettant de les mettre en valeur, afin d’offrir une expérience plus immersive et de différencier l’app visuellement.

L’intégration de l'outcome (Team A / Nul / Team B) dans les CTA améliore la lisibilité des actions et aide les nouveaux joueurs à mieux comprendre leurs choix.

Winamax est la seule plateforme à disposer de ses propres maillots d’équipes.

Nous avons donc conçu une nouvelle carte permettant de les mettre en valeur, afin d’offrir une expérience plus immersive et de différencier l’app visuellement.

L’intégration de l'outcome (Team A / Nul / Team B) dans les CTA améliore la lisibilité des actions et aide les nouveaux joueurs à mieux comprendre leurs choix.

Winamax est la seule plateforme à disposer de ses propres maillots d’équipes.

Nous avons donc conçu une nouvelle carte permettant de les mettre en valeur, afin d’offrir une expérience plus immersive et de différencier l’app visuellement.

L’intégration de l'outcome (Team A / Nul / Team B) dans les CTA améliore la lisibilité des actions et aide les nouveaux joueurs à mieux comprendre leurs choix.

Winamax est la seule plateforme à disposer de ses propres maillots d’équipes.

Nous avons donc conçu une nouvelle carte permettant de les mettre en valeur, afin d’offrir une expérience plus immersive et de différencier l’app visuellement.

L’intégration de l'outcome (Team A / Nul / Team B) dans les CTA améliore la lisibilité des actions et aide les nouveaux joueurs à mieux comprendre leurs choix.

Version B

Nous avons exploré une variante mettant l’accent sur la cote principale, plus adaptée aux joueurs confirmés. Cette structure rend la carte plus épurée et équilibrée, mais les tests utilisateurs ont révélé plusieurs points de friction, notamment sur la compréhension pour les nouveaux joueurs et sur certains types de sports.

Le header, plus identitaire, apporte des contraintes techniques et d’accessibilité.

Nous avons exploré une variante mettant l’accent sur la cote principale, plus adaptée aux joueurs confirmés. Cette structure rend la carte plus épurée et équilibrée, mais les tests utilisateurs ont révélé plusieurs points de friction, notamment sur la compréhension pour les nouveaux joueurs et sur certains types de sports.

Le header, plus identitaire, apporte des contraintes techniques et d’accessibilité.

Nous avons exploré une variante mettant l’accent sur la cote principale, plus adaptée aux joueurs confirmés. Cette structure rend la carte plus épurée et équilibrée, mais les tests utilisateurs ont révélé plusieurs points de friction, notamment sur la compréhension pour les nouveaux joueurs et sur certains types de sports.

Le header, plus identitaire, apporte des contraintes techniques et d’accessibilité.

Nous avons exploré une variante mettant l’accent sur la cote principale, plus adaptée aux joueurs confirmés. Cette structure rend la carte plus épurée et équilibrée, mais les tests utilisateurs ont révélé plusieurs points de friction, notamment sur la compréhension pour les nouveaux joueurs et sur certains types de sports.

Le header, plus identitaire, apporte des contraintes techniques et d’accessibilité.

Les composants de la carte match

Les composants
de la carte match

Les composants de la carte match

Les composants
de la carte match

Primary button - component set

Primary button
component set

Primary button - component set

Primary button
component set

Scoreboard - component set

Scoreboard
component set

Scoreboard - component set

Scoreboard
component set

Carte Match - Master component

Carte Match
Master component

Carte Match - Master component

Carte Match
Master component

Contextualisation produit

Contextualisation produit

Contextualisation produit

Contextualisation produit

Le design
d’ambiance

Le design
d’ambiance

Le design
d’ambiance

Le design
d’ambiance

Nous avons conçu des ambiances de couleurs liées aux compétitions, afin de faire vivre l’application au rythme des événements et offrir aux joueurs la sensation d’une expérience toujours dynamique et vivante.

Ce travail représentait également un véritable défi sur l’acceptabilité des couleurs, il s’agissait de trouver le bon équilibre entre identité visuelle, lisibilité et accessibilité, tout en conservant une cohérence à l’échelle de la super app.

Nous avons conçu des ambiances de couleurs liées aux compétitions, afin de faire vivre l’application au rythme des événements et offrir aux joueurs la sensation d’une expérience toujours dynamique et vivante.

Ce travail représentait également un véritable défi sur l’acceptabilité des couleurs, il s’agissait de trouver le bon équilibre entre identité visuelle, lisibilité et accessibilité, tout en conservant une cohérence à l’échelle de la super app.

Nous avons conçu des ambiances de couleurs liées aux compétitions, afin de faire vivre l’application au rythme des événements et offrir aux joueurs la sensation d’une expérience toujours dynamique et vivante.

Ce travail représentait également un véritable défi sur l’acceptabilité des couleurs, il s’agissait de trouver le bon équilibre entre identité visuelle, lisibilité et accessibilité, tout en conservant une cohérence à l’échelle de la super app.

Nous avons conçu des ambiances de couleurs liées aux compétitions, afin de faire vivre l’application au rythme des événements et offrir aux joueurs la sensation d’une expérience toujours dynamique et vivante.

Ce travail représentait également un véritable défi sur l’acceptabilité des couleurs, il s’agissait de trouver le bon équilibre entre identité visuelle, lisibilité et accessibilité, tout en conservant une cohérence à l’échelle de la super app.

Impact

Impact

Impact

Impact

Le nouveau design a permis à Winamax de consolider son identité de marque et de proposer une interface plus différenciante dans un marché très concurrentiel.

Le nouveau design a permis à Winamax de consolider son identité de marque et de proposer une interface plus différenciante dans un marché très concurrentiel.

Le nouveau design a permis à Winamax de consolider son identité de marque et de proposer une interface plus différenciante dans un marché très concurrentiel.

Pour les utilisateurs, l'introduction d'ambiances par compétition a amélioré la contextualisation, réduit la charge cognitive et diminué les erreurs de sélection lors de la prise de pari.

Pour les utilisateurs, l'introduction d'ambiances par compétition a amélioré la contextualisation, réduit la charge cognitive et diminué les erreurs de sélection lors de la prise de pari.

Pour les utilisateurs, l'introduction d'ambiances par compétition a amélioré la contextualisation, réduit la charge cognitive et diminué les erreurs de sélection lors de la prise de pari.

Le design system est désormais scalable, basé sur des variables et une architecture modulaire, facilitant les nouvelles features et limitant les dettes futures.

Le design system est désormais scalable, basé sur des variables et une architecture modulaire, facilitant les nouvelles features et limitant les dettes futures.

Le design system est désormais scalable, basé sur des variables et une architecture modulaire, facilitant les nouvelles features et limitant les dettes futures.

Les équipes design et tech travaillent plus efficacement grâce à un nombre de composants réduit, une nomenclature clarifiée et une documentation plus actionnable.

Les équipes design et tech travaillent plus efficacement grâce à un nombre de composants réduit, une nomenclature clarifiée et une documentation plus actionnable.

Les équipes design et tech travaillent plus efficacement grâce à un nombre de composants réduit, une nomenclature clarifiée et une documentation plus actionnable.

Next Steps

Next Steps

Next Steps

Faire évoluer la documentation vers un modèle plus "just-in-time", pensé pour les designers et développeurs, éviter les écueils des DS lourds et difficilement exploitables.

Faire évoluer la documentation vers un modèle plus "just-in-time", pensé pour les designers et développeurs, éviter les écueils des DS lourds et difficilement exploitables.

Faire évoluer la documentation vers un modèle plus "just-in-time", pensé pour les designers et développeurs, éviter les écueils des DS lourds et difficilement exploitables.

Intégrer de nouvelles capacités IA (MCP, agents) pour automatiser la vérification, aider les équipes pour la documentation et à la création rapide de prototypes fonctionnels.

Intégrer de nouvelles capacités IA (MCP, agents) pour automatiser la vérification, aider les équipes pour la documentation et à la création rapide de prototypes fonctionnels.

Intégrer de nouvelles capacités IA (MCP, agents) pour automatiser la vérification, aider les équipes pour la documentation et à la création rapide de prototypes fonctionnels.

Introduire d'avantage de personnalisation coté utilisateur final : thème, densité, mise en avant des compétitions préférées, ajustements visuels.

Introduire d'avantage de personnalisation coté utilisateur final : thème, densité, mise en avant des compétitions préférées, ajustements visuels.

Introduire d'avantage de personnalisation coté utilisateur final : thème, densité, mise en avant des compétitions préférées, ajustements visuels.

2 autres projets !

2 autres projets !

2 autres projets !

2 autres projets !

Poursuivez l'exploration !

Poursuivez
l'exploration !

Poursuivez
l'exploration !

Poursuivez
l'exploration !

Lineups

Création des lineups pour les paris sportifs

Voir le projet

Lineups

Création des lineups pour les paris sportifs

Voir le projet

Lineups

Création des lineups pour les paris sportifs

Voir le projet

Lineups

Création des lineups pour les paris sportifs

Voir le projet

Les paris hot

Rendre les paris plus vivant

En cours

Lineups

Création des lineups pour les paris sportifs

Voir le projet

Les paris hot

Rendre les paris plus vivant

En cours

Lineups

Création des lineups pour les paris sportifs

Voir le projet

Les paris hot

Rendre les paris plus vivant

En cours