← Back to Portfolio
Paper PrototypingInVisionUser ResearchBowermanFront-endDrupal

NikeU (2017-2022)

A hand-drawn paper prototype that became a coded platform, held through two 2020 pivots, and sharpened the questions that became search.nike.com

Role: SNKRS Sr. Applications Engineer to Principal Timeline: 2017 - 2022 Company: Nike
NikeU (2017-2022)
5
Years Load-Bearing
5
Pages Wireframed
2
2020 Pivots Absorbed

The Problem

A NikeU redesign meant real money and real engineering time, and the cheapest place to be wrong about it was on paper. Better to ground the biggest assumptions there than to let a hunch survive a design review and harden into a build. Internally the project was called Nike U Evolution, a rebrand as much as a redesign, and the research had already named the core problem: NikeU looked nothing like the Nike employees knew from the outside world, and that gap from the Brand was itself a headwind on the people using it. The rebuild carried hard requirements too, mobile support and a rollout to roughly thirty languages, so it touched the whole platform. The starting point was not a single hero screen but an inventory of every page type NikeU had to carry, from the home page and course catalog to the personal spaces like my learning and my team. That map is what the first wireframes were drawn to serve.

The Work

So I started on paper. Hand-drawn wireframes for the core pages: home, article, catalog, onboarding, and career, sketched before a single pixel got built. Next to them I drew the information architecture for the whole system: every page type, plus a "section switcher" noted right on the sketch, a template that could flip one layout into another so the platform stayed consistent as it grew. That structure, the skeleton under the skin, is what would still be load-bearing three years on.

Then the wireframes became a paper prototype: photographed screens of the hand-drawn app, wired together in InVision so people could tap through it like a real product, at the lowest fidelity that could still get an honest reaction. The whole flow was there: off-canvas menu, search, a course catalog, even a placeholder results screen with hand-sketched category icons. All of it photographed from paper and clicked through with real people, before I asked a single engineer to build anything.

From there it went to a physical mockup covered in sticky notes from a design review: real feedback, unfiltered. Most of it was a gift. Reviewers validated the core direction I had bet on ("love the clean and simple look," "like the top navigation"), then pushed hard on the thing I had underweighted, personalization ("Where is my playlist?", "show me cause you know me," put my learning and history one tap away). Others questioned my labels ("Is 'most popular' the right term, or 'trending'?") and my components ("interactive bar, can this be resized?"). Every note was a wrong assumption caught on a photocopy instead of in a shipped build.

One note did exactly what paper testing is for. The top bar used a small flag to switch languages, and a tester rejected it on sight: a flag names a country, not a language. "Use a globe," they wrote, "and spell the languages out." The correct internationalization call, made for the cost of a sticky note.

A hand-drawn wireframe printout on a table, ringed with handwritten sticky notes from a design review. Green notes approve the direction ("love the clean and simple look," "like the top navigation"); orange notes push back, one reading "Globe to choose language, no flags" beside a small drawn globe, others asking "Where is my playlist?" and whether "most popular" is the right label.

The sticky notes were the informal read. The structured one was a Design Day: pairs of testers taking turns, one thinking aloud through a prototype while the other logged what worked and what did not, seven minutes per prototype, run against five real scenarios (a new employee, a new manager, someone following a program-launch link, someone checking what was new, someone hunting for a next step in their career), plus an A/B test on the search component. All of it fed one decision, the shape of a minimum viable product built on a single principle: give people the experience their behavior asks for, not the one the infrastructure happens to make easy. From there the fidelity climbed, low-fi sketches to tighter sketches to paper to Bowerman, the higher-fidelity Nike prototyping system built on top of the Nike Core Stylesheet, and the paper prototype became the live product.

Coded, Not Comped (December 2017)

The clicked-through paper earned a build, and the build skipped static comps entirely. By December 2017 the course page was running as version 1.1 of a working coded prototype in Bowerman, Nike's in-house prototyping platform, rendered under the same internal chrome an employee would actually see, with a joke persona ("Nestor Navidad") standing in for a real one.

The NikeU course page running as a coded Bowerman prototype in December 2017: the Bowerman chrome frames a rendered internal page named NU-Evolution-CoursePage version 1.1, with the NikeU masthead, a placeholder course title, duration, audience, cost, an Add to My List button, and course details, viewed as the demo persona Nestor Navidad.

This was the whole point of prototyping in code: the left pane is the actual HTML, NCSS grid classes, the g72 glyph set, an aria-label on the navigation links, and the right pane is that markup rendered live as the finished page. Save, increment to the next version, keep iterating. What got handed to engineering later was not a picture of the design; it was the design, already speaking the design system's language.

Bowerman's split view on the same prototype: a code editor on the left showing the page's real HTML, built from NCSS classes with aria-labels in the navigation markup, and the rendered NikeU course page on the right, with Save and Increment controls and a last-saved timestamp of December 7, 2017.

And accessibility was in the prototype's bones, not a later pass. The stylesheet opens on a block labeled keyboard-and-mouse focus styles, so keyboard users get a visible focus ring and mouse users get a quiet one, wired at prototype fidelity, in 2017.

