UX/UI Case Study: Promoting Volunteerism in New Hampshire
The New Hampshire economy relies on a young, productive workforce, but young people are leaving New Hampshire to pursue opportunities elsewhere. The Granite State Service Program plans to address this problem by promoting opportunities that exist across the state, and though these are primarily service-based, they can lead to educational and job opportunities through the program’s partners.
Young people are leaving New Hampshire to find opportunities elsewhere. How can we encourage them to take advantage of in-state opportunities instead?
This past term, I was a designer for a Digital Applied Learning and Innovation (DALI) Lab team that partnered with the Granite State Service Program to build a website for their mission. DALI is a research and development lab at Dartmouth College where students work in small teams to build technological solutions for partner projects. My team of six consisted of Sasha Rich (Project Manager), Lidia Balanovich, Barkin Cavdaroglu (Designers), Alejandro Lopez, and Adam McQuilkin (Developers), and we had ten weeks to help the Granite State Service Program incentivize young people to engage in opportunities in New Hampshire.
Our research showed us that…
1. We have three user groups: potential volunteers, organizations, admin account
Our core user group is the potential volunteers, who are mainly young adults interested in service opportunities to meet school requirements, boost their resumes, or engage in issues they care about. We also need to cater to organizations that will post volunteer opportunities, which is usually done by already-busy and often non-tech savvy volunteer coordinators. Lastly, there will be one administrator account that reviews site content for safety and general maintenance.
2. People are more likely to volunteer when they find an opportunity that fits their criteria
There is no centralized place to find volunteer opportunities, so a potential volunteer needs to check specific organization websites or rely on word-of-mouth to find positions. This means potential volunteers frequently don’t know about all the possibilities, and so they assume there isn’t any opportunity that fits their interests and needs. Providing volunteers with an aggregated list of opportunities can address this problem.
There is no centralized place to find volunteer opportunities.
Potential volunteers also have a lot to consider when looking for opportunities. What do I care about? How much time do I have to give? Is the organization close by? Volunteers are less likely to pursue an opportunity if it is outside of their criteria, so we need to allow users to filter the listings and easily see which ones fit their requirements.
3. We need to make volunteering feel fun, exciting, and meaningful
Young people need to feel motivated to volunteer! Sometimes motivation is external (graduation requirements, resume boosters) but the site can help boost internal motivation by …
- making service opportunities seem fun and enjoyable
- highlighting how meaningful and impactful the opportunities are
A database doesn’t inherently scream “youthful energy,” so how can we display information without losing a sense of joy? We also need to balance the “fun” aspects of the site with a sense of legitimacy to cater to the organizations that will post opportunities. They need to feel as though they are signing up for an established, important program.
The feel of the site needs to balance being youthful for potential volunteers and legitimate for organizations.
4. The easier it is, the more likely they’ll do it (for volunteers and organizations)
For both the volunteers looking for opportunities and the organizations posting opportunities, if it is too much work or appears overwhelming they will stop trying. We need to make signing up as an organization and searching as a volunteer as simple as possible. This includes making sure the “next step” is clear throughout every user flow.
Major Decisions
Key features: database of service opportunities, homepage, organization accounts, admin panel, highlight of non-service opportunities
To address all of our user groups, we need these features:
- Searchable database of service opportunities: This will allow potential volunteers to find opportunities by location, time commitment, skill level, and area of interest. These criteria were identified through user interviews.
- Homepage: This will establish the legitimacy of the program for organizations and create an engaging, fun presence for potential volunteers. We also decided to use this page to emphasize how simple finding opportunities is.
- Organization accounts: We decided to have organizations to create an account and provide them with a dashboard for post management. Account creation allows us to save the organization’s general information so it doesn’t have to be repeated every time a new post is made, and the dashboard layout keeps all the functionality in one place.
- Admin panel: Similarly, we decided on a dashboard layout for the admin panel so they can completely maintain the site from a single screen. For security purposes, we require the admin to approve organization accounts before they can post, and the admin is able to edit and delete posts made by any organization.
- Highlight of partners: This page showcases the program partners that provide educational and job opportunities after service. This contributes to the legitimate feel of the program and links back to the original purpose of showing opportunities that encourage young people to stay in New Hampshire.
Making the site feel fun but still official
To build a color profile that is both youthful and official, we decided to use a clean monochrome base palette with pops of bright colors. Earth-tone color palettes are overdone in New Hampshire due to the presence of Dartmouth college and the state’s association with the outdoors, so we avoided basing our colors on blues or greens. We chose saturated shades of pink and yellow that worked well in a gradient, then added warm grays to complement these main colors. Collectively, the palette gives the site an active, warm, and inviting feel.
We also chose a few graphic motifs to repeat across the site. These 90s-inspired squiggles and dots are fun details to keep informational sections graphically interesting, and the gradient keeps colors consistent throughout the entire website.
Guiding volunteers to opportunities that are a good fit
We provide volunteers with multiple methods of accessing the search page, including an option to search by category right in the hero section of the home screen.
Our user research indicated that cause is the aspect of service users are most motivated by, so we highlighted this on the homepage in a “What’s Your Passion” section.
We also included a step-by-step section that emphasizes how simple it is to get started volunteering. Listing the steps in 1–2–3 fashion like this shows volunteers that barriers between them and a volunteer position are minimal.
In the database itself, we provide filters that we deemed most useful from our user interviews. The icons on the left side of the opportunity cards give users a quick way of deciding if the position fits their criteria, so they can determine their initial interest without needing to dive into the full text of the post.
Collectively, these choices provide volunteers with multiple funnels to the database and plenty of routes to finding a position that fits their needs.
Minimizing burden on organizations and the admin account
To make the organizations’ and admin’s responsibilities as simple as possible, we contained all their functionality within a single dashboard. Once they log in, any task they need to complete is only a click away. We allow organizations to set global information that applies to all posts (i.e. organization name, location, logo) so the user does not waste time re-entering this information for every post, and we prompt the user to enter an expiration date for a post so it is automatically deleted once the position has ended. We also require responsibilities for positions to be entered in bullet-point format, which encourages organizations to keep their posting quick and to-the-point.
The administrator ensures the site is not being spammed or used for inappropriate content, so their dashboard is focused on providing information they can review at a glance. We make heavy use of color and icons on these pages to make the purpose of call-to-actions clear. Approve buttons are green, delete buttons are red, and icons indicate which profiles still need to be reviewed. Though we depart from our color scheme a bit, we actively chose to make this sacrifice in favor of accessibility and clarity.
Feature Outcomes
Homepage
Our final homepage design captures our four initial user research realizations. The colors and motifs create a youthful feel to attract potential volunteers, but the informational sections and partner highlights show that this is an official program to assuage posting organizations. We offer users multiple ways to see opportunities that fit their interests, and the step-by-step shows just how easy this process is.
Organization Accounts and Admin Panel
Our last iterations brought color into the admin and organization panels and included finishing touches that increased usability, like adding “help” icons and explanatory text. We kept the clickable-card-to-modal interactions consistent throughout these pages and designed hover states to make these interactions clear.
Database of Opportunities
We chose to remove the expand interaction on the opportunity cards in the database in favor of displaying all information at once. Since the cards already contain a summary through icons on the left side, another layer of abbreviation before seeing the full set of information seemed like too much of a barrier. We also settled on a white sidebar rather than the original dark gray one, which made the page more open and inviting.
Highlight of Non-Service Opportunities
We kept this page highly visual, since the purpose of the page is to give users a quick overview of program partners. Using the logos for the partner organizations allows viewers to find specific partners at a glance, and cards link to the organizations’ websites for consistent interactions. To prevent the number of partners from becoming overwhelming, the top icons are clickable to toggle between educational and business partners.
Summary
Future Directions
If I were to revisit this project, I’d like to revamp the hierarchy of functionality on the organization and admin panels. We had to add a section to the admin panel last-minute, which caused the final designs to be cluttered. Also, we made aesthetic sacrifices for ease-of-use (like button color choices and modal interactions), and I think given more time we could’ve found a better balance between the two. I’d like to restructure the admin panel to separate the post, organization, and partner management into separate tabs like in the example layout below. Though this would sacrifice the completely flat design, I think this would make the layout cleaner which would ease the user in figuring out how to accomplish the task at hand.
There is also plenty of work to be done in designing additional features that would increase usability but were out of the scope of this project. I’d like to add a way for users to save or star opportunities they are interested in to aid in narrowing-down the search results.
Designing a contact method within the site would also be a cleaner way of connecting volunteers to organizations, since right now all contact options (email, link to application, phone number) are external. For safety purposes, it would also be smart to add in a reporting feature to notify the admin account when someone finds a fishy post. The list could go on.
Final Thoughts
This project was great practice in balancing competing priorities in a design. We had three completely different user sets with different goals that we needed to accommodate, and many of our choices revolved around the tradeoffs between design, functionality, and accessibility. There were a few times along the way where one set of priorities would takeover and we’d need to backtrack to keep other users in mind.
This project was great practice in balancing competing priorities in a design.
Ultimately, we are excited to see the site go live at servelearneearn.org later this summer and hope that it furthers the Granite State Service Program’s mission to encourage young people to take advantage of service opportunities in New Hampshire.
Acknowledgements
Thank you to my DALI Lab team — Sasha Rich (Project Manager), Lidia Balanovich, Barkin Cavdaroglu (Designers), Alejandro Lopez, and Adam McQuilkin (Developers) — for creating this project with me. We’d also like to thank our partners, Tyler Baum and NH Representative Matt Wilhelm, for bringing this project to the lab. Special thanks to Professor Lorie Loeb for her invaluable mentorship and guidance throughout this project.
