eLearning Challenge • Responsive Interaction

Reset Ready

A responsive, decision-based field readiness simulation that transforms a simple checklist into an interactive performance experience.

Responsive should change the experience, not just shrink it.

The goal was to create a custom learning experience that works naturally across desktop, tablet, and mobile while still requiring meaningful learner decisions.

01

Avoid a static checklist

A readiness check should ask learners to inspect and interpret information, not simply click “confirmed.”

02

Design for field use

The interaction needed to feel usable on a phone in a store as well as on a desktop during preparation.

03

Make completion meaningful

The learner should earn the ability to begin the reset by resolving all four readiness areas correctly.

Performance Context

The learner is preparing for a retail product reset. Before work begins, the learner must verify the planogram, available inventory, required tools and equipment, and store conditions.

Design Strategy

Instead of exposing four status buttons, each readiness category became a short task. The learner compares layouts, reviews quantities, selects equipment, and inspects a visual work area.

Interaction Logic

Each task must be completed correctly before it contributes 25 percent to the readiness score. The final Start Reset action remains locked until the learner reaches 100 percent.

Feedback & Motivation

Immediate corrective feedback helps the learner adjust decisions without leaving the activity. Reaching 100 percent triggers a visual celebration and unlocks the reset.

Four checks. Four different decisions.

Each readiness area uses a different interaction pattern so the experience feels active and purposeful.

Planogram Comparison

Compare the approved layout with the current shelf and identify two placement errors before verification.

📦

Inventory Analysis

Compare required and on-hand quantities, then identify only the SKUs that cannot support the reset.

🧰

Tool Selection

Select the required tools and supplies while rejecting plausible but unnecessary equipment.

🏪

Conditions Inspection

Inspect the visual work area and locate three blockers that must be addressed before work begins.

One interaction, intentionally adapted across devices.

The interface changes hierarchy and stacking behavior so the same activity remains usable on desktop, tablet, and mobile.

Desktop
Tablet
Mobile
RoleLearning Experience Designer & Developer
ToolsHTML5, CSS3, JavaScript
FormatResponsive Web Object
FocusDecision-Based Performance Practice

A readiness check that behaves more like a real field application.

The final experience combines responsive UX, scenario-based decisions, visual inspection, corrective feedback, gated progression, and a completion celebration in a compact custom web object.

01

Observe

Learners inspect visual and quantitative evidence before acting.

02

Decide

Each task requires a meaningful selection or identification decision.

03

Verify

Readiness increases only after the learner demonstrates the correct decision.

See the experience in action.

Try the Reset Ready interaction, or visit Articulate E-Learning Challenge #565 to view the original challenge prompt.