On the Clock Element

Off the Clock Screen

Project Goals

Walmart Store Associate

Credit: corporate.walmart.com

The Problem

To use the Walmart Academy Application, hourly associates must be clocked in to access the application. As this was a high legal priority, we needed to convey this within the application quickly and within tight legal restrictions.

My Role

As sole Product Developer, I led cross-functional teams (developers, UX designers, UX researchers, data scientists) and coordinated with stakeholders, legal teams and leadership. Strategized and developed new product features, while integrating with multiple systems, components and applications.


Hourly Store Associates


Desktop, Mobile, iPads, TC70s (Store Devices)

The Process

Technical Considerations

How do we know if they are on the clock?
Discuss options with developers.

  • Are there any systems we can connect with?
  • We pass the employee ID when they log into the app, can we use that?


  • Connect the app to the Clock In System API.
  • Verify the employee ID is on the clock by analyzing their clock in status.
  • Pass the status back to the app, trigger messaging.
Academy Login Process Flow

Login Process Flow

Legal Considerations

When do we need to restrict access? 

  • In discussing with legal, we must restrict all access when they open the app.
  • No content should be accessible while off the clock.


  • After prototyping several UX options (notifications, pop-ups and screen overlays), we settled on a full screen redirect. We didn’t want to suggest to the user they could circumvent the message (as they might with a popup or modal).

Quick and dirty solution:

  • As an immediate stopgap, a full screen redirect with generic icon and messaging was used.
Academy No Access Screen

Stopgap solution


Legally, there were no restrictions around text, only the interactions.
For better context for the user, messaging needed to include:

  • Why they can’t access the app.
  • How to fix the issue.


  • Action buttons: Normally we would display action buttons to fix the issue, but to clock in, associates must use a store terminal. There were no action buttons available for the application (yet).
  • Tone: Formal to reflect the app’s character. Walmart’s softer/apologetic branding were considered, but ultimately discarded.
  • Text Order: State the issue, then how to fix it.
  • Use an associate’s language.
  • Use a custom Academy branded icon.
No Access Screen

First iteration

Walmart Academy cannot be accessed while off the clock. Please clock in to be able to view.

Sorry…You have attempted to access a Walmart resource while off the clock, please clock in and try again.

You are off the clock, please clock in to access Walmart Academy.

On Break Loophole

For every 4 hours an associate works, they must take an 15 min “On the Clock” break. Technically they are clocked in, but since they are on break, they are not allowed to access the app. Very sensitive, high-priority issue! Affects pay, legal, and unions.

Questions for Legal:

  • Do they need to acknowledge the message?
  • When do they need to see the messaging?

Through many iterations with legal:

  • They must see the “on break” message every time.
  • No need to record an associate acknowledging it.


  • Small modal overlay at the bottom of the screen.
  • Always present at startup.
  • Can dismiss, but it will be back next time!

Notify, but don’t restrict!

“On break” iterations


Off the Clock Screen

In testing with store associates: 
When asked “What is this telling you? How to do you access the application?”, users unanimously understood they are off the clock and must clock in at a terminal to continue. Users commented on clear icons and messaging.

Future ideas: 
Link to clock in software to enable on-the-spot access.