DemocracyLab

DemocracyLab

DemocracyLab

Streamlined management of volunteer applications for nonprofit organizations

Streamlined management of volunteer applications for nonprofit organizations

Streamlined management of volunteer applications for nonprofit organizations

Skills

UX Design

UI Design

User Research

Team

3 UX Designers (including myself)

Product Manager

Dev Team

Executive Director

Duration

6 months

Tool

Figma

Trello

Overview

DemocracyLab is a platform that connects nonprofits with skilled volunteers. As a UX Designer, I designed the Applications tab to help Project Owners efficiently review and manage volunteer applications. This tab—along with other key tabs—formed the Project Management Tool (PMT), improving usability and engagement on the platform.

Role

I led everything about the Applications tab, from research to design, while also serving as the bridge between the design and development teams. As the first designer on the PMT team, I organized design meetings, managed tasks, and guided team members throughout design sessions.

Solution Highlights

Volunteer approval/rejection/contact (Desktop)

(1) Volunteer approval/rejection/contact (Desktop)

(Mobile)

(2) (Mobile)

(1) Volunteer approval/rejection/contact (Desktop)

(2) (Mobile)

Results + Impacts

100% of key stakeholders…:

Provided positive feedback and agreed this new feature would improve volunteer application management efficiency!

100% of participants from moderated usability tests…:

Answered they would prefer to use this new Application tab over the current feature!

Anticipated impacts 💭 🎯

More effective and efficient volunteer application management

⭐ Increase in the # of approved & active volunteers ⭐

⭐ Increase in the # of projects ⭐

INITIAL PROBLEM DISCOVERY

Uncovering the problem with the Executive Director

Uncovering the problem with the Executive Director

Uncovering the problem with the Executive Director

Our team met with DemocracyLab’s Executive Director, Mark, who is both our client and a Project Owner using the platform. He highlighted issues with the navigation and flow of project pages, making it difficult to manage volunteer applications and projects. Citing website analytics and his own experience, he emphasized the need for a Project Management Tool (PMT) to streamline these processes. Below are the current screens:

Project page (Overview)

"Recent Activity" (Project progress tracking)

"Team" (Volunteer list)

"About Me" (User profile)

Project page (Overview)

"Recent Activity" (Project progress tracking)

"Team" (Volunteer list)

"About Me" (User profile)

Goals

After several meetings with Mark and the PM team, we set the following goals for our PMT project, which we hope to achieve in 1 month after the launch of the PMT feature. Increase the number of… :

USER RESEARCH & PAIN POINTS

Understanding our users through research & data

Understanding our users through research & data

Understanding our users through research & data

Initial user research 🔍

We collaborated with the UX Research team to conduct interviews and surveys with Project Owners to identify their pain points. We explored their experiences with volunteer application reviews, the accept/reject process, project management, and team coordination to inform our design decisions.

Leveraging data for insights 📈

Beyond user research, we analyzed website analytics and statistical data to guide our design decisions. This included user and project counts, site traffic, page views, and platform usage to better understand user behavior.

Initial user research 🔍

We collaborated with the UX Research team to conduct interviews and surveys with Project Owners to identify their pain points. We explored their experiences with volunteer application reviews, the accept/reject process, project management, and team coordination to inform our design decisions.

Leveraging data for insights 📈

Beyond user research, we analyzed website analytics and statistical data to guide our design decisions. This included user and project counts, site traffic, page views, and platform usage to better understand user behavior.

Identifying key pain points from research

After synthesizing the research findings, we categorized them to highlight the most frequently mentioned pain points from Project Owners. These were the 4 main issues:

Project owners struggle to…

  1. Track and analyze project progress & statistical data 📊

Currently, DemocracyLab does not have this feature at all.

  1. Track volunteer contributions and activities 👥

Current "Recent Activity" tab only displays the recent updates without any detailed information.

  1. Manage volunteer applications 📝

Currently, users have to scroll down the "Recent Volunteer Applications" endlessly.

  1. Review volunteer applications 🔎

Currently, users cannot check applicants' profile information.

HMW

How Might We questions

How Might We questions

How Might We questions

After analyzing users' main pain points, we brainstormed and formulated How Might We questions to address them. We grouped related questions into three themes and assigned each team member to tackle one set. I focused on solving pain points related to volunteer application management.:

How Might We help project owners to efficiently…

Review volunteer applications

Approve/Reject/Contact (individual/multiple) volunteers

Manage Pending/Approved/Rejected/Expired applications

Organize/Filter applications by roles

Creating persona & user journey map to empathize with users

Before ideating features to address the HMW questions, I created a persona (Jane) as a reference throughout the design process. I also mapped out Jane’s user journey in the current volunteer application management flow to better empathize with users and understand their experience.

Persona 👤

Journey map 🗺️

Persona 👤

Journey map 🗺️

IDEATE

Establishing core features & flows

