Resource Lab Pattern

Mobile Process Coach

A mobile-first interaction pattern that turns a process into guided, tappable decision support instead of another scroll-and-forget checklist.

What it is

A better way to teach processes people actually need to use.

Most process training is basically a dressed-up checklist. Step one. Step two. Step three. Congratulations, you have now witnessed a list wearing business casual.

The Mobile Process Coach is different. It breaks a workflow into small, tappable moments that explain what to do, what to notice, what can go wrong, and what good judgment looks like at each step.

Use it when learners need more than instructions. Use it when they need guidance.

Best for

Operational workflows

Multi-step processes where learners need to understand sequence, purpose, decision points, and common friction.

Also useful for

Performance support

Job aids, onboarding support, troubleshooting guides, policy-to-practice resources, and mobile-friendly refreshers.

Design goal

Coach the process

Help learners understand what matters at each step instead of asking them to memorize a sequence.

Live Preview

Try the mobile process coach.

This sample uses a generic support workflow, but the same structure can work for safety checks, onboarding tasks, customer support moments, manager conversations, delivery workflows, or internal process guidance.

Process Coach

Support request triage

1/5 steps
Step 01

Read the signal

Start by identifying what the request is really asking for. Look for the main signal, not every detail at once.

What to do

Identify the main request, the person affected, and the immediate outcome needed.

Process debrief

The point is not the steps. The point is better judgment at each step.

A useful process interaction does more than show sequence. It helps learners notice signals, avoid common mistakes, choose a path, communicate clearly, and close the loop.

Why this works

Processes are rarely just processes.

A process usually contains hidden judgment. What matters first? What can wait? What needs escalation? What context changes the next step? What should someone communicate before they move on?

That is where a normal checklist starts to wobble. It shows the order, but it often misses the thinking.

The Mobile Process Coach makes that thinking visible. It gives each step a purpose, a risk cue, and a practical action learners can carry into the work.

Design Notes

Use this when the process needs coaching, not just documentation.

Instead of

A static checklist

Step one, step two, step three. The learner sees the sequence, but not the judgment behind it.

Try

A guided process coach

Each step explains the action, the risk, the decision cue, and the next useful move.

Starter Code

Copy, adapt, and make it your own.

Use this as a starting point for Rise blocks, Storyline web objects, S3-hosted learning tools, internal knowledge pages, or portfolio examples.

<div class="ac-mobile-coach" data-current-step="1">

  <div class="ac-mobile-coach-shell">

    <div class="ac-mobile-coach-topbar">
      <div>
        <p>Process Coach</p>
        <h3>Support request triage</h3>
      </div>

      <div class="ac-mobile-coach-progress">
        <strong id="acStepCount">1/5</strong>
        <span>steps</span>
      </div>
    </div>

    <div class="ac-mobile-coach-meter">
      <div id="acProgressFill"></div>
    </div>

    <div class="ac-mobile-coach-step-list">
      <button class="ac-step-pill active" type="button" data-step="1">
        <span>01</span>
        Read the signal
      </button>

      <button class="ac-step-pill" type="button" data-step="2">
        <span>02</span>
        Check context
      </button>

      <button class="ac-step-pill" type="button" data-step="3">
        <span>03</span>
        Choose path
      </button>
    </div>

    <div class="ac-mobile-coach-card">
      <div class="ac-mobile-coach-card-header">
        <span id="acStepLabel">Step 01</span>
        <h4 id="acStepTitle">Read the signal</h4>
      </div>

      <p id="acStepBody">
        Start by identifying what the request is really asking for.
      </p>

      <div class="ac-mobile-coach-tabs">
        <button type="button" class="active" data-view="do">What to do</button>
        <button type="button" data-view="watch">Watch for</button>
        <button type="button" data-view="try">Try this</button>
      </div>

      <div class="ac-mobile-coach-guidance" id="acGuidancePanel">
        <span>What to do</span>
        <p>Identify the main request and the immediate outcome needed.</p>
      </div>
    </div>

  </div>

</div>

Customization

Make it fit your workflow.

Replace the sample steps with your own process. Keep each step short, but do not reduce the guidance to labels. The value is in the coaching layer.

For each step, write three pieces of guidance:

01

What to do

The concrete action the learner should take.

02

Watch for

The common mistake, risk, or signal learners might miss.

03

Try this

A practical phrase, action, question, or next move.

Learning should help people move through work with more clarity.

The Mobile Process Coach is designed for moments where people need to understand the path, the purpose, and the judgment behind each step.