J’ai conçu et développé PikOmotO, une application dédiée à la préparation du code moto intégrant des éléments de gamification.
Dans le cadre du Product Design et de l’UX/UI j’ai réalisé:


Compréhension & recherche utilisateur : analyse du marché du code moto, benchmark d’applications existantes (Stych, Ornikar, Duolingo) et entretiens utilisateurs pour identifier besoins, frustrations et attentes.


Définition du produit : Analyse du problème et des enjeux utilisateurs, élaboration des personas, définition des user stories et priorisation des fonctionnalités.


Idéation & conception UX : création des parcours utilisateurs, user flows et wireframes afin de garantir une expérience fluide.


Design visuel & UI : développement du design system, création des écrans, conception des illustrations et animation de la mascotte pour renforcer la dimension ludique de l’application.


Prototype & tests : réalisation d’un prototype fonctionnel sur Figma, suivi de tests utilisateurs pour affiner l’expérience et la cohérence du produit.

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

01

Scope :

Product & UX/UI

Tools :

Research

(A)

À propos

(B)

Task

(C)

Outils utilisés

(D)

Design process

(E)

User persona

(F)

User flow

(A) À propos de PikOmotO

(A) À propos de PikOmotO

PikOmotO est une application interactive conçue pour aider les futurs motards à réussir l'examen du code moto (ETM) tout en s'amusant. Que vous soyez un jeune de 16 ans qui rêve de passer son permis A1 ou un senior qui souhaite réaliser son rêve de jeunesse avec un permis A2, cette application vous accompagne dans votre préparation de manière ludique.

L'objectif de PikOmotO est de gamifier votre expérience d'apprentissage, en transformant la révision du code moto en une expérience motivante.


PikOmotO est l'outil idéal pour intégrer facilement la révision du code moto dans votre quotidien, que vous soyez étudiant, actif ou retraité et vous préparer efficacement à l'examen pour obtenir votre permis moto.

PikOmotO est une application interactive conçue pour aider les futurs motards à réussir l'examen du code moto (ETM) tout en s'amusant. Que vous soyez un jeune de 16 ans qui rêve de passer son permis A1 ou un senior qui souhaite réaliser son rêve de jeunesse avec un permis A2, cette application vous accompagne dans votre préparation de manière ludique.

L'objectif de PikOmotO est de gamifier votre expérience d'apprentissage, en transformant la révision du code moto en une expérience motivante.


PikOmotO est l'outil idéal pour intégrer facilement la révision du code moto dans votre quotidien, que vous soyez étudiant, actif ou retraité et vous préparer efficacement à l'examen pour obtenir votre permis moto.

(B) Task

(B) Task

Product & UX: Analyse du marché et benchmark des apps existantes, Entretiens utilisateurs pour comprendre les besoins, motivations et frustrations des utilisateurs, Création de personas / user stories et user flows pour définir les parcours principaux puis concevoir des wireframes pour assurer une structure logique de navigation.


UI (Interface Utilisateur): Créer un design moderne avec des animations et interactions subtiles


Design System: Développer un système de design cohérent, incluant une bibliothèque de composants réutilisables pour uniformiser l’application.


Visual Design: Explorer différents styles visuels à partir de moodboard, concevoir la mascotte et créer des illustrations adaptées aux différentes sections de l'application.

Product & UX: Analyse du marché et benchmark des apps existantes, Entretiens utilisateurs pour comprendre les besoins, motivations et frustrations des utilisateurs, Création de personas / user stories et user flows pour définir les parcours principaux puis concevoir des wireframes pour assurer une structure logique de navigation.


UI (Interface Utilisateur): Créer un design moderne avec des animations et interactions subtiles


Design System: Développer un système de design cohérent, incluant une bibliothèque de composants réutilisables pour uniformiser l’application.


Visual Design: Explorer différents styles visuels à partir de moodboard, concevoir la mascotte et créer des illustrations adaptées aux différentes sections de l'application.

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

(B) Design process

PRODUCT & UX

Market Analysis

Benchmark

User Interviews

Job & user stories

Persona

Competitive Analysis

Feature Analysis

Ideate

User flow

Wireframes

Market Analysis

Benchmark

User Interviews

Job & user stories