Establishing core features & flows

Establishing core features & flows

4 Key tabs (My responsibility: Applications) 💡

After several brainstorming sessions, our team decided to create four key tabs within the Project Management Tool: Overview, Analytics, Team, and Applications. Each tab addressed a different set of HMW questions. I was responsible for designing the Applications tab to solve users' pain points related to volunteer application management.

Product requirements ✅

We created a specification sheet outlining the features and functionalities required for each tab’s design.

Ideation sketches ✏️

Explored various ideas for the core functionalities.

User flow 📍

Visualized & documented the navigation. Goal: Ensure the flow is clear without any confusing / unnecessary steps.

4 Key tabs (My responsibility: Applications) 💡

After several brainstorming sessions, our team decided to create four key tabs within the Project Management Tool: Overview, Analytics, Team, and Applications. Each tab addressed a different set of HMW questions. I was responsible for designing the Applications tab to solve users' pain points related to volunteer application management.

Product requirements ✅

We created a specification sheet outlining the features and functionalities required for each tab’s design.

Explored various ideas for the core functionalities.

Ideation sketches ✏️

Visualized & documented the navigation. Goal: Ensure the flow is clear without any confusing / unnecessary steps.

User flow 📍

DESIGN, TEST, & ITERATE

Low & mid-fidelity prototypes -> Usability tests -> Iterations

Low & mid-fidelity prototypes -> Usability tests -> Iterations

Low & mid-fidelity prototypes -> Usability tests -> Iterations

Low-fidelity -> Mid-fidelity

Using the user flow as a guide, I moved to Figma to create digital prototypes, starting with low-fidelity and iterating to mid-fidelity.

[Click through! 👆] 1st Usability tests (mid-fidelity) -> Iterations

After completing the mid-fidelity prototype, I conducted usability testing to assess key features and ensure the design addressed my HMW questions. Here are the two main changes I made after observing users' pain points:

Problem: Users couldn’t find the Review and Contact buttons on mobile screens.

Solution: I removed the ellipses and replaced them with visible CTA buttons.

1

2

[Click through! 👆] 1st Usability tests (mid-fidelity) -> Iterations

After completing the mid-fidelity prototype, I conducted usability testing to assess key features and ensure the design addressed my HMW questions. Here are the two main changes I made after observing users' pain points:

Problem: Users couldn’t find the Review and Contact buttons on mobile screens.

Solution: I removed the ellipses and replaced them with visible CTA buttons.

1

2

[Click through! 👆] 1st Usability tests (mid-fidelity) -> Iterations

After completing the mid-fidelity prototype, I conducted usability testing to assess key features and ensure the design addressed my HMW questions. Here are the two main changes I made after observing users' pain points:

Problem: Users couldn’t find the Review and Contact buttons on mobile screens.

Solution: I removed the ellipses and replaced them with visible CTA buttons.

1

2

[Click through! 👆] 1st Usability tests (mid-fidelity) -> Iterations

After completing the mid-fidelity prototype, I conducted usability testing to assess key features and ensure the design addressed my HMW questions. Here are the two main changes I made after observing users' pain points:

Problem: Users couldn’t find the Review and Contact buttons on mobile screens.

Solution: I removed the ellipses and replaced them with visible CTA buttons.

1

2

[Click through! 👆] 1st Usability tests (mid-fidelity) -> Iterations

After completing the mid-fidelity prototype, I conducted usability testing to assess key features and ensure the design addressed my HMW questions. Here are the two main changes I made after observing users' pain points:

Problem: Users couldn’t find the Review and Contact buttons on mobile screens.

Solution: I removed the ellipses and replaced them with visible CTA buttons.

1

2

Low-fidelity -> Mid-fidelity

Using the user flow as a guide, I moved to Figma to create digital prototypes, starting with low-fidelity and iterating to mid-fidelity.

DESIGN

High-fidelity prototypes, Design system, & Accessibility

High-fidelity prototypes, Design system, & Accessibility

High-fidelity prototypes, Design system, & Accessibility

High-fidelity prototypes 🖥️

After iterations, I moved on to the high-fidelity prototype. I added more details, interactions, and animations, ensuring everything was ready for the second round of usability testing.

Design system 🎨

This is the style guide I created for the Applications tab. I designed all the components myself—except for the color themes, font styles, and icon sets, which were shared among our team.

Accessibility ♿️

While creating components, I ensured accessibility by considering font sizes (minimum 16px), touch targets, color contrast ratio (WCAG), button sizes, and many more.

High-fidelity prototypes 🖥️

After iterations, I moved on to the high-fidelity prototype. I added more details, interactions, and animations, ensuring everything was ready for the second round of usability testing.

Design system 🎨

This is the style guide I created for the Applications tab. I designed all the components myself—except for the color themes, font styles, and icon sets, which were shared among our team.

Accessibility ♿️

