Yang 2020 - Volunteer Scorecard Design

THE LEADERBOARD EXPERIENCE

Phase #1 - Key Tasks

The campaign outlined 4 key tasks that the volunteer should be able to complete throughout the leaderboard experience.

1. View volunteer categories.

The campaign identified 4 main categories. Each category is broken into 2 subcategories.

2. Browse leaderboards.

Each subcategory contains a leaderboard, which will show the top 15 volunteers each week.

3. Share the results.

Top volunteers can see their name and the leaderboard header in the same frame for screenshot purposes.

4. Start volunteering.

The primary CTA’s redirect volunteers to a landing page where they can learn more and sign up.

Volunteer Categories:

Phone Banking
a. # of dial minutes
b. # of minutes connected
Text Banking
a. # of texts sent
b. # of text message conversations
Events
a. # of events hosted
b. # of events volunteered
Canvassing
a. # of doors knocked
b. # of face-to-face conversation

Before I started designing, I gathered inspiration for a basic framework. The goal was to keep the design simple, while maintaining the existing brand identity.

Design inspiration for leaderboard experience

PROTOTYPING PHASE #1

High-Fidelity Mockups

Multiple leaderboard options were mocked up for campaign review with variations in how the volunteer category might be represented (i.e., short description, icons, both?) The first option with a plain header was selected to keep things simple.

On the main leaderboard screen, each volunteer category is assigned a brand color with brand red reserved for CTA’s. Iconography is used to distinguish each subcategory.

On desktop and tablet, the assigned colors are applied to each corresponding side navigation item as well as its respective header and number fill.

Mobile mockups for 8 leaderboard options

High-fidelity mobile prototype of Volunteer Scorecard leaderboard experience

High-fidelity desktop mockups for the leaderboard experience

THE COMPETITIVE EXPERIENCE

Phase #2 - More Features

Building upon the basic framework from Phase #1, the campaign wanted to add features to increase competition in Phase #2.

1. See goals and progress bars

If applicable, a subcategory will have a weekly goal, a current count, and an accompanying progress bar.

2. View more leaderboards

Users can toggle between top individuals and top groups of volunteers.

Design Adjustments:

The home screen was restructured to accommodate the weekly goals and progress bars.
The leaderboard screens were updated to show high scores amongst groups of volunteers known as “Yang Gangs”

Design inspiration for leaderboard experience with progress bars

prototyping PHASE #2

More Mockups

The next version allows users to compare volunteer progress to a weekly goal. The goals give volunteers a number to work towards, while the tabs allow the campaign to acknowledge top individual volunteers as well as groups of volunteers.

Specific design changes:

Each category now contains a card for each subcategory.
Leaderboards for each subcategory now contain tabbed views.
If applicable, each leaderboard now shows a weekly progress bar.

High-fidelity desktop mockups of leaderboard experience with progress bars

IMPACT

Volunteer Scorecard Inspires Action

Although the team was only able to ship the first phase, the project still managed to spur excitement and friendly competition. Volunteers with high scores shared screenshots on social media, received praise, and encouraged others to get involved.

User sharing her phone banking leaderboard high score on Twitter

FUTURE OPPORTUNITIES

If We Had More Time...

Personalize the volunteer experience. Ideally users would be able to create an account and monitor their volunteer activity. Beyond that, being able collect badges and showcase achievements would incentivize users to volunteer more, compete to earn rewards, and gain recognition along the way.
Filter results by date. Showing only weekly scores ignores volunteers who have been active in the past. Being able to filter by date (today, this week, this month, all time) would show volunteers that their efforts over time have value in the game.
Show more than 15 high scores. Showing only the top 15 leaders ignores the majority of users who are new or have less time to volunteer within any given week. Showing more (if not all) scores would enable users to compete within their section of the scoreboard and work their way up.
Create a unique style guide. To fully embrace the idea of a gamified experience, it would be nice to create UI styles that resemble a game. The experience would be fun and immersive, and augment the campaign’s digital experience for young volunteers.