Crunchies Pet Foods' Redesign
Personal project 2021
My Role: UX/UI design
Timeline: 4 weeks
Tools used: Figma, Optimal Workshop, Mirro
Crunchies is a local natural pet food supply store that has served the Washington D.C- Baltimore area since 1996. Crunchies offers home delivery; however, to place an order you must know what products they offer by either visiting or from word of mouth. This makes reaching new customers a challenge!
Because of the increase in eCommerce sales due to the pandemic, Crunchies’ has the potential to expand its customer base. They can also enhance the experience of their loyal customers by providing a delightful and convenient way to shop for their products.
01 DISCOVER
For four weeks I jumped into the world of pet e-commerce, gaining insights on market trends and opportunities. A continued surge in curbside or home delivery options will continue throughout 2021. Many of those in isolation turned to pet ownership to combat pandemic isolation. People are more concerned about their pets health in 2020.
I interviewed 5 participants to gain a better understanding of their online pet supplies shopping experience. I discovered that people seek products for their pets based on their specific needs and a desire to keep them happy and healthy.
02 DEFINE
Libby recently adopted a puppy to combat isolation. Her main goal is to keep all of her pets healthy and happy. She loves shopping online; however, misinformation about products can leave her feeling frustrated. She wants to see clear labels and product descriptions so that she can pick the appropriate products for her pets.
Understanding how to categorize Crunchies products without making assumptions was key. To begin, I conducted a remote open card sort with 8 participants. Here participants organized 30 products into groupings of their likings. I created a sitemap, further exploring how to categorize each item depending on the type of pet and its needs. Even though Crunchies is a small business, its products needed to be organized in a pattern familiar to users.
Users created 6 main categories:
With the insights gained from users and the card sorting, I was able to create a sitemap. This helped me to organize the products by pet: dog, cat, and small animal. Accessories and bedding were grouped together to create the supplies page.
At this point, I wanted to see how the user would navigate the site and start brainstorming what pages to design next. This purchase flow guides Libby through the site to purchase a bed for her large cat.
03 DESIGN
Grabbing my notebook and pen, I set out to work through the screens, starting with the homepage. This is one of my favorite parts of the process, it's a bit messy and exciting!
I visited the brick-and-mortar store for more inspiration. I was greeted by welcoming staff and two friendly cats. The store was clean, well organized, and definitely a local go-to spot. Keeping the overall look clean and adding vibrant colors, I was able to bring that same energy online. I wanted to highlight that Crunchies is a local store, not a large online company.
I started with the idea that users can access the main menu from another area on the homepage. The first iteration was simple buttons that you click to shop by a cat, dog, or small pet. Thinking back to Crunchies’ branding, I saw this as an opportunity to create an engaging space for users.
04 TEST
After the prototype was ready, I gathered 6 pet-loving participants for remote testing. Observing users gave me invaluable insights! I took those insights and organized them into an affinity map. From there I was able to prioritize the next steps:
High Priority
- Revisit shipping options by adding a curbside pickup option
- More order detail available on the confirmation page
- Users wanted the ability to track their home delivery
My first priority was to iterate on the checkout process to make it as seamless as possible. During my early sketching, I found myself not giving this area as much attention as it needed. After testing, I realized how important the checkout flow is to users and the business.
NEXT STEPS
To go further with this project, would conduct more usability testing for the final design and follow up with web analytics.
The hardest part was overcoming a design block while creating the wireframes. I was able to overcome this by keeping the user and business goals in mind.