While creating components, I ensured accessibility by considering font sizes (minimum 16px), touch targets, color contrast ratio (WCAG), button sizes, and many more.

MORE TESTS & ITERATIONS

More usability tests -> More Iterations

More usability tests -> More Iterations

More usability tests -> More Iterations

Moderated usability tests

UserTesting.com

Moderated usability tests

UserTesting.com

[Click through! 👆] 2nd Usability tests (high-fidelity) -> Iterations

With the high-fidelity prototype, I conducted additional usability tests with a new set of users to uncover pain points in the Applications tab. I used their feedback to further improve the design.

Problem: Users wanted to select multiple applications on mobile screens.

  • Note: 90% of users manage applications on desktop.

Solution: I enabled users to select multiple applications on mobile screens.

  • Note: Supporting both type of users—extreme and average.

1

2

3

[Click through! 👆] 2nd Usability tests (high-fidelity) -> Iterations

With the high-fidelity prototype, I conducted additional usability tests with a new set of users to uncover pain points in the Applications tab. I used their feedback to further improve the design.

Problem: Users wanted to select multiple applications on mobile screens.

  • Note: 90% of users manage applications on desktop.

Solution: I enabled users to select multiple applications on mobile screens.

  • Note: Supporting both type of users—extreme and average.

1

2

3

[Click through! 👆] 2nd Usability tests (high-fidelity) -> Iterations

With the high-fidelity prototype, I conducted additional usability tests with a new set of users to uncover pain points in the Applications tab. I used their feedback to further improve the design.

Problem: Users wanted to select multiple applications on mobile screens.

  • Note: 90% of users manage applications on desktop.

Solution: I enabled users to select multiple applications on mobile screens.

  • Note: Supporting both type of users—extreme and average.

1

2

3

[Click through! 👆] 2nd Usability tests (high-fidelity) -> Iterations

With the high-fidelity prototype, I conducted additional usability tests with a new set of users to uncover pain points in the Applications tab. I used their feedback to further improve the design.

Problem: Users wanted to select multiple applications on mobile screens.

  • Note: 90% of users manage applications on desktop.

Solution: I enabled users to select multiple applications on mobile screens.

  • Note: Supporting both type of users—extreme and average.

1

2

3

[Click through! 👆] 2nd Usability tests (high-fidelity) -> Iterations

With the high-fidelity prototype, I conducted additional usability tests with a new set of users to uncover pain points in the Applications tab. I used their feedback to further improve the design.

Problem: Users wanted to select multiple applications on mobile screens.

  • Note: 90% of users manage applications on desktop.

Solution: I enabled users to select multiple applications on mobile screens.

  • Note: Supporting both type of users—extreme and average.

1

2

3

FINAL DESIGNS & RESULTS

Final designs & Solutions

Final designs & Solutions

Final designs & Solutions

Volunteer approval/rejection/contact (Desktop)

(1) Volunteer approval/rejection/contact (Desktop)

(Mobile)

(2) (Mobile)

(1) Volunteer approval/rejection/contact (Desktop)

(2) (Mobile)

Volunteer approval/rejection/contact (Desktop)

(Mobile)

Satisfaction from the client, internal teams, & users.

Satisfaction from the client, internal teams, & users.

Satisfaction from the client, internal teams, & users.

Our team delivered the final presentation to the DemocracyLab stakeholders, including the Executive Director and team leads from PM, Dev, and other Design teams. They were impressed with our prototypes and design processes and excited to see the feature implemented on the live site!


Anticipated impact:

In line with our initial objectives, stakeholders agreed that this feature aligns with our goal of expanding the volunteer community and project offerings. We anticipate a significant increase in the number of active volunteers and projects.

100% of key stakeholders & usability test participants gave positive feedback and expressed a clear preference for my new design. 🎉

Excited for the launch! Much prefer this new feature design vs. old application management system.

Anticipated impacts 💭 🎯

More effective and efficient volunteer application management

⭐ Increase in the # of approved & active volunteers ⭐

⭐ Increase in the # of projects ⭐

REFLECTION

Working cross-functionally -> Growing & Learning.

Working cross-functionally -> Growing & Learning.

Working cross-functionally -> Growing & Learning.

Learning opportunity

This project was my first experience collaborating with cross-functional team members, making it an incredibly valuable learning opportunity. I gained skills not only in project management but also in many other areas.

Valuable feedback

Although our team members each focused on one feature, we supported each other when challenges arose and shared valuable design feedback.

Client satisfaction + Next step

The client (Executive Director of DemocracyLab) was satisfied with our work! We handed the project off to the developers and are excited to see the PMT feature implemented and live on the site.

FastExpert

FastExpert

FastExpert

FastExpert

FastExpert

FastExpert

FastExpert

FastExpert

FastExpert

FastExpert

Let's start creating together ✶

Let's start creating together ✶

Let's start creating together ✶

Let's start creating together ✶

Let's start creating together ✶