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.

AdventurePawsRescue_phone.png
AdventurePawsRescue_tablet.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.

Old Friends Club

Website re-design, print design, and more.

AdventurePawsRescue_computer.png

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.

adventurepawsrescuelogo.png

The Processs: Understanding the User 

Screen Shot 2022-04-25 at 6.34.09 PM.png
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 #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.

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. 

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.

adventurepaws_sitemap.png

Paper Wireframes

DSC_4267.JPG
DSC_4281.JPG
DSC_4269.JPG
DSC_4296.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.

DSC_4287.JPG

Digital Wireframes

AdventurePawsRescue_computerwireframes-2.png

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.

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

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 prototype here.

Mock-Ups/Hi-Fi Prototype #1

mockup1adventurepaws.png
Dribbble shot HD - 1.png
Dribbble shot HD - 1-2.png
mockup1adventurepaws - mockups1-2.png

Usability Studies and Findings

Screen Shot 2022-05-02 at 11.15.19 AM.png

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

Funny Pitbull Portrait

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
Dog

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
Cute Papillon Dog

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

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

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.

AdventurePawsRescue_volunteer-signup.png
AdventurePawsRescue_volunteer-buttoncolor.png

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

High Fidelity Prototype #2

Responsive Design: Desktop

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

View Hifi desktop prototype in Adobe XD here:

View prototype here.

View Hifi mobile prototype in Adobe XD here:

View prototype here.

View Hifi tablet prototype in Adobe XD here:

View prototype here.

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 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.

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