Screen Shot 2020-09-15 at 5.32.35 PM.png

University of Michigan | School of Information User Experience Capstone Project

Honorable Mention | Zell Lurie Institute Innovation and Entrepreneurship Award | 2020 Spring Virtual Student Project Exposition

About

BackPac is a mobile application that allows users to easily find local volunteer opportunities in their neighborhood.

 

The Partner Application allows Volunteer Coordinator's the opportunity to on-board their non-profit organization to post opportunities and gain exposure for outreach events. 

My challenge was to create an experience that was intuitive, accounted for the a Volunteer Coordinator's needs, kept them engaged and confident that BackPac was the best platform for marketing outreach events and reaching the widest volunteer audience. 

Project Goals

Create a mobile design solution that provides a sustainable and intuitive experience for Volunteer Coordinators. 

Recruit current Volunteer Coordinators from local non-profit organizations to test and provide feedback about the overall usability, aesthetic and architecture iteratively throughout the design process. 

Explore the challenges a mobile interface poses on volunteer recruiting, and understand how design elements, like help text, can help the platform steer clear of user confusion and prevent drop-off. 

Research

Informal Competitive Analysis

Identified direct, indirect and analogous competitors to understand the different recruiting platforms available to Volunteer Coordinators in the State of Michigan. 

Heuristic Evaluation

Assessed the iOS Beta Version of the Partner App against nine heuristics to gauge how our design requirements will improve the app's overall experience. 

Informational Interviews

Conducted six phone call interviews with Detroit based Volunteer Coordinators to understand their business needs and current recruitment practices. 

Micro-Usability Testing

Performed five micro-usability tests of the Beta version of the interface on School of Information students to identify pain points so that our design provided a more advanced, easier to understand user flow. 

Findings

We found that most volunteer recruitment occurs on a desktop computer. This shifted our design perspective since we knew that of our small sample of volunteer coordinators, none had recruited using a mobile application. We needed to make sure that no matter the Volunteer Coordinators background or experience, they are able to achieve their goals in the Partner App. 

Personas

Screen Shot 2020-09-15 at 6.43.45 PM.png
Screen Shot 2020-09-15 at 6.43.59 PM.png
Screen Shot 2020-09-15 at 6.44.22 PM.png

Findings

Once we identified the perspectives we would approach our design with, we conducted more in-depth usability tests with practicing Volunteer Coordinators. 

We were able to identify our essential UX requirements from these tests and by keeping these perspectives in mind throughout the design process. 

UX Requirements can be found here

Design

Paper Prototypes

Screen Shot 2020-02-27 at 10.38.42 AM co
Screen Shot 2020-02-25 at 2.50.02 PM.png

Based on our UX Requirements identified during the research phase, we created paper prototypes and performed user tests to inform our next phase of design: wireframes. 

Wireframes

Create Event Form copy.png
Sort Dropdown copy.png
Create Home 1 copy.png

Using balsamiq we created basic wireframes to digitally create our new user flows based on our research. 

High Fidelitiy Prototype

Untitled design (1).png
Untitled design (2).png
Untitled design (3).png

After user testing our wireframes, we created our High Fidelity Prototype on Figma.  

Validation

While we were creating our High Fidelity Prototype on Figma, a virus made its way to the US and posed a challenge on the ways in which we could test our prototype in the Validation stage. 

With new stay at home orders enforced and social distancing a must, we conducted eight usability tests with Volunteer Coordinators remotely. 

Screen Shot 2020-09-15 at 7.46.08 PM.png

This new way of testing was unfamiliar to me, but I learned that providing a little extra direction to the test subject and asking direct questions made all the difference in understanding what was going through the users mind during the interaction. The cursor Figma provides on its prototype environment was also SUPER helpful. ◡̈ 

Findings

After we conducted all eight usability tests, we brought all our feedback together and yielded several helpful takeaways. 

  • Users were able to find essential buttons to achieve their goals quickly. 

  • The experience of getting an event approved was confusing to users. 

  • Event History was something users were interested in, but many users pressed several buttons until they found the correct one to access their event history. 

Reccomendations & Hand-Off

We created a list of reccomendations that we were able to provide to our client that outlined our findings from our Validation tests. We wanted to make sure our clients understood and had access to the work we completed and our reccomendations as to how we felt the project should move forward. 

School of Information Exposition Poster

Poster copy.jpg