top of page
Fences for Fido Logo

Fences for Fido is a non-profit based in the Pacific Northwest. They provide fences, dog houses, spay/neuter and emergency veterinary services to low income dog owners.

My team was tasked with redesigning the Fences for Fido website in two weeks, with a goal of increasing donations and streamlining the volunteer sign-up process.

Fences for Fido

One fence,
one family,
one dog at a time...

Responsive Web Design
PROBLEM STATEMENT

The Fences for Fido website is outdated, disorganized, and displays no clear mission, leaving potential donors and volunteers to feel disconnected and confused.

The Solution?

By clearly displaying their mission, reorganizing content, and creating a fresh environment, we believe we can bring in new donors and volunteers who will be excited to support their cause.

Role:

I worked alongside three others

to gather research, strategize,

and form design systems.

I spearheaded the navigation system, prototyping, and interaction design.

Tools:

Figma, InVision, Miro,

Adobe Illustrator

The Process

Empathize

Ideation

Testing

Iterating

Prototype

Empathize

Survey + Insights + Observations + User Persona

Research

We gathered survey results from 43 participants about their willingness to work with non-profit organizations. 41 of 43 participants expressed that they have experience working with non-profits.

why?

77%

Helping others was the most common motivation for wanting to get involved.

how?

56%

Most participants would rather make a financial contribution or donate items over volunteering time.

why not?

52%

40%

Not enough time and lack of knowledge about the organizations are the biggest reasons for not volunteering.

Empathize

Interview Insights

We interviewed five individuals about their experiences with non-profit organizations.

Interviewees want to feel connected to the cause they are supporting.

There is a desire to help others either financially or by donating time.

How to get involved is not always clear.

Motivators include new social interactions, learning a new skill, and helping their community.

I know I should volunteer my time more, but I would rather donate money to help out… It would be nice to know that my money is making a difference though.

Observations

In both our survey and interview process, we asked individuals to rank their understanding of this website based on the home page. The majority responded that they did not know the purpose of this website and would have to dig deeper into the menu to find out, making this our first major pain point.

Heuristic Evaluation

Mission statement is not clear or easy to find.
No real color scheme or brand identity.
Overwhelming dark background.
Light blue text on dark background does not pass accessibility testing.
Original Home Page

A

B

C

D

Too many categories with redundant links.

A

Missed opportunity for meaningful imagery.

B

Flash Player plugin no longer working.

C

Homepage dedicated to COVID information.

D

User Persona

Our user, Hannah Gabriel, is a dedicated vet tech who just started her career the Pacific Northwest. She wants to make new friends and fill some of her free time helping a meaningful cause. She has heard of some local non-profits, but wants to have a deep understanding of their mission before dedicating her time or money. With her busy work schedule, she'd like to be aware of future volunteer opportunities.

Nice to meet you,

Hannah Gabriel

Age: 30

Occupation: Vet Tech

Location: Portland, OR

#getoutside

#pnwonderland

#gooddogpdx

Goals & Needs:

  • Wants to get more involved and give back to the community.

  • Wants to help pet owners and provide safer homes for dogs.

  • Feels fulfilled by meaningful work.

Pain Points:

  • Busy with work and pets at home, but wants to make time to volunteer that will fit in her schedule.

  • Unsure about qualifications for volunteers or required skills.

“There is no exercise better for the heart than reaching down and lifting people up.”   - John Holmes
User Persona
Whole Foods Logo
Prana Logo
REI Logo
Ideation

Ideation

Information Architecture + User Flow + User Scenario + Sketches

Card Sorting

We conducted five card sorts, in which there were three main recurring categories:

  • Donate

  • Volunteer

  • Information about the non-profit

Card Sort 3
Card Sort 2
Card Sort 1

Redesigned Site Map

Redesigned Site Map

From these results, we concluded that most of the pages could be organized under four main categories:

Donate

Volunteer

Our Story

More Info

The original website had seven dropdowns that were disorganized and redundant.

By adding a subcategory of Volunteer Resources, and a Media section under More Info, we were able to greatly unclutter the sites main navigation.

User Flow

Now, we know our users are going to want learn more about the organization, easily find and sign up for volunteer events, donate, and learn of other ways that they can support. This is what we focused on here in our User Flow.

User Flow

User Scenario

Lets meet back up with Hannah on her journey...

User Journey

Sketches

When starting with our sketches, we focused on these Donate, Volunteer, and Our Story sections. Since these are the main focus for our users,  we wanted to make them accessible, not only in the navigation, but calling attention to them throughout the home page as well.

