UX/UI · Digital learning · Client project

Valeo

Compliance
in Action.

A working week of decisions.
Designed for Valeo through TransPerfect.Explore the project ↓

01 / Overview

From policy to practice.

I designed the UX/UI for Compliance in Action, a training programme for Valeo through TransPerfect. The experience follows Dan through a working week, turning compliance topics into situations where learners need to decide what to do next.

ClientValeo

ThroughTransPerfect

My roleUX/UI design

FormatScenario-based training

My focus was making a content-heavy programme feel clear and easy to move through. The interface gives the story, guidance and decisions their own space, while keeping progress and navigation consistent.

02 / Learner journey

A week in Dan’s shoes.

Get oriented
Meet the situation
Explore the guidance
Choose an action
Learn from feedback

Start with a clear purpose.

The introduction sets out what learners will practise. Meeting Dan gives them a character to follow, and the Monday-to-Friday progress bar keeps the wider journey visible.

Learning objectives with four outcomes and a Continue action — The purpose of the module, before the first scenario.

Meet Dan character introduction — A familiar face to follow through the week.

Put the learner inside the situation.

Workplace scenes introduce the dilemma before asking for a decision. Short story steps and a single Continue action give each moment a clear reading order.

The Internal Hurdle workplace scenario — The story introduces the pressure behind the decision.

Give them somewhere to look.

The E&C portal screens break the supporting guidance into topics. Learners can open an accordion or switch between cards to explore the relevant rules before applying them.

Export-control guidance in an expandable topic panel — Guidance is broken into manageable, selectable topics.

Make a choice. Understand the consequence.

Choices sit beside their feedback, so the learner can connect an answer with its explanation. Both correct and incorrect states explain the reasoning, rather than stopping at a score.

Correct decision feedback explaining the next action — The selected answer and its explanation stay together.

See an incorrect answer state

Incorrect decision feedback explaining the risk — The feedback explains why the choice creates a problem.

03 / Interaction patterns

One structure.
Different dilemmas.

The week covers export controls, competition, supply-chain responsibility, anti-bribery and personal data. I used a recurring rhythm of story, exploration and decision to keep the experience familiar as the subject changes.

Competition guidance presented as three topic cards — Topic cards make a dense subject easier to scan.

Supply-chain responsibility scenario on the plant floor — A different setting for the next workplace dilemma.

Anti-bribery guidance with four numbered tabs — Numbered tabs organise the guidance into short sections.

Personal data guidance displayed as four illustrated cards — The same learning structure adapts to personal data protection.

04 / Visual design

Clear cues throughout.

A consistent frame

Progress, Resources and Menu stay in the header. A visible back action and recurring Continue button make the next step easy to recognise.

Room for the content

Dark panels give text a defined space over photography. Valeo green highlights actions and selected states, with written labels to explain the feedback.

For me, the key was keeping the interface predictable while the situations changed. The learner should be thinking about the decision in front of them, with the design helping them find the information they need.