OVERVIEW

Angel City Pit Bulls is a volunteer based rescue organization dedicated to creating a better future for pit bulls by promoting their positive image as loving family companions through education, public advocacy, adoptions, and owner support.

This is a personal project that I undertook to help ACPB redesign and build a responsive website.

PROBLEM

The current website is not giving users an optimal experience due to its typographical elements, misleading information architecture, and large text blocks that don't provide vital information in a digestible manner. How can we make Angel City Pit Bulls's website easier to navigate and more engaging for users to gain more volunteers, donations, and successful adoptions?

SOLUTION

I redesigned the website with the main objective of bringing the three main call-to-actions of adoption, donation, and volunteering to the forefront.

ROLE

UI & UX Designer, User Researcher, Website Builder

TOOLS USED

Sketch, Photoshop, Invision, Wix

DURATION

September 2020 - Ongoing

DESIGN PROCESS

1. Understand

EVALUATING THE CURRENT WEBSITE

I first began the redesign process by evaluating the organization's current website by assessing its usability and responsive design. The website contained a lot of information but lacked overall organizational structure to guide users to specific actions.

The navigation bar could be classified better to highlight the organization’s main call to action items. The donation link is the same size and color as the rest of the menu and does not immediately catch the user's eye.

There is no established typographical hierarchy which makes differentiating the heading from body difficult. The small font size and light grey color does not provide enough contrast and makes the text hard to read.

The buttons do not guide the users to the organization’s main call to actions. The shop and events pages are outdated and should no longer appear on the home page.

This unused space leaves the home page feeling empty.

previous ACPB home page

USABILITY TESTING

To get a better understanding of the user journey as well as pain points of the current website, I interviewed five people to conduct usability tests. The overall consensus was that the website seemed a disorganized and outdated. After having the interviewees conduct tasks on the ACPB website, I gathered the recurring pain points:

2. Empathize

USER PERSONAS

After conducting usability research for the current website, I imagined two users that are looking to fulfill the website’s call to actions: volunteering and adopting. To represent volunteers, I created Elijah who is a college student seeking to volunteer for an organization advocating for pit bulls. Christina represents a user who is looking to adopt a dog for the first time and needs additional information to have the confidence needed to complete the action.

INFORMATION ARCHITECTURE

Usability testing determined that the current information architecture was preventing users from finding educational material regarding the pit bull breed and further background about the organization as a whole. As ACPB is a breed specific rescue and with one of its main goals being educating the public, I thought that a dedicated page to pit bull advocacy as well as an about us section was necessary in order to build confidence in first time dog owners unfamiliar with ACPB's cause.

previous ACPB navigation system

I restructured the website's navigation menu to streamline the organization's three main goals of increasing adoptions, gaining more volunteers, and educating the public on the breed.

revised ACPB navigation system

3. Ideate

SKETCHING

I started the design process by sketching different iterations of pages to explore user flows and interactions. While sketching, I maintained the main objectives of conveying who the organization is and what actions users can take to support ACPB’s goals.

4. Prototype

MID-FIDELITY PROTOTYPE

Based on the sketched wireframes, I created mid-fidelity prototypes using Sketch and Invision that illustrates the basic functionalities of the website. Using the interactive prototype, I conducted user testing to evaluate the user flow of the website's adoption, volunteer, and donation processes.

home page wireframe
adoption page wireframe
foster page wireframe
donate page wireframe

Take a closer look at the interactive prototypes below:

MOBILE COMING SOON!DESKTOP PROTOTYPE
5. Validate

USABILITY TESTING

The following feedback was gathered by usability testing of the mid-fidelity prototype:

Based on this feedback, iterations were made and a high fidelity mock up was created.

CONCLUSION

I am continuing to work on this project by working with the volunteers at Angel City Pit Bulls and completing the final prototype for all pages of the website as well as UI for mobile and tablet devices. I will then be turning the design concept into a live, responsive website using a website builder, so that volunteers with differing levels of technical knowledge can make updates regularly.

Overview1. Understand2. Empathize3. Ideate4. Prototype5. ValidateConclusion