← Back to Portfolio
SketchReactNCSS Design SystemSurveyGizmo

Time Off

Rebuilding Nike's time-off experience as a service journey, not a form, for 86,000 employees

Role: Product & Service Design, Global HR Service Innovation Timeline: 2019 - 2020 Company: Nike
Time Off
~$48M / year
Productivity Returned (est.)
15x faster
Time per Request
86,000
Workforce
Under 8 months
Research to Launch

Click through the prototype

A working click-through of the real screens on Nike's Zero platform. Click anywhere, press the Next control, or use the arrow keys to step through it. It starts with an employee’s own Time Off view, then moves to the manager’s My Team queue: reviewing a request, seeing its projected dates on the team calendar, and approving or declining in place.

Time Off, Zero platform (desktop web)
Nike Time Off employee self-service on the Zero platform, My Time tab. A header shows a paid-time-off balance of 111 hours beside accrual rate, floating holiday, and sabbatical eligibility. Below, a Responded Requests list with an open leave-type filter offering PTO, Floating Holiday, and Sabbatical, and rows marked Approved, Pending, or Declined, each with a matching check or cross icon.

Step 1 of 9: My Time: your balance

An employee's own Time Off: balance, accrual, and a filterable history. Click anywhere, press Next, or use the arrow keys to move through it.

The Problem

Requesting a day off at Nike meant wrestling with TimeTrack. People hunted for their balance, sent a request, then waited with no signal that it had gone through. Managers had the harder job: to approve one person's vacation, they had to reconstruct from memory who else on the team was already out, because the system never showed them.

Process

So I stopped treating it as a form. A time-off request is a service journey, and the two ask for opposite things: a form asks how to lay out the fields; a journey asks what a person needs to know, and when.

What followed ran the length of that journey, from the first employee interview to the business case I would later present to the company. I mapped the existing TimeTrack experience end to end, then ran employee interviews and a SurveyGizmo survey to find where it actually broke. I laid those findings against the map, affinity-mapped the pain points, and kept only the steps people genuinely needed. That shortlist, not a feature wish-list, scoped the first prototype.

The prototype was deliberately rough: hand-drawn paper wireframes of the mobile flow feeding a low-fidelity click test with one goal, to confirm the minimum an employee needed to request time off. From there, each jump in fidelity was gated by its own round of user research, not derived from that first test alone: I tested, learned what to change, redesigned, and tested again through the medium- and high-fidelity rounds, so what reached development had been validated at every step. Throughout, Sergio Slansky and I designed the employee self-service view and the manager approval view as one connected service, because requesting time off and approving it are two halves of the same journey.

The research-and-design loop behind Time Off, spanning August to October 2019: a four-stage cycle that alternates Research and Design, where research first sets which functionality the initial prototype should target, a low-fidelity prototype tests the minimum users need, a second research round feeds direction into the medium- and high-fidelity iterations, and the high-fidelity prototype is handed to development. Each stage is labeled in words, so the sequence reads without relying on color.

Solution

The redesign gave every employee a single screen that answered the three questions TimeTrack made them dig for: how much time do I have, what have I already requested, and where does each request stand. Then it took on the harder half, the manager's.

Before approving anything, a manager sees the whole team's month at a glance. The team-availability view lays every pending request against the calendar, marks who is already out, and flags the overlaps, so a decision weighs team coverage and not just one person's balance.

The manager team-availability view on the Zero platform: an A to Z team roster beside a full-month calendar, with a legend marking approved days as solid dots, pending as light diagonal hatching, and active time off as blue hatching, plus each request's overlapping teammates shown as small circular avatars.

Engineers built it as a responsive web app on Nike's Zero platform, deployed at timeoff.nike.com. On a phone, the same decision lives in a swipeable card: open a request, confirm with a green check or a red cross, and the card settles into its approved state, with the status carried by the icon and the word as well as the color, so it reads without relying on color alone.

Three phone screens showing the manager's mobile approve flow on the Zero platform: a request card with a Respond button, then the same card revealing a green checkmark and a red cross, then the card confirmed with a green check and the word Approved.

Key Deliverables

  • Employee dashboard: balance, request history, submit flow
  • Manager dashboard: team requests, calendar view, approve/decline workflow
  • Mobile-responsive design with swipe approve/decline interactions
  • Motion design for the approve and decline flows
  • Internal launch flyer
  • Story deck walking the research-to-launch journey, from first interviews to phased go-live

Piloted, Then Validated in the Wild

Time Off shipped in phases, not one big launch. A pilot went out on July 10, a first go-live followed on August 26, and instead of stopping there, a dedicated round of research ran after launch and shaped a second go-live on November 20. Start to finish, under eight months.

The Agile and service-oriented delivery timeline for Time Off, running March to November 2019: alternating design, develop, demo, and research cycles along a horizontal axis, marked with a pilot on 7/10, a Phase 1 go-live on 8/26, a dedicated Phase 2 research round after launch, and a Phase 2 go-live on 11/20.

The real test was what employees said once they had it in hand. In post-launch feedback:

> "Time Off is much faster and more intuitive than Time Track."

> "Easier to navigate, clean interface. It's easy to switch between My Time and My Team."

> "Kudos to the folks who made Time Off. I feel like we jumped 20 years in the future with this tool versus the old way of requesting time off."

That middle line is the whole idea landing in a sentence: My Time and My Team, the employee's half and the manager's half, read to people as one tool.

Taking It to the Stage

At Nike's LEAD learning and development conference in 2019, Sarah Sparks and I presented the thinking behind the redesign. The point reached past this one app: service design usually gets aimed at the products a company sells, and here it got aimed at a form the company's own people touched a few times a year.

That is where the number comes from. A single time-off request dropped from about 7.5 minutes in TimeTrack to under 30 seconds in Time Off. Small on any one request, but multiplied across the full Nike workforce, it added up to an estimated $48M a year in employee time returned. The most routine screen in the building turned out to be one of the most valuable, once it was treated as a journey instead of a form.

Christopher Langstaff standing to present at Nike LEAD 2019, co-presenter Sarah Sparks seated beside him, a slide reading PROTOTYPE and a design-process diagram on the screen behind them, an audience watching from round tables, and an affinity board of sticky notes beside the stage.

The session had a working demo to point at, and it survives. This 48-second recording, prepared for that 2019 conference session, walks the prototype end to end as demo employee Tyler Brown: the balance and request history, a Request Time Off flow with its live review of remaining hours, and the month calendar the request lands on.

The 2019 demo recording: balance, request, review, and the calendar the request lands on.

Interactions

response-animations-manager-response-approve-flow

response-animations-manager-response-decline-flow