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.

Audience

Hourly Store Associates

Devices

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?

Solution: 

  • 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.

Solution:

  • 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

Messaging

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.

Solution:

  • 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.