Adventure Paws Rescue Responsive Web Design

Role:

UX Designer

UX Researcher

 

Solo project for Certificate Program

Tools:

Figma

InDesign

Keynote

Adobe XD

WCAG

Project duration:

March 2022- May 2022

The Product:

A user-friendly flow and responsive design for Adventure Paws rescue volunteer sign-up.

adventurepawsrescuelogo.png

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. 

DSC_4271.JPG
Screen Shot 2022-04-25 at 6.34.09 PM.png

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.

Screen Shot 2022-04-25 at 6.34.09 PM.png

Pain Point #2

Ease of Applying

The user wants to be able to find the application easily and know what the process looks like.

Screen Shot 2022-04-25 at 6.34.09 PM.png

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.

Screen Shot 2022-04-25 at 6.34.09 PM.png

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.

New_user_persona_story_problem_statement_volunteer_Zeitler.png
userjourneymap_adventurepaws.png

The Design

adventurepaws_colorpalette_typography.png

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. 

adventurepaws_sitemap.png

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

DSC_4267.JPG
DSC_4281.JPG
DSC_4269.JPG
DSC_4296.JPG
DSC_4287.JPG

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

Homepage- desktop.png
Homepage- tablet.png

Tablet main page

Website main page

Homepage- mobile.png

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.

Screen Shot 2022-05-03 at 3.27.20 PM.png

Website main page

Screen Shot 2022-05-03 at 3.27.43 PM.png
Screen Shot 2022-05-03 at 3.28.05 PM.png

Website volunteer sign-up page 2

Website volunteer sign-up page 1

LoFi Prototype

Screen Shot 2022-04-25 at 6.34.09 PM.png

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

Screen Shot 2022-05-03 at 6.21.30 PM.png

Website - homepage

Screen Shot 2022-05-03 at 6.22.52 PM.png

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.

Screen Shot 2022-05-02 at 11.15.19 AM.png
Screen Shot 2022-04-25 at 6.34.09 PM.png

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.

Screen Shot 2022-04-25 at 6.34.09 PM.png

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

Screen Shot 2022-04-25 at 6.34.09 PM.png

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

Screen Shot 2022-05-06 at 2.11.38 PM.png

Website - homepage

Screen Shot 2022-05-03 at 6.23.12 PM.png

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: Final Product

Responsive Design: Webpage

Screen Shot 2022-05-06 at 2.11.38 PM.png
Homepage- desktop – 8.png
Screen Shot 2022-05-06 at 4.03.23 PM.png
Screen Shot 2022-05-06 at 4.03.06 PM.png
Screen Shot 2022-05-06 at 4.02.44 PM.png
Screen Shot 2022-05-06 at 4.02.21 PM.png

Responsive Design: Tablet

Screen Shot 2022-05-03 at 6.23.38 PM.png
iPad Pro 12.9in – 2.png
Screen Shot 2022-05-06 at 4.29.24 PM.png
Screen Shot 2022-05-06 at 4.29.06 PM.png
Screen Shot 2022-05-06 at 4.28.50 PM.png
Screen Shot 2022-05-06 at 4.28.33 PM.png

Responsive Design: Mobile

Screen Shot 2022-05-03 at 6.52.59 PM.png
Phone- Volunteer 1.png
Screen Shot 2022-05-06 at 4.29.46 PM.png
Screen Shot 2022-05-06 at 4.30.10 PM.png
Screen Shot 2022-05-06 at 4.30.31 PM.png
Screen Shot 2022-05-06 at 4.30.54 PM.png

Accessibility Considerations

Screen Shot 2022-04-25 at 6.34.09 PM.png

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. 

Screen Shot 2022-04-25 at 6.34.09 PM.png

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. 

Screen Shot 2022-04-25 at 6.34.09 PM.png

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!

Screen Shot 2022-04-25 at 6.34.09 PM.png
Screen Shot 2022-04-25 at 6.34.09 PM.png
Screen Shot 2022-04-25 at 6.34.09 PM.png
Screen Shot 2022-04-25 at 6.34.09 PM.png