DURATION
CLIENT
16 Weeks
TOOLS
Figma
Redesigning Purina's My Pet Profile and Preference Center
JANUARY - MARCH 2024
As part of a cross-functional team of developers, strategists, and a project manager, I spent 8 weeks redesigning Purina's email preference center and pet profile page. We prioritized a modern, mobile-first approach that seamlessly balanced user experience and customer retention, all while adhering to Purina's established brand identity.
Context
Overview
To strengthen customer engagement and loyalty, Purina launched an initiative focused on pet owner empowerment. This strategic move gave account holders greater control over their Purina accounts, encouraging them to personalize their experience by adding pet information and email preferences. Purina's ultimate goal was a more tailored shopping journey that resonates with the customers and their pet's needs.
It was also communicated that since most Purina customers manage their accounts on mobile devices, the redesign should prioritize the mobile experience. The desktop design can then be adapted to this mobile-first approach.
We kicked off the project by tackling the email preference center. Its successful redesign demonstrably achieved Purina's goals, paving the way for a broader revamp including a complete overhaul of the pet profile page. The final touch was seamlessly connecting these two tools to ensure a consistent experience for Purina's loyal customers.
My Role
I spearheaded the user experience (UX) design for this project, driving the entire process from user research and concept development to presenting high-fidelity wireframes to the client. To ensure a mobile-friendly and industry-leading experience, I began with a heuristic analysis of the current design, followed by a competitive analysis of workflows used by similar pet industry companies. These research insights directly informed the features and functionalities incorporated into the final designs.
CURRENT USER JOURNEY
Redesign Purina's Preference Center and My Pet Profile with a mobile-first approach to create a more engaging experience that seamlessly connects the two tools.
⚡ DESIGN OBJECTIVE
Part 1: My Pet Profile
The family pet profile page allows users to create comprehensive profiles for each pet, including essential details like breed, health information, and dietary needs. A clear completion status motivates users to maintain accurate and up-to-date information for a personalized shopping experience.
Current State Heuristic Evaluation
PET PROFILE HOME PAGE
EDITING A PET PROFILE
Competitive Assessment
After I analyzed Purina's current experience, I conducted a competitive analysis of 5 leading pet industry workflows. This exploration revealed key features that enhance user engagement and usability, and warranted consideration as I moved forward into wireframe development for the new pet profile.
My Pet Profile: Home Page
The pet profile home page is the landing page for the pet profile workflow. It contains the pet cards and the primary call-to-action to add a pet to the account.
Preference Center Link
Linking out to the preference center in the header brings awareness to Purina customers that there are multiple options for customizing their account and seamlessly connect the two tools.
Added Visual Hierarchy
The pet profile needed to prioritize the 2 most common actions a user will take on the home page: adding a pet and viewing their current pet profile cards. The Add Pet CTA intentionally uses Purina's signature red to catch the eye and encourages customers to add their pets to their account.
Redesigned Pet Profile Cards
The other priority for the pet home page is to display the current pet profile cards with clear identifiers, now in the form of the pet's name and photo, as well as alert the user of the profile completion status with the progress bar. The updated pet cards strip away other details that were previously shown to minimize visual clutter.
Links to Preference Center in Header
Clear CTA to add a pet
Condensed profile cards that spotlight pet photo
Progress bar visually indicates completion status
My Pet Profile: Editing a Pet Profile
Editing a pet profile is a crucial step as Purina's data showed a significant number of incomplete pet profiles and the ability to add and edit data quickly leads to higher completion rates.
Mobile Friendly Controls
After viewing pet identifiers (name, photo and age) in the header, owners can access their pet's details and information. We prioritized mobile-friendliness by tailoring input methods to each data type. This means using toggles for binary options, scrollable date pickers for birthdays, and clear, appropriately sized buttons for multiple-choice selections.
Highlighted Incomplete Fields
Recognizing that users often scan for next steps, we highlighted incomplete profile data fields in Purina's signature red. This visually draws attention and prompts users to complete the missing information.
Recommended Pet Products
To incentivize profile completion and streamline the shopping experience, the pet profile page displays personalized product recommendations at the bottom. This not only makes shopping for pet needs easier but also demonstrates how Purina utilizes profile information to enhance the user experience, justifying the time spent on completion.
COMPLETE PET PROFILE
INCOMPLETE PET PROFILE
Progress Bar
Highlighted Incomplete Fields
My Pet Profile: Adding a Pet Profile
When adding a pet profile, the user will enter the data for their pet in a series of steps. This data will inform the entire experience with Purina, including more personalized communications and a more engaging shopping experience.
Three-part Questionnaire
The decision to create a separate workflow for adding a pet vs. editing a pet was made early, as the two workflows have different goals. Editing a pet profile needs to prioritize efficiency, while adding a pet should keep the user engaged and encourage completion.
The pet profile addition process is now a three-part questionnaire, grouping related questions for clarity. This structure, along with a progress bar at the top, fosters a sense of accomplishment as users complete each section.
Mobile Friendly Design
Mirroring the editing experience, the pet addition process utilizes mobile-friendly controls to streamline completion and minimize errors. To further enhance the mobile experience, the questionnaire incorporates engaging graphics and illustrations for a visually stimulating workflow.
Part 2: Email Preference Center
The email preference center empowers users to curate their Purina experience by easily managing brand-specific subscriptions. This intuitive tool ensures the user receives only the communications they find most valuable.
Current State Heuristic Evaluation
Email Preference Center Landing Page
While the core workflow remains unchanged, a revamped UI prioritizes user experience.
Clear Organization
Brands are grouped by category with category-level controls for easy management – reflecting user preferences identified by Purina data.
Streamlined Selection
Signature red highlights key actions like category toggles, while individual brands can be turned on/off with a single click. For ultimate control, a "subscribe/unsubscribe all" option remains at the bottom.
Design Conclusions & Client Feedback
This project, initially focused solely on the preference center redesign, yielded such positive results that the client expanded the scope to include the pet profile. We presented the final designs for both features, and our Purina client expressed extreme satisfaction. This success has led to discussions about continued collaboration as they develop their customer loyalty program.
Redesign Purina's Preference Center and My Pet Profile with a:
-
Mobile-first approach
We transitioned interactions from desktop-centric controls to mobile-friendly elements like larger touch targets, toggles, and sliders. This reduces the risk of user error and creates a more intuitive experience for mobile users. -
More engaging experience
By treating editing and adding pets as distinct processes, we optimized each for user needs. This resulted in a more engaging and efficient experience for both actions. -
Connecting the two tools
By applying Purina's updated brand standards consistently, we created a visually unified experience across the preference center and pet profile. This visual connection encourages customers to explore both tools and maximize their account customization.
⚡ REVISITING THE DESIGN OBJECTIVE
DESKTOP AND MOBILE PET PROFILE
✏️ PERSONAL TAKEAWAYS
Our team successfully delivered a mobile-friendly preference center and pet profile redesign within the 8-week timeframe, exceeding Purina's initial goals. This project provided valuable insights into optimizing workflows for mobile users, a trend that data supports will continue.
For future projects, additional user research could be beneficial. By developing customer personas, we could identify unmet needs and opportunities to create features that drive loyalty and repeat purchases. Validating designs through A/B testing and tracking key metrics like pet profile completion rates, site traffic, and sales would further strengthen our design decisions.