projects / IBM: Volunteer Badge Consent

IBM: Volunteer Badge Consent

Designing the consent step for IBM's volunteer badges, from a first-round overlay to a standalone page built on the Carbon Design System.

The consent page on a tablet: the IBM Community Engagement Program, with the consent status block and the response options

Problem

IBM employees and retirees earn digital badges for volunteering, from an Engagement Award at 40 hours up to Platinum at 4,000, issued through Credly. IBM's CSR team was automating them: log hours in Benevity, and the badge arrives by email.

But no hours count until someone accepts the programme's data privacy policy, so the consent pages sat at the start of the whole system.

Badge flow: a volunteer registers consent on the employee or retiree consent page, logs hours in Benevity, a nightly engine processes hours for consenting users only, and Credly awards and emails the badge
Fig. 1Where my work sat. 1Consent comes first; without it, steps 2to 6never run for that person.

01Overlay

The first concept asked for consent in a Carbon modal, right where people already were.

A 'Before you begin' modal on the w3publisher volunteering page, built from Carbon's modal and radio buttons, with two choices, consent or don't. Picking one dims the other, and Save is the only way forward.

Sign in The portal sign-in page: retirees register before logging in, employees sign in with single sign-on
Before you begin The 'Before you begin' consent modal over the volunteering page, with neither option selected
Consent selected The same modal with the consent option selected and the other option dimmed
Fig. 2The first concept: sign in, then consent in a modal on the page people already use. Retirees register first; employees use single sign-on.

02Pivot

The host platforms couldn't run a modal, so consent moved to its own page, with a link in from each site.

In review, Kristin Lindeberg, the CSR offering manager, confirmed that Benevity and w3publisher don't allow that kind of customisation. Together we mapped where a link could live, in Benevity's Quick Links menu and as a sign-up card on the w3publisher volunteering page.

Two ways into the consent page: a 'Volunteer badges' item in Benevity's Quick Links menu, and a sign-up card on the w3publisher volunteering page
Fig. 3Two links in, a Quick Links item on Benevity and a sign-up card on w3publisher.

03Page

The consent page stands on its own, built closely on Carbon.

The page keeps to the programme's leadspace, the policy, the two choices and Save. The client leaned towards photography, so we also explored echoing the banner they already use on Benevity. Staying on Carbon's grid sped up internal review and meant IBM's team could carry it on without me.

Way in
The portal home once signed in, with a Volunteer badges section: a short explanation, an Earn your badges button, and three badge tiers 1
Arriving The consent page with neither option selected
Consenting The consent page with the consent option selected
Fig. 4The flow for someone new, once signed in. 1Earn your badges is the way in, then the page, then a choice.
  1. 1
    Leadspace

    A blue banner with the programme's name, as a clear title before the policy text.

  2. 2
    Link

    Carbon Blue 60 on a light background, out to the programme's w3 page for the full policy.

  3. 3
    Notification

    Carbon's inline notification. If you've consented before, it gives the date, so nobody is asked twice.

  4. 4
    Two choices

    Consent or don't, as radio buttons, in the wording agreed with the client.

  5. 5
    Save

    The only action on the page.

Final
The final consent page: a blue IBM Community Engagement Program leadspace, the policy text with a link, a 'Consent has been provided' notification, two radio options and a Save button 1 2 3 4 5
Fig. 5The final page, for someone coming back after consenting.

What I learned

I was still getting to know Carbon when I built the overlay from its existing components and colours.

Checking it with the client before going further caught a platform limit early and led to a better page. Now I confirm key design decisions before building on them.