Persona

Competitive Analysis

Feature Analysis

Ideate

User flow

Wireframes

UI DESIGN

Moodboard

Visual Concept

Design System

Animation

Interactive Prototype

Moodboard

Visual Concept

Design System

Animation

Interactive Prototype

PROTOTYPING

Functional Prototype

Functional Prototype

TESTING

User Testing

Adjustments / Corrections

User Testing

Adjustments / Corrections

PRODUCT & UX

Market Analysis

Benchmark

User Interviews

Job & user stories

Persona

Competitive Analysis

Feature Analysis

Ideate

User flow

Wireframes

PROTOTYPING

Functional Prototype

UI DESIGN

Moodboard

Visual Concept

Design System

Animation

Interactive Prototype

TESTING

User Testing

Adjustments / Corrections

Problem Statement

Many motorcycle license candidates struggle to prepare for the ETM theory test effectively. Existing apps are often outdated with unintuitive interfaces. The main issues identified are:


Lack of personalization: apps do not adapt to the user’s level or progress.

Monotonous experience: few interactions, outdated design, and no motivation to practice.

Absence of feedback: difficult to track progress or identify weak points.

Poorly structured content: some questions are ambiguous or incorrectly categorized.

Many motorcycle license candidates struggle to prepare for the ETM theory test effectively. Existing apps are often outdated with unintuitive interfaces. The main issues identified are:


Lack of personalization: apps do not adapt to the user’s level or progress.

Monotonous experience: few interactions, outdated design, and no motivation to practice.

Absence of feedback: difficult to track progress or identify weak points.

Poorly structured content: some questions are ambiguous or incorrectly categorized.

How can we make learning the motorcycle theory test more engaging, while keeping it simple and accessible for all skill levels?

How can we make learning the motorcycle theory test more engaging, while keeping it simple and accessible for all skill levels?

The Challenge

Making motorcycle theory test revision engaging and motivating in a field often perceived as tedious and technical. Existing apps lacked identity, clarity and product logic.

Making motorcycle theory test revision engaging and motivating in a field often perceived as tedious and technical. Existing apps lacked identity, clarity and product logic.

Design Thinking

#DEFINE

#DEFINE

User interviews

I conducted user interviews and created personas to identify frustrations, needs and users’s perception of the limitations of motorcycle & car theory apps.
This phase helped me better understand usage frequency, study habits, and the relationship users have with their learning tools.

User interviews

I conducted user interviews and created personas to identify frustrations, needs and users’s perception of the limitations of motorcycle & car theory apps.
This phase helped me better understand usage frequency, study habits, and the relationship users have with their learning tools.

Top questions

How do you currently study for the motorcycle theory test?

What frustrates you the most about the apps you have used?

When did you last subscribe to or use a paid app?

What would motivate you to practice every day?

What kind of interface or visual style would feel pleasant and easy to use?

• How do you currently study for the motorcycle theory test?

• What frustrates you the most about the apps you have used?

• When did you last subscribe to or use a paid app?

• What would motivate you to practice every day?

• What kind of interface or visual style would feel pleasant and easy to use?

Top questions

How do you currently study for the motorcycle theory test?

What frustrates you the most about the apps you have used?

When did you last subscribe to or use a paid app?

What would motivate you to practice every day?

What kind of interface or visual style would feel pleasant and easy to use?

Learnings

Existing apps are considered outdated and unintuitive.

Users want clear progress tracking and immediate feedback.

Gamification and playful elements are seen as motivating.

A modern and coherent interface is an important factor for user engagement.

• Existing apps are considered outdated and unintuitive.

• Users want clear progress tracking and immediate feedback.

• Gamification and playful elements are seen as motivating.

• A modern and coherent interface is an important factor for user engagement.

Learnings

Existing apps are considered outdated and unintuitive.

Users want clear progress tracking and immediate feedback.

Gamification and playful elements are seen as motivating.

A modern and coherent interface is an important factor for user engagement.

Sarah, 19 ans

Sarah, 19 ans

"Seeing my progress, unlocking levels, or earning a score motivates me much more than just doing a simple series of tests."

Thomas, 22 ans

"...I’d like it to be a bit fun, but not like a game for kids."