Desktop Home Screen Sketch
Desktop Home Screen Sketch
Mobile Home Screen Sketch
Desktop Home Screen Sketch
Desktop Nav Sketch
Testing

Testing

Wireframes + Prototype + Testing Plan + Feedback

Low Fidelity Wireframes

Mobile Wireframes

Mobile Menu
Mobile Home Screen
Mobile Donate Screen

Desktop Wireframes

Mobile Events Screen
Mobile Volunteer Sign Up
Desktop Home Screen
Desktop Donate Screen
Desktop Volunteer Screen

Lo-Fi Mobile Prototype

The biggest change in our redesign involved the navigation system. We condensed & reorganized the content in each category so there was no longer a need for extensive dropdown lists. We also made the most important information accessible right from the homepage. This restructuring of content translated easily across mobile and desktop.

Lo-Fidelity Prototype

User Testing

The Plan:

We conducted five user tests using our lo-fidelity prototypes.

Our main objectives of these tests were to discover:

  • If the mission of the website is clear to the user?

  • If the website draws attention to donations and volunteer events?

  • If it is organized in a way that is easy to navigate?

We gave our testers three tasks to complete:

  1. Make a Donation

  2. Sign up for a Volunteer Event

  3. Shop for Merchandise

Feedback & Findings

Overall our users responded positively to the layout and flow of information for both the mobile and desktop sites. Testers easily found the donations and volunteer pages from the homepage as well as through the main navigation.

 

As testing goes, our users revealed some sticky points that gave us a solid starting point for our iterations.

Feedback:

  • It was not obvious to our testers that the Fences for Fido logo was the home button.

  • Testers thought they should be able to make a donation from the main donations page instead of navigating to another page to initiate the process. We agreed that this would help in creating a call to action by allowing the user to commit from the main donations screen.

  • The small "Sign Up" button in the top corner of the volunteer event cards were overlooked. Testers did not notice these sign up buttons right away and were confused on how to continue. The event info was also spread out over a couple screens, which became redundant.

  • When asked to shop for merchandise, some users recalled that it was featured on the home screen, but had a hard time finding it in the navigation menu.

Iterations

Iterating + Design + High Fidelity Prototypes

Iterations in Mid-Fidelity Mockups

We considered all of this feedback moving into our mid-fidelity prototypes and feel that we were able to simplify the structure of the site even further. Below are some of the impactful revisions we made to some of the desktop screens based on our testing sessions.

Added "Home" tab next to logo
Desktop Mid-Fi Navigation
Added "Store" button to main navigation
Created a call to action on the donate page
Desktop Mid-Fi Donate Screen
Desktop Mid-Fi Volunteer Screen
Simplified volunteer Sign Up process
Consolidated Event Info
Iterations

Mood Board & Visual Style

Our goal was to brighten the feel of the website. We wanted to energize potential donors and volunteers, inspiring them to get involved. We chose colors that would feel fun and inviting, and used rounded edges and organic shapes to soften the experience.

Color Palette
Dog Drawing Pattern
Organic Shapes
Fido.jpg
Fences for Fido Logo

Design Evolution

Easily one of the most enjoyable parts of working on this project was collaborating creatively with my teammates. This design evolution culminated after a nearly five hour design power session over Zoom. We were able to work through the rough patches of our initial style choices, allowing us to identify what was and was not working in our design.

We were originally working with some very bright colors that we quickly realized were overpowering the site. We nixed the bright blue and replaced it with a deep navy to ground the screens. We decided to keep the bright green, but reserved it for creating our call to action moments.

High Fidelity Design Progression

Animations

My favorite part of creating design systems is developing the UI's personality through animations and micro interactions. I also have a lot of fun designing navigation systems. It was pretty easy to get carried away with this website, so we kept the design clean with a few meaningful, delightful interactions. Below are are few of my favorite hover interactions, along with a little snip featuring the navigation bar.

Hover Interactions
Nav Bar Interactions

High Fidelity Prototypes

Final Thoughts & KPI's

Our team members were inspired by the dedication of this non profit to the betterment of life for their communities’ pets. This project presented the challenge of not only creating a visually appealing design, but also one that inspires people to contribute through Fences for Fido.

Next Steps

  • Conduct new user testing on High Fidelity design.

  • Reiterate based on testing results.

  • Launch new responsive website design.

KPI Tracking and Goals

  • Higher average in amount of donations per month

  • Increase in volunteer sign ups

  • Increase in repeated donations/volunteers

  • Increase in store sales

Prototype

more to explore.

CORA

IMG_3692.HEIC

Creative Work

Trader Joe's Delivery App

bottom of page