Petco Love
1 Brand. 3 Platforms. Redesigned.
Petco’s longstanding commitment to animal welfare was formalized with the establishment of the Petco Foundation in 1999. And April 2021 began a new era when the non-profit was renamed to Petco Love. The mission has never changed: To harness the power of love to make communities and pet families closer, stronger, and healthier.
But one thing that needed to change? Petco Love’s digital presence. The need for an updated website brought with it an exciting opportunity not only to refresh the look and feel, but also to streamline the information architecture and optimize the user experience for two audiences – Animal Welfare Organizations (AWOs) and individuals like you and me.
Head of Product: Aaron Klein
Digital Product Manager: Jessica Remitz
Copywriter: Ben Laun
Product Designer: Abbey Price
Completed while working at Petco Love
My Role
I was the lead end-to-end product designer for Petco Love. My responsibilities included supporting with user interviews, conducting usability tests with rapid prototyping and quick iterations based on test findings, balancing stakeholder requests with user needs, building a design system and component library from the ground up, creating high fidelity visuals, and testing for quality assurance and accessibility.
The Challenge
The shift from Petco Foundation to Petco Love presented a handful of growing pains when the organization’s three pillars of creating families, healing pets, and reuniting pets were broken out into separate platforms, or sub-brands.
With the product redesign of Petco Love Lost (view the project here) already underway, we were then tasked with re-architecting petcolove.org into three unique sites for Petco Love, Petco Love Adopt, and Petco Love Care.
This new digital ecosystem would need to allow each sub-brand to stand alone as its own site, while also maintaining a sense of unity with the master brand.
An additional challenge was that each site needed to cater to different user types. Petco Love needed to be both consumer-facing and partner-facing, while the three sub-brands needed to be consumer-facing (each with a different target audience).
From a UX perspective, this meant tearing down the IA and rebuilding it. And it meant being intentional about the brand voice, messaging, and UX writing.
From a UI perspective, it meant developing a design system from the ground up that would make all the sites feel related, while still allowing for subtle shifts that would help each sub-brand feel a little bit different and nuanced.
Overall Goals
First we defined the goals of the overall redesign:
Streamline the information architecture
Unify the visual identity across all platforms
Drive to a particular action on each site
Deliver the right messages to the right audience
Once we determined the redesign goals, we identified primary goals of each platform, based on the audience (see graphic).
A streamlined IA
Test, Iterate, Repeat
Knowing that consumers access our site on mobile but that our AWO partners access our site on desktop, we ran usability testing on both devices with both user types. We asked each user where they would expect to find the content relevant for them and were able to observe pain points as they navigated through the wireframes. The biggest takeaway from the usability testing was that we needed to improve the UX copy and better explain who Petco Love is.
Unmoderated usability testing with consumers
Unmoderated usability testing with Animal Welfare Organizations
A New Visual Identity
After rounds of interviews and iterating based on usability testing with consumers and AWOs, I began visual design for each site. This phase included building a design system from the ground up that could be leveraged for all Petco Love digital properties. Using the atomic design methodology, the Petco Love component library is now set up with foundations including type, color, spacing, etc. and has a complete UI kit made up of 60+ components that can flex from the master brand to each sub-brand.
