Volunteering Interface

UI/UX Design and Research / Front-End

College Volunteering Interface


The College Volunteering Interface is an interface for Northwestern college students to volunteer in their local community ― the main project for my human computer interaction class. Please view one of the user representative tasks below.

Role ― UI/UX Designer/Researcher

I worked as the lead on the UX Design and Research, running all the tests with our users. I also conducted and transcribed interviews with users. From our user insights, I sketched interfaces and created paper prototypes for testing. Finally, I led the front-end development of the web pages to demonstrate our representative tasks. The front-end was written using Bootstrap 3, Font Awesome, jQuery, and Google Maps API.


Da Yeon





For the class, we had to tackle an area under the umbrella of civic engagement. We decided to focus on getting more college students to volunteer in order to increase the impact college students have on their local community.

User Insights

The following are some quotes from our user interviews with Northwestern college students:

"I would much rather work at a hospital because I'm a premed."

"Volunteering is not even on the radar. I'm too busy."

"I wouldn't volunteer to make friends ― I would do something else.

The main insight is that college students at Northwestern are busy and will participate in volunteer opportunities that are either interest or career related. Many students also do not consider volunteering a social activity. Our design focuses on matching a users with volunteering opportunities based on their interests, so they will actually do it.

Persona Generation

We generated 3 personas for our project ― a student who regularly volunteers, but wants to do something closer to her interest, a student who has never volunteered and is looking to do something he enjoys, and a Northwestern staff member who is looking for volunteers for her organization. The goal here was to get a personas that represented the key user groups for our application.

Sketches and Paper Prototypes

My team and I drew sketches of interfaces for our personas' representative tasks. From our sketches, we made paper prototypes to test with our user group. I ran all the paper prototype tests with 4 users. The major insights were clarifying interface affordances for users and adding some more interfaces for user inputs we did not consider before. Users did like the ability to chose their own interests, which was the major design argument in the final interface. Please watch all our paper prototyping testing and testing synthesis here if you are interested.

Initial Sketch

Initial Sketch

Paper Prototype Testing

Paper Prototype Testing (Gif)

Final Interface

To address the main user need to volunteer at activities that are either interest or career related, we created a simple interface in which they pick categories they would like to volunteer in (below). The categories were broad, but also covered career options such as "Healthcare" and "Justice".

The Final Interface can be viewed at http://voluvteer.github.io/. The website has three representative tasks ― please try to sign up as volunteer with an email address.

Final Interface

Final Interface

Next Steps

We have been in touch with a leader from Northwestern Community Development Corps, Northwestern's volunteering and community service club ( we did user testing with her). She really liked our final interface, and was interested in implementing the interface at a university wide level.