Voluntu

Helping students connect with volunteer organizations

Role:

User Research

UX/UI Design

Product Management

Project Type:

Internship at

Ardent Labs

Timeline:

March 2019 -

August 2019

Team: 

James Li

Max Zhang

Jiaxiang Wang

Overview

As a Product Design Intern for Ardent Labs, I was tasked with redesigning their Voluntu web application. I was solely responsible for strategizing, researching, and designing the new app. After the first couple months as the designer, I switched to a primarily product manager role where I oversaw the development of the MVP. Throughout these six months I worked closely with the product owner Dr. Li and the developers Max Zhang and Jiaxiang Wang to carry out this project.

What is Voluntu?

Voluntu is a web app that helps students record their service hours, provides them with new volunteer opportunities, and helps non-profit organizations manage their volunteers. The service is currently being used by volunteer organizations under the umbrella organization S.T.E.A.M. for All with plans to expand throughout the OC area in the future. 

Steam For All Blue Background.png

The Problem

How might we build an MVP to increase functionality and usability without alienating its current users?

The old Voluntu was created as a proof-of-concept social impact project to bridge the gap between students and volunteer organizations but it suffered from an  array of usability issues and inconsistent design patterns. Since the product had already been validated and integrated into a number of small volunteer organizations around the OC area, the product owner Dr. Li wanted to push for a new MVP with updated design and functionality while keeping a level of familiarity that current users would be accustomed to. My job was to envision this idea and take it from conception to completion.

Old Voluntu Homepage

My Process

I went through a series of research, analysis, ideation, and prototyping in order to create a web application with key features essential to the minimum viable product that satisfied early adopters and aligned with business goals. At each stage in the design process, I presented my findings and any product ideas I had to the product owner and stakeholders to gather feedback.

Competitive Analysis

After familiarizing myself with Voluntu, I analyzed similar products in the same market space to understand who their users were, what their features were, and why users liked/disliked those platforms. Below is a summary of my findings.

Track It Forward

  • Similar to Voluntu in terms of features and level of simplicity

  • Confusing CTAs and navigation

  • Has a companion mobile app

Volgistics

  • Outdated design and loaded with features making it hard to navigate

  • Has a much larger scope and is aimed towards larger organizations

Click Time

  • Similar to Voluntu in features

  • Has a fully customizable dashboard personalized towards each user

User Research

Once I had a good understanding of the competitive landscape, I did a deeper dive into the users. I conducted interviews with six participants (both users and non-users of Voluntu) over the course of a few days to gather insights around why they volunteer, their frustrations with it, and how technology affects their volunteering. 

The goal with these interviews was to discover key user wants, needs, pain points, and any gaps in the customer journey that could be filled.

Key Findings

THREE MAIN TYPES OF USERS

  1. The Completionist: These students are competitive by nature. Their main goals include earning a Presidential Volunteer Service Award and improving their odds of getting into a prestigious college. They tend to regularly check the app to find easy volunteer opportunities around the area.
     

  2. The Hobbyist: These students simply enjoy volunteering. They love it as a hobby and take pleasure in helping their community. Hobbyists generally maintain one or two volunteering activities over a long period of time while occasionally exploring others.
     

  3. The Compliant: These students don't care much for volunteering - they are forced into volunteering by their parents. They prefer to spend as little time as possible using the app itself as long as it gets the job done quickly.

"THE APP LOOKS AND FEELS TOO PLAIN"

  • There is a lot of unused screen space that could be used for things like displaying more information or including additional features.

  • Users wanted graphs and charts to be able to visualize their hours volunteered and PVSA progression.

"FEATURES ARE NOT WHERE I EXPECT THEM TO BE"

  • Important functionality such as recording hours takes two clicks to access.

  • Users almost never use the two main buttons on the home page: "Edit Personal Profile" and "Join Organizations".

Personas

Using the data gathered from the user interviews, I created three personas that best represented each of the three main users types: the completionists, the hobbyists, and the compliants.

Defining the MVP

The last step before beginning any design work was defining the features of the MVP. The product owner and I discussed what features needed to be prioritized by taking into consideration the business requirements, user wants and needs, and development time. We put an emphasis on features that would satisfy our personas. We concluded the meeting by locking in these four main features in order of importance: 

KEY FEATURES

  1. Recording hours

  2. Viewing previous hours (graph and table)

  3. PVSA* progress bar

  4. Discovering new organizations and volunteer opportunities

*Presidential Volunteer Service Award - a prestigious award sought after by many users

Ideating

Now it's time to put pen to paper. I sketched out wireframes exploring different versions of each feature. I first experimented with the placement of each feature within the app and then further explored further details of each individual element.

Lo-Fi Mockups

I converged my ideas down into a set of screens that would best serve its users and then digitalized them using Figma. I continuously received feedback from my team and used them to refine and iterate my low-fidelity mockups.

Landing

Dashboard

Organizations

Events

Profile

Final Designs

Once we landed on a version of the wireframes we were all satisfied with, I added color and styling to flesh out the final high-fidelity prototype.

Dashboard

Upon logging in, users are greeted to a dashboard displaying information such as their recent volunteer hours, upcoming events, and the progress towards their Presidential Volunteer Service Award.

Logging Hours

Students record their volunteer hours based on the organization, date, amount of time, activity type, and supervisor.

Finding Organizations

Users can learn more about local organizations to volunteer for on this discover page. Users can join organizations to receive updates about their events and volunteer for them.

Discovering Events

Users can search and find new opportunities to volunteer for. Events are displayed in categories such as saved, recommended, and trending. More events and categories are displayed as the user scrolls down.

Design & Management

PLAYING TWO ROLES

Since my team was working on an MVP and not a fully-fledged product, we had to strike a balance between making the app not only beautiful and functional but also efficient for developers to implement. The biggest factor restricting us was time - and sometimes this meant changing the design in favor of easier development.

As the product manager for this project as well, I ran weekly to bi-weekly sprints with my engineering team to oversee the app's progression as well as set goals for upcoming sprints. I used Jira to document and visualize each story's progress.

Closing Thoughts

TAKEAWAYS

Time and money: 

It's not always feasible to go through every user research method. In most cases, tradeoffs have to be made to conduct the methods most time efficient, cost efficient, and useful to the project. It is important to plan out which methods to pursue early on.

Consider the business side: 

While it is definitely important to be user-centered, the product first exists within a business which dictates the scope of the design and affects how it is created.

THANK YOU'S

Thanks to all the amazing people I got to meet and work with during my time as an intern for Ardent Labs. They've helped me grow not only as a designer but also as a person and I'll forever appreciate this experience with them. Special thanks to Yen Pham for being my design buddy at work and to Dr. Li for the mentorship and for trusting me to lead this project

Other case studies

Line  Buster.png

Paciolan Line Buster

Stack Overflow Forum

© Justin Nguyen