The Product:
A user-friendly flow and responsive design for Adventure Paws rescue volunteer sign-up.
The Problem:
Users want to give back to their community, but they want to know the time for each step of the application process, the ability to sign up for shifts with ease, and know the process for what happens after they submit their application.
The Goal:
The goal of this project is to create a volunteer sign-up that shows the time frame for each step of the application process as well as what follow-up looks like. The volunteer flow will also show options for booking a dog to adventure with, with the need for flexibility and an updated calendar in mind.
Target Audience:
The goal of this project is to create a volunteer sign-up that shows the time frame for each step of the application process as well as what follow-up looks like. The volunteer flow will also show options for booking a dog to adventure with, with the need for flexibility and an updated calendar in mind.
The Processs: Understanding the User
I conducted user research through user interviews as well as a competitive audit.
I conducted a survey for 5 individuals, and discovered that these individuals wanted to be able to volunteer, but needed flexibility for when they could volunteer. One of them had never used a website to sign-up to be a volunteer before. These individuals want a fast way to sign-up for a “shift” when they have a window of time that frees up in their schedule. They want to be notified when shifts are available. They also expressed frustration at not knowing how long a volunteer sign-up process would take and also felt frustrated by past applications they’ve completed for organizations where they heard nothing back from the organization - they didn’t even know if their application had been received.
For the competitive audit, I looked at 5 other organizations: United Way of King County, Washington Trails Association, Walk to End Alzheimer’s, Wild Grief, and a local church. I learned that there isn’t one common flow for a volunteer sign-up, and that you have to poke around on each website to figure out what their volunteer process looks like.
Pain Point #1
Time
The user would like to know how long it will take to complete the sign-up process to be a volunteer, broken down into steps.
Pain Point #2
Ease of Applying
The user wants to be able to find the application easily and know what the process looks like.
Pain Point #3
Notification of Processed Application
The user would like to be notified that their application is being processed and to be notified when their application is complete.
Pain Point #4
Simple Way to Book a Dog
The user would like to easily book a dog once they have been accepted as a volunteer.
The Design
Typography and Color Palette:
A playful font, Ranchers, was paired with a simple, easy to read and neutral font, Helvetica, for the website. The colors that were chosen were earth tones to represent the outdoors and a bright mango to use as the call to action button, which pairs nicely with the other colors.
Sitemap:
The goal in making this sitemap is to categorize all of the different pages into three main groups, and then have a login button and a footer. This will make it easier for the user to move around the site in a hierarchical fashion.
Paper Wireframes
As I worked through the paper wireframes, I took into consideration volunteer sign-ups on other websites. I decided that there should be a sequential flow for the sign-up that can be initiated on the homepage. I also wanted to showcase photos of the dogs to get users excited about signing up to volunteer.
Screen Size Variations: This was an exciting step in the process as I was able to iterate on a web design, but create a mobile and tablet version using elements from it as well. I wanted to replicate a similar experience on each device by maintaining similar design patterns.
Digital Wireframes
Tablet main page
Website main page
Mobile main page
When creating the digital wireframes, I referred to my best paper wireframe ideas and pulled them together to create new wireframes.
One peer recommended putting the “Dogs Looking for Adventure” cards next to the “Volunteer Calendar” on the homepage so that the user clearly sees they have two search choices when they are ready to volunteer.
Website main page
Website volunteer sign-up page 2
Website volunteer sign-up page 1
LoFi Prototype
The low-fidelity prototype I created uses the digital wireframes to show how the user can move from screen to screen.
It was helpful for me to see this because I also realized I need to let them move backwards when moving from screen to screen.
View Lo-fi prototype in Adobe XD here:
https://xd.adobe.com/view/b3dfcf73-70c0-417b-b022-791b35635dc2-e68c/
Mock-Ups/HiFi Prototype #1
Website - homepage
Website - sign-up flow page 5
Usability Studies
I conducted a remote, unmoderated usability study with participants from different backgrounds. This study lasted about 15-20 minutes, and the user had to work through the volunteer sign-up flow. Findings from this usability study can be seen below the affinity diagram, also below.
Finding #1
Buttons are Confusing
Both color of button and whether or not it is a button is confusing to users. Use marigold color for all CTA buttons and adjust Paws sequence buttons so they are part of a button group.
Finding#2
Individual Page Improvements Needed
-Use FAQ instead of “What to expect” page
-Added additional info to application
-5th page of volunteer sign-up is not very clear regarding next steps
Finding #3
Features need improvement
-Move brown paws on homepage so they are above dog cards and calendar
-Make lighter text darker so it is easier to read
-Make arrow between paws sequence on volunteer pages
Feedback: The CTA buttons need to all be Marigold, not the green color.
Implementation: I changed the CTA buttons to the Marigold color so users can identify them as the button.
Feedback: The “volunteer” text above the brown paw could say “sign-up” so the user knows where to start their sign-up process.
Implementation: I changed the text from “Volunteer” to “Sign Up” to the user could figure out where to start the sign-up flow to become a volunteer.
Feedback: The brown paws should be above the dog cards and calendar so it is easier find.
Implementation: I moved the brown paws about the dog cards and calendar on the main page.
Feedback: The “Paws” for the sequence throughout the volunteer flow could be smaller with a button below. The lines could be changed to arrows. The colors could also be different to indicate what page the user is on and a hover feature.
Implementation: I changed the buttons to be a light marigold for the pages the user is not on and then marigold for the page they are on. The green is the hover button. I changed the lines to be arrows to help the user see the direction of the flow. I also created buttons beneath the paws and made the paws smaller so it feels like a button unit and the user can click on the button of paw to proceed.
High Fidelity Prototype #2
Website - homepage
Website - sign-up flow page 5
View Hifi desktop prototype in Adobe XD here:
https://xd.adobe.com/view/b3dfcf73-70c0-417b-b022-791b35635dc2-e68c/
View Hifi mobile prototype in Adobe XD here:
https://xd.adobe.com/view/02481e0a-3bce-42ab-bf5f-1ce22b0c01df-571b/
View Hifi tablet prototype in Adobe XD here:
https://xd.adobe.com/view/b3dfcf73-70c0-417b-b022-791b35635dc2-e68c/
Responsive Design: Webpage
Responsive Design: Tablet
Responsive Design: Mobile
Accessibility Considerations
Consideration #1
Font Contrast
I switched a light color gray font to a darker color gray font to increase the contrast so that it would be easier to read.
Consideration #2
Headlines
For the headlines and sub headlines on each page, I was mindful of the size of text that I chose so that it could be by a text reader.
Consideration #3
Clean and Simple Design
I made the website clean and simple to use to help people who have cognitive or neurological disabilities.
Takeaways
I would like to do another usability test for the website as well as usability tests for the tablet and mobile versions of the website. I would also like to prototype all features on the website and practice preparing it to be sent to the engineers. Knowing that I was designing with different screens in mind made me think more carefully about my design choices, such as using the cards for each dog. I knew those would most likely translate well across the three screens.
Thank you for checking out this case study!
