Project: PetSmart Mobile

PetSmart Mobile Homepage Redesign

Project Overview

Improve the experience of the home page for Petsmart.com. Personalization and optimization for a better user experience.

Role:

User Research, User Experience, Journey Mapping,
Visual Design, Prototyping

Deliverables:

Pen and Paper, Adobe Illustrator, Adobe Photoshop,
Figma and Invision

User Research: Find Out Perceptions

With time constraints, I knew I would not be able to conduct surverys or interviews to capture thorough qualitative data. I would need to rely my perceptions on quantitative reseach conducted on the pet supply industry. These were a few of my key findings:

For 2021, it estimated that $109.6 billion will be spent on our pets in the U.S.
More than 67% of American households own at least one pet.
Millennials make up 31% of the pet industry customers, while Baby Boomers are right behind with 29%, while Gen Xers follow with 26%.
12% of adults with kids younger than 18 have adopted pets because of the Covid-19 pandemic.
43% of dog owners and 41% of cat owners buy premium pet food.

user research: Competitive Analysis

Next, I id-ed other top pet supply companies that focus on eCommerce.

I wanted to get an idea of how each company handles all-in-one personalization, onsite product recommendations, cart and checkout, onsite search and personal data. I was observing what features were included or not included and what the overall user experience and content was.

My biggest findings were that Petsmart was not optimizing their homepage for personalization or rewarding repeat customers by giving them clear user journeys to make repeat purchases online.

Define: Understanding the User

User Goals:

To use technology to purchase food or supplies for pet that allows for a healthier lifestyle, increased focus on fitness, turning to supplements for improved well-being.

Tasks of User:

Check on Autoshipment
Reorder previous order
Price/Quality Compare
Find whole foods that meet pets nutrition needs
Purchase online for delivery or in-store pickup

DEFINE: Understand Needs & Frustrations

Based on my research, I created a User Persona for the pet industry’s most lucritive customer. Exploring different motivations, needs and frustrations.

Tech savvy purchaser
Want a personalized experience for quicker check-out capabilities
Drawn toward specialized, organic, whole foods
Also here for Vet care, OTC medicine, and pet supplies

Say hello to Melanie!

Define: Understand Journey

To empathize further and gain a better understanding of Melanie’s journey and what would motivate her to purchase on PetSmart’s, I created a journey map to visualize and think out what pain points she will experience, information she will need, and an overall process flow.

Being that this assignment was to only touch the homepage, I wanted to make sure I included enough entry points on the homepage to accomplish her journey of purchasing food through the mobile site to pickup in store.

Define: Understanding the User

Based on Melanie’s goals and needs, the homepage should be:

Reliable:

Melanie should be able to easily log into her account on mobile
Find her autoship and previous order items easily.
There should be multiple ways for her to search for new products and categories.
Check if products are available in-store, so she can purchase online to pickup in store

Usable:

Understanding of user scenarios and goals. (Eg. clear journeys and entry points)
Timely and non-distracting. Eg. helps user get from A to B efficiently

DESIGN: Ideating & Sketching

The following wireframes are to help articulate what content Melanie will need on the homepage to move through the purchase process and acheive her goal.

You will notice upon reviewing that there are multiple iteration of the homepage.
Much of the personalization is taking the approach/assumption that Melanie is already signed into her account thus providing her a personalized experience.

DESIGN: asset gathering

Part of my process when doing visual designs is preemptively planning for what assets I will need and begin the gathering process early. This allows me to maximize my time designing and give key stakeholders some runway, so they do not become a bottleneck to me hitting target deadlines.

DESIGN: High Fidelity Visual Designs

Thinking back to Melanie’s main goals…

Check on Autoshipment
Price/Quanity Compare
Reorder previous order
Find whole foods that meet pets nutrition needs
Purchase online for delivery or in-store pickup

… I worked in Figma to complete visual designs that focus on meeting these goals in this order.

I combined all the elements shown throughout the design process to create what I feel is a more personalized, clean, fun and user friendly homepage than what PetSmart had before.

To test the experience, a rapid prototype was created in Invision of the Visual Design.

View and interact with the Visual Prototype here.

Let's work together

I would love to talk about how I can support and strengthen you and your company. Send me a message sharing information about your project, your budget, and timeline.