Pledge Experience Design & Functional Requirements
Turning a cancer-screening awareness campaign into a pledge-and-leaderboard experience, and writing the journey map, wireframes and functional requirements that NHL.com developers built from.
Review-build capture of the site: a hero that frames the ask, the Body Check Cup leaderboard that carries the pledge, then screening information for four cancers and the hockey stories. Click to see the full page. Visual design by the campaign’s creative team; built from my wireframes and functional requirements.
Cancer screening is routine care, and still most people can’t say when they should have it. The site’s own national survey of 4,600 adults put the numbers in front of fans.
Only 25% knew the lung screening recommendations, 35% colorectal, 43% prostate and 49% breast. Not all cancers cause symptoms, so waiting for a sign is not a plan.
Information doesn’t move people on its own. The experience needed one specific action that was easy to take and meaningful to a hockey fan: pledge to talk to a doctor and loved ones about screening. And it needed a reason to come back and share it.
Fan identity is the motivator, the pledge is the action. Picking a team turns a personal health task into something shared. Each pledge and each share adds points to that team on the leaderboard, so the action gives fans something to compete over.
Health behavior campaigns that borrow an audience from another brand. Co-branded programs with sports, entertainment or media partners all face the same task: give the partner’s community a single, low-friction action and a visible way to see its effect.
I started from the fan’s journey, not the page list: arrive through hockey content, see the screening gap, pick a team, pledge, share, then watch the team climb the board. The wireframes gave each step its own place on the page, and the functional requirements spelled out how it had to behave, so NHL.com developers could build it without guessing.
The site was one part of a broader campaign that also ran on TV, social and print. The creative team led the visual design across all of it; my work set the structure and behavior underneath the site, so the pledge worked the same way wherever a fan arrived from.
The loop is simple on purpose. Pick your team. Pledge to talk with a doctor and loved ones (25 points and a sweepstakes entry). Share the pledge (50 bonus points and another entry). Watch your team move up the standings.
Concept v2 (left) folded team select, pledge and submit into the leaderboard module. The final comp (right) keeps the leaderboard simple, with a single Pledge Now action, and moves the entry form to its own section below the prizes. The campaign name also settled from Screening Cup to Body Check Cup, and standings moved from placeholder counts to points.
Moving the form out of the homepage module gave the entry flow room for eligibility, consent and rules copy without crowding the leaderboard.
The same section in its three states. The default form collects team, pledge, name, postal code and email, with an eligibility checkbox. After a pledge, the form is replaced by a thank-you and share actions. A repeat email gets a clear message and the same share actions instead of an error.
Defining the repeat-entry state up front meant developers had no edge case to invent, and the most engaged fans still got a next step.
Mobile keeps the same loop: the leaderboard and Pledge Now lead the home screen, the form states stack in a single column, and the full leaderboard opens with the top three teams before the complete standings table.
The leaderboard stays the center of the experience at 375px.
The client kept performance data under contractual obligations, so this case rests on the launch and on the decisions behind it. On a similar program I would agree early on a small set of indicators that could be shared publicly, such as directional benchmarks or qualitative learnings, so the work can be judged on more than the fact that it shipped.