Friends of Andrew Yang

Members of the Volunteer Tech/Data team worked with Friends of Andrew Yang to design and develop the Volunteer Scorecard. The goal was to increase volunteer participation by allowing volunteers to compete across various categories.

Yang 2020 presidential campaign logo
Using best practices in UX/UI design, my role was to design the structure and UI of the gamified volunteer experience.
Various campaign staff, project manager, UX/UI designer (me), 2-3 developers
High-fidelity desktop and mobile mockups for 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:
  1. Phone Banking
    a. # of dial minutes
    b. # of minutes connected
  2. Text Banking
    a. # of texts sent
    b. # of text message conversations
  3. Events
    a. # of events hosted
    b. # of events volunteered
  4. 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

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

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 mobile prototype of Volunteer Scorecard leaderboard experience
High-fidelity desktop mockups of leaderboard experience with progress bars

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

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.