Scenario-based learning prototype • Neutral, adaptable interface • Lightweight illustrated assets
Learning experience prototype

Practice early recognition, documentation, and escalation.

This interactive module translates a learning solution design brief into a working experience. Learners move through realistic wildlife care scenarios, receive supportive coaching, and complete the module with minimal interface friction.

Scenario-based

Each case presents a small set of meaningful decisions and immediate rationale.

Efficient visuals

Static vector-style illustrations keep the module lightweight and responsive.

Simple analytics

Completion, first-attempt accuracy, retries, and decision patterns are tracked quietly in the background.

Training guide

This prototype is designed to feel calm, clear, and operationally credible. You will review realistic observation cues, make decisions, and receive short coaching feedback at each step.

What this prototype demonstrates

  • Guided branching with simple decision logic
  • Accessible layout and mobile-responsive interaction patterns
  • Job aid access without breaking learner flow
  • Backend-style event tracking without overwhelming the learner

Quick observation job aid

Behavior indicators

  • Changes in activity level, pacing, or isolation
  • Reduced feeding engagement or altered routine behavior
  • Unusual posture, gait, or social interaction patterns

Documentation cues

  • Record time, location, observable behavior, and environmental factors
  • Use concise, behavior-based language instead of assumptions
  • Capture enough detail for follow-up by care or veterinary staff

Escalation cues

  • Notify the care team when behavior changes are notable or persistent
  • Escalate urgently when distress, acute risk, or multiple indicators appear
  • When in doubt, document first and follow established communication protocols

Simple learning analytics

Events0
Scenarios completed0
First-attempt correct0
Retries0

Why this stays simple for the learner

No dashboards, counters, or performance alerts interrupt the training flow. Tracking runs silently in the background, preserving a clean learner experience while still supporting higher-level review.

Time Event Scenario Details

Export events to inspect the lightweight backend data structure.

Implementation notes and QA checklist

Programming approach

This prototype uses semantic HTML, a neutral adaptable design system in CSS, inline SVG illustration assets, and plain JavaScript for state, branching logic, quiet analytics, and export functionality. All assets are contained in a single file for portability.

  • Guided branching limits each scenario to one or two meaningful decisions.
  • Choices, feedback, and progression are data-driven from one scenario model.
  • Analytics events are stored in memory with ISO timestamps and contextual details.
  • Accent colors are centralized in CSS variables so visual alignment can be adjusted without branding the artifact.
User interface design plan

The interface prioritizes clarity over decoration: a predictable screen structure, one decision at a time, ample spacing, strong heading hierarchy, and restrained accent color usage. The learner always has access to a job aid without losing progress.

  • Static vector illustrations support engagement without heavy bandwidth usage.
  • Feedback is immediate, supportive, and instructional rather than punitive.
  • Mobile responsiveness uses stacked layouts and large touch-friendly controls.
Quality assurance checklist used for this build
  • Verified all primary screens load and transition without dead ends.
  • Tested guided branching paths for correct, partially correct, and incorrect responses.
  • Confirmed that submit is blocked until a choice is selected.
  • Confirmed progress bar, summary stats, retries, and event log update correctly.
  • Checked keyboard focus visibility, button labeling, and semantic landmarks.
  • Reviewed responsive layout behavior for wide, tablet, and narrow viewport widths.
  • Confirmed analytics export downloads valid JSON.
Recommended next development step

Map the existing event structure to an LMS or xAPI layer, then add a simple admin view for supervisors or instructional reviewers. Because the UI is already low-friction and the data model is compact, backend integration can be layered in without changing the learner-facing experience.