Alain, 62 ans

"There are too many icons, and I never know if I’ve actually finished a series or not."

Julien, 29 ans

"I’d like to be able to focus my practice by topic or difficulty level. Right now, everything is mixed together."

#IDEATE

#IDEATE

j'ai exploré diverses applications alliant apprentissage et gamification comme Duolingo, Réputée pour sa méthode ludique d'apprentissage des langues, Ornikar, En Voiture Simone qui propose des séries d'entraînements avec une interface ludique et des rappels réguliers, le Code Rousseau ou encore Stych qui permet de gérer l'ensemble de la formation, de l'inscription à la réservation des cours de conduite, le tout via une interface moderne et intuitive.


Ces applications m'ont inspiré pour intégrer des éléments tels que:

- Systèmes de récompenses : Badges, trophées, niveaux pour encourager la progression.


- Feedbacks instantanés, Corrections détaillées après chaque exercice pour améliorer la compréhension.


- Parcours personnalisés avec des adaptation du contenu en fonction des performances et des besoins de l'utilisateur.


- Des designs modernes avec des interfaces claires et attrayantes pour une expérience optimale

j'ai exploré diverses applications alliant apprentissage et gamification comme Duolingo, Réputée pour sa méthode ludique d'apprentissage des langues, Ornikar, En Voiture Simone qui propose des séries d'entraînements avec une interface ludique et des rappels réguliers, le Code Rousseau ou encore Stych qui permet de gérer l'ensemble de la formation, de l'inscription à la réservation des cours de conduite, le tout via une interface moderne et intuitive.


Ces applications m'ont inspiré pour intégrer des éléments tels que:

- Systèmes de récompenses : Badges, trophées, niveaux pour encourager la progression.


- Feedbacks instantanés, Corrections détaillées après chaque exercice pour améliorer la compréhension.


- Parcours personnalisés avec des adaptation du contenu en fonction des performances et des besoins de l'utilisateur.


- Des designs modernes avec des interfaces claires et attrayantes pour une expérience optimale.

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

(C) User persona

MotoCode s'adresse à une large audience, allant des jeunes de 16 ans souhaitant obtenir leur permis moto A1 aux adultes et seniors désireux de passer le permis A2. Les jeunes cherchent une expérience d'apprentissage ludique, interactive et motivante, tandis que les adultes et actifs de 18 à 40 ans privilégient une solution flexible, qui s'intègre facilement à leur emploi du temps. Les seniors, quant à eux, sont souvent des passionnés de moto, cherchant à réaliser un rêve de longue date, et recherchent une préparation simple mais efficace. Tous ces groupes sont sensibles à la sécurité et souhaitent une méthode d'apprentissage engageante, avec des éléments de gamification pour rendre l'expérience plus fun et stimulante, tout en garantissant une préparation optimale pour leur permis moto.

(C) User persona

First persona

Alain, 67

Retraité

«Alain a toujours rêvé de posséder une moto. Depuis qu'il est jeune, il a été fasciné par les road trips en deux-roues, mais les responsabilités familiales et professionnelles ne lui ont jamais laissé le temps ou les moyens de concrétiser ce rêve. Maintenant qu'il est retraité, il a enfin l'opportunité de réaliser ce projet, avec le soutien de sa famille.

Après avoir économisé pour acheter une moto qu'il a repérée dans une concession locale, il décide de commencer par passer son permis A2. Bien qu'il n'ait jamais utilisé d'applications d'apprentissage, il est curieux de découvrir des outils modernes pour se préparer au code moto efficacement et à son rythme.»


Ses Objectifs :


Obtenir son permis moto pour profiter de balades sur les routes de campagne et réaliser un rêve de longue date.

Apprendre les règles de sécurité routière spécifiques aux motards pour rouler en toute confiance.

Se sentir valorisé et indépendant dans cette nouvelle étape de sa vie.


Motivations :

Réalisation personnelle : Concrétiser un projet de vie longtemps repoussé.

Satisfaction : Être fier de réussir à son âge un défi qui demande concentration et apprentissage.

Liberté : Profiter des routes ouvertes sans contrainte.

Freins :

Manque de familiarité avec les nouvelles technologies : Il est un peu intimidé par les applications modernes, mais prêt à essayer.

