Connecting Volunteers with Non-Profit Opportunities
Expertise
Team
Deliverables
Prototype
View prototype.jpg)
Project Overview
My Role
I was the UI/UX designer on a team consisting of my role, a developer, and a business analyst. I was responsible for conducting research, ideating on design solutions, and building the visual design, as well as collaborating with the team on development requirements and measuring product success.
Problem
West Portland Dog Rescue is a local non-profit app that connects people with volunteer opportunities. In this project, I used user-centered design and usability-testing methods to include user feedback during the entire product design cycle.
The non-profit had a slow and inefficient process of connecting volunteers with opportunities using a lengthy online Google form. Users would fill out the form online and employees would manually read the form and contact the user and schedule them for volunteer hours over the phone. I hypothesized that users would have a better experience and the business would cut down on employee costs if people were able to register for opportunities via a mobile application.
Goals
- Design an engaging user interface
- Collect only necessary user information
- Put volunteer control into the hands of the user
- Create a minimalistic and consolidated sign-up experience
Challenges
There were designs created during ideation that ultimately did not progress to the final stage. I created a design that organized volunteer opportunities in a 'Volunteer' menu, but I found that users were confused with that verbiage and assumed they could cancel opportunities within that same menu. That page was changed to 'Browse' in the main navigation which was shown to be much clearer to users during usability testing.
Target Audience:
We're targeting users who have volunteered in the past 12 months or have an interest in volunteering. We're especially interested in users who have a dog or who love dogs.
Solution
User research and usability testing showed that users felt the process was slow, impersonal, and didn't provide enough info or options. I decided to design a digital app that would allow users to personalize and control their experience in an engaging and efficient way. Users are now able to successfully register, sign up and cancel opportunities, and update their profile using the mobile app.
I compared the digital design with the initial form, and my solution showed an increase in sign-up speed and an improvement in positive emotion with users during and following the sign-up process. In order to determine success following development, I plan to utilize analytics tools to determine conversion rate for sign-ups, time-on-task for registration and sign-ups, and customer satisfaction surveys to see if users are engaged with the product. Having a database created by the mobile app will also allow the company to efficiently record user information and apply for grant funding through better reporting capabilities.
Takeaways
I realized the importance of collaboration with the team on design iterations in order to gather creative ideas from multiple perspectives. The multiple rounds of usability testing also proved to be vital to understanding whether my designs were solving the ultimate user problem before developing the product.
Execution
Designs
Paper Wireframes
Having a clear list of user actions and goals as well as potential solutions for those ideas, I started by sketching the wireframes for the five main pages that would be needed to display the opportunities, allow users to schedule opportunities, and personalize their experience in their profile. I determined that this would need to include a Home page, Profile page, Volunteer page, Interests page, and Scheduled page. Dozens of sketches were created in order to ideate on designs for each of the pages, and I eventually decided on the final 5 versions that included the best elements from those sketches.
.png)
Digital Wireframes
I then created digital versions of those final paper wireframes and made changes to space and adjust elements according to gestalt principles, as well as add things like text fields and images where those would be included in the final mockups. Placeholders were set for images, text, and details on cards. It was important for us to keep these simple and in greyscale in order to ensure I was focused only on the user flow and that other design factors were not influencing the user during usability testing.
.png)
Testing
Usability Studies
I conducted an initial usability study of my low-fidelity prototype to solve the problem of uninteresting and time-consuming volunteer registration experience. The study was conducted with five individuals and It was broken into two categories: prototype testing and written feedback.
The goal was to answer the following research questions:
- How quickly does it take to complete the registration process and sign up for an opportunity?
- How quickly does it take to view upcoming volunteer sign-ups?
- How quickly does it take to cancel a volunteer sign-up?
- What are the most frustrating and enjoyable parts of the registration and sign-up process?
.jpg)
The study identified 8 themes and insights regarding how users felt about and interacted with the app.
- The text fields should be actionable
- The dropdown options should be easier to select
- The signup action button should be clear
- Icons should be labeled or removed
- The cancel button should be easier to click
- The menu verbiage should be clarified
- The interests buttons should be easier to read through
- Core pages may need to be more engaging
.jpg)
This allowed me to determine recommendations to address the issues that were identified.
- All text fields should provide feedback to the user following a click
- Dropdown customization should be removed and placed with placeholder text
- The sign-up link should be larger and darker in color. The sign-in button should lead users to the personal info page as if they did not have an account
- Image placeholders, text placeholders, and plus sign icon should be properly labeled
- The cancel button should be larger and darker in color
- The menu buttons, when selected, should be darker in color. Volunteer should also change to browse
- Interests buttons should be organized alphabetically or by category
- Color and images will be added with high-fidelity prototype
Changes to the digital wireframes were made to address the issues the users experienced.
One example was that users weren't clear which navigation page they were on and so tab bar icons were darkened to show the selection more clearly. The Volunteer page listing all available volunteer opportunities was changed to Browse as users felt that volunteer was too generic and could apply to both unscheduled and scheduled volunteer opportunities.
Mockups
With the final version of the tested low fidelity prototype established, I created the high-fidelity prototype featuring 17 pages that allows the user to create an account, enter their personalized information, and browse as well as sign up for volunteer opportunities that are matched with their preferences. I conducted additional usability testing to further iterate on the high-fidelity prototype which led to additional changes to the tiles that allow you to view each opportunity and the verbiage on the initial registration page.
High-Fidelity Prototype
I created my high-fidelity prototype using Figma. I segmented the flow into two parts: the initial app registration for new users and the main user flow that includes browsing volunteer opportunities, sign-up process, cancellation, and profile customization.
Style Guide
The branding for this app is clean and modern and features the color of Portland greenery. The logo features a single line drawing of a paw print and represents the simplicity and connection in their non-profit mission. Using colors representative of Portland’s green forests and grey skies, I modernized the branding by using the sans-serif Helvetica typeface, rounded borders on buttons and textfields, and a small elevation on interactive components using a drop shadow. Color combinations are designed with accessibility and contrast in mind.
Results
Goal 1
Design an engaging user interface
I wanted to create an experience for the users that would allow them to feel in control of their volunteering, but not be overly complex. An introductory video on the home page makes people feel welcome and visual announcements excite users and encourage them to explore.
Goal 2
Collect only necessary user information
The users were frustrated with the amount of information collected during registration. To address this, I allowed users to build out a one-time profile with only necessary information, allowing them to skip certain options like interests. Then when they sign up for opportunities, they only have to click a single button.
Goal 3
Put volunteer control into the hands of the user
Allowing the user to sign up, cancel, and update their schedule was a key part of personalizing the experience for users. The scheduled page allows them to cancel their opportunities and users can adjust their availability easily in their profile.
Goal 4
Create a minimalistic and consolidated sign-up experience
With a separate page detailing each opportunity and a single-button sign up, the app keeps users informed without them having to take unnecessary steps.
Takeaways
I've always had a deep respect for dog rescues. As someone who has a rescue dog myself, creating a usable experience for people who volunteer at these organizations was meaningful for me. One thing I particularly enjoyed was creating the design system for this project. I discovered the brilliance of the interactive components feature in Figma, which made iterations following each usability study so much more efficient. Getting to talk with those participants and understand their frustrations each design iteration really connected the dots on why establishing user pain points throughout the design phase is so important.