FRIENDS OF ANDREW YANG

Increasing volunteer participation through a gamified volunteer experience.
OVERVIEW

About the Project

Members of the Volunteer Tech/Data team worked with Friends of Andrew Yang to design and develop the Volunteer Scorecard. The key features and project specs were determined by the campaign.

The goal was to increase participation by allowing volunteers to compete across various categories. Using best practices in UX/UI design, my role was to design the structure and UI of the gamified volunteer experience.

Note: To comply with my non-disclosure agreement, I have omitted confidential information. Details have been simplified and additional thoughts are my own.

Team: Various campaign staff, project manager, UX/UI designer (me), 2-3 developers
Role: UX/UI Designer
Tools: Figma

THE LEADERBOARD EXPERIENCE

Phase #1 - Key Features & Design Inspiration

The goal is to create a simple web experience to browse a set of leaderboards with a mobile-first approach. The user should be able to:

1. See volunteer categories

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

3. Share the results

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

2. View leaderboards

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

4. Start volunteering

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

Design inspiration for leaderboard experience
prototyping PHASE #1

Designing High-Fidelity Mockups

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 colors are applied to each active tab and its respective header and number fill.

AREAS OF CONCERN: The white text over the brand gold does not meet accessibility guidelines for color contrast.

High-fidelity mobile prototype of Volunteer Scorecard leaderboard experience
High-fidelity desktop mockups of leaderboard experience
THE competitiVE EXPERIENCE

Phase #2 - Key Features & Iteration

Building upon Phase #1, the purpose was to augment the leaderboard experience by setting goals and visualizing progress. The user should be able to:

1. See goals and progress bars

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

Challenges:

  1. The new features require a complete redesign of the “home” page in order to accommodate the additional information.
  2. Not all categories will have a goal (and therefore no progress bar), so there will need to be an alternate UI solution.

2. View more leaderboards

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

Design inspiration for leaderboard experience with progress bars
prototyping PHASE #2

Designing High-Fidelity Mockups

  • Each category contains a card for each subcategory.
  • Leaderboards for each subcategory contain tabbed views.
  • If applicable, each leaderboard shows a weekly progress bar.
High-fidelity mobile prototype of Volunteer Scorecard leaderboard experience with progress bars
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

PREVIOUS
Project: Hollywood Offices
Helping the content creation industry find office space
NEXT
Case Study: Lonely Whale
Helping the content creation industry find office space