Items

Reimagining Pets Bring Joy
for Animal Advocates

I guided the website redesign, improving global navigation to make it easier for users to connect with adoptable pets.

Role

UX/UI Designer

Duration

3 Weeks (2024)

Team

3 UX/UI Designers
(including me)

Tools

Figma, Photoshop,
Trello, Chat GPT

Research Methods

User Interviews, Affinity Mapping, Persona Creation, Insight Synthesis, Competitive Analysis, Heuristic Evaluation, Usability Testing, Information Architecture, Decision Flow Diagrams, Wireframing, Prototyping, Visual Design

Project Overview

Pets Bring Joy (PBJ) is a non-profit animal rescue serving the Northern Virginia, DC, and Maryland community. The aim of this project was to solve the problem of low pet adoption and community service participation for animal advocates through a PBJ website navigation redesign.

My Impact

Throughout the project timeline, I led the design process and project management.

Design

Led the design of the user interface with creating a style guide, UI components, wireframes, and high-fidelity prototypes to ensure consistent and intuitive user experience.

Research

Developed user testing plans and synthesized key insights into feasible design proposals.

Communication

Managed the project schedule, facilitated stand-up meetings, and wrote meeting summaries with action items to ensure that every teammate was on the same page.

Outcome

100 %

Received 100% positive user feedback on the ease of use and intuitive website redesign during testing phase.

The Problem

A poor user experience can stand in the way of a non-profit’s mission.

For PBJ, their website—unchanged for over two years—may no longer meet users’ needs.

If the site doesn't provide a seamless experience, it hinders users from taking action, whether it's adopting pets or supporting the animal rescue community efforts that matter most.

Empathize

To uncover what hinders animal advocates from engaging with PBJ, I synthesized data from five user interviews, exploring their goals, frustrations, and accessibility challenges.

To deepen our understanding, we paired this with a heuristic evaluation and competitor analysis, pinpointing key usability issues and drawing insights from industry leaders.

This research laid the groundwork for creating a more intuitive and empowering experience for both users and the animals they support.

Here are the user challenges we discovered:

01

Confusing
Navigation

Lack of a global navigation bar and pop-up tabs caused users to be frustrated when navigating
the site.

02

Overwhelming
Information

Repetitive information
created a cluttered layout, which made finding information challenging.

03

Inaccessible
Content

Many colors did
not pass the color accessibility test, making it difficult
for users to see
or understand
PBJ’s content.

How might we improve PBJ’s website so that users are successful based on overall user satisfaction?

Ideate

Inspired by our users' challenges, I led my team in a collaborative brainstorming session to rethink PBJ’s website.

We started by discussing what worked, what didn’t, and imagined new possibilities to enhance the user experience. After grouping similar ideas, we voted on which ones best addressed user needs and fit within our time constraints.

We narrowed it down to three impactful solutions. To prioritize efficiently, we evaluated each idea against the insights from our user research, ensuring the chosen path would create maximum impact with minimal effort.

Implement
Global Navigation

High user value
High business value
Low complexity
Technically feasible

Overwhelming
Information

Normal user value
High business value
High complexity
Technically feasible

Inaccessible
Content

Normal user value
High business value
High complexity
Technically unfeasible

We believe creating an accessible global navigation bar that prioritizes users’ most important needs on the website will create a more seamless, stress-free experience for users.

Organize

Clear information architecture is essential for a smooth user experience.

When reorganizing PBJ’s homepage content, we found significant repetition that the global navigation bar could consolidate.

To address this, I took a screenshot, broke it into separate sections, and sketched over it to propose more streamlined solutions.

Old

New

From my sketching we developed a website structure and sitemap to understand the flow of information and ensure that it aligns with the goals of the project.

Here are the key changes we made:

01

Streamlined Content

Consolidated repetitive content into the global navigation bar, reducing homepage overload.

02

Simplified Navigation

By focusing on key headers and placing additional content in the dropdown, it streamlines the user experience.

03

Updated Website Hierarchy

Moved partners section up and placed contact info and social links at the footer where users expect them.

Prototype

We created a lo-fi prototype for quick user testing. The goal was to see if our design choices were justified by target users. You can test it out here.

Test & Iterate

We tested our user flows with a focus on improving findability—the core issue we tackled in this iteration:

Removed Interaction Delay

“If I had a magic wand, I would change how the drop-down menus work. It would be great if they closed automatically when I hover over another section, making the transitions smoother and faster.” - Max

Final Design

Redesigning the Pets Bring Joy homepage with a focus on the global navigation helps bring joy to people and pets through rescue, adoption and community service.

Visual Design

The UI interface played a big role in user satisfaction as Pets Bring Joy depends on emotional connection to support their causes.

Here are some elements of our style guide that engaged our users:

Implement
Global Navigation

The dropdown reduced the clutter on the navigation bar and homepage.

Button States

Multiple button states provided users visual hierarchy and show users what’s possible.

Logo

Colors were overstimulating for users so I added a softer color overlay and new font.

Results

The redesigned PBJ homepage navigation received positive feedback from users, with 100% of users in usability testing finding the revamped design intuitive and easy to use.

“I found the prototype to be user-friendly. Navigating through the site felt straightforward, and the titles in the navigation bar were clear and easy to understand.” - Max

“It’s good. I like that it is simple and current with today’s standards.” - Virginia

“It’s simple and clean.”- Jordyn

Next Steps

To advance further, we recommend a strategy focused on improving user engagement and facilitating informed decision-making during the adoption process. This will elevate the user experience and contribute to an overall enhancement of the user journey. The strategy includes the following:

01

Apply Style Guide Universally

Updating the rest of the web pages on PBJ will ensure a seamless user journey throughout the entire website, not just the homepage.

02

Integrate Adoption Process

The current pet adoption form is a lengthy Google Form that risks losing users’ attention. Integrating a multi-step form that breaks the process into smaller, manageable sections can guides users step by step with progress indicators, making the process feel easier and less overwhelming.

Final Takeaways

While working on this project for 3 weeks with 2 teammates from different backgrounds, I've learned a lot while going through unexpected challenges with my team.

01

Avoid UX/UI Technical Jargon

We had difficulty connecting with stakeholders who were unclear about our goals and felt overwhelmed by our request. Through this project I have learned the importance of simple, clear communication with stakeholders.

02

Create Clear Expectations

While the design process is inherently non-linear, I encountered challenges in holding a team member accountable when their input was crucial for making more informed design decisions. From this experience, I learned the importance of setting clear expectations from the outset and maintaining consistent communication to ensure that deadlines are met and the project stays on track.

03