Doutes sur sa mémoire : Il craint d'avoir plus de mal à retenir les informations qu’un jeune candidat.

Inquiétude sur la sécurité : Il veut absolument éviter les risques et se sentir en confiance sur la route.

Comportements :

Préfère un outil simple, intuitif et rassurant.

Apprécie les explications claires et les vidéos/tutoriels.

Accorde de l'importance aux tests blancs pour se préparer concrètement à l'examen.

Recherche une expérience non compétitive, mais motivante grâce à des petits défis accessibles.


Besoins de l’application MotoCode :

Interface simple et adaptée pour les moins habitués à la technologie.

Sections claires, comme Révision simple, Leçons expliquées, et Examens blancs.

Messages encourageants et bienveillants pour renforcer sa confiance.

Des exemples concrets et des tutoriels qui mettent l’accent sur la sécurité à moto.

Second persona

Emma, 19

Étudiante en droit

«Emma est une jeune femme dynamique et indépendante. Étudiante en droit à Montpellier, elle jongle entre la fac, ses révisions et un job à mi-temps dans une ressourcerie pour financer ses études. Vivant en ville, elle fait face aux embouteillages et aux contraintes de stationnement. Plutôt que de passer son permis voiture, elle a choisi la moto, qu’elle considère plus pratique, économique et adaptée à son mode de vie.

Connectée et habituée aux applications pour organiser son quotidien, Emma cherche une solution ludique et interactive pour apprendre le code moto (ETM). Elle souhaite un outil moderne, efficace et flexible qui s’intègre facilement à son emploi du temps chargé et qui rende les révisions motivantes et agréables.»


Ses Objectifs :


Obtenir son permis moto rapidement et efficacement pour faciliter ses déplacements quotidiens.

Gagner en autonomie tout en économisant sur les transports en commun et les coûts liés à une voiture.

Rester organisée et intégrer facilement les révisions dans son emploi du temps chargé.


Motivations :

Praticité : La moto est idéale pour circuler en ville, éviter les embouteillages et trouver facilement un stationnement.

Économie : Les coûts sont plus accessibles pour une moto que pour une voiture (essence, assurance, entretien).


Freins :

Manque de temps : Son emploi du temps est très chargé avec les études et son travail.

Stress lié à l'examen : Elle craint de ne pas réussir du premier coup et souhaite une préparation qui la mette en confiance.

Sécurité : Elle est consciente des dangers de la route à moto et veut être bien formée.


Comportements :

Elle utilise son smartphone pour tout, notamment des applications de révision pour apprendre efficacement en mobilité.

Préfère des formats courts et interactifs, comme des quizz ou des fiches synthétiques, pour optimiser ses révisions entre deux activités.

Elle aime suivre ses progrès à travers des statistiques et des objectifs atteints.

Besoins de l’application MotoCode :

Une interface moderne et rapide, adaptée à une utilisation en mobilité.

Des sessions de révision courtes et ciblées, idéales pour son emploi du temps chargé.

Des notifications ou rappels pour l’aider à s’organiser.

Un suivi des progrès clair et motivant pour qu’elle puisse mesurer son avancée.

Un contenu qui met l'accent sur la sécurité, pour la rassurer face aux risques sur la route.

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

02

Identity | Design system

(A)

Typography

(B)

Icons

(C)

Tab bar

(D)

Colors

(E)

Buttons

(F)

Design system

(A) Typography

(B) Icons

(C) Tab Bar

(D) Colors

(D) Colors

Main

Button

(E) Buttons

(F) Design system

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

ABOUT PROJECT

DESIGN PROCESS

USER PERSONA

USER FLOW

WIREFRAME

DESIGN SYSTEM

UI DESIGN & RESULTS

Got a product challenge?

Let's solve it together.

Interested in working with me?
© 2026 Yann Crozet
Product Designer
Built with Framer

Got a product challenge?

Let's solve it together.

Interested in working with me?
© 2026 Yann Crozet
Product Designer
Built with Framer

Got a product challenge?

Let's solve it together.

Interested in working with me?
© 2026 Yann Crozet
Product Designer
Built with Framer

Create a free website with Framer, the website builder loved by startups, designers and agencies.