The prototype's stylesheet open in Bowerman: the file begins with a comment reading Accessibility Keyboard/Mouse Specific Focus Styles, defining separate focus treatments for mouse and keyboard users, above the global header layout rules.

Impact

The globe shipped. On the live NikeU the language switcher is a globe next to the word "English," exactly as the sticky note asked, not the flag I had drawn. That is the whole case for testing at paper fidelity: NikeU was headed for some thirty languages, so a flag standing in for a language was a real internationalization bug, and it cost a sticky note to fix instead of a rebuild because real people caught it on a photocopy before it could ship. What went live kept what the reviews had validated, the off-canvas navigation and the featured-course carousel, and dropped what they had not. And the structure held. The page system I drew on paper carried NikeU through the next three years and two company-wide pivots without a re-architecture. Only the skin changed.

The shipped NikeU course catalog on Nike's internal site: a left rail of filters for content type, function, and program, a search for "essentials," and a list of course results. In the top-right corner the language switcher is a globe icon beside the word "English," not a flag.

A Brand Voice and a Template System (2018)

Once the structure held, NikeU could afford a face. The February 2018 home banner, the image at the top of this page, put Bill Bowerman himself behind the platform's promise, "Powering our relentless pursuit," over his own line: a teacher is never too smart to learn from his pupils. The learning platform finally looked like it belonged to the brand employees knew from the outside world, which the original research had named as the core problem.

Under the face, the system kept scaling the same way the paper IA had promised: as templates, not one-off pages. By October 2018 new page types were being designed as working pages directly in the browser, like this career-development template, a video block, side-by-side expectation tables for employees and managers, and per-topic resource downloads, ready to be filled in and localized rather than redesigned.

An October 2018 NikeU career-development template rendered in the browser as a working page: a placeholder page title, a video player block, an "All employees can expect Nike support" section, tables pairing what all employees and managers each do across values, career goals, development, feedback, and role visibility, and per-topic resource download lists.

One Home for the Employee (2019)

The platform kept reaching toward a single personal front door. The My Profile concept gathered a person's whole learning life in one place, courses in progress, an instructor-led enrollment, a saved list, completions, beside a My Team view for managers. The working file says the quiet part out loud: the red design-and-layout notes at the bottom are the design arguing with itself about the next iteration, "move My List to its own tab... perhaps we add a way to suggest resources."

The NikeU My Profile concept for the demo persona Nestor Navidad: a My Learning tab with two courses in progress, one instructor-led enrollment with a January 29 session at Nike WHQ, a four-course saved list, and four completed courses, with red design-and-layout notes at the bottom of the working file proposing My List move to its own tab.

Two Pivots in One Year (2020)

Then the changes kept coming. I was still designing NikeU, but the job had shifted from proving the idea to dressing it for whatever Nike was living through, and in 2020 that arrived twice in one year: a pandemic in March, a company-wide strategy pivot by fall. When the offices went home that March, I designed a "Learn Anywhere" home page banner that pointed employees to resources for working from home and staying healthy while they kept learning.

NikeU "Learn Anywhere" home page banner from March 2020: a pale gradient panel with the headline "Learn Anywhere by NikeU," copy about setting yourself up to work from home, and a 3D render of a gray coronavirus particle studded with red and yellow spike proteins, filling the right side.

Later that year the platform had to speak the company's language: Consumer Direct Acceleration, Nike's public 2020 strategy. I reskinned the home and section banners to match, rebuilt the home page hero in Photoshop from a cut-out of two runners, and added fresh banners for the new "3.0" section areas the release introduced.

Consumer Direct Acceleration brand lockup: "Consumer Direct" set in white and "Acceleration" in black, condensed italic type split by the Nike swoosh, on a bright orange field.NikeU 2020 home page hero: a dark charcoal panel with faint angular facets and two runners cut out along the right edge, the front runner in black and the second in bright Nike volt yellow.

The bones I had drawn on paper were still holding the weight.

Where the Home Went Next

Run the timeline back and one question keeps sharpening from the first paper screen onward: how does an employee find the one thing they need? It was there in the hand-drawn search page, in the Design Day A/B test on the search component, in the catalog's filters, in a profile that pulled a person's own things into one place. NikeU kept answering it for learning; the question itself was bigger than learning. From 2019 to 2021 that thread grew past any single platform and became Nike-wide enterprise search, the one search box across HR, the intranet, and NikeU itself, and shipped to all 86,000 employees as search.nike.com, while NikeU itself kept iterating through 2022. That story is its own case study: Enterprise Search.

By these later rounds I was not designing NikeU alone. Back in 2018 I had read the resumes, run the interviews, and recommended hiring Sergio Slansky onto the HR Service Design team. He joined after the paper prototypes and the first big redesign, so this 2020 and 2021 work is where he and I iterated on NikeU together, and I trained him to build his own front-end prototypes in Bowerman. He is perhaps the best digital product and experience designer and creative I know.