Role
UX|UI Designer
Year
2019
Industry
Pet Supplies

Client brief.

The non-profit Pet Pantry meets the needs of families and animals in their community through the operation of a pet food bank program, lower cost spay/neuter/vaccination programs, and by supporting animal rescue through their adoption program. There was a lot of information that needed to be displayed on the website and in addition to this current users were experiencing frustrations while navigating the website. In order to improve the website, I conducted a quantitive audit and a number of usability tests. These tests helped me better understand where the website was lacking and how to create a simple user experience while focusing on business goals.
*This project was completed for Millersville University Interactive and Graphic design degree*

Project presentation.

Landing Page - Before

Pet Pantry has three main business objectives: helping the community with their pet food bank program, offering lower cost spay/neuter options as well as vaccinations, and promoting adoptions. When users were presented with tasks to complete, they found them difficult to accomplish. Users' main frustrations were with the navigation and how it was laid out. The navigation on the loading page caused choice paralysis and had drop down menus inside of drop down menus that hid important information. When navigating to certain pages, it was also impossible to get back to the previous page. In order to increase the task success rates I had users undergo multiple usability tests in order to pinpoint frustrations. Below you can see changes that were made after testing.

Landing page after usability testing
Landing Page - After

The main changes were the navigation, the addition of a call to action, and the brand consistency. Users were expressing frustrations with the navigation bar as well as information being repeated in separate categories and information hidden within other drop down categories. With a condensed and organized navigation bar, users were able to easily locate their information. Another change was the call to action donation button on the landing page. This allowed users to easily find the donation button. Lastly, one helpful change was creating a style guide for the website so it would not be jarring for users to suddenly end up on a page that did not look like the rest of the website. Eliminating this issue made the website consistent, recognizable, and feel secure.

Pet Pantry competitive analysis usability testing
Pet Pantry - Competitive Analysis

Above you will see the results for the competitive analysis method. Five websites were analyzed including Pet Pantry. Pet Pantry is a similar non-profit to other pet non-profits, so this method helped to pinpoint what the strengths, weaknesses, and opportunities of competitors and of the website were. Throughout the test, I discovered that Pet Pantry was strong in terms of content and branding, however, it lacked the organization and the up keep of the content. Pet Pantry's website provided a lot of information, however, it was disorganized and out of date so it needed to be rewritten.

Pet Pantry Card Sorting Usability Method
Pet Pantry - Card Sorting

Card sorting is useful for exploring content structure, and seeing how users might think in terms of navigation layouts. Conducting this study was done in a small session, one at a time, with 6 users overall. The card sorting method used doesn't form into the traditional open and closed methods, but it relies on a single result that multiple participants helped to form. Avoiding confusion, I added the main categories ahead of time and had the first participant organized the information the way they thought made the most sense. I then had the rest of the participants organize the information based off of the first participant's results. Above you can see the common layout among the groups in the card sorting method.

Pet Pantry - I Like, I Wish, I Want

I used the framework 'I like, I wish, I want' to hold a critique in order to gain some constructive feedback from a group. In a group of four participants, a discussion was held based off of the current layout of the website and the main goals of the website. Users were able to share their own point of view of the website and give some insight based off of the questions. Throughout the discussion, I found that most struggles were due to the lack of organized navigation. Participants found the drop-downs and duplicate information overwhelming. The participants suggested that the navigation bar should stick to the top of the page as well as an easier way to navigate back to the previous page. Users also wanted an archive of pet tips, more information on adoption, and header titles that could be clicked.

Pet Pantry - Hot Air Balloon Method

Conducting the hot air balloon method helped to identify the constraints and advantages of the overall website experience. This method was done in a single session with three participants and a whiteboard. After drawing a hot air balloon on the board, everyone wrote down two or three constraints or advantages on a Post-it Note and placed them on the board. Things that would help the website be a success went on the top part of the balloon and things that would hold it back were the anchors of the hot air balloon. Participants debated on the placements of the Post-it Notes until they all came to a conclusion. The conclusion can be seen above.

Pet Pantry - SEQ Method

Using a group of 13 participants, I ran a single ease question test to see how difficult it would be to navigate through a task. Participants were given a desktop with a user flow and asked to "find your way to the adoption page and locate how to adopt a dog". After working their way through the flow, participants were given the question  "how easily can you navigate to the adoption application", and had to rate it on a scale of one to seven (shown above). Most users rated it a four or five and a few rated it as a seven. Afterwards, participants were able to share any additional thoughts they had while navigating through the flow.

Prototype

Contact.

Have a project that could use some help? Get in touch!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Other projects.

Previous projects for other clients.

See more examples
Arrow that points to project examples