02 · Interaction design case study

Career Starter Village

Turning employee training into an interactive story

A mobile-first gamified learning experience that allows new bank employees to practise communication, compliance and workplace decision-making through interactive scenarios.

Role
UX/UI Designer & Interaction Designer
Timeline
2026
Team
Client, designer and developer collaboration
Tools
Figma, FigJam, Adobe Creative Cloud, Web technologies
Status
Client project · Interactive prototype
Career Starter Village game start screen
Career Starter Village explorable city map
Career Starter Village ATM decision scenario
INTERACTIVE TRAININGExplore · Build skills · Decide
Overview

Training becomes memorable when people make meaningful choices.

Traditional onboarding content can be difficult to remember when employees only read policies or watch presentations. Career Starter Village turns training topics into short, interactive workplace stories where players make decisions and see the consequences.

Challenge

The challenge

01

How might we turn workplace policies into memorable decisions?

02

How might we keep the experience engaging without making it feel childish?

03

How might we fit meaningful scenarios into a short mobile-first experience?

Role

My contribution

I contributed to the experience structure, game flow, interaction design, interface design, visual direction, scenario presentation and design QA.

Experience structureGame flowInteraction designMobile interfaceVisual directionScenario presentationDesign QADeveloper collaboration
Experience structure

A repeatable daily rhythm

The experience loops across three days, giving each interaction a clear place in the story.

Career Starter Village map showing morning activities and workplace locations
Morning activitiesOptional eventsEnergy systemWorkplace locationDaily progression
StartMorning activityWorkplace eventPlayer decisionConsequenceEvening activityDaily summary
Learning system

Progress that stays visible and understandable

Instead of showing hidden scores, the final direction makes skill development visible through a simple daily summary and progress visualisation.

Activity contextWhy the player travels to a branch.

Skill impactBusiness understanding, risk compliance and collaboration.

Player confirmationConfirming advances the story into a workplace event.

Career Starter Village activity confirmation with skill growth
Key decisions

Learning through interaction

Decision 01

Learning through consequence

A customer’s card is retained by an ATM. The sequence moves from story setup to decision choices, immediate result and skill feedback.

Immediate decisionRespond to an emotionally charged customer.

Progressive choicesOptions reflect different levels of professional judgement.

Skill requirementsAdvanced responses unlock through communication, collaboration and compliance skills.

Learning feedbackConsequences explain why a choice works instead of only marking it right or wrong.

Career Starter Village ATM event with skill-gated decisions
Decision 02

A game-like but professional tone

Stylised game scenes, clear mobile UI and restrained gamification create engagement without coins, rankings or exaggerated rewards.

Career Starter Village professional game introduction
Decision 03

Mobile-first story pacing

Dialogue, decisions and feedback are divided into short screens so that users can understand one idea at a time.

Morning completeClear phase transitionWorkplace event begins
Career Starter Village transition from morning activity to workplace event
Iterations

Before / After

BeforeThe experience relied mainly on clicking through static pages.
AfterScene transitions, decision feedback and daily progression create a clearer rhythm.
BeforeToo many systems competed for attention.
AfterCoins and unnecessary hidden mechanics were removed.
BeforeLocation choices relied on text-heavy buttons.
AfterMap locations use clear icons and visual context.
BeforeTraining content felt separate from gameplay.
AfterSkills and consequences are directly connected to each workplace decision.
Final solution

Five steps, one coherent journey

Follow the experience from entering the world to making a consequential workplace decision.

01Career Starter Village start screen
StartEnter the workplace learning world.
02Career Starter Village location map
ExploreChoose a morning location.
03Career Starter Village skill impact confirmation
ConfirmReview context and skill impact.
04Career Starter Village work phase transition
TransitionMove into the workday.
05Career Starter Village workplace decision
DecideHandle a realistic event.
Outcome

A playable, mobile-first training prototype.

  • Created a playable mobile-first training prototype
  • Transformed workplace topics into interactive scenarios
  • Established a repeatable three-day experience structure
  • Connected decisions with five professional skill dimensions
  • Developed a visual direction suitable for games and employee learning
Reflection

The strongest moments are when a player understands why one decision produces a different result from another.

This project helped me explore how interaction design can support learning without relying on complex game mechanics.

Career Starter Village

Experience the training journey.

Try the interactive prototype
Contact

Let’s create something useful together.