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.
Old Friends Club
Website re-design, print design, and more.
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
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 #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 #2
Ease of Applying
The user wants to be able to find the application easily and know what the process looks like.
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
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.
When creating the digital wireframes, I referred to my best paper wireframe ideas and pulled them together to create new wireframes.
Mock-Ups/Hi-Fi Prototype #1
Usability Studies and Findings
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.
Affinity Diagram
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.
Responsive Design: Final Product
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 additional usability tests. I would also like to prototype all features on the website instead of just the sign up flow and practice preparing for 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. Next time, however, I will design using the progressive enhancement method.
