Democracy Lab Badges
DemocracyLab helps tech for good projects launch by connecting skilled volunteers to projects that need them.
The Problem:
DemocracyLab volunteers needed a way to track the progression of their goals, stay motivated and incentivized to log their volunteer hours, and stay on at DemocracyLab for longer than a month or two.
Tools used:
Figma
Google Forms
Slack
Google Meet
Draw.io
The Goal:
The design team was tasked with creating badges, reminders and other incentives to gamify the DemocracyLab experience and help volunteers stay motivated.
Role:
UX Designer
UX Researcher
Scope:
6 months
User Surveys
As the ideas we had at the beginning were based on assumptions, we needed some research to support our design decisions.
I suggested we create a survey to get feedback from volunteers.
After each coming up with potential survey questions, the design team met for a 2-hour Google Meet call during which time we edited and narrowed down our ideas so we had the best questions we could.
Research Goals:
Understand the user’s motivation for volunteering with DemocracyLab
Understand the user’s motivation in general
Understand how DemocracyLab could support users in their goals
Research Findings:
The participants’ primary motivator for volunteering was to gain work experience. Some of the secondary and tertiary motivators were very similar (to add to my resumé)
The participants’ primary motivator to get work done, in general, was to challenge themselves.
Participants said networking was a large reason why they were volunteering with DemocracyLab.
User Epics and Stories
With the research findings we had gathered from the surveys, we began crafting user epics, to get a better feel for our users’ needs.
This helped us get more specific, to write some user stories and then group those in relevant categories that would help us think of features to design for our users.
We then used an affinity map to group stories based on categories.
From here, we worked to write more specific user stories.
User Flows
Shruti and I both worked on some user flows, next. This helped us conceptualize the process users would go through from logging into their accounts, to posting their badges on social media.
“As a volunteer, I want consistent work on a weekly basis, so that I can gain work experience.”
Beginning: Log in
“As a volunteer, I want to choose my work projects, so that I can contribute to a cause I care about.”
“As a volunteer, I want a way to connect with other volunteers, so that I can build my network.”
“As a volunteer, I want to log my hours, so that I can get recognition for my accomplishments.”
Beginning: Log in
“As a volunteer, I want to nominate my fellow volunteers for badges, so they can receive recognition for their accomplishments.”
End: Fellow volunteer nominated for a badge
“As a volunteer, I want a share button, so that I can share my badges/accomplishments with my network on LinkedIn and Twitter.”
Beginning: Log in
End: Display of hours logged
End: Badge shared on social media platform.
Badges
A big part of this process was deciding as a team what the badges would represent and what would be the metrics to earn those badges.
Badges for…
number of hours logged
a completed hackathon
number of volunteer activity reports submitted
number of months on a project
a nominated skill
For a MVP, we narrowed the ideas down to 4:
Hours loggedVolunteer
Activity Reports Submitted
Months on a project
Hackathons
Once a badge criteria is met, a volunteer could continue to log hours, or submit reports to earn the next badge in the series (50 hours, 100 hours, 200 hours, etcetera).
Volunteer Dashboard
While Gregor, the design lead, worked on designing the badges themselves, another volunteer and I designed the volunteer dashboard.
How would the badges appear on the platform?
How would these be viewed by the volunteer when logged in, and by others, like recruiters (the outside view)?
How would the volunteer track their progress toward goals?
As we were designing the dashboard, I decided to simplify the design to prevent cognitive overload.
The volunteer didn’t need to see all activity all at once, so I made each week of activity collapsable.
I aimed to create a system where volunteers could track their activity progress (e.g., reporting hours) and view earned badges for that progress. However, as badge designs and earning methods evolved, so did the dashboard design.
Working off each other’s ideas, Philip and I created different aspects of the dashboard.
He came up with the bar graph, showing hours earned each week, relative to the goals of that volunteer. I added a feature to make that goal adjustable.
I also came up with the progress bars leading to the volunteer’s next badge.
A:
C:
Badge Progress
The process involved a lot of designing various ways progress toward badges could be shown, and then the design team meeting and discussing those design ideas.
We came up with three solid ideas and decided to create a preference test.
We didn’t want to let our own biases influence what we chose as the best design.
B:
Preference Test
32 participants responded to our preference test, and Option C was the most popular.
Finished Badges
From the preference test, we learned that people preferred the simplicity of option C badges. To convey the badge information clearly, we added numbers and simple wording to the badges.
For future iterations, we aimed for a gradual increase in difficulty for each badge, making them more valuable and earned. To balance this, we ensured enough badges to keep users engaged and came up with golden badges for significant milestones.
Challenge:
Everyone on the project was a volunteer, and so it was challenging to find a consistent commitment. Throughout the course of this project, a few volunteers left the project and a few new ones joined.
Retrospective
Solution:
Gregor and I stayed on the project through the entirety. Gregor was with DemocracyLab for years before, so this provided continuity to the project.
Challenge:
We had lots of designers working on the project, but few developers. So we often found ourselves waiting for the developers to implement our designs.
Solution:
While we waited for developers to implement designs, we continued working on the next stage of the project. And though there were lots of designers, we managed to find assignments for everyone and our differing viewpoints contributed to strengthen our collective ideas.