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
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:
The campaign identified 4 main categories. Each category is broken into 2 subcategories.
Top volunteers can see their name and the leaderboard header in the same frame for screenshot purposes.
Each subcategory contains a leaderboard, which will show the top 10-15 volunteers each week.
The primary CTA’s redirect volunteers to a landing page where they can learn more and sign up.
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.
Building upon Phase #1, the purpose was to augment the leaderboard experience by setting goals and visualizing progress. The user should be able to:
If applicable, a subcategory will have a weekly goal, a current count, and an accompanying progress bar.
Users can toggle between top individuals and top groups of volunteers.
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.