1Glink
LYA Interview
Concevoir un même parcours pour préparer, réaliser puis analyser un entretien assisté par l’IA.
01 · Le parcours
Un entretien ne produit pas le même écran avant, pendant et après
La préparation doit rendre la date, les participants, le scénario et l’accès à l’entretien immédiatement compréhensibles. Pendant l’échange, l’interface s’efface au profit de la conversation. Après, elle devient un outil de lecture, de comparaison et de décision.
J’ai donc travaillé à partir du cycle de vie réel de l’entretien plutôt qu’à partir d’une page unique remplie de cartes. Les blocs d’analyse n’apparaissent que lorsqu’une donnée existe, tandis que les actions disponibles restent cohérentes avec le statut courant.
- Préparer · Inviter
- Échanger · Guider
- Analyser · Décider
Une continuité de parcours sans écrans vides ni actions prématurées
02 · États et services
Faire du statut métier la source de vérité de l’interface
Le composant ne déduit pas son écran à partir de plusieurs booléens indépendants. Une couche d’adaptation transforme les données de session en un état de vue explicite.
01 · API
Charger la session
Le service récupère le rendez-vous, les participants, le scénario et les éventuels résultats.
02 · Domaine
Identifier la phase
Les dates et statuts métier déterminent une phase exclusive : préparation, direct ou compte rendu.
03 · ViewModel
Dériver les capacités
Les actions, sections visibles et messages sont calculés une fois à partir de cette phase.
04 · Interface
Composer l’écran
Angular affiche les composants utiles au moment présent sans propager les règles dans chaque template.
Résultat Ajouter un nouveau statut reste une décision localisée et testable, plutôt qu’une succession de conditions dispersées.
03 · Restitution
Transformer la conversation en matière exploitable
Le compte rendu rapproche les propos, les compétences observées et les attentes du poste sans prétendre remplacer le jugement du recruteur.
Comparer une compétence à la fois
La sélection réduit la charge cognitive et conserve les éléments de preuve associés à la compétence observée.
Garder la conversation lisible
Les prises de parole de LYA et du candidat sont différenciées sans transformer la transcription en tableau.
Rendre la décision accessible
Le recruteur peut poursuivre, rencontrer ou écarter un profil depuis la synthèse, avec le contexte nécessaire.
04 · Exemple technique
Rendre les transitions métier explicites dans le code
Ces extraits sont anonymisés, simplifiés et réécrits pour le portfolio. Ils illustrent une approche sans reprendre le code ni les contrats internes du client.
Modèle métier
Représenter des états exclusifs
Une union discriminée empêche de rendre simultanément une préparation et un compte rendu.
type InterviewViewState =
| { readonly kind: 'preparation'; readonly canJoin: boolean }
| { readonly kind: 'live'; readonly roomId: string }
| { readonly kind: 'report'; readonly report: InterviewReportVm };
function toInterviewViewState(session: InterviewSessionDto): InterviewViewState {
if (session.report) {
return { kind: 'report', report: toReportViewModel(session.report) };
}
if (session.status === 'in-progress') {
return { kind: 'live', roomId: session.roomId };
}
return { kind: 'preparation', canJoin: session.status === 'ready' };
}Template Angular
Composer la page à partir de la phase
Le contrôle de flux exprime directement les trois expériences et évite les cartes vides.
@switch (viewState().kind) {
@case ('preparation') {
<app-interview-preparation [state]="viewState()" />
}
@case ('live') {
<app-interview-room [state]="viewState()" />
}
@case ('report') {
<app-interview-report [report]="viewState().report" />
}
}Test de parcours
Vérifier ce qui doit réellement être visible
Le test protège une règle UX essentielle : aucune analyse vide avant que l’entretien ne soit terminé.
it('shows preparation without an empty report', () => {
fixture.componentRef.setInput('session', upcomingSession);
fixture.detectChanges();
expect(screen.queryByText('Analyse des compétences')).toBeNull();
expect(screen.getByRole('link', { name: 'Rejoindre l’entretien' })).toBeTruthy();
});05 · Cohérence UI
Deux ambiances, un même produit
Les pages de préparation et de restitution restent claires et éditoriales. Le direct adopte une surface sombre plus immersive tout en conservant les mêmes repères d’action et de statut.
Couleurs
- NuitInterface d’entretien et titres
#171a33 - IndigoActions principales
#2457ff - VioletPrésence de LYA
#6861d9 - BrumePréparation et restitution
#f5f7fb - SuccèsÉtapes confirmées
#60c991
Typographie
Inter · Regular / Medium / Semibold
Préparer, conduire et comprendre l’entretien.
Les actions et les informations évoluent avec la session sans rompre la continuité du parcours.