Étude de cas portfolio — DriveWise

Résumé recruteur — 30 secondes.
Problème : transformer des consignes de conduite en module court, bilingue et accessible.
Mon rôle : conception complète + réalisation Storyline 360 (voir « Rôle du concepteur » ci-dessous).
Impact (mesuré dans la démo) : 17 étapes, quiz à 80 %, attestation. Terrain : à mesurer avec le 1er client — aucun résultat client inventé.

FR — Version française

Contexte

DriveWise est un projet démonstrateur indépendant créé pour un portfolio de concepteur pédagogique. Il illustre comment transformer des consignes de conduite économique et sécuritaire (préparation, anticipation, souplesse, arrêts) en un module e-learning court, bilingue et accessible — sans dépendre d’un outil auteur propriétaire.

> Ne pas confondre avec une production interne d’entreprise : aucune marque, photo client ou donnée confidentielle n’est utilisée.

Rôle du concepteur

Conception pédagogique, UX e-learning, accessibilité WCAG 2.1 AA, réalisation Storyline 360 et rédaction bilingue FR/EN.

Outils

Storyline 360, Rise 360, Camtasia, Vyond. Paquetages SCORM / xAPI, sous-titres FR/EN.

Compétences démontrées

Ingénierie pédagogique : objectifs, scénarios décisionnels, feedback formatif/sommatif, transfert par engagement.
UX e-learning : navigation Storyline 360, progression, cartes interactives, quiz avec reprise.
Accessibilité : clavier complet, focus visible 3 px, skip link, aria-live, reflow 320 px, contraste AA, lang dynamique.
Bilinguisme : contenu FR/EN dans un seul content.js, switch sans perte de progression.
Qualité front : code lisible, sans eval, progression persistée, réinitialisation ciblée du quiz.

Défis et décisions de conception

Défi	Décision
Rendre Storyline sans Storyline	SPA légère avec fonction centrale de rendu par écran + dialog accessible.
Éviter le piège du glisser-déposer	Remplacé par cases à cocher et choix radio — clavier/tactile natifs.
Bilingue sans API	Fichier `content.js` unique, `localStorage.lang`, `document.documentElement.lang` dynamique.
Accessibilité dès le départ	Critères WCAG prioritaires implémentés avant le visuel (focus, skip, live-region).
Hébergement simple	Zéro build, chemins relatifs, déploiement GitHub Pages en un push.

EN — English version

Context

DriveWise is an independent portfolio demonstration for an instructional designer. It shows how to turn fuel-efficient and safe driving guidelines (preparation, anticipation, smoothness, stops) into a short, bilingual, accessible e-learning module — without relying on a proprietary authoring tool.

> Not an internal corporate production: no brand, client photo or confidential content is used.

Designer’s role

Instructional design, e-learning UX, WCAG 2.1 AA accessibility, Storyline 360 build and FR/EN copywriting.

Tools

Storyline 360, Rise 360, Camtasia, Vyond. SCORM / xAPI packages, FR/EN captions.

Skills demonstrated

Instructional design : objectives, decision scenarios, formative/summative feedback, commitment-based transfer.
E-learning UX : Storyline 360 navigation, progress, interactive cards, quiz with retake.
Accessibility : full keyboard, 3 px focus ring, skip link, aria-live, 320 px reflow, AA contrast, dynamic lang.
Bilingual : FR/EN content in a single content.js, language switch without losing progress.
Front-end quality : readable code, no eval, persisted progress, targeted quiz reset.

Challenges & design decisions

Challenge	Decision
Storyline without Storyline	Lightweight SPA with central screen renderer + accessible dialog.
Avoid drag-and-drop trap	Replaced with checkboxes and radio choices — native keyboard/touch.
Bilingual without API	Single `content.js`, `localStorage.lang`, dynamic `document.documentElement.lang`.
Accessibility first	Priority WCAG criteria before visuals (focus, skip, live region).
Simple hosting	Zero build, relative paths, one-push GitHub Pages deploy.

← Retour